Add question error panel (#445)

* Add question error panel

Author: LJBabbage

app/forms/questionnaire_form.py

@@ -299,7 +299,10 @@ def map_errors(self):
 
         if self.question["id"] in self.question_errors:
             ordered_errors += [
-                (self.question["id"], self.question_errors[self.question["id"]])
+                (
+                    _get_error_id(self.question["id"]),
+                    self.question_errors[self.question["id"]],
+                )
             ]
 
         for answer in self.question["answers"]:
@@ -383,8 +386,8 @@ def map_detail_answer_errors(errors, answer_json):
     return detail_answer_errors
 
 
-def _get_error_id(answer_id):
-    return f"{answer_id}-error"
+def _get_error_id(id):
+    return f"{id}-error"
 
 
 def _clear_detail_answer_field(form_data, question_schema):

templates/partials/question.html

@@ -1,8 +1,9 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/fieldset/_macro.njk" import onsFieldset %}
 {% from "components/panel/_macro.njk" import onsPanel %}
-{% from 'macros/helpers.html' import format_paragraphs %}
+{% from "components/error/_macro.njk" import onsError %}
 
+{% from 'macros/helpers.html' import format_paragraphs %}
 {% from 'macros/helpers.html' import interviewer_note %}
 
 {% set form = content.form %}
@@ -11,6 +12,7 @@
 {% set question_title= question.title %}
 {% set question_description = format_paragraphs(question.description) %}
 {% set question_instruction = format_paragraphs(question.instruction) %}
+{% set question_error = form.question_errors[question.id] %}
 
 {% set should_wrap_with_fieldset = should_wrap_with_fieldset(question) %}
 
@@ -93,6 +95,7 @@
     {%- endif -%}
   {%- endif -%}
 {% endset %}
+
 {% call onsQuestion({
   "id": question.id,
   "title": title,
@@ -107,5 +110,23 @@
   {{ individual_response_guidance }}
   {{ question_definition }}
   {{ question_guidance }}
-  {{ question_answers }}
+
+  {% if question_error %}
+    {% set config = {
+      "text": question_error,
+      "id": question.id ~ '-error',
+      "attributes": {
+        "data-ga": "question-error",
+        "data-ga-category": "Question error",
+        "data-ga-action": question_error | striptags,
+        "data-ga-label": question.id
+      }
+    }%}
+    {% call onsError(config) %}
+      {{ question_answers }}
+    {% endcall %}
+  {% else %}
+    {{ question_answers }}
+  {% endif %}
+
 {% endcall %}

tests/functional/generate_pages.py

@@ -99,6 +99,12 @@
 """
 )
 
+QUESTION_ERROR_PANEL = Template(
+    r"""  ${questionName}ErrorPanel() { return `#${questionId}-error`; }
+
+"""
+)
+
 ANSWER_LABEL_GETTER = Template(
     r"""  ${answerName}Label() {
     return `[for=${answerId}]`;
@@ -381,6 +387,15 @@ def process_question(question, page_spec, num_questions, page_name):
     for answer in question.get("answers", []):
         process_answer(answer, page_spec, long_names, page_name)
 
+    if question["type"] in ["DateRange", "MutuallyExclusive"]:
+        question_name = generate_pascal_case_from_id(question["id"])
+        question_name = question_name.replace(page_name, "")
+        question_context = {
+            "questionName": camel_case(question_name),
+            "questionId": question["id"],
+        }
+        page_spec.write(QUESTION_ERROR_PANEL.substitute(question_context))
+
 
 def process_calculated_summary(answers, page_spec):
     for answer in answers:

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_checkbox.spec.js

@@ -124,6 +124,7 @@ describe("Component: Mutually Exclusive Checkbox With Single Checkbox Override",
       // Then
       expect($(MandatoryCheckboxPage.errorHeader()).getText()).to.contain("There is a problem with your answer");
       expect($(MandatoryCheckboxPage.errorNumber(1)).getText()).to.contain("Select at least one answer");
+      expect($(MandatoryCheckboxPage.questionErrorPanel()).isExisting()).to.be.true;
     });
   });
 });

tests/functional/spec/dates.spec.js

@@ -61,8 +61,9 @@ describe("Date checks", () => {
 
     $(DateRangePage.submit()).click();
 
-    // Then an error message is shown
+    // Then an error message is shown and the question panel is highlighted
     expect($(DateRangePage.errorNumber(1)).getText()).to.contain("Enter a 'period to' date later than the 'period from' date");
+    expect($(DateRangePage.dateRangeQuestionErrorPanel()).isExisting()).to.be.true;
 
     // Then clicking error should focus on first input field
     $(DateRangePage.errorNumber(1)).click();
@@ -81,8 +82,9 @@ describe("Date checks", () => {
 
     $(DateRangePage.submit()).click();
 
-    // Then an error message is shown
+    // Then an error message is shown and the question panel is highlighted
     expect($(DateRangePage.errorNumber(1)).getText()).to.contain("Enter a 'period to' date later than the 'period from' date");
+    expect($(DateRangePage.dateRangeQuestionErrorPanel()).isExisting()).to.be.true;
   });
 
   it("Given the test_dates survey is selected when an invalid date is entered in a date range then an error message is shown", () => {