refactor: drop jQuery from tests except for jQuery plugin bootstrap-datepicker

tests/acceptance/build-info-test.js

@@ -1,7 +1,6 @@
 import { visit } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
-import jQuery from 'jquery';
 
 module('Acceptance | build info', function(hooks) {
   setupApplicationTest(hooks);
@@ -9,11 +8,15 @@ module('Acceptance | build info', function(hooks) {
   test('version is included as html meta tag', async function(assert) {
     await visit('/');
 
-    // ToDo: figure out why find() helper does not work but jQuery does
+    // head is not available through `find()`, `assert.dom()` or `this.element.querySelector()`
-    assert.ok(jQuery('head meta[name="build-info"]').length === 1, 'tag exists');
+    // cause they are scoped to `#ember-testing-container`.
+    let buildInfoEl = document.head.querySelector('head meta[name="build-info"]');
+    assert.ok(buildInfoEl, 'tag exists');
+
+    let content = buildInfoEl.content;
     assert.ok(
-      jQuery('head meta[name="build-info"]').attr('content').match(/^version=\d[\d.]+\d(-(alpha|beta|rc)\d)?(\+[\da-z]{8})?$/) !== null,
+      /^version=\d[\d.]+\d(-(alpha|beta|rc)\d)?(\+[\da-z]{8})?$/.test(content),
-      'format '.concat(jQuery('head meta[name="build-info"]').attr('content'), ' is correct')
+      `${content} is valid version string`
     );
   });
 });

tests/acceptance/participate-in-a-poll-test.js

@@ -12,7 +12,6 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { t } from 'ember-i18n/test-support';
 import pollHasUser, { pollHasUsersCount } from 'croodle/tests/helpers/poll-has-user';
 import pollParticipate from 'croodle/tests/helpers/poll-participate';
-import jQuery from 'jquery';
 
 module('Acceptance | participate in a poll', function(hooks) {
   hooks.beforeEach(function() {
@@ -114,20 +113,18 @@ module('Acceptance | participate in a poll', function(hooks) {
 
     await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
     assert.equal(currentRouteName(), 'poll.participation');
+    assert.dom('modal-saving-failed-modal')
+      .doesNotExist('failed saving notification is not shown before attempt to save');
 
     await pollParticipate('foo bar', ['yes', 'no']);
-    assert.ok(
+    assert.dom('#modal-saving-failed-modal')
-      jQuery(find('#modal-saving-failed-modal')).is(':visible'),
+      .exists('user gets notified that saving failed');
-      'user gets notified that saving failed'
-    );
 
     this.server.post('/users');
 
     await click('#modal-saving-failed-modal button');
-    assert.notOk(
+    assert.dom('#modal-saving-failed-modal')
-      jQuery(find('#modal-saving-failed-modal')).is(':visible'),
+      .doesNotExist('Notification is hidden after another save attempt was successful');
-      'modal is hidden after saving was successful'
-    );
     assert.equal(currentRouteName(), 'poll.evaluation');
     pollHasUsersCount(assert, 1, 'user is added to user selections table');
     pollHasUser(assert, 'foo bar', [t('answerTypes.yes.label'), t('answerTypes.no.label')]);

tests/acceptance/view-poll-test.js

@@ -1,4 +1,4 @@
-import { find, click, visit } from '@ember/test-helpers';
+import { click, visit } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
@@ -6,7 +6,6 @@ import switchTab from 'croodle/tests/helpers/switch-tab';
 import pageParticipation from 'croodle/tests/pages/poll/participation';
 import pageEvaluation from 'croodle/tests/pages/poll/evaluation';
 import moment from 'moment';
-import jQuery from 'jquery';
 
 module('Acceptance | view poll', function(hooks) {
   hooks.beforeEach(function() {
@@ -138,10 +137,8 @@ module('Acceptance | view poll', function(hooks) {
     });
 
     await visit(`/poll/${poll.id}?encryptionKey=${encryptionKey}`);
-    assert.ok(
+    assert.dom('#modal-choose-timezone-modal')
-      jQuery(find('#modal-choose-timezone-modal')).is(':visible'),
+      .exists('user is asked which timezone should be used');
-      'user gets asked which timezone should be used'
-    );
 
     await click('#modal-choose-timezone-modal button.use-local-timezone');
     assert.deepEqual(
@@ -151,10 +148,7 @@ module('Acceptance | view poll', function(hooks) {
         moment.tz('2016-01-01T11:11:00.000Z', timezoneUser).locale('en').format('LLLL')
       ]
     );
-    assert.notOk(
+    assert.dom('#modal-choose-timezone-modal').doesNotExist('modal is closed');
-      jQuery(find('#modal-choose-timezone-modal')).is(':visible'),
-      'modal is closed'
-    );
 
     await switchTab('evaluation');
     assert.deepEqual(
@@ -197,10 +191,8 @@ module('Acceptance | view poll', function(hooks) {
     });
 
     await visit(`/poll/${poll.id}?encryptionKey=${encryptionKey}`);
-    assert.ok(
+    assert.dom('#modal-choose-timezone-modal')
-      jQuery(find('#modal-choose-timezone-modal')).is(':visible'),
+      .exists('user is asked which timezone should be used');
-      'user gets asked which timezone should be used'
-    );
 
     await click('#modal-choose-timezone-modal button.use-poll-timezone');
     assert.deepEqual(
@@ -210,10 +202,7 @@ module('Acceptance | view poll', function(hooks) {
         moment.tz('2016-01-01T11:11:00.000Z', timezonePoll).locale('en').format('LLLL')
       ]
     );
-    assert.notOk(
+    assert.dom('#modal-choose-timezone-modal').doesNotExist('modal is closed');
-      jQuery(find('#modal-choose-timezone-modal')).is(':visible'),
-      'modal is closed'
-    );
 
     await switchTab('evaluation');
     assert.deepEqual(

tests/integration/components/create-options-dates-test.js

@@ -1,9 +1,10 @@
 import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import moment from 'moment';
+import jQuery from 'jquery';
 
 module('Integration | Component | create options dates', function(hooks) {
   setupRenderingTest(hooks);
@@ -12,9 +13,7 @@ module('Integration | Component | create options dates', function(hooks) {
     this.set('options', []);
     await render(hbs`{{#bs-form as |form|}}{{create-options-dates options=options form=form}}{{/bs-form}}`);
 
-    assert.equal(
+    assert.dom('.days .datepicker').exists();
-      this.$('.days .ember-view:has(.datepicker:first-child)').length, 1
-    );
   });
 
   test('bootstrap-datepicker shows dates in options', async function(assert) {
@@ -25,12 +24,12 @@ module('Integration | Component | create options dates', function(hooks) {
     await render(hbs`{{#bs-form as |form|}}{{create-options-dates options=options form=form}}{{/bs-form}}`);
 
     assert.equal(
-      this.$('.days .ember-view:has(.datepicker:first-child)').datepicker('getDates')[0].toISOString(),
+      jQuery(find('.days .datepicker').parentElement).datepicker('getDates')[0].toISOString(),
       moment('2015-01-01').toISOString(),
       'date is correct (a)'
     );
     assert.equal(
-      this.$('.days .ember-view:has(.datepicker:first-child)').datepicker('getDates')[1].toISOString(),
+      jQuery(find('.days .datepicker').parentElement).datepicker('getDates')[1].toISOString(),
       moment('2015-01-02').toISOString(),
       'date is correct (b)'
     );
@@ -40,7 +39,7 @@ module('Integration | Component | create options dates', function(hooks) {
     this.set('options', []);
     await render(hbs`{{#bs-form as |form|}}{{create-options-dates options=options form=form}}{{/bs-form}}`);
 
-    this.$('.days .ember-view:has(.datepicker:first-child)').datepicker('setDates', [
+    jQuery(find('.days .datepicker').parentElement).datepicker('setDates', [
       moment('2015-01-01').toDate(),
       moment('2015-01-02').toDate()
     ]);
@@ -55,7 +54,7 @@ module('Integration | Component | create options dates', function(hooks) {
       'dates are correct (b)'
     );
 
-    this.$('.days .ember-view:has(.datepicker:first-child)').datepicker('setDates', [
+    jQuery(find('.days .datepicker').parentElement).datepicker('setDates', [
       moment('2016-12-31').toDate(),
       moment('2016-01-01').toDate()
     ]);

tests/integration/components/create-options-datetime-test.js

@@ -11,7 +11,6 @@ import {
   triggerEvent
 } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
-import jQuery from 'jquery';
 import moment from 'moment';
 
 module('Integration | Component | create options datetime', function(hooks) {
@@ -113,15 +112,15 @@ module('Integration | Component | create options datetime', function(hooks) {
       'there are two not hidden labels for two different dates'
     );
     assert.notOk(
-      this.$('.days .form-group').eq(0).find('label').hasClass('sr-only'),
+      findAll('.days .form-group')[0].querySelector('label').classList.contains('sr-only'),
       'the first label is shown'
     );
     assert.ok(
-      this.$('.days .form-group').eq(1).find('label').hasClass('sr-only'),
+      findAll('.days .form-group')[1].querySelector('label').classList.contains('sr-only'),
       'the repeated label on second form-group is hidden by sr-only class'
     );
     assert.notOk(
-      this.$('.days .form-group').eq(2).find('label').hasClass('sr-only'),
+      findAll('.days .form-group')[2].querySelector('label').classList.contains('sr-only'),
       'the new label on third form-group is shown'
     );
   });
@@ -154,12 +153,12 @@ module('Integration | Component | create options datetime', function(hooks) {
       'another input field is added'
     );
     assert.equal(
-      this.$('.days .form-group').eq(1).find('label').text(),
+      findAll('.days .form-group')[1].querySelector('label').textContent,
-      this.$('.days .form-group').eq(0).find('label').text(),
+      findAll('.days .form-group')[0].querySelector('label').textContent,
       'new input has correct label'
     );
     assert.ok(
-      this.$('.days .form-group').eq(1).find('label').hasClass('sr-only'),
+      findAll('.days .form-group')[1].querySelector('label').classList.contains('sr-only'),
       'label ofnew input is hidden cause it\'s repeated'
     );
   });
@@ -265,7 +264,7 @@ module('Integration | Component | create options datetime', function(hooks) {
     await render(hbs`{{create-options-datetime dates=poll.options}}`);
     await click('button.adopt-times-of-first-day');
     assert.deepEqual(
-      this.$('.days .form-group input').map((i, el) => jQuery(el).val()).toArray(),
+      findAll('.days .form-group input').map((el) => el.value),
       ['10:00', '22:00', '10:00', '22:00', '10:00', '22:00'],
       'times were adopted correctly'
     );
@@ -295,7 +294,7 @@ module('Integration | Component | create options datetime', function(hooks) {
       'one excess time input got deleted'
     );
     assert.deepEqual(
-      this.$('.days .form-group input').map((i, el) => jQuery(el).val()).toArray(),
+      findAll('.days .form-group input').map((el) => el.value),
       ['10:00', '10:00'],
       'additional time on secondary day got deleted'
     );

tests/integration/components/create-options-test.js

@@ -1,7 +1,7 @@
 import { run } from '@ember/runloop';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, findAll, blur, fillIn, focus } from '@ember/test-helpers';
+import { render, find, findAll, blur, fillIn, focus } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import hasComponent from 'croodle/tests/helpers/201-created/raw/has-component';
 
@@ -75,12 +75,11 @@ module('Integration | Component | create options', function(hooks) {
     await fillIn(findAll('input')[1], 'foo');
     await blur(findAll('input')[1]);
     assert.ok(
-      this.$('.form-group').eq(1).hasClass('has-error'),
+      findAll('.form-group')[1].classList.contains('has-error'),
       'second input field has validation error'
     );
-
     assert.ok(
-      this.$('.form-group').eq(1).find('.help-block').length === 1,
+      findAll('.form-group')[1].querySelector('.help-block'),
       'validation error is shown'
     );
 
@@ -169,28 +168,28 @@ module('Integration | Component | create options', function(hooks) {
     );
 
     assert.ok(
-      this.$('form').children().hasClass('label-has-no-validation'),
+     find('form').firstElementChild.classList.contains('label-has-no-validation'),
       'does not show validation state if there wasn\'t any user interaction yet'
     );
 
     await focus(findAll('input')[0]);
     await blur(findAll('input')[0]);
     assert.ok(
-      this.$('form').children().hasClass('label-has-error'),
+     find('form').firstElementChild.classList.contains('label-has-error'),
       'shows as having error if atleast on field has an error'
     );
 
     await fillIn(findAll('input')[0], 'foo');
     await blur(findAll('input')[0]);
     assert.ok(
-      this.$('form').children().hasClass('label-has-no-validation'),
+     find('form').firstElementChild.classList.contains('label-has-no-validation'),
       'does not show validation state if no field has error but not all fields are showing error yet'
     );
 
     await fillIn(findAll('input')[1], 'bar');
     await blur(findAll('input')[1]);
     assert.ok(
-      this.$('form').children().hasClass('label-has-success'),
+     find('form').firstElementChild.classList.contains('label-has-success'),
       'shows as having success if all fields are showing success'
     );
   });

tests/integration/components/create-options-text-test.js

@@ -2,9 +2,8 @@ import { run } from '@ember/runloop';
 import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, findAll, click } from '@ember/test-helpers';
+import { render, findAll, click, fillIn } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
-import jQuery from 'jquery';
 
 module('Integration | Component | create options text', function(hooks) {
   setupRenderingTest(hooks);
@@ -34,9 +33,7 @@ module('Integration | Component | create options text', function(hooks) {
       'correct amount of input fields'
     );
     assert.deepEqual(
-      this.$('input').map(function() {
+      findAll('input').map((el) => el.value),
-        return jQuery(this).val();
-      }).get(),
       ['foo', 'bar', 'baz'],
       'input fields have correct values and order'
     );
@@ -67,7 +64,7 @@ module('Integration | Component | create options text', function(hooks) {
       'has correct amount of input fields after change'
     );
     assert.equal(
-      this.$('input').eq(2).val(),
+      findAll('input')[2].value,
       'baz',
       'input field was added with correct value'
     );
@@ -80,7 +77,7 @@ module('Integration | Component | create options text', function(hooks) {
     ]);
     await render(hbs`{{#bs-form as |form|}}{{create-options-text options=options form=form}}{{/bs-form}}`);
 
-    this.$('input').eq(0).val('baz').trigger('change');
+    await fillIn(findAll('input')[0], 'baz');
     assert.equal(
       this.get('options')[0].get('title'),
       'baz',
@@ -114,25 +111,19 @@ module('Integration | Component | create options text', function(hooks) {
       'there are two input fields before'
     );
 
-    run(() => {
+    await click(findAll('.form-group .add')[0]);
-      this.$('.form-group .add').eq(0).click();
-    });
     assert.equal(
       findAll('.form-group input').length,
       3,
       'another input field is added'
     );
     assert.deepEqual(
-      this.$('input').map(function() {
+      findAll('input').map((el) => el.value),
-        return jQuery(this).val();
-      }).get(),
       ['foo', '', 'bar'],
       'it is added at correct position'
     );
 
-    run(() => {
+    await fillIn(findAll('.form-group input')[1], 'baz')
-      this.$('.form-group input').eq(1).val('baz').trigger('change');
-    });
     assert.equal(
       this.get('options').objectAt(1).get('title'),
       'baz',

tests/integration/components/poll-evaluation-chart-test.js

@@ -73,6 +73,6 @@ module('Integration | Component | poll evaluation chart', function(hooks) {
       })
     ]);
     await render(hbs`{{poll-evaluation-chart options=options answerType=answerType users=users}}`);
-    assert.ok(this.$('canvas'), 'it renders a canvas element');
+    assert.dom('canvas').exists('it renders a canvas element');
   });
 });