PPHA-266: Add ethnicity question page (#128)

* PPHA-266: Add ethnicity question page

* PPHA-266: Fix white space issues

* PPHA-266: More fixing white space issues

* WIP

* Fix assignment from tuple to object

* PPHA-266: Add acceptance tests for ethnicity validation errors

* PPHA-266: Remove unusued BoundField import

* PPHA-266: Add newlines at end of files

---------

Co-authored-by: miriam-z <[email protected]>
Co-authored-by: Andy Mitchell <[email protected]>

Author: 3 people

lung_cancer_screening/core/tests/acceptance/helpers/user_interaction_helpers.py

@@ -68,3 +68,11 @@ def fill_in_and_submit_gender(page, gender):
     page.get_by_label(gender, exact=True).check()
 
     page.click("text=Continue")
+
+def fill_in_and_submit_ethnicity(page, ethnicity):
+    expect(page.locator("legend")).to_have_text(
+        "What is your ethnic background?")
+
+    page.get_by_label(ethnicity, exact=True).check()
+
+    page.click("text=Continue")

lung_cancer_screening/core/tests/acceptance/test_cannot_change_answers_after_submission.py

@@ -12,6 +12,7 @@
     fill_in_and_submit_date_of_birth,
     fill_in_and_submit_sex_at_birth,
     fill_in_and_submit_gender,
+    fill_in_and_submit_ethnicity
 )
 
 class TestQuestionnaire(StaticLiveServerTestCase):
@@ -44,6 +45,7 @@ def test_cannot_change_responses_once_checked_and_submitted(self):
         fill_in_and_submit_weight_metric(page, "25.4")
         fill_in_and_submit_sex_at_birth(page, "Male")
         fill_in_and_submit_gender(page, "Male")
+        fill_in_and_submit_ethnicity(page, "White")
 
         page.click("text=Submit")
 

lung_cancer_screening/core/tests/acceptance/test_questionnaire.py

@@ -13,7 +13,8 @@
     fill_in_and_submit_weight_metric,
     fill_in_and_submit_weight_imperial,
     fill_in_and_submit_sex_at_birth,
-    fill_in_and_submit_gender
+    fill_in_and_submit_gender,
+    fill_in_and_submit_ethnicity
 )
 
 from .helpers.assertion_helpers import expect_back_link_to_have_url
@@ -84,9 +85,14 @@ def test_full_questionnaire_user_journey(self):
         expect_back_link_to_have_url(page, "/sex-at-birth")
         fill_in_and_submit_gender(page, "Male")
 
-        expect(page).to_have_url(f"{self.live_server_url}/responses")
+        expect(page).to_have_url(f"{self.live_server_url}/ethnicity")
         expect_back_link_to_have_url(page, "/gender")
 
+        fill_in_and_submit_ethnicity(page, "White")
+
+        expect(page).to_have_url(f"{self.live_server_url}/responses")
+        expect_back_link_to_have_url(page, "/ethnicity")
+
         responses = page.locator(".responses")
         expect(responses).to_contain_text("Have you ever smoked? Yes, I used to smoke regularly")
         expect(responses).to_contain_text(
@@ -95,6 +101,7 @@ def test_full_questionnaire_user_journey(self):
         expect(responses).to_contain_text(f"What is your weight? {weight_stone} stone {weight_pound} pound")
         expect(responses).to_contain_text("What was your sex at birth? Male")
         expect(responses).to_contain_text("Which of these best describes you? Male")
+        expect(responses).to_contain_text("What is your ethnic background? White")
 
         page.click("text=Submit")
 

lung_cancer_screening/core/tests/acceptance/test_questionnaire_validation_errors.py

@@ -102,3 +102,16 @@ def test_weight_validation_errors(self):
         expect(page.locator(".nhsuk-error-message")).to_contain_text(
             "Weight must be between 25.4kg and 317.5kg"
         )
+
+    def test_ethnicity_validation_errors(self):
+        participant_id = '123'
+
+        page = self.browser.new_page()
+        page.goto(f"{self.live_server_url}/start")
+        fill_in_and_submit_participant_id(page, participant_id)
+        page.goto(f"{self.live_server_url}/ethnicity")
+
+        page.click("text=Continue")
+        expect(page.locator(".nhsuk-error-message")).to_contain_text(
+            "Select your ethnic background."
+        )

lung_cancer_screening/nhsuk_forms/bound_choice_field.py

@@ -1,19 +1,60 @@
 from django import forms
 from django.forms import widgets
 
+class RadioSelectWithoutFieldset(widgets.RadioSelect):
+    use_fieldset = False
+
+class CheckboxSelectMultipleWithoutFieldset(widgets.CheckboxSelectMultiple):
+    use_fieldset = False
+
+class BoundChoiceField(forms.BoundField):
+    """
+    Specialisation of BoundField that can deal with conditionally shown fields,
+    and divider content between choices.
+    This can be used to render a set of radios or checkboxes with text boxes to capture
+    more details.
+    """
+
+    def __init__(self, form: forms.Form, field: "ChoiceField", name: str):
+        super().__init__(form, field, name)
+
+        self._conditional_html = {}
+        self.dividers = {}
+
+    def add_conditional_html(self, value, html):
+        if isinstance(self.field.widget, widgets.Select):
+            raise ValueError("select component does not support conditional fields")
+
+        self._conditional_html[value] = html
+
+    def conditional_html(self, value):
+        return self._conditional_html.get(value)
+
+    def add_divider_after(self, previous, divider):
+        self.dividers[previous] = divider
+
+    def get_divider_after(self, previous):
+        return self.dividers.get(previous)
+
+
 class ChoiceField(forms.ChoiceField):
     """
     A ChoiceField that renders using NHS.UK design system radios/select
     components.
+
+    To render a select instead, pass Select for the `widget` argument.
+    To render radios without the fieldset, pass RadioSelectWithoutFieldset
+    for the `widget` argument.
     """
 
     widget = widgets.RadioSelect
+    bound_field_class = BoundChoiceField
 
     def __init__(
         self,
         *args,
         hint=None,
-        label_classes=None,
+        label_classes="nhsuk-fieldset__legend--m",
         classes=None,
         **kwargs,
     ):
@@ -29,4 +70,40 @@ def __init__(
 
     @staticmethod
     def _template_name(widget):
-        return "radios.jinja"
+        if (
+            isinstance(widget, type) and issubclass(widget, widgets.RadioSelect)
+        ) or isinstance(widget, widgets.RadioSelect):
+            return "radios.jinja"
+        elif (
+            isinstance(widget, type) and issubclass(widget, widgets.Select)
+        ) or isinstance(widget, widgets.Select):
+            return "select.jinja"
+
+
+class MultipleChoiceField(forms.MultipleChoiceField):
+    """
+    A MultipleChoiceField that renders using the NHS.UK design system checkboxes
+    component.
+
+    To render checkboxes without the fieldset, pass CheckboxSelectMultipleWithoutFieldset
+    for the `widget` argument.
+    """
+
+    widget = widgets.CheckboxSelectMultiple
+    bound_field_class = BoundChoiceField
+
+    def __init__(
+        self,
+        *args,
+        hint=None,
+        label_classes="nhsuk-fieldset__legend--m",
+        classes=None,
+        **kwargs,
+    ):
+        kwargs["template_name"] = "checkboxes.jinja"
+
+        self.hint = hint
+        self.classes = classes
+        self.label_classes = label_classes
+
+        super().__init__(*args, **kwargs)

lung_cancer_screening/nhsuk_forms/choice_field.py

@@ -5,23 +5,32 @@
 {% endif %}
 {% set ns = namespace(items=[]) %}
 {% for value, text in unbound_field.choices %}
+  {% set conditional_html = field.conditional_html(value) %}
   {% set ns.items = ns.items + [{
     "id": field.auto_id if loop.first,
     "value": value,
     "text": text,
-    "checked": field.value() == value
+    "checked": field.value() == value,
+    "conditional": {
+      "html": conditional_html
+    } if conditional_html else undefined
   }] %}
+  {% set divider = field.get_divider_after(value) %}
+  {% if divider %}
+    {% set ns.items = ns.items + [{"divider": divider}] %}
+  {% endif %}
 {% endfor %}
 {{ radios({
   "name": field.html_name,
   "idPrefix": field.auto_id,
-  "fieldset":  {
+  "fieldset": {
     "legend": {
       "text": field.label,
       "classes": unbound_field.label_classes
     }
-  },
+  } if field.use_fieldset else none,
   "errorMessage": error_message,
+  "classes": unbound_field.classes if unbound_field.classes,
   "hint": {
     "html": unbound_field.hint|e
   } if unbound_field.hint,

lung_cancer_screening/nhsuk_forms/jinja2/radios.jinja

@@ -2,7 +2,7 @@
 from django import forms
 from django.forms import widgets
 
-from .bound_choice_field import BoundChoiceField
+from .choice_field import BoundChoiceField
 
 class TypedChoiceField(forms.TypedChoiceField):
     """

lung_cancer_screening/nhsuk_forms/typed_choice_field.py

@@ -0,0 +1,28 @@
+from django import forms
+
+from ...nhsuk_forms.choice_field import ChoiceField
+from ..models.response_set import ResponseSet, EthnicityValues
+
+class EthnicityForm(forms.ModelForm):
+
+    def __init__(self, *args, **kwargs):
+        self.participant = kwargs.pop('participant')
+        super().__init__(*args, **kwargs)
+        self.instance.participant = self.participant
+
+        self.fields["ethnicity"] = ChoiceField(
+            choices=EthnicityValues.choices,
+            label="What is your ethnic background?",
+            widget=forms.RadioSelect,
+            label_classes="nhsuk-fieldset__legend--m",
+            hint="Your ethnicity may impact your chances of developing lung cancer.",
+            error_messages={
+                'required': 'Select your ethnic background.'
+            }
+        )
+
+        self["ethnicity"].add_divider_after(EthnicityValues.OTHER.value, "or")
+
+    class Meta:
+        model = ResponseSet
+        fields = ['ethnicity']

lung_cancer_screening/questions/forms/ethnicity_form.py

@@ -0,0 +1,28 @@
+{% extends 'layout.jinja' %}
+{% from 'nhsuk/components/button/macro.jinja' import button %}
+{% from 'nhsuk/components/back-link/macro.jinja' import backLink %}
+
+{% block beforeContent %}
+  {{
+    backLink({
+      "href": url("questions:gender"),
+      "text": "Back"
+    })
+  }}
+{% endblock beforeContent %}
+
+{% block page_content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+      <form action="{{ request.path }}" method="POST">
+        {{ csrf_input }}
+
+        {{ form }}
+
+        {{ button({
+          "text": "Continue"
+        }) }}
+      </form>
+    </div>
+  </div>
+{% endblock %}