The Next Generation of Testing in Ember.js

Transcript

1. The Next Generation of Testing in __
2. Turbo87 TobiasBieniek
3. simplabs based in Munich consulting all over ! * Stickers available after the talk
4. Ember CLI
5. ⏰ andThen() The andThen helper will wait for all preceding asynchronous helpers to complete prior to progressing forward.
6. andThen() import { test } from 'qunit'; import moduleForAcceptance from 'my-app/tests/helpers/module-for-acceptance'; moduleForAcceptance('Acceptance | posts'); test('should add new post', function(assert) { visit('/posts/new'); fillIn('input.title', 'My new post'); click('button.submit'); andThen(() => assert.equal(find('ul.posts li:first').text(), 'My new post')); });
7. andThen() import { test } from 'qunit'; import moduleForAcceptance from 'my-app/tests/helpers/module-for-acceptance'; moduleForAcceptance('Acceptance | posts'); test('should add new post', function(assert) { return visit('/posts/new').then(function() { return fillIn('input.title', 'My new post'); }).then(function() { return click('button.submit'); }).then(function() { assert.equal(find('ul.posts li:first').text(), 'My new post') }); }); April 2013
8. andThen() vs. async /await import { test } from 'qunit'; import moduleForAcceptance from 'my-app/tests/helpers/module-for-acceptance'; moduleForAcceptance('Acceptance | posts'); test('should add new post', async function(assert) { await visit('/posts/new'); await fillIn('input.title', 'My new post'); await click('button.submit'); assert.equal(find('ul.posts li:first').text(), 'My new post'); });andThen
9. andThen() vs. async /await andThen() • almost 5 years old • mixes sync and async code • unintuitive API async / await • standardized ECMAScript • explicit async code • Promise-based
11. 30 kB no longer needed
 by Ember.js itself
12. 30 kB still needed by
 the test helpers
13. jQuery await click('button.submit'); assert.equal(find('ul.posts li').text(), 'My new post'); this.$('button.submit').click(); assert.equal(this.$('ul.posts li').text(), 'My new post'); jQuery jQuery jQuery Acceptance Component / Integration
14. jQuery await click('button.submit'); assert.equal(find('ul.posts li').text(), 'My new post');
15. jQuery import { click, find } from 'ember-native-dom-helpers'; await click('button.submit'); assert.equal(find('ul.posts li').textContent, 'My new post');
16. jQuery import { click, find } from '@ember/test-helpers'; await click('button.submit'); assert.equal(find('ul.posts li').textContent, 'My new post');
17. Nested Modules
18. Nested Modules describe('Galaxy', function() { describe('Earth', function() { describe('Portland', function() { it('is awesome at EmberConf', function() { // right? });aaa }); }); });
19. Nested Modules describe('Galaxy', function() {hooks describe('Earth', function() {hooks beforeEach(function() {hooks this.owner.lookup('service:time').setYear(2018); }); describe('Portland', function() {hooks it('is awesome at EmberConf', function() {assert // right? });aaa }); }); });
20. Nested Modules module('Galaxy', function() { module('Earth', function(hooks) { hooks.beforeEach(function() { this.owner.lookup('service:time').setYear(2018); }); module('Portland', function() { test('is awesome at EmberConf', function(assert) { // right? });aaa }); }); });
21. Nested Modules module('Galaxy', function(hooks) { module('Earth', function(hooks) { hooks.beforeEach(function() { this.owner.lookup('service:time').setYear(2018); }); module('Portland', function(hooks) { test('is awesome at EmberConf', function(assert) { // right? });aaa }); }); }); Not compatible with • moduleFor() • moduleForComponent() • moduleForModel() • moduleForAcceptance()
22. The Grand Testing Unification
23. RFC #119
24. RFC #119
25. RFC #232
26. RFC #232 Replaces • moduleFor() • moduleForComponent() • moduleForModel() with • module() + setupTest()
27. RFC #268
28. RFC #268 Replaces • moduleForAcceptance() with • module() + setupApplicationTest()
29. Plain QUnit tests for code unrelated to Ember
30. Plain QUnit tests import { module, test } from 'qunit'; module('relativeDate', function(hooks) { test('format relative dates correctly', function(assert) { assert.equal(relativeDate('2018/01/28 22:24:30'), 'just now'); assert.equal(relativeDate('2018/01/28 22:23:30'), '1 minute ago'); assert.equal(relativeDate('2018/01/28 21:23:30'), '1 hour ago'); assert.equal(relativeDate('2018/01/27 22:23:30'), 'Yesterday'); assert.equal(relativeDate('2018/01/26 22:23:30'), '2 days ago'); }); }); regular QUnit APIs
31. "Container" tests for Controllers, Routes, Services, ... (previously Unit / Integration)
32. import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('Service | flash-messages', function(hooks) { setupTest(hooks); test('it buffers messages', function(assert) { let service = this.owner.lookup('service:flash-messages'); service.add('Hello'); service.add('World!'); assert.deepEqual(service.get('messages'), ['Hello', 'World!']); }); }); setupTest() regular QUnit APIs ember-qunit APIs
33. import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('Service | flash-messages', function(hooks) { setupTest(hooks); test('it buffers messages', function(assert) { let service = this.owner.lookup('service:flash-messages'); service.add('Hello'); service.add('World!'); assert.deepEqual(service.get('messages'), ['Hello', 'World!']); }); }); setupTest() Sets up the Testing Container
34. import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('Service | flash-messages', function(hooks) { setupTest(hooks); test('it buffers messages', function(assert) { let service = this.owner.lookup('service:flash-messages'); service.add('Hello'); service.add('World!'); assert.deepEqual(service.get('messages'), ['Hello', 'World!']); }); }); setupTest() Direct Container Access
35. import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('Service | flash-messages', function(hooks) { setupTest(hooks); test('it buffers messages', function(assert) { let service = this.owner.lookup('service:flash-messages'); service.add('Hello'); service.add('World!'); assert.deepEqual(service.get('messages'), ['Hello', 'World!']); }); }); setupTest()
36. import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; module('Service | flash-messages', function(hooks) { setupTest(hooks); test('it buffers messages', function(assert) { let service = this.owner.lookup('service:flash-messages'); service.add('Hello'); service.add('World!'); assert.deepEqual(service.get('messages'), ['Hello', 'World!']); }); }); setupTest()
37. Rendering tests for Components and Helpers (previously Component-Integration)
38. import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render, click } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('Component | counter', function(hooks) { setupRenderingTest(hooks); setupRenderingTest() Shared between
 QUnit and Mocha
39. module('Component | counter', function(hooks) { setupRenderingTest(hooks); test('it should count clicks', async function(assert) { this.set('value', 0); await render(hbs`{{x-counter value=value onUpdate=( ...)}}`); assert.equal(this.element.textContent, '0 clicks'); await click('.counter'); assert.equal(this.element.textContent, '1 click'); }); }); setupRenderingTest() similar to setupTest()
40. module('Component | counter', function(hooks) { setupRenderingTest(hooks); test('it should count clicks', async function(assert) { this.set('value', 0); await render(hbs`{{x-counter value=value onUpdate=( ...)}}`); assert.equal(this.element.textContent, '0 clicks'); await click('.counter'); assert.equal(this.element.textContent, '1 click'); }); }); setupRenderingTest()
41. Application tests to verify user stories (previously Acceptance)
42. import { module, test } from 'qunit'; import { setupApplicationTest } from 'ember-qunit'; import { visit, fillIn, click } from '@ember/test-helpers'; module('Acceptance | posts', function(hooks) { setupApplicationTest(hooks); test('should add new post', async function(assert) { await visit('/posts/new'); await fillIn('input.title', 'My new post'); await click('button.submit'); let title = this.element.querySelector('ul.posts li:first').textContent; assert.equal(title, 'My new post'); }); }); setupApplicationTest() same helpers as for
 rendering tests
43. import { module, test } from 'qunit'; import { setupApplicationTest } from 'ember-qunit'; import { visit, fillIn, click } from '@ember/test-helpers'; module('Acceptance | posts', function(hooks) { setupApplicationTest(hooks); test('should add new post', async function(assert) { await visit('/posts/new'); await fillIn('input.title', 'My new post'); await click('button.submit'); let title = this.element.querySelector('ul.posts li:first').textContent; assert.equal(title, 'My new post'); }); }); setupApplicationTest() similar to setupRenderingTest()
44. import { module, test } from 'qunit'; import { setupApplicationTest } from 'ember-qunit'; import { visit, fillIn, click } from '@ember/test-helpers'; module('Acceptance | posts', function(hooks) { setupApplicationTest(hooks); test('should add new post', async function(assert) { await visit('/posts/new'); await fillIn('input.title', 'My new post'); await click('button.submit'); let title = this.element.querySelector('ul.posts li:first').textContent; assert.equal(title, 'My new post'); }); }); setupApplicationTest()
45. ember install ???
46. ember install
 ember-cli-qunit 4.2.0+
47. Migration What about the 5000 tests we already have?
48. Migration async/await + ember-native-dom-helpers , ember-native-dom-helpers-codemod
49. ember-qunit-codemod Migration setupTest() functions .
50. ember-test-helpers-codemod Migration @ember/test-helpers /
51. Tips & Tricks ✨ ✨
52. Mocking aka. taking advantage of inject()
53. Mocking test('initializes with the cookie value', function() { this.owner.register('service:cookies', Service.extend({ read(key) { return 'a;b;c'; }, })); let featuresService = this.owner.lookup('service:features'); assert.deepEqual(featuresService.get('features'), ['a', 'b', 'c']); }); Register Mock Object
54. Mocking test('initializes with the cookie value', function() { this.owner.register('service:cookies', Service.extend({ read(key) { return 'a;b;c'; } })); let featuresService = this.owner.lookup('service:features'); assert.deepEqual(featuresService.get('features'), ['a', 'b', 'c']); }); Lookup Object using the Mock
55. Mocking test('initializes with the cookie value', function() { this.owner.register('service:cookies', Service.extend({ read(key) { return 'a;b;c'; } })); let featuresService = this.owner.lookup('service:features'); assert.deepEqual(featuresService.get('features'), ['a', 'b', 'c']); });
56. Mocking test('initializes with the cookie value', function() { this.owner.register('service:cookies', Service.extend({ read(key) { return 'a;b;c'; } })); let featuresService = this.owner.lookup('service:features'); assert.deepEqual(featuresService.get('features'), ['a', 'b', 'c']); });
57. Loading States How can we test them?
58. Loading States test('shows loading spinner after submitting', async function() { await visit('/comments/new'); await fillIn('input.comment', 'I ❤ Ember.js'); let promise = click('.submit'); await waitFor('.loading-spinner'); await promise; assert.ok(find('.you-for-submitting')); }); Save Promise for later
59. Loading States test('shows loading spinner after submitting', async function() { await visit('/comments/new'); await fillIn('input.comment', 'I ❤ Ember.js'); let promise = click('.submit'); await waitFor('.loading-spinner'); await promise; assert.ok(find('.you-for-submitting')); }); "Wait for loading spinner"
60. Loading States test('shows loading spinner after submitting', async function() { await visit('/comments/new'); await fillIn('input.comment', 'I ❤ Ember.js'); let promise = click('.submit'); await waitFor('.loading-spinner'); await promise; assert.ok(find('.you-for-submitting')); }); Cleanup and final assertions
61. Loading States await waitFor('.loading-spinner'); same as: await waitUntil(() => find('.loading-spinner'));
62. Custom Test Helpers aka. registerAsyncHelper()
63. Custom Test Helpers export default registerAsyncHelper('addContact', function(app, name) { fillIn('#name', name); click('button.create'); }); export async function addContact(name) { await fillIn('#name', name); await click('button.create'); }
64. Test Selectors the thing you know from CSS
 that helps you find elements in the DOM
65. Test Selectors <h1>{{title}} </h1> <input class="title-field"> await fillIn('.title-field', 'Hello World!'); let title = this.element.querySelector('h1').textContent; assert.equal(title, 'Hello World!'); Test Selectors
66. Test Selectors <h1 data-test-title>{{title}} </h1> <input data-test-title-field> await fillIn('[data-test-title-field]', 'Hello World!'); let title = this.element.querySelector('[data-test-title]').textContent; assert.equal(title, 'Hello World!');
67. Test Selectors <h1 data-test-title>{{title}} </h1> <input data-test-title-field> await fillIn('[data-test-title-field]', 'Hello World!'); let title = this.element.querySelector('[data-test-title]').textContent; assert.equal(title, 'Hello World!'); ember install ember-test-selectors https://github.com/simplabs/ember-test-selectors
68. Readable Assertions How to write code that is easy to understand
69. Readable Assertions let title = this.element.querySelector('[data-test-title]').textContent; assert.equal(title.trim(), 'Hello World!');
70. Readable Assertions let title = this.element.querySelector('[data-test-title]').textContent; assert.equal(title.trim(), 'Hello World!'); assert.dom('[data-test-title]').hasText('Hello World!');
71. ember install qunit-dom https://github.com/simplabs/qunit-dom assert.dom('h1').exists(); assert.dom('h1').hasClass('title'); assert.dom('h1').hasText('Welcome to Ember, John Doe!'); assert.dom('input').isFocused(); assert.dom('input').hasValue(/.+ Doe/); assert.dom('input').hasAttribute('type', 'text');
72. the Ember testing ecosystem ember-exam ember-cli-eslint ember-cli-code-coverage ember-data-factory-guy ember-native-dom-helpers ember-mirage ember-try ember-cli-template-lint
73. Thanks