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

This commit is contained in:
Jeldrik Hanschke 2019-01-18 19:59:21 +01:00 committed by jelhan
parent 2def069142
commit 5b34199f41
8 changed files with 51 additions and 74 deletions

View file

@ -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
assert.ok(jQuery('head meta[name="build-info"]').length === 1, 'tag exists');
// head is not available through `find()`, `assert.dom()` or `this.element.querySelector()`
// 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,
'format '.concat(jQuery('head meta[name="build-info"]').attr('content'), ' is correct')
/^version=\d[\d.]+\d(-(alpha|beta|rc)\d)?(\+[\da-z]{8})?$/.test(content),
`${content} is valid version string`
);
});
});

View file

@ -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(
jQuery(find('#modal-saving-failed-modal')).is(':visible'),
'user gets notified that saving failed'
);
assert.dom('#modal-saving-failed-modal')
.exists('user gets notified that saving failed');
this.server.post('/users');
await click('#modal-saving-failed-modal button');
assert.notOk(
jQuery(find('#modal-saving-failed-modal')).is(':visible'),
'modal is hidden after saving was successful'
);
assert.dom('#modal-saving-failed-modal')
.doesNotExist('Notification is hidden after another save attempt 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')]);

View file

@ -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(
jQuery(find('#modal-choose-timezone-modal')).is(':visible'),
'user gets asked which timezone should be used'
);
assert.dom('#modal-choose-timezone-modal')
.exists('user is 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(
jQuery(find('#modal-choose-timezone-modal')).is(':visible'),
'modal is closed'
);
assert.dom('#modal-choose-timezone-modal').doesNotExist('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(
jQuery(find('#modal-choose-timezone-modal')).is(':visible'),
'user gets asked which timezone should be used'
);
assert.dom('#modal-choose-timezone-modal')
.exists('user is 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(
jQuery(find('#modal-choose-timezone-modal')).is(':visible'),
'modal is closed'
);
assert.dom('#modal-choose-timezone-modal').doesNotExist('modal is closed');
await switchTab('evaluation');
assert.deepEqual(

View file

@ -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(
this.$('.days .ember-view:has(.datepicker:first-child)').length, 1
);
assert.dom('.days .datepicker').exists();
});
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()
]);

View file

@ -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(),
this.$('.days .form-group').eq(0).find('label').text(),
findAll('.days .form-group')[1].querySelector('label').textContent,
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'
);

View file

@ -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'
);
});

View file

@ -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() {
return jQuery(this).val();
}).get(),
findAll('input').map((el) => el.value),
['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(() => {
this.$('.form-group .add').eq(0).click();
});
await click(findAll('.form-group .add')[0]);
assert.equal(
findAll('.form-group input').length,
3,
'another input field is added'
);
assert.deepEqual(
this.$('input').map(function() {
return jQuery(this).val();
}).get(),
findAll('input').map((el) => el.value),
['foo', '', 'bar'],
'it is added at correct position'
);
run(() => {
this.$('.form-group input').eq(1).val('baz').trigger('change');
});
await fillIn(findAll('.form-group input')[1], 'baz')
assert.equal(
this.get('options').objectAt(1).get('title'),
'baz',

View file

@ -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');
});
});