Reduce direct jQuery usage in tests.

tests/unit/test-module-for-acceptance-test.js

@@ -1,5 +1,4 @@
 import { test } from 'qunit';
-import $ from 'jquery';
 import EmberRouter from '@ember/routing/router';
 import EmberApplication from '@ember/application';
 import { TestModuleForAcceptance } from 'ember-test-helpers';
@@ -40,7 +39,8 @@ moduleForAcceptance('TestModuleForAcceptance | Lifecycle', {
 
   afterTeardown(assert) {
     assert.strictEqual(getContext(), undefined);
-    assert.strictEqual($('#ember-testing').children().length, 0);
+    let testingElement = document.getElementById('ember-testing');
+    assert.strictEqual(testingElement.children.length, 0);
   },
 });
 
@@ -63,15 +63,17 @@ test('Basic acceptance test using instance test helpers', function(assert) {
   this.application.testHelpers.visit('/');
 
   this.application.testHelpers.andThen(function() {
-    assert.equal($('#ember-testing').text(), 'This is the index page.');
+    let testingElement = document.getElementById('ember-testing');
+    assert.equal(testingElement.textContent, 'This is the index page.');
   });
 });
 
 test('Basic acceptance test using global test helpers', function(assert) {
   window.visit('/');
 
   window.andThen(function() {
-    assert.equal($('#ember-testing').text(), 'This is the index page.');
+    let testingElement = document.getElementById('ember-testing');
+    assert.equal(testingElement.textContent, 'This is the index page.');
   });
 });
 

tests/unit/test-module-for-component-test.js

@@ -8,7 +8,6 @@ import Controller from '@ember/controller';
 import Component from '@ember/component';
 import EmberObject from '@ember/object';
 import EmberService, { inject as service } from '@ember/service';
-import $ from 'jquery';
 import Ember from 'ember';
 import { TestModuleForComponent } from 'ember-test-helpers';
 import hasEmberVersion from 'ember-test-helpers/has-ember-version';
@@ -57,7 +56,7 @@ var ColorController = Controller.extend({
 var BoringColor = Component.extend({
   willDestroyElement() {
     var stateIndicatesInDOM = this._state === 'inDOM';
-    var actuallyInDOM = $.contains(document, this.$()[0]);
+    var actuallyInDOM = document.contains(this.element);
 
     QUnit.config.current.assert.ok(
       actuallyInDOM === true && actuallyInDOM === stateIndicatesInDOM,
@@ -168,27 +167,28 @@ moduleForComponent('pretty-color', {
 });
 
 test('className', function(assert) {
-  // first call to this.$() renders the component.
-  assert.ok(this.$().is('.pretty-color'));
+  this.render();
+  assert.ok(this._element.matches('.pretty-color'));
 });
 
 test('template', function(assert) {
   var component = this.subject();
 
-  assert.equal($.trim(this.$().text()), 'Pretty Color:');
+  this.render();
+  assert.equal(this._element.textContent, 'Pretty Color: ');
 
   run(function() {
     component.set('name', 'green');
   });
 
-  assert.equal($.trim(this.$().text()), 'Pretty Color: green');
+  assert.equal(this._element.textContent, 'Pretty Color: green');
 });
 
 test('$', function(assert) {
   this.subject({ name: 'green' });
 
-  assert.equal($.trim(this.$('.color-name').text()), 'green');
-  assert.equal($.trim(this.$().text()), 'Pretty Color: green');
+  assert.equal(this.$('.color-name').text(), 'green');
+  assert.equal(this.$().text(), 'Pretty Color: green');
 });
 
 test('it can access the element', function(assert) {
@@ -221,7 +221,8 @@ test('className', function(assert) {
   // calling `this.$` or `this.subject.$` would
   // force it to `render` initially, so we access the `ember-testing`
   // div contents directly
-  assert.equal($.trim($('#ember-testing').text()), 'Pretty Color: red');
+  let testingElement = document.getElementById('ember-testing');
+  assert.equal(testingElement.textContent, 'Pretty Color: red');
 });
 
 test('`toString` returns the test subject', function(assert) {
@@ -271,7 +272,7 @@ test('can handle click', function(assert) {
   this.render();
 
   run(function() {
-    component.$().click();
+    component.element.click();
   });
 });
 
@@ -404,7 +405,8 @@ moduleForComponent('Component Integration Tests', {
 
 test('it can render a template', function(assert) {
   this.render(hbs`<span>Hello</span>`);
-  assert.equal(this.$('span').text(), 'Hello');
+  let actual = this._element.querySelector('span').textContent;
+  assert.equal(actual, 'Hello');
 });
 
 test('it can access the element', function(assert) {
@@ -436,9 +438,10 @@ test('it complains if you try to use subject()', function(assert) {
 test('it can access the full container', function(assert) {
   this.set('myColor', 'red');
   this.render(hbs`{{my-component name=myColor}}`);
-  assert.equal(this.$('span').text(), 'red');
+
+  assert.equal(this._element.querySelector('span').textContent, 'red');
   this.set('myColor', 'blue');
-  assert.equal(this.$('span').text(), 'blue');
+  assert.equal(this._element.querySelector('span').textContent, 'blue');
 });
 
 test('it can handle actions', function(assert) {
@@ -447,13 +450,13 @@ test('it can handle actions', function(assert) {
   this.on('didFoo', function(thing) {
     handlerArg = thing;
   });
-  this.$('button').click();
+  this._element.querySelector('button').click();
   assert.equal(handlerArg, 42);
 });
 
 test('it accepts precompiled templates', function(assert) {
   this.render(hbs`<span>Hello</span>`);
-  assert.equal(this.$('span').text(), 'Hello');
+  assert.equal(this._element.querySelector('span').textContent, 'Hello');
 });
 
 test('it supports DOM events', function(assert) {
@@ -467,8 +470,8 @@ test('it supports DOM events', function(assert) {
     }),
   });
   this.render(hbs`{{my-component}}`);
-  this.$('.target').click();
-  assert.equal(this.$('.value').text(), '1');
+  this._element.querySelector('.target').click();
+  assert.equal(this._element.querySelector('.value').textContent, '1');
 });
 
 test('it supports updating an input', function(assert) {
@@ -760,7 +763,7 @@ moduleForComponent('Component Integration Tests: willDestoryElement', {
       'component:my-component': Component.extend({
         willDestroyElement() {
           var stateIndicatesInDOM = this._state === 'inDOM';
-          var actuallyInDOM = $.contains(document, this.$()[0]);
+          var actuallyInDOM = document.contains(this._element);
 
           QUnit.config.current.assert.ok(
             actuallyInDOM === true && actuallyInDOM === stateIndicatesInDOM,