4e6d046ec7
Croodle shows a modal if saving a participation fails. The modal allows a user to retry the save attempt. While it was always possible to close the button by clicking on backdrop or using escape key, a button to do so was missing. A user may not know about the user ways and may see reloading the page as only possibilty to close the modal if he doesn't want to retry again. This adds the missing abort button and fixes some smaller bugs including: - The modal was missing a title. - If the modal was closed once it wasn't reopened on another failed saving attemp unless the user has visit another page in between. - Several arguments were passed to <BsModal> that weren't existing at all.
235 lines
9 KiB
JavaScript
235 lines
9 KiB
JavaScript
import {
|
|
click,
|
|
find,
|
|
findAll,
|
|
currentURL,
|
|
currentRouteName,
|
|
waitFor,
|
|
visit
|
|
} from '@ember/test-helpers';
|
|
import { module, test } from 'qunit';
|
|
import { setupApplicationTest } from 'ember-qunit';
|
|
import { t } from 'ember-i18n/test-support';
|
|
import { setupMirage } from 'ember-cli-mirage/test-support';
|
|
import PollEvaluationPage from 'croodle/tests/pages/poll/evaluation';
|
|
import pollParticipate from 'croodle/tests/helpers/poll-participate';
|
|
|
|
module('Acceptance | participate in a poll', function(hooks) {
|
|
let yesLabel;
|
|
let noLabel;
|
|
|
|
hooks.beforeEach(function() {
|
|
window.localStorage.setItem('locale', 'en');
|
|
});
|
|
|
|
setupApplicationTest(hooks);
|
|
setupMirage(hooks);
|
|
|
|
hooks.beforeEach(function() {
|
|
yesLabel = t('answerTypes.yes.label').toString();
|
|
noLabel = t('answerTypes.no.label').toString();
|
|
});
|
|
|
|
test('participate in a default poll', async function(assert) {
|
|
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|
let poll = this.server.create('poll', {
|
|
encryptionKey
|
|
});
|
|
|
|
await visit(`/poll/${poll.id}?encryptionKey=${encryptionKey}`);
|
|
assert.equal(currentRouteName(), 'poll.participation', 'poll is redirected to poll.participation');
|
|
|
|
await pollParticipate('Max Meiner', ['yes', 'no']);
|
|
assert.equal(currentRouteName(), 'poll.evaluation');
|
|
assert.equal(
|
|
currentURL().split('?')[1],
|
|
`encryptionKey=${encryptionKey}`,
|
|
'encryption key is part of query params'
|
|
);
|
|
assert.equal(PollEvaluationPage.participants.length, 1, 'user is added to participants table');
|
|
let participant = PollEvaluationPage.participants.filterBy('name', 'Max Meiner')[0];
|
|
assert.ok(participant, 'user exists in participants table');
|
|
assert.deepEqual(
|
|
participant.selections.map((_) => _.answer), [yesLabel, noLabel],
|
|
'participants table shows correct answers for new participant'
|
|
);
|
|
|
|
await click('.nav .participation');
|
|
assert.equal(currentRouteName(), 'poll.participation');
|
|
assert.equal(find('.name input').value, '', 'input for name is cleared');
|
|
assert.ok(
|
|
!findAll('input[type="radio"]').toArray().some((el) => el.checked),
|
|
'radios are cleared'
|
|
);
|
|
|
|
await pollParticipate('Peter Müller', ['yes', 'yes']);
|
|
assert.equal(currentRouteName(), 'poll.evaluation');
|
|
assert.equal(PollEvaluationPage.participants.length, 2, 'user is added to participants table');
|
|
participant = PollEvaluationPage.participants.filterBy('name', 'Peter Müller')[0];
|
|
assert.ok(participant, 'user exists in participants table');
|
|
assert.deepEqual(
|
|
participant.selections.map((_) => _.answer), [yesLabel, yesLabel],
|
|
'participants table shows correct answers for new participant'
|
|
);
|
|
});
|
|
|
|
test('participate in a poll using freetext', async function(assert) {
|
|
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|
let poll = this.server.create('poll', {
|
|
answerType: 'FreeText',
|
|
answers: [],
|
|
encryptionKey
|
|
});
|
|
|
|
await visit(`/poll/${poll.id}?encryptionKey=${encryptionKey}`)
|
|
assert.equal(currentRouteName(), 'poll.participation');
|
|
|
|
await pollParticipate('Max Manus', ['answer 1', 'answer 2']);
|
|
assert.equal(currentRouteName(), 'poll.evaluation');
|
|
assert.equal(PollEvaluationPage.participants.length, 1, 'user is added to participants table');
|
|
|
|
let participant = PollEvaluationPage.participants.filterBy('name', 'Max Manus')[0];
|
|
assert.ok(participant, 'user exists in participants table');
|
|
assert.deepEqual(
|
|
participant.selections.map((_) => _.answer), ['answer 1', 'answer 2'],
|
|
'participants table shows correct answers for new participant'
|
|
);
|
|
});
|
|
|
|
test('participate in a poll which does not force an answer to all options', async function(assert) {
|
|
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|
let poll = this.server.create('poll', {
|
|
encryptionKey,
|
|
forceAnswer: false
|
|
});
|
|
|
|
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
|
|
assert.equal(currentRouteName(), 'poll.participation');
|
|
|
|
await pollParticipate('Karl Käfer', ['yes', null]);
|
|
assert.equal(currentRouteName(), 'poll.evaluation');
|
|
assert.equal(PollEvaluationPage.participants.length, 1, 'user is added to participants table');
|
|
|
|
let participant = PollEvaluationPage.participants.filterBy('name', 'Karl Käfer')[0];
|
|
assert.ok(participant, 'user exists in participants table');
|
|
assert.deepEqual(
|
|
participant.selections.map((_) => _.answer), [yesLabel, ''],
|
|
'participants table shows correct answers for new participant'
|
|
);
|
|
});
|
|
|
|
test('participate in a poll which allows anonymous participation', async function(assert) {
|
|
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|
let poll = this.server.create('poll', {
|
|
anonymousUser: true,
|
|
encryptionKey
|
|
});
|
|
|
|
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
|
|
assert.equal(currentRouteName(), 'poll.participation');
|
|
|
|
await pollParticipate(null, ['yes', 'no']);
|
|
assert.equal(currentRouteName(), 'poll.evaluation');
|
|
assert.equal(PollEvaluationPage.participants.length, 1, 'user is added to participants table');
|
|
|
|
let participant = PollEvaluationPage.participants.filterBy('name', '')[0];
|
|
assert.ok(participant, 'user exists in participants table');
|
|
assert.deepEqual(
|
|
participant.selections.map((_) => _.answer), [yesLabel, noLabel],
|
|
'participants table shows correct answers for new participant'
|
|
);
|
|
});
|
|
|
|
test('network connectivity errors', async function(assert) {
|
|
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|
let poll = this.server.create('poll', {
|
|
encryptionKey
|
|
});
|
|
|
|
this.server.post('/users', undefined, 503);
|
|
|
|
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
|
|
assert.equal(currentRouteName(), 'poll.participation');
|
|
assert.dom('#modal-saving-failed-modal .modal-content')
|
|
.isNotVisible('failed saving notification is not shown before attempt to save');
|
|
|
|
await pollParticipate('John Doe', ['yes', 'no']);
|
|
assert.dom('#modal-saving-failed-modal .modal-content')
|
|
.isVisible('user gets notified that saving failed');
|
|
|
|
this.server.post('/users');
|
|
|
|
await click('#modal-saving-failed-modal [data-test-button="retry"]');
|
|
assert.dom('#modal-saving-failed-modal .modal-content')
|
|
.isNotVisible('Notification is hidden after another save attempt was successful');
|
|
assert.equal(currentRouteName(), 'poll.evaluation');
|
|
assert.equal(PollEvaluationPage.participants.length, 1, 'user is added to participants table');
|
|
|
|
let participant = PollEvaluationPage.participants.filterBy('name', 'John Doe')[0];
|
|
assert.ok(participant, 'user exists in participants table');
|
|
assert.deepEqual(
|
|
participant.selections.map((_) => _.answer), [yesLabel, noLabel],
|
|
'participants table shows correct answers for new participant'
|
|
);
|
|
});
|
|
|
|
test('shows loading spinner while submitting', async function(assert) {
|
|
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|
let poll = this.server.create('poll', {
|
|
encryptionKey
|
|
});
|
|
|
|
let resolveSubmission;
|
|
let resolveSubmissionWith;
|
|
this.server.post('/users', function(schema) {
|
|
return new Promise((resolve) => {
|
|
let attrs = this.normalizedRequestAttrs();
|
|
|
|
resolveSubmission = resolve;
|
|
resolveSubmissionWith = schema.users.create(attrs);
|
|
});
|
|
});
|
|
|
|
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
|
|
pollParticipate('John Doe', ['yes', 'no']);
|
|
|
|
await waitFor('[data-test-button="submit"] .spinner-border', {
|
|
timeoutMessage: 'timeout while waiting for loading spinner to appear',
|
|
});
|
|
assert.ok(true, 'loading spinner shown cause otherwise there would have been a timeout');
|
|
|
|
// resolve promise for test to finish
|
|
// need to resolve with a valid response cause otherwise Ember Data would throw
|
|
resolveSubmission(resolveSubmissionWith);
|
|
});
|
|
|
|
test('does not show validation errors while saving participation', async function(assert) {
|
|
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|
let poll = this.server.create('poll', {
|
|
encryptionKey
|
|
});
|
|
|
|
let resolveSubmission;
|
|
let resolveSubmissionWith;
|
|
this.server.post('/users', function(schema) {
|
|
return new Promise((resolve) => {
|
|
let attrs = this.normalizedRequestAttrs();
|
|
|
|
resolveSubmission = resolve;
|
|
resolveSubmissionWith = schema.users.create(attrs);
|
|
});
|
|
});
|
|
|
|
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
|
|
pollParticipate('John Doe', ['yes', 'no']);
|
|
|
|
await waitFor('[data-test-button="submit"] .spinner-border', {
|
|
timeoutMessage: 'timeout while waiting for loading spinner to appear',
|
|
});
|
|
assert.dom('.is-invalid').doesNotExist('does not show any validation error');
|
|
|
|
// resolve promise for test to finish
|
|
// need to resolve with a valid response cause otherwise Ember Data would throw
|
|
resolveSubmission(resolveSubmissionWith);
|
|
});
|
|
});
|