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,6 +203,68 @@ module('Acceptance | participate in a poll', function(hooks) {
     resolveSubmission(resolveSubmissionWith);
   });
 
+  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');
+    });
+
+    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 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');
+    });
+
+    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', {
@@ -232,4 +294,5 @@ module('Acceptance | participate in a poll', function(hooks) {
       // need to resolve with a valid response cause otherwise Ember Data would throw
       resolveSubmission(resolveSubmissionWith);
     });
+  });
 });