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

* add tests that participation form is validated
* assert that first invalid form element is focused on invalid submission attempt

app/templates/poll/participation.hbs

@@ -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}}

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

@@ -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) {
+  module('validation', function() {
-    let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    test('shows validation errors for participation form on submit', async function(assert) {
-    let poll = this.server.create('poll', {
+      let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
-      encryptionKey
+      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}`);
+      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}`);
+    test('does not show validation error for name if poll allows anonymous participation', async function(assert) {
-    pollParticipate('John Doe', ['yes', 'no']);
+      let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
+      let poll = this.server.create('poll', {
+        anonymousUser: true,
+        encryptionKey,
+      });
 
-    await waitFor('[data-test-button="submit"] .spinner-border', {
+      await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
-      timeoutMessage: 'timeout while waiting for loading spinner to appear',
+      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
+    test('does not show validation error for option inputs if poll does not force an answer to each option', async function(assert) {
-    // need to resolve with a valid response cause otherwise Ember Data would throw
+      let encryptionKey = 'abcdefghijklmnopqrstuvwxyz0123456789';
-    resolveSubmission(resolveSubmissionWith);
+      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);
+    });
   });
 });