Integration tests use native DOM instead of jQuery

Author: alexdiliberto

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased][unreleased]
 ### Updated
   - `package.json` dependencies
+  - Integration tests now use standard DOM instead of jQuery
 
 ### Removed
   - Acceptance tests

tests/integration/components/t-add-test.js

@@ -18,7 +18,7 @@ test('it renders', function(assert) {
 
   this.render(hbs`{{t-add}}`);
 
-  assert.equal(this.$().text().trim(), 'add item');
+  assert.equal(find('button').textContent.trim(), 'add item');
 
   // Template block usage:
   this.render(hbs`
@@ -27,22 +27,23 @@ test('it renders', function(assert) {
     {{/t-add}}
   `);
 
-  assert.equal(this.$().text().trim(), 'add item');
+  assert.equal(find('button').textContent.trim(), 'add item');
 });
 
 test('it creates an add transformicon with defaults', function(assert) {
-  assert.expect(5);
+  assert.expect(6);
 
   this.render(hbs`{{t-add}}`);
   percySnapshot(assert);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.equal(compButton.attr('type'), 'button');
-  assert.equal(compButton.attr('aria-label'), 'add item');
-  assert.ok(compButton.hasClass('tcon'));
-  assert.ok(compButton.hasClass('tcon-plus'));
-  assert.ok(compButton.hasClass('tcon-plus--minus'));
+  assert.equal(button.getAttribute('type'), 'button');
+  assert.equal(button.getAttribute('aria-label'), 'add item');
+  assert.ok(button.classList.contains('tcon'));
+  assert.ok(button.classList.contains('tcon-plus'));
+  assert.ok(button.classList.contains('tcon-plus--minus'));
+  assert.notOk(button.classList.contains('tcon-transform'));
 });
 
 test('it creates an add transformicon with `is-added=true`', function(assert) {
@@ -51,31 +52,31 @@ test('it creates an add transformicon with `is-added=true`', function(assert) {
   this.render(hbs`{{t-add is-added=true}}`);
   percySnapshot(assert);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.ok(compButton.hasClass('tcon-transform'));
+  assert.ok(button.classList.contains('tcon-transform'));
 });
 
 test('it creates an add transformicon with a non-default animation `a="check"`', function(assert) {
   assert.expect(1);
 
   this.render(hbs`{{t-add a="check"}}`);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.ok(compButton.hasClass('tcon-plus--check'));
+  assert.ok(button.classList.contains('tcon-plus--check'));
 });
 
 test('user can click on the transformicon', function(assert) {
   assert.expect(2);
 
   this.render(hbs`{{t-add id="t-add"}}`);
 
-  let elem = find('#t-add');
-  assert.equal(this.$(elem).hasClass('tcon-transform'), false);
+  let button = find('#t-add');
+  assert.equal(button.classList.contains('tcon-transform'), false);
 
   click('#t-add');
   percySnapshot(assert);
 
-  assert.equal(this.$(elem).hasClass('tcon-transform'), true);
+  assert.equal(button.classList.contains('tcon-transform'), true);
 });

tests/integration/components/t-form-test.js

@@ -18,7 +18,7 @@ test('it renders', function(assert) {
 
   this.render(hbs`{{t-form}}`);
 
-  assert.equal(this.$().text().trim(), 'toggle search');
+  assert.equal(find('button').textContent.trim(), 'toggle search');
 
   // Template block usage:
   this.render(hbs`
@@ -27,21 +27,22 @@ test('it renders', function(assert) {
     {{/t-form}}
   `);
 
-  assert.equal(this.$().text().trim(), 'toggle search');
+  assert.equal(find('button').textContent.trim(), 'toggle search');
 });
 
 test('it creates a form transformicon with defaults', function(assert) {
-  assert.expect(4);
+  assert.expect(5);
 
   this.render(hbs`{{t-form}}`);
   percySnapshot(assert);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.equal(compButton.attr('type'), 'button');
-  assert.equal(compButton.attr('aria-label'), 'toggle search');
-  assert.ok(compButton.hasClass('tcon'));
-  assert.ok(compButton.hasClass('tcon-search--xcross'));
+  assert.equal(button.getAttribute('type'), 'button');
+  assert.equal(button.getAttribute('aria-label'), 'toggle search');
+  assert.ok(button.classList.contains('tcon'));
+  assert.ok(button.classList.contains('tcon-search--xcross'));
+  assert.notOk(button.classList.contains('tcon-transform'));
 });
 
 test('it creates a form transformicon with `is-searching=true`', function(assert) {
@@ -50,21 +51,21 @@ test('it creates a form transformicon with `is-searching=true`', function(assert
   this.render(hbs`{{t-form is-searching=true}}`);
   percySnapshot(assert);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.ok(compButton.hasClass('tcon-transform'));
+  assert.ok(button.classList.contains('tcon-transform'));
 });
 
 test('user can click on the transformicon', function(assert) {
   assert.expect(2);
 
   this.render(hbs`{{t-form id="t-form"}}`);
 
-  let elem = find('#t-form');
-  assert.equal(this.$(elem).hasClass('tcon-transform'), false);
+  let button = find('#t-form');
+  assert.equal(button.classList.contains('tcon-transform'), false);
 
   click('#t-form');
   percySnapshot(assert);
 
-  assert.equal(this.$(elem).hasClass('tcon-transform'), true);
+  assert.equal(button.classList.contains('tcon-transform'), true);
 });

tests/integration/components/t-grid-test.js

@@ -18,7 +18,7 @@ test('it renders', function(assert) {
 
   this.render(hbs`{{t-grid}}`);
 
-  assert.equal(this.$().text().trim(), 'toggle grid');
+  assert.equal(find('button').textContent.trim(), 'toggle grid');
 
   // Template block usage:
   this.render(hbs`
@@ -27,22 +27,23 @@ test('it renders', function(assert) {
     {{/t-grid}}
   `);
 
-  assert.equal(this.$().text().trim(), 'toggle grid');
+  assert.equal(find('button').textContent.trim(), 'toggle grid');
 });
 
 test('it creates a grid transformicon with defaults', function(assert) {
-  assert.expect(5);
+  assert.expect(6);
 
   this.render(hbs`{{t-grid}}`);
   percySnapshot(assert);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.equal(compButton.attr('type'), 'button');
-  assert.equal(compButton.attr('aria-label'), 'toggle grid');
-  assert.ok(compButton.hasClass('tcon'));
-  assert.ok(compButton.hasClass('tcon-grid'));
-  assert.ok(compButton.hasClass('tcon-grid--rearrange'));
+  assert.equal(button.getAttribute('type'), 'button');
+  assert.equal(button.getAttribute('aria-label'), 'toggle grid');
+  assert.ok(button.classList.contains('tcon'));
+  assert.ok(button.classList.contains('tcon-grid'));
+  assert.ok(button.classList.contains('tcon-grid--rearrange'));
+  assert.notOk(button.classList.contains('tcon-transform'));
 });
 
 test('it creates a grid transformicon with `is-open=true`', function(assert) {
@@ -51,31 +52,31 @@ test('it creates a grid transformicon with `is-open=true`', function(assert) {
   this.render(hbs`{{t-grid is-open=true}}`);
   percySnapshot(assert);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.ok(compButton.hasClass('tcon-transform'));
+  assert.ok(button.classList.contains('tcon-transform'));
 });
 
 test('it creates a grid transformicon with a non-default animation `a="collapse"`', function(assert) {
   assert.expect(1);
 
   this.render(hbs`{{t-grid a="collapse"}}`);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.ok(compButton.hasClass('tcon-grid--collapse'));
+  assert.ok(button.classList.contains('tcon-grid--collapse'));
 });
 
 test('user can click on the transformicon', function(assert) {
   assert.expect(2);
 
   this.render(hbs`{{t-grid id="t-grid"}}`);
 
-  let elem = find('#t-grid');
-  assert.equal(this.$(elem).hasClass('tcon-transform'), false);
+  let button = find('#t-grid');
+  assert.equal(button.classList.contains('tcon-transform'), false);
 
   click('#t-grid');
   percySnapshot(assert);
 
-  assert.equal(this.$(elem).hasClass('tcon-transform'), true);
+  assert.equal(button.classList.contains('tcon-transform'), true);
 });

tests/integration/components/t-loader-test.js

@@ -1,5 +1,6 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { find } from 'ember-native-dom-helpers/test-support/helpers';
 
 /*
  * {{t-loader}}
@@ -16,7 +17,7 @@ test('it renders', function(assert) {
 
   this.render(hbs`{{t-loader}}`);
 
-  assert.equal(this.$().text().trim(), 'loading');
+  assert.equal(find('span').textContent.trim(), 'loading');
 
   // Template block usage:
   this.render(hbs`
@@ -25,16 +26,16 @@ test('it renders', function(assert) {
     {{/t-loader}}
   `);
 
-  assert.equal(this.$().text().trim(), 'loading');
+  assert.equal(find('span').textContent.trim(), 'loading');
 });
 
 test('it creates a loader transformicon with defaults', function(assert) {
   assert.expect(2);
 
   this.render(hbs`{{t-loader}}`);
 
-  let compSpan = this.$('span');
+  let span = find('span');
 
-  assert.equal(compSpan.attr('aria-label'), 'loading');
-  assert.ok(compSpan.hasClass('tcon-loader--spinner360'));
+  assert.equal(span.getAttribute('aria-label'), 'loading');
+  assert.ok(span.classList.contains('tcon-loader--spinner360'));
 });

tests/integration/components/t-mail-test.js

@@ -18,7 +18,7 @@ test('it renders', function(assert) {
 
   this.render(hbs`{{t-mail}}`);
 
-  assert.equal(this.$().text().trim(), 'open mailbox');
+  assert.equal(find('button').textContent.trim(), 'open mailbox');
 
   // Template block usage:
   this.render(hbs`
@@ -27,22 +27,23 @@ test('it renders', function(assert) {
     {{/t-mail}}
   `);
 
-  assert.equal(this.$().text().trim(), 'open mailbox');
+  assert.equal(find('button').textContent.trim(), 'open mailbox');
 });
 
 test('it creates a mail transformicon with defaults', function(assert) {
-  assert.expect(5);
+  assert.expect(6);
 
   this.render(hbs`{{t-mail}}`);
   percySnapshot(assert);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.equal(compButton.attr('role'), 'button');
-  assert.equal(compButton.attr('type'), 'button');
-  assert.equal(compButton.attr('aria-label'), 'open mailbox');
-  assert.ok(compButton.hasClass('tcon'));
-  assert.ok(compButton.hasClass('tcon-mail--envelope'));
+  assert.equal(button.getAttribute('role'), 'button');
+  assert.equal(button.getAttribute('type'), 'button');
+  assert.equal(button.getAttribute('aria-label'), 'open mailbox');
+  assert.ok(button.classList.contains('tcon'));
+  assert.ok(button.classList.contains('tcon-mail--envelope'));
+  assert.notOk(button.classList.contains('tcon-transform'));
 });
 
 test('it creates a mail transformicon with `is-open=false`', function(assert) {
@@ -51,21 +52,21 @@ test('it creates a mail transformicon with `is-open=false`', function(assert) {
   this.render(hbs`{{t-mail is-open=false}}`);
   percySnapshot(assert);
 
-  let compButton = this.$('button');
+  let button = find('button');
 
-  assert.ok(compButton.hasClass('tcon-transform'));
+  assert.ok(button.classList.contains('tcon-transform'));
 });
 
 test('user can click on the transformicon', function(assert) {
   assert.expect(2);
 
   this.render(hbs`{{t-mail id="t-mail"}}`);
 
-  let elem = find('#t-mail');
-  assert.equal(this.$(elem).hasClass('tcon-transform'), false);
+  let button = find('#t-mail');
+  assert.equal(button.classList.contains('tcon-transform'), false);
 
   click('#t-mail');
   percySnapshot(assert);
 
-  assert.equal(this.$(elem).hasClass('tcon-transform'), true);
+  assert.equal(button.classList.contains('tcon-transform'), true);
 });