NoLog.cz/decide.nolog.cz
6
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Improve test coverage for validation on participation form (#308)

Browse source 
* add tests that participation form is validated
* assert that first invalid form element is focused on invalid submission attempt
This commit is contained in:
Jeldrik Hanschke 2019-11-20 14:52:23 +01:00 committed by GitHub
parent d2fcba466a
commit d9b1bf7b5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 89 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/templates/poll/participation.hbs
View file

@ -14,9 +14,10 @@
placeholder=(t "poll.input.newUserName.placeholder")
property="name"
classNames="name"
data-test-form-element="name"
}}
<div class="selections">
{{#each selections as |selection index|}}
{{#each selections as |selection|}}
{{#if isFreeText}}
{{form.element
controlType="text"
@ -47,6 +48,7 @@
property="value"
showValidationOn="change"
useIcons=false
data-test-form-element=(concat "option-" selection.labelValue)
as |el|
}}
{{#each possibleAnswers as |possibleAnswer|}}
@ -61,7 +63,7 @@
checked={{eq possibleAnswer.type el.value}}
onchange={{action (mut el.value) possibleAnswer.type}}
id={{concat el.id "_" possibleAnswer.type}}
name={{concat possibleAnswer.type index}}
name={{selection.labelValue}}
>
<label class="custom-control-label" for={{concat el.id "_" possibleAnswer.type}}>
{{possibleAnswer.label}}

107
tests/acceptance/participate-in-a-poll-test.js
View file

@ -203,33 +203,96 @@ module('Acceptance | participate in a poll', function(hooks) {
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);
module('validation', function() {
test('shows validation errors for participation form on submit', async function(assert) {
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
let poll = this.server.create('poll', {
encryptionKey,
});
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
await click('button[type="submit"]');
assert.dom('[data-test-form-element="name"] input').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2017-12-24"] input[id$="yes"]').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2017-12-24"] input[id$="no"]').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2018-01-01"] input[id$="yes"]').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2018-01-01"] input[id$="no"]').hasClass('is-invalid');
assert.dom('[data-test-form-element="name"] input').isFocused();
assert.equal(currentRouteName(), 'poll.participation', 'invalid form prevents a transition');
});
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
pollParticipate('John Doe', ['yes', 'no']);
test('does not show validation error for name if poll allows anonymous participation', async function(assert) {
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
let poll = this.server.create('poll', {
anonymousUser: true,
encryptionKey,
});
await waitFor('[data-test-button="submit"] .spinner-border', {
timeoutMessage: 'timeout while waiting for loading spinner to appear',
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
await click('button[type="submit"]');
assert.dom('[data-test-form-element="name"] input').hasClass('is-valid');
assert.dom('[data-test-form-element="option-2017-12-24"] input[id$="yes"]').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2017-12-24"] input[id$="no"]').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2018-01-01"] input[id$="yes"]').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2018-01-01"] input[id$="no"]').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2017-12-24"] input[id$="yes"]').isFocused();
assert.equal(currentRouteName(), 'poll.participation', 'invalid form prevents a transition');
});
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);
test('does not show validation error for option inputs if poll does not force an answer to each option', async function(assert) {
let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
let poll = this.server.create('poll', {
encryptionKey,
forceAnswer: false
});
await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
await click('button[type="submit"]');
assert.dom('[data-test-form-element="name"] input').hasClass('is-invalid');
assert.dom('[data-test-form-element="option-2017-12-24"] input[id$="yes"]').hasClass('is-valid');
assert.dom('[data-test-form-element="option-2017-12-24"] input[id$="no"]').hasClass('is-valid');
assert.dom('[data-test-form-element="option-2018-01-01"] input[id$="yes"]').hasClass('is-valid');
assert.dom('[data-test-form-element="option-2018-01-01"] input[id$="no"]').hasClass('is-valid');
assert.dom('[data-test-form-element="name"] input').isFocused();
assert.equal(currentRouteName(), 'poll.participation', 'invalid form prevents a transition');
});
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);
});
});
});