From 86de1c9b5c3528c88e088f36c207b4af3c9d27ab Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 10 Nov 2022 14:33:24 +0100
Subject: [PATCH] feat: Add E2E test to test for hierachy in published chart
 interactive filter

---
 app/charts/shared/chart-data-filters.tsx      |  1 +
 .../int/bathing-water-quality-hierarchie.json | 74 +++++++++++++++++++
 app/test/__fixtures/config/int/configs.ts     |  5 ++
 e2e/interactive-filters.spec.ts               | 17 +++++
 e2e/selectors.ts                              |  4 +
 5 files changed, 101 insertions(+)
 create mode 100644 app/test/__fixtures/config/int/bathing-water-quality-hierarchie.json
 create mode 100644 e2e/interactive-filters.spec.ts

diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
index 4b8f69634..9dd781baa 100644
--- a/app/charts/shared/chart-data-filters.tsx
+++ b/app/charts/shared/chart-data-filters.tsx
@@ -99,6 +99,7 @@ export const ChartDataFilters = ({
 
           {componentIris.length > 0 && (
             <Box
+              data-testid="published-chart-interactive-filters"
               sx={{
                 display: filtersVisible ? "grid" : "none",
                 columnGap: 3,
diff --git a/app/test/__fixtures/config/int/bathing-water-quality-hierarchie.json b/app/test/__fixtures/config/int/bathing-water-quality-hierarchie.json
new file mode 100644
index 000000000..b4b119daa
--- /dev/null
+++ b/app/test/__fixtures/config/int/bathing-water-quality-hierarchie.json
@@ -0,0 +1,74 @@
+{
+  "key": "nI6X4V_EcK2c",
+  "data": {
+    "meta": {
+      "title": {
+        "de": "",
+        "en": "",
+        "fr": "",
+        "it": ""
+      },
+      "description": {
+        "de": "",
+        "en": "",
+        "fr": "",
+        "it": ""
+      }
+    },
+    "dataSet": "https://environment.ld.admin.ch/foen/ubd0104/11",
+    "dataSource": {
+      "url": "https://int.lindas.admin.ch/query",
+      "type": "sparql"
+    },
+    "chartConfig": {
+      "fields": {
+        "x": {
+          "sorting": {
+            "sortingType": "byAuto",
+            "sortingOrder": "asc"
+          },
+          "componentIri": "https://environment.ld.admin.ch/foen/ubd0104/dateofprobing"
+        },
+        "y": {
+          "componentIri": "https://environment.ld.admin.ch/foen/ubd0104/value"
+        }
+      },
+      "filters": {
+        "https://environment.ld.admin.ch/foen/ubd0104/location": {
+          "type": "single",
+          "value": "https://ld.admin.ch/dimension/bgdi/inlandwaters/bathingwater/CH19007"
+        },
+        "https://environment.ld.admin.ch/foen/ubd0104/parametertype": {
+          "type": "single",
+          "value": "E.coli"
+        }
+      },
+      "version": "1.3.0",
+      "chartType": "column",
+      "interactiveFiltersConfig": {
+        "legend": {
+          "active": false,
+          "componentIri": ""
+        },
+        "timeRange": {
+          "active": false,
+          "presets": {
+            "to": "",
+            "from": "",
+            "type": "range"
+          },
+          "componentIri": ""
+        },
+        "timeSlider": {
+          "componentIri": ""
+        },
+        "dataFilters": {
+          "active": true,
+          "componentIris": [
+            "https://environment.ld.admin.ch/foen/ubd0104/location"
+          ]
+        }
+      }
+    }
+  }
+}
diff --git a/app/test/__fixtures/config/int/configs.ts b/app/test/__fixtures/config/int/configs.ts
index bd770a45c..3a9f02ac5 100644
--- a/app/test/__fixtures/config/int/configs.ts
+++ b/app/test/__fixtures/config/int/configs.ts
@@ -33,6 +33,11 @@ const configs: TestConfig[] = [
     name: "Map - Waldfläsche (areas)",
     slug: "map-waldflasche",
   },
+  {
+    chartId: "nI6X4V_EcK2c",
+    name: "Bathing water quality (interactive filters hierarchie)",
+    slug: "bathing-water-quality-hierarchie",
+  },
 ];
 
 export default configs;
diff --git a/e2e/interactive-filters.spec.ts b/e2e/interactive-filters.spec.ts
new file mode 100644
index 000000000..9365d433d
--- /dev/null
+++ b/e2e/interactive-filters.spec.ts
@@ -0,0 +1,17 @@
+import { test } from "./common";
+
+test("it should display values in interactive filters as hierarchie", async ({
+  page,
+  selectors,
+  within,
+}) => {
+  await page.goto("/en/__test/int/bathing-water-quality-hierarchie");
+  await selectors.chart.loaded();
+  await page.locator('text="Show Filters"').click();
+  await within(selectors.published.interactiveFilters())
+    .getByText("Seerose")
+    .click();
+  await selectors.mui.popover().getByText("BAQUA_FR");
+  await selectors.mui.popover().getByText("Nouvelle plage").click();
+  await selectors.chart.loaded();
+});
diff --git a/e2e/selectors.ts b/e2e/selectors.ts
index 5c092efca..d7a0eaf8f 100644
--- a/e2e/selectors.ts
+++ b/e2e/selectors.ts
@@ -52,6 +52,10 @@ export const createSelectors = ({ screen, page, within }: Ctx) => {
           has: page.locator(`h5:text-is("${title}")`),
         }),
     },
+    published: {
+      interactiveFilters: () =>
+        screen.getByTestId("published-chart-interactive-filters"),
+    },
     chart: {
       colorLegend: (options?, waitForOptions?) =>
         screen.findByTestId("colorLegend", options, waitForOptions),