Assert(js) 2018: Testing Against Time in JavaScript Apps

20 min talk about common pitfalls and how to handle them when testing against time-dependent behaviour in JavaScript applications.
Presented Assert(js) Conf 2018, San Antonio, USA.

Transcript

1. Testing against time in JavaScript Applications Assert (js) 2018 @ J J O R D A N _ D E V J E S S I C A J O R D A N
4. JavaScript Apps are full of asynchronous behaviour Events & User Interaction Timeouts Ajax Requests …and many more
5. Testing that can be even harder
6. If we get complacent though…
7. …so let’s find out how to do it.
8. Sidetrack Testing in Ember Apps 101
9. + +
10. import { module, test } from 'qunit'; module('some-thing', function(hooks) { test('it computes foo', function(assert) { }); });
11. import { module, test } from 'qunit'; module('some-thing', function(hooks) { hooks.beforeEach(function(){ // custom setup here }); hooks.afterEach(function(){ // custom teardown here }); // test(‘test1', …); // test(‘test2’, …); // test(‘test3’,…); });
12. import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('some-thing', function(hooks) { setupTest(hooks); test('it computes computedFoo', async function(assert) { }); });
13. import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('some-thing', function(hooks) { setupTest(hooks); test('it computes computedFoo', async function(assert) { const someThing = this.owner.lookup('service:some-thing'); }); });
14. import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('some-thing', function(hooks) { setupTest(hooks); test('it computes computedFoo', async function(assert) { const someThing = this.owner.lookup('service:some-thing'); someThing.set('foo', 'baz'); assert.equal(someThing.get('computedFoo'), 'computed baz'); }); });
15. Making Tests Wait
 Async Ops
16. Why is it async? Routing Loading data for a view Handling route transitions Provide context for a view
17. Why is it async? Routing Loading data for a view Handling route transitions Provide context for a view
18. ROUTING Transition States
19. return $.getJSON('https://api.github.com/repos/emberjs/website/pulls') .then((response) => { return response; });
20. Ember Data Github Addon Documentation: https://github.com/elwayman02/ember-data-github#ember-data-github Loading Records in Ember Applications via Ember-Data: https://guides.emberjs.com/v3.0.0/routing/specifying-a-routes-model/ export default Route.extend({ model() { const store = this.get('store'); return store.query('github-pull', { repo: 'emberjs/website' }); }, });
21. test('the main page displays a list of PRs', function(assert) { ourOwnVisitHelper('main'); });
22. High Level DOM Assertions With Qunit Dom: https://github.com/simplabs/qunit-dom DOM Assertions with QUnit-DOM test('the main page displays a list of PRs', function(assert) { ourOwnVisitHelper('main'); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
23. ❌ test('the main page displays a list of PRs', function(assert) { ourOwnVisitHelper('main'); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
24. test('the main page displays a list of PRs', function(assert) { ourOwnVisitHelper('main'); await timeout(300); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
25. ❌ ✅ test('the main page displays a list of PRs', async function(assert) { ourOwnVisitHelper('main'); await timeout(300); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
26. ✅ but… test('the main page displays a list of PRs', async function(assert) { ourOwnVisitHelper('main'); await timeout(300000000000000000000000000000000000000000); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
27. …these tests become slow….
28. @ember/test-helpers Framework Agnostic Test Helpers for Ember Apps: https://github.com/emberjs/ember-test-helpers/blob/master/API.md
29. High Level DOM Assertions With Qunit Dom: https://github.com/simplabs/qunit-dom test('the main page displays a list of PRs', function(assert) { ourOwnVisitHelper('main'); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
30. import { visit } from '@ember/test-helpers'; // ... test('the main page displays a list of PRs’, function(assert) { visit('main'); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
31. import { visit } from '@ember/test-helpers'; // ... test('the main page displays a list of PRs', async function(assert) { await visit('main'); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
32. ✅ import { visit } from '@ember/test-helpers'; // ... test('the main page displays a list of PRs', async function(assert) { await visit('main'); assert.dom('.list-item').hasText('WIP: Fix Tomster Logo'); });
33. …will be waiting for async behaviour to settle Helpers for DOM Interaction & more… visit() click() fillIn() keyEvent() triggerEvent() … export default function visit(url){ //... return settled(); }
34. se ttl ed function settled( ) { } hasRunLoop? hasPendingTime rs? hasPendingWait ers? hasPendingReq uests?
35. function settled( ) { } hasRunLoop? hasPendingTime rs? hasPendingWait ers? hasPendingReq uests? every 10 ms se ttl ed
36. function settled( ) { } hasRunLoop? hasPendingTime rs? hasPendingWait ers? hasPendingReq uests? se ttl ed ✅ ✅ ✅ ✅ resolved Promise
37. Writing your own waiting helper See also waitUntil helper from @ember/test-helpers function myOwnWaitHelper(callback) { return new Promise(function(resolve, reject) { let time = 0; // you could of course also have a timer that tracks when this should time out and just reject function checkAssertion(currentTime) { setTImeout(function() { let value = callback(); time += 10; if (value) { // resolve if assertion is correct resolve(value); } else if (timerIsNotUpYet) { checkAssertion(time); } else { reject(value); } }, 10); } checkAssertion(0); }); }
38. Writing your own waiting helper See also waitUntil helper from @ember/test-helpers function myOwnWaitHelper(callback) { return new Promise(function(resolve, reject) { let time = 0; // you could of course also have a timer that tracks when this should time out and just reject function checkAssertion(currentTime) { setTImeout(function() { let value = callback(); time += 10; if (value) { // resolve if assertion is correct resolve(value); } else if (timerIsNotUpYet) { checkAssertion(time); } else { reject(value); } }, 10); } checkAssertion(0); }); }
39. Writing your own waiting helper See also waitUntil helper from @ember/test-helpers function myOwnWaitHelper(callback) { return new Promise(function(resolve, reject) { let time = 0; // you could of course also have a timer that tracks when this should time out and just reject function checkAssertion(currentTime) { setTImeout(function() { let value = callback(); time += 10; if (value) { // resolve if assertion is correct resolve(value); } else if (timerIsNotUpYet) { checkAssertion(time); } else { reject(value); } }, 10); } checkAssertion(0); }); }
40. ✨Testing Magic ✨
41. Async? User Interacti on events might trigger other async operations
42. app/components/pull-request-item.js loadComments(pull) { const commentsUrl = pull.get('commentsUrl'); return this.get('request') .fetch(commentsUrl) .then((comments) => { this.set('comments', comments); }); },
43. test('loading comments', async function(assert) { await render(hbs`{{pull-request-item pullRequest=pullRequest}}`); await click('button.load-comments'); assert.dom(‘.list-item .comment').hasText('Comment 1: LGTM!'); });
44. Mocking Requests td.when().thenResolve() td.when().thenReject() td.when().thenCallback()
45. this.owner.register(‘service:request', RequestService.extend({ fetch: td.function(), });
46. test('loading comments', async function(assert) { this.owner.register(‘service:request', RequestService.extend({ fetch: td.function(), }); td.when(this.get('request').fetch(commentsUrl)) .thenResolve(this.mockComments); await render(hbs`{{pull-request-item pullRequest=pullRequest}}`); await click('button.load-comments'); assert.dom('.list-item .comment').hasText('Comment 1: LGTM!'); });
47. ✅ test('loading comments', async function(assert) { this.owner.register(‘service:request', RequestService.extend({ fetch: td.function(), }); td.when(this.get('request').fetch(commentsUrl)) .thenResolve(this.mockComments); await render(hbs`{{pull-request-item pullRequest=pullRequest}}`); await click('button.load-comments'); assert.dom('.list-item .comment').hasText('Comment 1: LGTM!'); });
48. Making tests pass anytime 
 Time Travel
49. test('shows the week day', async function(assert) { await visit('main'); assert.dom('aside.week-day').hasText('Monday'); });
50. works when run on Mondays… ✅ test('shows the week day', async function(assert) { await visit('main'); assert.dom('aside.week-day').hasText('Monday'); });
51. …and fails Tuesday - Sunday ❌ test('shows the week day', async function(assert) { await visit('main'); assert.dom('aside.week-day').hasText('Monday'); });
52. Timecop.travel(new Date(2017, 9, 11, 11, 45)); // is a Monday
53. hooks.beforeEach(function() Timecop.install(); Timecop.travel(new Date(2017, 9, 11, 11, 45)); // is a Monday }); hooks.afterEach(function(){ Timecop.uninstall(); });
54. ✅ module('Acceptance | overview', function(hooks) { hooks.beforeEach() Timecop.install(); Timecop.travel(new Date(2017, 9, 11, 11, 45)); // is a Monday }, hooks.afterEach(){ Timecop.uninstall(); } test('shows the weekday', async function(assert) { await visit('main'); assert.dom('aside.week-day').hasText('Monday'); }); });
55. Timing in your tests matters
56. Thank you. @ J J O R D A N _ D E V GITHUB:JESSICA-JORDAN @Assert(js) 2018