Does it works all together (routing, components, services, api calls)

ACCEPTANCE TESTING

Michał Czyż

twitter.com/@cs3b

medium.com/@cs3b

github.com/cs3b

Does it works all together (routing, components, services, api calls)

ACCEPTANCE TESTING

https://twitter.com/gdinwiddie/status/690726656449839104

Acceptance

Integration

Unit

Acceptance

Unit

Integration

Testing Triangle

SPA Testing

import { describe, it, beforeEach, afterEach } from 'mocha';
import { expect } from 'chai';
import { before, after } from 'cl-app/tests/helpers/module-for-acceptance-authenticated';
import page from 'cl-app/tests/pages/mail-logs';

describe('Acceptance | mail logs', function() {
  this.timeout(7000);
  beforeEach(before);
  afterEach(after);

  it('/mail-logs works', async function() {
    server.create('category', { name: 'office' });
    server.create('company', { name: 'selleo inc.' });
    server.createList('mailLog', 10);

    await page.visit();

    // LISTING
    expect(currentURL()).to.equal('/mail-logs');
    expect(page.mailLogCount).to.equal(10);

    // ADD
    await page.formNew()
      .fillExternalNumber('200-212-123')
      .selectCompany('selleo')
      .selectCategory('office')
      .submit();

    expect(page.mailLogCount).to.equal(11);
    expect(page.onMailLog(10).text).to.include('200-212-123');
    expect(server.db.mailLogs[10].externalNumber).to.equal('200-212-123');

    // EDIT
    await page.onMailLog(1).click()
      .formEdit()
      .fillExternalNumber('300-323-234')
      .submit();

    expect(page.onMailLog(1).text).to.include('300-323-234');
    expect(server.db.mailLogs[1].externalNumber).to.equal('300-323-234');
  });
});

describe('Acceptance | mail logs', function() {




  it('/mail-logs works', async function() {
    server.create('category', { name: 'office' });
    server.create('company', { name: 'selleo inc.' });
    server.createList('mailLog', 10);



    // LISTING



    // ADD








    expect(server.db.mailLogs[10].externalNumber).to.equal('200-212-123');

    // EDIT






    expect(server.db.mailLogs[1].externalNumber).to.equal('300-323-234');
  });
});

describe('Acceptance | mail logs', function() {




  it('/mail-logs works', async function() {




    await page.visit();

    // LISTING



    // ADD
    await page.formNew()
      .fillExternalNumber('200-212-123')
      .selectCompany('selleo')
      .selectCategory('office')
      .submit();





    // EDIT
    await page.onMailLog(1).click()
      .formEdit()
      .fillExternalNumber('300-323-234')
      .submit();



  });
});

ASYNC / AWAIT - ES2017

import page from 'cl-app/tests/pages/mail-logs';

describe('Acceptance | mail logs', function() {




  it('/mail-logs works', async function() {




    await page.visit();

    // LISTING



    // ADD
    await page.formNew()
      .fillExternalNumber('200-212-123')
      .selectCompany('selleo')
      .selectCategory('office')
      .submit();

    expect(page.mailLogCount).to.equal(11);
    expect(page.onMailLog(10).text).to.include('200-212-123');


    // EDIT
    await page.onMailLog(1).click()
      .formEdit()
      .fillExternalNumber('300-323-234')
      .submit();

    expect(page.onMailLog(1).text).to.include('300-323-234');

  });
});

PAGE OBJECT

import { before, after } from 'cl-app/tests/helpers/module-for-acceptance-authenticated';


describe('Acceptance | mail logs', function() {

  beforeEach(before);
  afterEach(after);

  it('/mail-logs works', async function() {






    // LISTING



    // ADD










    // EDIT







  });
});

MOCK AUTH

describe('Acceptance | mail logs', function() {
  this.timeout(7000);



  it('/mail-logs works', async function() {






    // LISTING



    // ADD










    // EDIT







  });
});

TEST DEBUGGING

import { describe, it, beforeEach, afterEach } from 'mocha';
import { expect } from 'chai';
import { before, after } from 'cl-app/tests/helpers/module-for-acceptance-authenticated';
import page from 'cl-app/tests/pages/mail-logs';

describe('Acceptance | mail logs', function() {
  this.timeout(7000);
  beforeEach(before);
  afterEach(after);

  it('/mail-logs works', async function() {
    server.create('category', { name: 'office' });
    server.create('company', { name: 'selleo inc.' });
    server.createList('mailLog', 10);

    await page.visit();

    // LISTING
    expect(currentURL()).to.equal('/mail-logs');
    expect(page.mailLogCount).to.equal(10);

    // ADD
    await page.formNew()
      .fillExternalNumber('200-212-123')
      .selectCompany('selleo')
      .selectCategory('office')
      .submit();

    expect(page.mailLogCount).to.equal(11);
    expect(page.onMailLog(10).text).to.include('200-212-123');
    expect(server.db.mailLogs[10].externalNumber).to.equal('200-212-123');

    // EDIT
    await page.onMailLog(1).click()
      .formEdit()
      .fillExternalNumber('300-323-234')
      .submit();

    expect(page.onMailLog(1).text).to.include('300-323-234');
    expect(server.db.mailLogs[1].externalNumber).to.equal('300-323-234');
  });
});

• ember-cli-mirage

• async / await

• ember-cli-page-object

• test helpers from addons
  (e.g. from ember-simple-auth)

• pauseTest()

• use firefox (over phantomjs)

ACCEPTANCE TESTING

• smoke tests
  ?

• test-recorder
  https://github.com/QuantumInformation/test-recorder

• ember-test-selectors

ACCEPTANCE TESTING