Upgrade to Pro — share decks privately, control downloads, hide ads and more …

High Level DOM Assertions for QUnit

High Level DOM Assertions for QUnit

Tobias Bieniek

October 13, 2017
Tweet

More Decks by Tobias Bieniek

Other Decks in Programming

Transcript

  1. High Level Assertions <h1 class="title {{if username "has-username"}}"> {{#if username}}

    Welcome to Ember, <strong>{{username}} </strong>! {{else}} Welcome to Ember! {{/if}} </h1>
  2. 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')); }); });
  3. 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')); });
  4. 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')); });
  5. 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
  6. 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 ...?
  7. 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