High Level DOM Assertions for QUnit

Transcript

1. ✔ High ✔ Level ✔ Abstractions
2. High Level Abstractions High Level Abstractions
 reduce accidental Complexity — Ed Faulkner
3. ✔ High ✔ Level ✔ Abstractions ✔ Assertions
4. High Level Assertions <h1 class="title {{if username "has-username"}}"> {{#if username}} Welcome to Ember, <strong>{{username}} </strong>! {{else}} Welcome to Ember! {{/if}} </h1>
5. High Level Assertions test('frontpage should be welcoming', function(assert) { visit('/index'); andThen(function() { assert.equal(find('h1.title').textContent.trim(), 'Welcome to Ember!'); assert.notOk(find('h1.title').classList.contains('has-username')); }); fillIn('input.username', 'John Doe'); andThen(function() { assert.equal(find('h1.title').textContent.trim(), 'Welcome to Ember,\n John Doe!'); assert.ok(find('h1.title').classList.contains('has-username')); }); });
6. High Level Assertions test('frontpage should be welcoming', async function(assert) { await visit('/index'); assert.equal(find('h1.title').textContent.trim(), 'Welcome to Ember!'); assert.notOk(find('h1.title').classList.contains('has-username')); await fillIn('input.username', 'John Doe'); assert.equal(find('h1.title').textContent.trim(), 'Welcome to Ember,\n John Doe!'); assert.ok(find('h1.title').classList.contains('has-username')); });
7. High Level Assertions test('frontpage should be welcoming', async function(assert) { await visit('/index'); assert.equal(find('h1.title').textContent.trim(), 'Welcome to Ember!'); assert.notOk(find('h1.title').classList.contains('has-username')); await fillIn('input.username', 'John Doe'); assert.equal(find('h1.title').textContent.trim(), 'Welcome to Ember,\n John Doe!'); assert.ok(find('h1.title').classList.contains('has-username')); });
8. High Level Assertions it('frontpage should be welcoming', async function() { await visit('/index'); expect(find('h1.title')).to.have.text('Welcome to Ember!'); expect(find('h1.title')).to.have.class('has-username'); await fillIn('input.username', 'John Doe'); expect(find('h1.title')).to.have.text('Welcome to Ember,\n John Doe!'); expect(find('h1.title')).to.have.class('has-username'); }); ... with chai and chai-dom
9. High Level Assertions test('frontpage should be welcoming', async function(assert) { await visit('/index'); assert.dom('h1.title').hasText('Welcome to Ember!'); assert.dom('h1.title').doesNotHaveClass('has-username'); await fillIn('input.username', 'John Doe'); assert.dom('h1.title').hasText('Welcome to Ember, John Doe!'); assert.dom('h1.title').hasClass('has-username'); }); What if ...?
10. ember install qunit-dom
11. ember install 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'); https://github.com/simplabs/qunit-dom
12. ember install qunit-dom https://github.com/simplabs/qunit-dom https://github.com/simplabs/qunit-dom-codemod one more thing ...