example-acceptance-test.js

import Ember from 'ember';
import { module } from 'qunit';
import startApp from 'livin/tests/helpers/start-app';
import OnboardPage from 'livin/tests/helpers/page-objects/onboard';
import { test } from 'qunit';

const { run } = Ember;
let application;

module('Acceptance | onboard', {
  beforeEach() {
    application = startApp();
  },

  afterEach() {
    run(application, 'destroy');
  }
});

test('it updates the user', function(assert) {
  return new OnboardPage(assert, { application })
    .authenticateAndVisitOnboard()
    .firstName('Drew')
    .lastName('Baker')
    .legalName('Drew the Baker')
    .phoneNumber('1234567')
    .updateUser();
});

onboard.js

import PageObject from 'livin/tests/helpers/page-object';

export default class OnboardPage extends PageObject {
  constructor() {
    super(...arguments);
  }
  
  authenticateAndVisitOnboard() {
    return this.setAuthenticatedSession()
      .assertVisitUrl('/onboard');
  }
  
  firstName(name) {
    return this.fillInByName('first_name', name);
  }
  
  lastName(name) {
    return this.fillInByName('last_name', name);
  }
  
  legalName(name) {
    return this.fillInByName('legal_name', name);
  }
  
  phoneNumber(number) {
    return this.fillInByName('phone_number', number);
  }
  
  updateUser() {
    return this.clickSubmitButton()
      .assertCurrentUrl('/banks/login');
  }
}

page-object.js

import Ember from 'ember';
import {
  lookupService,
  lookupRoute,
  lookupStore
} from 'livin/tests/helpers/lookup';

const {
  run
} = Ember;

export default class PageObject {
  constructor(assert, options) {
    this.assert = assert;
    this.options = options;
  }

  // find
  findByDisabled(tagName = '', type = 'submit') {
    return findWithAssert(`${tagName}[type="${type}"][disabled]`);
  }

  findByType(tagName = '', type = 'submit') {
    return findWithAssert(`${tagName}[type="${type}"]`);
  }

  findInputByName(name) {
    return findWithAssert(`input[name="${name}"]`);
  }

  findInputsWithErrors(errorSelector = '.has-error') {
    return findWithAssert(`input${errorSelector}`);
  }

  // assertions
  assertCurrentUrl(targetUrl = `/${this.options.routeName}`) {
    return this._andThen(() => {
      const currentUrl = currentURL();

      this.assert.equal(currentUrl, targetUrl, 'it redirects to the correct url');
    });
  }

  assertVisitUrl(targetUrl = `/${this.options.routeName}`) {
    return this._andThen(() => {
      visit(targetUrl);

    return this.assertCurrentUrl(targetUrl);
    });
  }

  assertSubmitButtonIsDisabled() {
    return this._andThen(() => {
      const button = this.findByDisabled('button', 'submit');

      this.assert.ok(button.length, 'it disables the submit button');
    });
  }

  assertInputsHaveErrorClass(expectedLength = 1) {
    return this._andThen(() => {
      const errors = this.findInputsWithErrors();

      this.assert.equal(errors.length, expectedLength, 'it has the correct number of errored inputs');
    });
  }

  // interactions
  fillInByName(name, value) {
    return this._andThen(() => {
      const input = this.findInputByName(name);

      fillIn(input, value)
      .then(() => {
        return find(input).focusout();
      });
    });
  }

  clickSubmitButton() {
    return this._andThen(() => {
      const button = this.findByType('button', 'submit');

      click(button);
    });
  }

  // helpers
  setAuthenticatedSession() {
    return this._andThen(() => {
      const {
        application,
        routeName
      } = this.options;

      run(() => {
        const user = lookupStore(application).createRecord('user');
        lookupService(application, 'session-manager').set('isAuthenticated', true);

        lookupRoute(application, routeName).reopen({
          model() {
            return user;
          }
        });
      });
    });
  }

  // private
  _andThen(callback) {
    andThen(callback);

    return this;
  }
}