Update list collector content page to use list component (#1490)

ONSdigital · Sep 23, 2024 · bf5821f · bf5821f
1 parent 8cc58d9
commit bf5821f
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 29 deletions.
diff --git a/.design-system-version b/.design-system-version
@@ -1 +1 @@
-70.0.15
+70.0.16
diff --git a/app/jinja_filters.py b/app/jinja_filters.py
@@ -648,6 +648,30 @@ def map_summary_item_config_processor() -> dict[str, Callable]:
     return {"map_summary_item_config": map_summary_item_config}
 
 
+@blueprint.app_context_processor
+def map_list_config_processor() -> dict[str, Callable]:
+    return {"map_list_config": map_list_config}
+
+
+@blueprint.app_template_filter()
+def map_list_config(list_values: list[dict]) -> list[dict]:
+    items_list: list[dict] = []
+
+    for index, value in enumerate(list_values, 1):
+        item: dict = {"text": value["item_title"]}
+
+        if value["is_complete"]:
+            item["iconType"] = "check"
+
+        item["attributes"] = {
+            "data-qa": f"list-item-{index}-label",
+        }
+
+        items_list.append(item)
+
+    return items_list
+
+
 # pylint: disable=too-many-locals
 @blueprint.app_template_filter()
 def map_list_collector_config(
@@ -665,7 +689,7 @@ def map_list_collector_config(
 ) -> list[dict[str, list] | SummaryRow]:
     rows: list[dict[str, list] | SummaryRow] = []
 
-    for index, list_item in enumerate(list_items, start=1):
+    for index, list_item in enumerate(list_items, 1):
         item_name = str(list_item.get("item_title"))
 
         actions = []

diff --git a/templates/listcollectorcontent.html b/templates/listcollectorcontent.html
@@ -2,6 +2,8 @@
 
 {% import "macros/helpers.html" as helpers %}
 
+{% from "components/list/_macro.njk" import onsList %}
+
 {% set save_on_signout = true %}
 {% set continue_button_text = _("Continue") %}
 {% set title = content.title %}
@@ -10,8 +12,19 @@
 {% block form_content %}
     <h1>{{ title }}</h1>
     {%- if content.list and content.list.list_items -%}
-        {% set list = content.list %}
-        <div class="ons-u-mb-m">{% include "partials/summary/list-summary.html" %}</div>
+        {% set list = content.list.list_items %}
+        <div class="ons-u-mb-m">
+            {# djlint:off #}
+            {% set itemsList = map_list_config(list) %}
+            {{
+                onsList({
+                    "variants": "summary",
+                    "iconPosition": "before",
+                    "itemsList": itemsList,
+                })
+            }}
+            {# djlint:on #}
+        </div>
     {%- endif -%}
     {% include "partials/contents.html" %}
 {% endblock form_content %}
diff --git a/tests/app/test_jinja_filters.py b/tests/app/test_jinja_filters.py
@@ -22,6 +22,7 @@
     get_formatted_address,
     get_width_for_number,
     map_list_collector_config,
+    map_list_config,
     map_summary_item_config,
     should_wrap_with_fieldset,
     strip_tags,
@@ -1339,5 +1340,44 @@ def test_map_list_collector_config_render_icon_set():
     assert output == expected
 
 
+def test_map_list_config():
+    list_values = [
+        {
+            "item_title": "Harry Potter",
+            "primary_person": False,
+            "list_item_id": "1",
+            "is_complete": True,
+            "repeating_blocks": False,
+        },
+        {
+            "item_title": "Clark Kent",
+            "primary_person": False,
+            "list_item_id": "2",
+            "is_complete": False,
+            "repeating_blocks": False,
+        },
+    ]
+
+    output = map_list_config(list_values)
+
+    expected = [
+        {
+            "text": "Harry Potter",
+            "iconType": "check",
+            "attributes": {
+                "data-qa": "list-item-1-label",
+            },
+        },
+        {
+            "text": "Clark Kent",
+            "attributes": {
+                "data-qa": "list-item-2-label",
+            },
+        },
+    ]
+
+    assert output == expected
+
+
 def to_dict(obj):
     return json.loads(json.dumps(obj, default=lambda o: o.__dict__))
diff --git a/tests/functional/helpers.js b/tests/functional/helpers.js
@@ -6,11 +6,12 @@ export const checkItemsInList = async (itemsExpected, listLabel) => {
   }
 };
 
-export const checkListItemComplete = async (listItemLabel) => {
-  await expect(await $(listItemLabel).$(`.ons-summary__item-title-icon.ons-summary__item-title-icon--check`).isExisting()).toBe(true);
+export const summaryItemComplete = async (summaryItemLabel, status) => {
+  await expect(await $(summaryItemLabel).$(`.ons-summary__item-title-icon.ons-summary__item-title-icon--check`).isExisting()).toBe(status);
 };
-export const checkListItemIncomplete = async (listItemLabel) => {
-  await expect(await $(listItemLabel).$(`.ons-summary__item-title-icon.ons-summary__item-title-icon--check`).isExisting()).toBe(false);
+
+export const listItemComplete = async (listItemLabel, status) => {
+  await expect(await $(listItemLabel).$(`.ons-list__prefix.ons-list__prefix--icon-check`).isExisting()).toBe(status);
 };
 
 const assertSummaryFunction = (selector) => {

diff --git a/tests/functional/spec/features/repeating_blocks/list_collector_repeating_blocks.spec.js b/tests/functional/spec/features/repeating_blocks/list_collector_repeating_blocks.spec.js
@@ -9,7 +9,7 @@ import AnyOtherCompaniesOrBranchesPage from "../../../generated_pages/list_colle
 import SectionCompaniesPage from "../../../generated_pages/list_collector_repeating_blocks_section_summary/section-companies-summary.page";
 import AnyOtherTradingDetailsPage from "../../../generated_pages/list_collector_repeating_blocks_section_summary/any-other-trading-details.page";
 import SubmitPage from "../../../generated_pages/list_collector_repeating_blocks_section_summary/submit.page";
-import { repeatingAnswerChangeLink, checkItemsInList, checkListItemComplete, checkListItemIncomplete, click } from "../../../helpers";
+import { repeatingAnswerChangeLink, checkItemsInList, summaryItemComplete, click } from "../../../helpers";
 import HubPage from "../../../base_pages/hub.page";
 import ResponsiblePartyHubPage from "../../../generated_pages/list_collector_repeating_blocks_with_hub/responsible-party-business.page";
 import { expect } from "@wdio/globals";
@@ -159,10 +159,10 @@ describe("List Collector Repeating Blocks", () => {
 
       // Only the ONS and NAV items should be complete
       await checkItemsInList(["ONS", "GOV", "MOD", "NAV"], AnyOtherCompaniesOrBranchesPage.listLabel);
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-      await checkListItemIncomplete(`dt[data-qa="list-item-2-label"]`);
-      await checkListItemIncomplete(`dt[data-qa="list-item-3-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
+      await summaryItemComplete(`dt[data-qa="list-item-1-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-2-label"]`, false);
+      await summaryItemComplete(`dt[data-qa="list-item-3-label"]`, false);
+      await summaryItemComplete(`dt[data-qa="list-item-1-label"]`, true);
     });
 
     it("When an item has incomplete repeating blocks, Then using submit on the list collector page will navigate the user to the first incomplete repeating block.", async () => {
@@ -192,10 +192,10 @@ describe("List Collector Repeating Blocks", () => {
     it("When the last remaining incomplete repeating block is completed, Then all items are marked as completed with the checkmark icon.", async () => {
       await $(CompaniesRepeatingBlock2Page.authorisedTraderUkRadioNo()).click();
       await click(CompaniesRepeatingBlock2Page.submit());
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-2-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-3-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-4-label"]`);
+      await summaryItemComplete(`dt[data-qa="list-item-1-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-2-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-3-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-4-label"]`, true);
     });
 
     it("When the user clicks a change link from the section summary and submits without changing an answer, Then the user is returned to the section summary anchored to the answer they clicked on", async () => {
@@ -304,8 +304,8 @@ describe("List Collector Repeating Blocks", () => {
       await $(CompaniesRepeatingBlock2Page.authorisedTraderUkRadioNo()).click();
       await click(CompaniesRepeatingBlock2Page.submit());
       await expect(browser).toHaveUrlContaining(AnyOtherCompaniesOrBranchesPage.pageName);
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-2-label"]`);
+      await summaryItemComplete(`dt[data-qa="list-item-1-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-2-label"]`, true);
     });
 
     it("When another incomplete item is added via the section summary, Then navigating to the submit page of the section will redirect to the list collector page.", async () => {

diff --git a/tests/functional/spec/features/supplementary_data/supplementary_data.spec.js b/tests/functional/spec/features/supplementary_data/supplementary_data.spec.js
@@ -1,4 +1,4 @@
-import { assertSummaryItems, assertSummaryTitles, assertSummaryValues, checkListItemComplete, checkListItemIncomplete, click } from "../../../helpers";
+import { assertSummaryItems, assertSummaryTitles, assertSummaryValues, listItemComplete, click } from "../../../helpers";
 import { expect } from "@wdio/globals";
 import { getRandomString } from "../../../jwt_helper";
 import AddAdditionalEmployeePage from "../../../generated_pages/supplementary_data/list-collector-additional-add.page.js";
@@ -370,9 +370,9 @@ describe("Using supplementary data", () => {
   it("Given there is now an additional product, When I resume the Product Details Section, Then I start from the list collector content block and see the new product is incomplete", async () => {
     await $(HubPage.summaryRowLink("section-6")).click();
     await expect(browser).toHaveUrlContaining(ListCollectorProductsPage.pageName);
-    await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-    await checkListItemComplete(`dt[data-qa="list-item-2-label"]`);
-    await checkListItemIncomplete(`dt[data-qa="list-item-3-label"]`);
+    await listItemComplete(`li[data-qa="list-item-1-label"]`, true);
+    await listItemComplete(`li[data-qa="list-item-2-label"]`, true);
+    await listItemComplete(`li[data-qa="list-item-3-label"]`, false);
     await click(ListCollectorProductsPage.submit());
     await expect(browser).toHaveUrlContaining(ProductRepeatingBlock1Page.pageName);
   });

diff --git a/tests/functional/spec/list_collector_content.spec.js b/tests/functional/spec/list_collector_content.spec.js
@@ -11,7 +11,7 @@ import ListCollectorSecondRepeatingBlockPage from "../generated_pages/list_colle
 import ListCollectorContentPage from "../generated_pages/list_collector_content_page/list-collector-content.page";
 import ListCollectorContentSectionSummaryPage from "../generated_pages/list_collector_content_page/section-list-collector-contents-summary.page";
 import ConfirmationCheckboxPage from "../generated_pages/list_collector_content_page/confirmation-checkbox.page";
-import { checkListItemComplete, checkListItemIncomplete, click } from "../helpers";
+import { listItemComplete, click } from "../helpers";
 
 describe("List Collector Section Summary and Summary Items", () => {
   describe("Given I launch the test list collector section summary items survey", () => {
@@ -92,13 +92,13 @@ describe("List Collector Section Summary and Summary Items", () => {
       await expect(await $(HubPage.summaryRowState("section-list-collector-contents")).getText()).toBe("Partially completed");
       await click(HubPage.submit());
       await expect(browser).toHaveUrlContaining(ListCollectorContentPage.pageName);
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-2-label"]`);
-      await checkListItemIncomplete(`dt[data-qa="list-item-3-label"]`);
+      await listItemComplete(`li[data-qa="list-item-1-label"]`, true);
+      await listItemComplete(`li[data-qa="list-item-2-label"]`, true);
+      await listItemComplete(`li[data-qa="list-item-3-label"]`, false);
       await click(ListCollectorContentPage.submit());
       await expect(browser).toHaveUrlContaining(ListCollectorFirstRepeatingBlockPage.pageName);
       await completeRepeatingBlocks(666, 2, 5, 1995, true, true);
-      await checkListItemComplete(`dt[data-qa="list-item-3-label"]`);
+      await listItemComplete(`li[data-qa="list-item-3-label"]`, true);
       await click(ListCollectorContentPage.submit());
       await click(ListCollectorContentSectionSummaryPage.submit());
       await expect(await $(HubPage.summaryRowState("section-list-collector-contents")).getText()).toBe("Completed");
@@ -114,7 +114,7 @@ describe("List Collector Section Summary and Summary Items", () => {
       await click(CompaniesSummaryPage.submit());
       await expect(await $(HubPage.summaryRowState("section-list-collector-contents")).getText()).toBe("Partially completed");
       await click(HubPage.submit());
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
+      await listItemComplete(`li[data-qa="list-item-1-label"]`, true);
       await click(ListCollectorContentPage.submit());
       await expect(browser).toHaveUrlContaining(ListCollectorContentSectionSummaryPage.pageName);
       await click(ListCollectorContentSectionSummaryPage.submit());