CodeEurope 2017: Testing Against Time - Meaningful Testing in Ember Apps

Testing asynchronous and other time-dependent behaviour in JavaScript applications, following integration and acceptance test examples from an EmberJS application.
Presented at Code Europe 2017 in Krakow, Poland and Warsaw, Poland. Duration: 50min.

Transcript

1. TESTING AGAINST TIME MEANINGFUL TESTING IN EMBER APPS WHEN TIMING MATTERS @JJORDAN_DEV
3. EMBER.JS TIMES
4. EMBER.JS BERLIN MEETUP
5. WHY DO WE TEST? TESTING IN JAVASCRIPT APPLICATIONS
6. WHY DO WE TEST? MASTERING NEW TESTING FRAMEWORKS… …
7. WHY DO WE TEST? …BRINGS US CLOSER TO OUR ULTIMATE GOAL
8. WHY DO WE TEST? SERIOUSLY THOUGH…
10. WHY DO WE TEST? ! ✅ App Health:
11. WHY DO WE TEST? ! $ ✅ App Health:
12. WHY DO WE TEST? ! $ App Health: ⚠ ❓
13. WHY DO WE TEST? ! $ App Health: ⚠ ❓ ! + > 6 months ❓
14. WHY DO WE TEST? ! $ App Health: ❓ ! + > 6 months ❓ BUILDING WITHOUT TESTING ATTRACTS BUGS
15. WHY DO WE TEST? REGRESSION TESTING PREVENTS SUBSEQUENT DEVELOP SECURE SHIP
16. WHY DO WE TEST? TESTS CREATE DOCUMENTATION
17. WHY DO WE TEST? TESTS MAKE US SHIP CODE WITH CONFIDENCE ✍ = +
18. TESTING EMBER APPLICATIONS TESTING IN JAVASCRIPT APPLICATIONS
19. TESTING EMBER APPLICATIONS CONVENTION OVER CONFIGURATION +
20. TESTING EMBER APPLICATIONS CONVENTION OVER CONFIGURATION + ember g component my-component installing component create app/components/my-component.js create app/templates/components/my-component.hbs create tests/integration/components/my-component-test.js A dummy test file for free on every module generated
21. TESTING EMBER APPLICATIONS CONVENTION OVER CONFIGURATION + ember g component my-component // tests/integration/components/my-component-test.js // … test('it renders', function(assert) { // Set any properties with this.set('myProperty', 'value'); // Handle any actions with // this.on(‘myAction’, function(val) { ... }); this.render(hbs`{{my-component}}`); assert.equal(this.$().text().trim(), ''); });
22. TESTING EMBER APPLICATIONS ❤ UNIT + INTEGRATION TESTING WITH EMBER-QUNIT
23. TESTING EMBER APPLICATIONS A MORE FUNCTIONAL APPROACH TO TEST SETUP Simplified Ember Testing API RFC (Request for Comments): https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md import { module, test } from 'qunit'; import { setupRenderingTest } from ‘ember-qunit'; import { render } from ‘ember-test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('x-foo', function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { // custom setup here }); test('renders', async function(assert) { assert.expect(1); await render(hbs`{{pretty-color name="red"}}`); assert.equal(this.$('.color-name').text(), 'red'); }); });
24. TESTING EMBER APPLICATIONS A FUNCTIONAL APPROACH TO TEST SETUP Simplified Ember Testing API RFC (Request for Comments): https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md import { module, test } from 'qunit'; import { setupRenderingTest } from ‘ember-qunit'; import { render } from ‘ember-test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('x-foo', function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { // custom setup here }); test('renders', async function(assert) { assert.expect(1); await render(hbs`{{pretty-color name="red"}}`); assert.equal(this.$('.color-name').text(), 'red'); }); });
25. TESTING EMBER APPLICATIONS A FUNCTIONAL APPROACH TO TEST SETUP Simplified Ember Testing API RFC (Request for Comments): https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md import { module, test } from 'qunit'; import { setupRenderingTest } from ‘ember-qunit'; import { render } from ‘ember-test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('x-foo', function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { // custom setup here }); test('renders', async function(assert) { assert.expect(1); await render(hbs`{{pretty-color name="red"}}`); assert.equal(this.$('.color-name').text(), 'red'); }); });
26. TESTING EMBER APPLICATIONS A FUNCTIONAL APPROACH TO TEST SETUP Simplified Ember Testing API RFC (Request for Comments): https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md import { module, test } from 'qunit'; import { setupRenderingTest } from ‘ember-qunit'; import { render } from ‘ember-test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('x-foo', function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { // custom setup here }); test('renders', async function(assert) { assert.expect(1); await render(hbs`{{pretty-color name="red"}}`); assert.equal(this.$('.color-name').text(), 'red'); }); });
27. TESTING EMBER APPLICATIONS A FUNCTIONAL APPROACH TO TEST SETUP Simplified Ember Testing API RFC (Request for Comments): https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md import { module, test } from 'qunit'; import { setupRenderingTest } from ‘ember-qunit'; import { render } from ‘ember-test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('x-foo', function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { // custom setup here }); test('renders', async function(assert) { assert.expect(1); await render(hbs`{{pretty-color name="red"}}`); assert.equal(this.$('.color-name').text(), 'red'); }); });
28. TESTING EMBER APPLICATIONS A FUNCTIONAL APPROACH TO TEST SETUP Simplified Ember Testing API RFC (Request for Comments): https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md import { module, test } from 'qunit'; import { setupRenderingTest } from ‘ember-qunit'; import { render } from ‘ember-test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('x-foo', function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { // custom setup here }); test('renders', async function(assert) { assert.expect(1); await render(hbs`{{pretty-color name="red"}}`); assert.equal(this.$('.color-name').text(), 'red'); }); });
29. TESTING EMBER APPLICATIONS A FUNCTIONAL APPROACH TO TEST SETUP Simplified Ember Testing API RFC (Request for Comments): https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md import { module, test } from 'qunit'; import { setupRenderingTest } from ‘ember-qunit'; import { render } from ‘ember-test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('x-foo', function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { // custom setup here }); test('renders', async function(assert) { assert.expect(1); await render(hbs`{{pretty-color name="red"}}`); assert.equal(this.$('.color-name').text(), 'red'); }); });
30. TESTING EMBER APPLICATIONS A FUNCTIONAL APPROACH TO TEST SETUP Simplified Ember Testing API RFC (Request for Comments): https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md import { module, test } from 'qunit'; import { setupRenderingTest } from ‘ember-qunit'; import { render } from ‘ember-test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('x-foo', function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { // custom setup here }); test('renders', async function(assert) { assert.expect(1); await render(hbs`{{pretty-color name="red"}}`); assert.equal(this.$('.color-name').text(), 'red'); }); });
33. FALSE NEGATIVES
34. TEST TIMEOUTS
35. OCCASSIONALLY PASSING TESTS
36. TESTING: HOW AND WHY
37. ASYNC OPERATIONS MAKING TESTS WAIT
38. EDITORIAL BOARD FOR EMBER.JS TIMES
39. WAITING FOR ASYNCHRONOUS OPERATIONS TESTING ROUTE TRANSITIONS
40. WAITING FOR ASYNCHRONOUS OPERATIONS TESTING ROUTE TRANSITIONS export default Route.extend({ model() { const store = this.get('store'); const repoFetches = this.get('reposList').map((repo) => { return store.findRecord('github-org', repo); }); return all(repoFetches); }, });
41. ACCEPTANCE TESTS WAITING FOR ASYNCHRONOUS OPERATIONS
42. WAITING FOR ASYNCHRONOUS OPERATIONS test('visiting /overview', function(assert) { visit('overview'); assert.equal(currentURL(), '/overview'); });
43. WAITING FOR ASYNCHRONOUS OPERATIONS test('visiting /overview', function(assert) { visit('overview'); assert.equal(currentURL(), '/overview'); });
44. WAITING FOR ASYNCHRONOUS OPERATIONS ASYNC ACCEPTANCE TEST HELPERS: VISIT export default function visit(app, url) { let router = app.__container__.lookup('router:main'); app.boot().then(() => { router.location.setURL(url); // ... }); // teardown work return app.testHelpers.wait(); }
45. WAITING FOR ASYNCHRONOUS OPERATIONS ASYNC ACCEPTANCE TEST HELPERS: VISIT export default function visit(app, url) { let router = app.__container__.lookup('router:main'); app.boot().then(() => { router.location.setURL(url); // ... }); // teardown work return app.testHelpers.wait(); }
46. WAITING FOR ASYNCHRONOUS OPERATIONS test('visiting /overview', function(assert) { visit('overview'); andThen(function() { assert.equal(currentURL(), '/overview'); }); });
47. WAITING FOR ASYNCHRONOUS OPERATIONS test('visiting /overview', function(assert) { visit('overview'); andThen(function() { assert.equal(currentURL(), '/overview'); }); });
48. WAITING FOR ASYNCHRONOUS OPERATIONS test('visiting /overview', function(assert) { visit('overview'); andThen(function() { assert.equal(currentURL(), '/overview'); }); }); returns a Promise which fulfills once all async operations have resolved
49. WAITING FOR ASYNCHRONOUS OPERATIONS test('visiting /overview', function(assert) { visit('overview'); andThen(function() { assert.equal(currentURL(), '/overview'); }); });
50. WAITING FOR ASYNCHRONOUS OPERATIONS test('visiting /overview', function(assert) { visit('overview'); andThen(function() { assert.equal(currentURL(), '/overview'); }); }); waits for all previously initiated Promises to resolve
51. TEST PASS 1/1
52. WAITING FOR ASYNCHRONOUS OPERATIONS visit() click() fillIn() keyEvent() triggerEvent() export default function visit(app, url){ // … return app.testHelpers.wait(); } BUILT-IN ASYNCHRONOUS HELPERS FOR ACCEPTANCE TESTING
53. WAITING FOR ASYNCHRONOUS OPERATIONS ANY TIMERS || ANY SCHEDULED ITEMS IN RUN LOOP? ANY PENDING REQUESTS? ANY OTHER PENDING WAITERS? repeat each 10 ms wait()
54. WAITING FOR ASYNCHRONOUS OPERATIONS TESTING WITH EMBER-TEST-HELPERS Ember-test-selectors on Github: https://github.com/emberjs/ember-test-helpers
55. INTEGRATION TESTS WAITING FOR ASYNCHRONOUS OPERATIONS
56. WAITING FOR ASYNCHRONOUS OPERATIONS TESTING ASYNC USER INTERACTIONS
57. WAITING FOR ASYNCHRONOUS OPERATIONS TESTING ASYNC USER INTERACTIONS import Component from '@ember/component'; import { debounce } from '@ember/runloop'; export default Component.extend({ pull: null, actions: { loadComments(pull) { this.set('isLoadingComments', true); debounce(this, this.loadComments, pull, 800); }, }, });
58. WAITING FOR ASYNCHRONOUS OPERATIONS TESTING ASYNC USER INTERACTIONS import Component from '@ember/component'; import { debounce } from '@ember/runloop'; export default Component.extend({ pull: null, comments: null, loadComments(pull) { const commentsUrl = pull.get('commentsUrl'); return this.get(‘request’).fetch(commentsUrl).then((comments) => { this.set('comments', comments); this.set('isLoadingComments', false); }); }, actions: { loadComments(pull) { this.set('isLoadingComments', true); debounce(this, this.loadComments, pull, 800); }, }, });
59. WAITING FOR ASYNCHRONOUS OPERATIONS TESTING ASYNC USER INTERACTIONS import Component from '@ember/component'; import { debounce } from '@ember/runloop'; export default Component.extend({ pull: null, comments: null, loadComments(pull) { const commentsUrl = pull.get('commentsUrl'); return this.get(‘request’).fetch(commentsUrl).then((comments) => { this.set('comments', comments); this.set('isLoadingComments', false); }); }, actions: { loadComments(pull) { this.set('isLoadingComments', true); debounce(this, this.loadComments, pull, 800); }, }, });
60. WAITING FOR ASYNCHRONOUS OPERATIONS TESTING ASYNC USER INTERACTIONS import Service from '@ember/service'; export default Service.extend({ fetch(url) { // ajax request for urls }, });
61. WAITING FOR ASYNCHRONOUS OPERATIONS module('news-item', function(hooks) { setupRenderingTest(hooks); test(‘loading comments via user interaction', async function(assert) { // ember install ember-data-factory-guy this.set('pull', make('github-pull')); await this.render(hbs`{{news-item pull=pull repo=repo}}`); $(‘[data-test-load-comments]').click(); assert.equal($('[data-test-num-of-comments]').text(), `2`, 'displays comments’); } });
62. NOT OK
63. WAITING FOR ASYNCHRONOUS OPERATIONS module('news-item', function(hooks) { setupRenderingTest(hooks); test(‘loading comments via user interaction', async function(assert) { // ember install ember-data-factory-guy this.set('pull', make('github-pull')); await this.render(hbs`{{news-item pull=pull repo=repo}}`); $(‘[data-test-load-comments]').click(); assert.equal($('[data-test-num-of-comments]').text(), `2`, 'displays comments’); } });
64. WAITING FOR ASYNCHRONOUS OPERATIONS YARN ADD TESTDOUBLE
65. WAITING FOR ASYNCHRONOUS OPERATIONS module(‘news-item‘, function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { this.register('service:request', Service.extend({ fetch: td.function(), }); }); });
66. WAITING FOR ASYNCHRONOUS OPERATIONS module(‘news-item‘, function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { this.register('service:request', Service.extend({ fetch: td.function(), }); }); test('loading comments via user interaction', async function(assert) { const pull = make(‘github-pull') this.set('pull', pull); this.set('comments', makeList('github-comment', 2)); const commentsUrl = 'https://api.github.com/repos/user1/repository/pulls/1/comments'; td.when(this.get(‘request’).fetch(commentsUrl)) .thenResolve(this.comments); await render(hbs`{{news-item pull=pull repo=repo}}`); $(‘[data-test-load-comments]').click(); assert.equal($(‘[data-test-num-of-comments]’).text().trim(), `2`, 'displays comments'); }); });
67. TEXT NO CODE WALLS PLEASE
68. WAITING FOR ASYNCHRONOUS OPERATIONS module(‘news-item‘, function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { this.register('service:request', Service.extend({ fetch: td.function(), }); }); test('loading comments via user interaction', async function(assert) { const pull = make(‘github-pull') this.set('pull', pull); this.set('comments', makeList('github-comment', 2)); const commentsUrl = 'https://api.github.com/repos/user1/repository/pulls/1/comments'; td.when(this.get(‘request’).fetch(commentsUrl)) .thenResolve(this.comments); await render(hbs`{{news-item pull=pull repo=repo}}`); $(‘[data-test-load-comments]').click(); assert.equal($(‘[data-test-num-of-comments]’).text().trim(), `2`, 'displays comments'); }); });
69. WAITING FOR ASYNCHRONOUS OPERATIONS module(‘news-item‘, function(hooks) { setupRenderingTest(hooks); hooks.beforeEach(function() { this.register('service:request', Service.extend({ fetch: td.function(), }); }); test('loading comments via user interaction', async function(assert) { const pull = make(‘github-pull') this.set('pull', pull); this.set('comments', makeList('github-comment', 2)); const commentsUrl = 'https://api.github.com/repos/user1/repository/pulls/1/comments'; td.when(this.get(‘request’).fetch(commentsUrl)) .thenResolve(this.comments); await render(hbs`{{news-item pull=pull repo=repo}}`); $(‘[data-test-load-comments]').click(); assert.equal($(‘[data-test-num-of-comments]’).text().trim(), `2`, 'displays comments'); }); });
70. WAITING FOR ASYNCHRONOUS OPERATIONS app/services/request.js tests/integration/components/news-item-test.js import Service from '@ember/component'; export default Service.extend({ fetch(url) { // ajax request for urls }, }); const requestStub = Service.extend({ fetch: td.function(); });
71. WAITING FOR ASYNCHRONOUS OPERATIONS const requestStub = Service.extend({ fetch: td.function(); }); td.when(this.get(‘requestStub’) .fetch(commentsUrl)) .thenResolve(this.comments); loadComments(pull) { const commentsUrl = pull.get('commentsUrl'); return this.get(‘request’) .fetch(commentsUrl) .then((comments) => { this.set('comments', comments); this.set('isLoadingComments', false); }); }, app/components/news-item.js tests/integration/components/news-item-test.js
72. WAITING FOR ASYNCHRONOUS OPERATIONS td.when().thenResolve() td.when().thenReject() td.when().thenCallback() MOCKING PROMISES SYNCHRONOUSLY IMMEDIATE RESOLUTION / REJECTION OF MOCKED PROMISES
73. WAITING FOR ASYNCHRONOUS OPERATIONS test('loading comments via user interaction', async function(assert) { const pull = make(‘github-pull') this.set('pull', pull); this.set('comments', makeList('github-comment', 2)); const commentsUrl = 'https://api.github.com/repos/user1/repository/pulls/1/comments'; td.when(this.get(‘request’) .fetch(commentsUrl)) .thenResolve(this.comments); await render(hbs`{{news-item pull=pull repo=repo}}`); $(‘[data-test-load-comments]’).click(); assert.equal($('[data-test-num-of-comments]').text(), `2`, 'displays comments'); });
74. NOT OK
75. WAITING FOR ASYNCHRONOUS OPERATIONS wait().then(callback) LETTING PROMISES AND TIMERS SETTLE POLLING FOR ANY PENDING REQUESTS AND ACTIONS IN RUN LOOP
76. WAITING FOR ASYNCHRONOUS OPERATIONS import { wait } from 'ember-test-helpers/wait'; test('loading comments via user interaction', async function(assert) { const pull = make(‘github-pull') this.set('pull', pull); this.set('comments', makeList('github-comment', 2)); const commentsUrl = 'https://api.github.com/repos/user1/repository/pulls/1/comments'; td.when(this.get(‘request’).fetch(commentsUrl)) .thenResolve(this.comments); await render(hbs`{{news-item pull=pull repo=repo}}`); $('[data-test-load-comments]').click(); return wait().then(() => { assert.equal($('[data-test-num-of-comments]').text(), `2`, 'displays comments'); }); });
77. WAITING FOR ASYNCHRONOUS OPERATIONS import { wait } from 'ember-test-helpers/wait'; test('loading comments via user interaction', await function(assert) { const pull = make(‘github-pull') this.set('pull', pull); this.set('comments', makeList('github-comment', 2)); const commentsUrl = 'https://api.github.com/repos/user1/repository/pulls/1/comments'; td.when(this.get(‘request’).fetch(commentsUrl)) .thenResolve(this.comments); await render(hbs`{{news-item pull=pull repo=repo}}`); $('[data-test-load-comments]').click(); return wait().then(() => { assert.equal($('[data-test-num-of-comments]').text(), `2`, 'displays comments'); }); });
78. WAITING FOR ASYNCHRONOUS OPERATIONS await fillIn() await click() await keyEvent() await triggerEvent() await focus() await blur() await tap() EMBER-NATIVE-DOM-HELPERS & AWAIT / ASYNC SUITABLE FOR BOTH YOUR ACCEPTANCE & INTEGRATION TESTS
79. WAITING FOR ASYNCHRONOUS OPERATIONS import { click } from 'ember-native-dom-helpers'; test('loading comments via user interaction', async function(assert) { this.set('pull', make('github-pull')); this.set('comments', makeList('github-comment', 2)); const commentsUrl = 'https://api.github.com/repos/user1/repository/pulls/1/comments'; td.when(this.get(‘request’).fetch(commentsUrl)) .thenResolve(this.comments); await render(hbs`{{news-item pull=pull repo=repo}}`); await click(‘[data-test-load-comments]’); assert.equal($('[data-test-num-of-comments]').text(), `2`, 'displays comments'); });
80. TEST PASS 2/2
81. WAITING FOR ASYNCHRONOUS OPERATIONS HANDLING ASYNC BEHAVIOUR WITH EMBER-CONCURRENCY Alex Matchneer: ember-concurrency: the solution to so many problems you never knew you had: https://emberway.io/ember-concurrency-the-solution-to-so-many-problems-you-never-knew-you-had-cce6d7731ba9
82. WAITING FOR ASYNCHRONOUS OPERATIONS export default Component.extend({ //… reloadComments: task(function * () { const commentsUrl = this.get('pull.commentsUrl'); const comments = yield this.get(‘request’) .fetch(this.get(‘pull.commentsUrl’)); this.set('comments', comments); }).drop(), }); GENERATOR FUNCTIONS WITH EMBER-CONCURRENCY
83. WAITING FOR ASYNCHRONOUS OPERATIONS export default Component.extend({ startReloading: task(function *(){ while(true) { this.get(‘reloadComments').perform(); yield timeout(50000); }, reloadComments: task(function * () { const commentsUrl = this.get('pull.commentsUrl'); const comments = yield this.get(‘request’) .fetch(this.get(‘pull.commentsUrl’)); this.set('comments', comments); }).drop(), });
84. WAITING FOR ASYNCHRONOUS OPERATIONS td.when(this.get(‘request’) .fetch(commentsUrl)) .thenResolve(this.comments); await this.render(hbs`{{news-item pull=pull repo=repo}}`); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
85. TEST TIMEOUT
86. WAITING FOR ASYNCHRONOUS OPERATIONS startReloading: task(function *(){ while(true) { this.get(‘reloadComments').perform(); if (Ember.testing) { return; } yield timeout(50000); } }
87. WAITING FOR ASYNCHRONOUS OPERATIONS startReloading: task(function *(){ while(true) { this.get(‘reloadComments').perform(); if (Ember.testing) { return; } yield timeout(50000); } }
88. WAITING FOR ASYNCHRONOUS OPERATIONS …CREATES A PERFECT HOME FOR BUGS
89. WAITING FOR ASYNCHRONOUS OPERATIONS AND WHAT IF WE NEED TO TEST SEVERAL ITERATIONS?
90. WAITING FOR ASYNCHRONOUS OPERATIONS await render(hbs`{{news-item pull=pull repo=repo}}`); later(() => { run.cancelTimers(); }, 500); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
91. WAITING FOR ASYNCHRONOUS OPERATIONS await render(hbs`{{news-item pull=pull repo=repo}}`); later(() => { run.cancelTimers(); }, 500); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
92. NOT OK
93. WAITING FOR ASYNCHRONOUS OPERATIONS await render(hbs`{{news-item pull=pull repo=repo}}`); later(() => { run.cancelTimers(); }, 500); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
94. WAITING FOR ASYNCHRONOUS OPERATIONS await render(hbs`{{news-item pull=pull repo=repo}}`); later(() => { run.cancelTimers(); }, 500); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
95. WAITING FOR ASYNCHRONOUS OPERATIONS await render(hbs`{{news-item pull=pull repo=repo}}`); later(() => { run.cancelTimers(); }, 500000); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
96. WAITING FOR ASYNCHRONOUS OPERATIONS
97. WAITING FOR ASYNCHRONOUS OPERATIONS const TIMEOUT_INTERVAL = Ember.testing ? 1 : 500000; //… startReloading: task(function *(){ while(true) { yield timeout(TIMEOUT_INTERVAL); this.get(‘reloadComments').perform(); } }
98. WAITING FOR ASYNCHRONOUS OPERATIONS await render(hbs`{{news-item pull=pull repo=repo}}`); later(() => { run.cancelTimers(); }, 500000); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
99. WAITING FOR ASYNCHRONOUS OPERATIONS await render(hbs`{{news-item pull=pull repo=repo}}`); later(() => { run.cancelTimers(); }, 50); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
100. await render(hbs`{{news-item pull=pull repo=repo}}`); later(() => { run.cancelTimers(); }, 50); return wait().then(() => { assert.equal(find('[data-test-num-of-comments]').textContent.trim(), `2`, 'displays comments'); });
101. TEST PASS 3/3
102. WAITING FOR ASYNCHRONOUS OPERATIONS FURTHER READING Ember Concurrency Docs on Testing: https://ember-concurrency.com/#/docs/testing-debugging Ember Testing Unificationn RFC: https://github.com/emberjs/rfcs/pull/119
103. TIME TRAVEL MAKING TESTS PASS AT ANY TIME
104. SETTING AND TRAVELLING THROUGH TIME
105. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page doesn\'t stress me out with release date disclaimers', function(assert) { visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thu disclaimer'); assert.notOk(find('[data-test-is-friday-disclaimer]'), 'doesn\'t display Fri disclaimer'); }); });
106. NOT OK
107. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page doesn\'t stress me out with release date disclaimers', function(assert) { visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thu disclaimer'); assert.notOk(find('[data-test-is-friday-disclaimer]'), 'doesn\'t display Fri disclaimer'); }); });
108. WAITING FOR ASYNCHRONOUS OPERATIONS moduleForAcceptance('Acceptance | overview', { beforeEach() Timecop.install(); Timecop.travel(new Date(2017, 9, 11, 11, 45)); }, afterEach(){ Timecop.uninstall(); } }); EMBER INSTALL EMBER-CLI-TIMECOP
109. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page doesn\'t stress me out with release date disclaimers', function(assert) { visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thursday disclaimer'); assert.notOk(find('[data-test-is-friday-disclaimer]'), 'doesn\'t display Friday disclaimer'); }); }); moduleForAcceptance('Acceptance | overview', { beforeEach() Timecop.install(); Timecop.travel(new Date(2017, 9, 11, 11, 45)); // is a Wednesday: 11.10.2017 }, afterEach(){ Timecop.uninstall(); } });
110. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page doesn\'t stress me out with release date disclaimers', function(assert) { visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thursday disclaimer'); assert.notOk(find('[data-test-is-friday-disclaimer]'), 'doesn\'t display Friday disclaimer'); }); }); moduleForAcceptance('Acceptance | overview', { beforeEach() Timecop.install(); Timecop.travel(new Date(2017, 9, 11, 11, 45)); // is a Wednesday: 11.10.2017 }, afterEach(){ Timecop.uninstall(); } });
111. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page doesn\'t stress me out with release date disclaimers', function(assert) { visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thursday disclaimer'); assert.notOk(find('[data-test-is-friday-disclaimer]'), 'doesn\'t display Friday disclaimer'); }); }); moduleForAcceptance('Acceptance | overview', { beforeEach() Timecop.install(); Timecop.travel(new Date(2017, 9, 11, 11, 45)); // is a Wednesday: 11.10.2017 }, afterEach(){ Timecop.uninstall(); } });
112. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page doesn\'t stress me out with release date disclaimers', function(assert) { visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thursday disclaimer'); assert.notOk(find('[data-test-is-friday-disclaimer]'), 'doesn\'t display Friday disclaimer'); }); }); moduleForAcceptance('Acceptance | overview', { beforeEach() Timecop.install(); Timecop.travel(new Date(2017, 9, 11, 11, 45)); // is a Wednesday: 11.10.2017 }, afterEach(){ Timecop.uninstall(); } });
113. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page…oh no, it’s Friday’, function(assert) { Timecop.travel(new Date(2017, 9, 13, 16, 20)); // is a Friday visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thursday disclaimer'); assert.ok(find('[data-test-is-friday-disclaimer]'), ‘the newsletter has to get out - oh no!’); }); });
114. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page…oh no, it’s Friday’, function(assert) { Timecop.travel(new Date(2017, 9, 13, 16, 20)); // is a Friday visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thursday disclaimer'); assert.ok(find('[data-test-is-friday-disclaimer]'), ‘the newsletter has to get out - oh no!’); }); });
115. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page…oh no, it’s Friday’, function(assert) { Timecop.travel(new Date(2017, 9, 13, 16, 20)); // is a Friday visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thursday disclaimer'); assert.ok(find('[data-test-is-friday-disclaimer]'), ‘the newsletter has to get out - oh no!’); }); });
116. WAITING FOR ASYNCHRONOUS OPERATIONS test('the overview page…oh no, it’s Friday’, function(assert) { Timecop.travel(new Date(2017, 9, 13, 16, 20)); // is a Friday visit('/overview'); andThen(function() { assert.notOk(find('[data-test-is-thursday-disclaimer]'), 'doesn\'t display Thursday disclaimer'); assert.ok(find('[data-test-is-friday-disclaimer]'), ‘the newsletter has to get out - oh no!’); }); });
117. TEST PASS 4/4
118. TIMING IN YOUR TESTS MATTERS
119. TIMING IN YOUR TESTS MATTERS
120. BARDZO DZIĘKUJĘ! @JESSICA @JJORDAN_DEV