Testing - The Next Frontier

Transcript

1. Testing: The Next Frontier?

2. None

3. Who the heck is this guy? • Ember Core Team

   • Twitch • General Open Source Addict twitter: rwjblue github: rwjblue

4. Thank You!!

5. What are we talking about?

6. State of Testing Today • Acceptance • Integration • Unit

7. Acceptance moduleForAcceptance('Acceptance | login'); test('visiting /login', function(assert) { visit('/login'); andThen(function()

   { assert.equal(currentURL(), '/login'); }); });

8. Integration moduleForComponent('pretty-color', { integration: true }); test('button click', function(assert) {

   this.render(hbs`{{magic-title}}`); this.$('button').click(); assert.equal(this.$().text(), 'This is Magic'); });

9. Unit moduleFor('route:application'); test('perform the right query', function(assert) { let route

   = this.subject(); let result = route._queryString(); assert.equal(result, '?awesome=sauce'); });

10. Great, :shipit:

11. The End

12. Seriously?

13. • Built for a globals world. • “magic” `andThen` •

    No ability to stub/mock services. Acceptance Test Issues
14. None

15. • Completely ignorant about async • Manual triggering of user

    interaction • Much less “tailored” API Unit/Integration Test Issues
16. None

17. Now what?

18. emberjs/rfcs#119

19. • Use `async` / `await` • Consistent interface • Extendability

    • Backwards Compatibility Grand Testing Unification
20. None
21. None
22. None

23. Acceptance moduleForAcceptance('Can see things'); test('clicking redirects', async function(assert) { await

    visit('/things'); let list = find('.thing-item'); assert.equal(list.length, 5); await click('.thing-item[data-id=1]'); assert.equal(this.currentRouteName, 'other- thing'); });

24. Integration moduleForIntegration('post-display'); test('expand when clicked', async function(assert) { await render(hbs`{{post-display}}`);

    await click('.post-item'); assert.equal( this.find('.post-created-at').textContent, '2016-01-05' ); });

25. • Overriding a service • Registering custom test helpers •

    Registering custom waiters • Accessing service instances General Testing Concerns

26. • Hooks for work before/after tests. • Accessing general test

    information General Testing Concerns

27. Overriding a Service import Mock from 'somewhere/else'; moduleForAcceptance('something', { beforeEach()

    { this.owner.register('service:stripe', Mock); } });

28. Registering Custom Helpers import selectCategory from '../helpers/select-category'; import loginAsAdmin from

    '../helpers/login-as-admin'; moduleForAcceptance('Can see things', { beforeEach() { this.registerHelpers({ loginAsAdmin, selectCategory }); } });

29. Custom Helpers // tests/helpers/login-as-admin'; import { testHelper } from 'ember-qunit';

    export default testHelper(async function() { await this.click('.login-now'); await this.fillIn('.username', 'rwjblue'); await this.fillIn('.password', 'moar beerz plz'); await this.click('.submit'); });

30. Custom Helpers import selectCategory from '../helpers/select-category'; import loginAsAdmin from '../helpers/login-as-admin';

    moduleForAcceptance('Can see things', { beforeEach() { this.registerHelpers({ loginAsAdmin, selectCategory }); } });

31. Custom Waiters import { testWaiter } from 'ember-test-helpers'; import {

    hasPendingTransactions } from 'app- name/services/transactions'; export default testWaiter(function() { return hasPendingTransactions(); });

32. Custom Waiters import transactionWaiter from '../waiters/pending-transactions'; test('stuff happens', async function(assert)

    { // Normally done in setup, but slides.... this.registerWaiter(transactionWaiter); await click('.foo'); // all pending transactions are completed here... });

33. Accessing Services test('foo', function(assert) { this.store = this.owner.lookup('service:store'); this.store.push(....); });

34. General Hooks // */tests/configuration.js import { TestConfig } from 'ember-test-helpers';

    export default class extends TestConfig { beforeSuite() {} beforeEach(testType, testContext) {} afterEach(testType, testContext) {} }

35. General Hooks // liquid-fire's addon-test-support/configuration.js import { TestConfig } from

    'ember-test-helpers'; import runningTransitionWaiter from './waiters/running-transition'; import randoHelper from './helpers/rando'; export default class extends TestConfig { beforeEach() { this.registerWaiter(runningTransitionWaiter); this.registerHelper('randoHelper', randoHelper); } }

36. General Hooks // mirage's addon-test-support/configuration.js import { TestConfig } from

    'ember-test-helpers'; import setup from 'ember-cli-mirage/setup-server'; export default class extends TestConfiguration { beforeEach() { this.server = setup(this.owner); } }

37. Test Information import { testHelper } from 'ember-qunit'; export default

    testHelper(function() { if (this.testInfo.type === 'acceptance') { // acceptance test stuff here } else { // integration/unit test stuff here } });

38. The End