Repairing tests

.github/workflows/chromatic.yml

@@ -8,7 +8,7 @@ jobs:
   push-storybook:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Setup node

.github/workflows/docker-build-dev.yml

@@ -6,7 +6,7 @@ jobs:
   docker-build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: docker/build-push-action@v1
         with:
           registry: docker.pkg.github.com

.github/workflows/docker-build-release.yml

@@ -6,7 +6,7 @@ jobs:
   docker-build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: docker/build-push-action@v1
         with:
           registry: docker.pkg.github.com

.github/workflows/e2e.yml

@@ -7,7 +7,7 @@ jobs:
     if: github.event.deployment_status.state == 'success'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # fetch all commits so we can find the branch
           fetch-depth: 0
@@ -20,12 +20,12 @@ jobs:
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps chromium
       - name: Run Playwright tests
-        run: yarn e2e
+        run: yarn e2e -- --grep-invert @noci
         env:
           E2E_BASE_URL: ${{ github.event.deployment_status.target_url }}
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
       - name: Upload E2E artifacts to job
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: e2e-screenshots

.github/workflows/lint-types.yml

@@ -10,7 +10,7 @@ jobs:
   lint-typecheck-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup node
         uses: actions/setup-node@v3
         with:

.github/workflows/performance-tests-pr.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Send an HTTP request to start up the server
         run: |
           curl -s '${{ github.event.deployment_status.target_url }}/api/graphql' -X 'POST' -H 'Content-Type: application/json' -d '{"operationName":"DataCubeObservations","variables":{"locale":"en","sourceType":"sparql","sourceUrl":"https://lindas.admin.ch/query","cubeFilter":{"iri":"https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/9","filters":{"https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Kanton":{"type":"single","value":"https://ld.admin.ch/canton/1"}}}},"query":"query DataCubeObservations($sourceType: String!, $sourceUrl: String!, $locale: String!, $cubeFilter: DataCubeObservationFilter!) { dataCubeObservations(sourceType: $sourceType, sourceUrl: $sourceUrl, locale: $locale, cubeFilter: $cubeFilter) }"}' > /dev/null

.github/workflows/performance-tests.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Download, unzip and install k6 binary
         run: |
             wget https://github.com/grafana/k6/releases/download/v0.49.0/k6-v0.49.0-linux-amd64.tar.gz

app/flags/types.ts

@@ -14,4 +14,6 @@ export type FlagName =
   /** Whether we can use shared filters on dashboard layout */
   | "layouter.dashboard.shared-filters"
   /** Whether server side cache is disabled */
-  | "server-side-cache.disable";
+  | "server-side-cache.disable"
+  /** The GraphQL endpoint, is used for testing purposes */
+  | "graphql.endpoint";

app/graphql/client.tsx

@@ -5,8 +5,12 @@ import { flag } from "@/flags/flag";
 // @ts-ignore - dynamic package import based on NODE_ENV
 import { devtoolsExchanges } from "@/graphql/devtools";
 
+const graphqlEndpointFlag = flag("graphql.endpoint");
+if (graphqlEndpointFlag) {
+  console.log("ℹ️ Using custom GraphQL endpoint:", graphqlEndpointFlag);
+}
 export const client = createClient({
-  url: GRAPHQL_ENDPOINT,
+  url: graphqlEndpointFlag ?? GRAPHQL_ENDPOINT,
   exchanges: [...devtoolsExchanges, ...defaultExchanges],
   fetchOptions: {
     headers: getHeaders(),

app/package.json

@@ -144,7 +144,7 @@
     "@percy/cli": "^1.26.1",
     "@percy/playwright": "^1.0.4",
     "@playwright-testing-library/test": "^4.5.0",
-    "@playwright/test": "^1.32.1",
+    "@playwright/test": "^1.44.1",
     "@svgr/cli": "^5.5.0",
     "@testing-library/react": "^14.1.2",
     "@types/autosuggest-highlight": "^3.2.0",

e2e/abbreviations.spec.ts

@@ -1,17 +1,22 @@
 import { setup, sleep } from "./common";
+import { harReplayGraphqlEndpointQueryParam } from "./har-utils";
 
 const { test, expect } = setup();
 
 test("it should be possible to enable abbreviations for colors & x field (column)", async ({
   actions,
   selectors,
+  replayFromHAR,
 }) => {
+  await replayFromHAR();
+
   test.slow();
 
-  await actions.chart.createFrom(
-    "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/6",
-    "Prod"
-  );
+  await actions.chart.createFrom({
+    iri: "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/6",
+    dataSource: "Prod",
+    createURLParams: harReplayGraphqlEndpointQueryParam,
+  });
 
   await selectors.edition.drawerLoaded();
   await actions.editor.selectActiveField("Horizontal Axis");
@@ -73,11 +78,15 @@ test("it should be possible to enable abbreviations for colors & x field (column
 test("hierarchies: it should be possible to enable abbreviations for colors", async ({
   actions,
   selectors,
+  replayFromHAR,
 }) => {
-  await actions.chart.createFrom(
-    "https://environment.ld.admin.ch/foen/ubd000502/4",
-    "Prod"
-  );
+  await replayFromHAR();
+
+  await actions.chart.createFrom({
+    iri: "https://environment.ld.admin.ch/foen/ubd000502/4",
+    dataSource: "Prod",
+    createURLParams: harReplayGraphqlEndpointQueryParam,
+  });
 
   await selectors.edition.drawerLoaded();
   await actions.editor.selectActiveField("Segmentation");
@@ -111,11 +120,18 @@ test("hierarchies: it should be possible to enable abbreviations for colors", as
   ]);
 });
 
-test("localized abbreviations", async ({ actions, selectors }) => {
-  await actions.chart.createFrom(
-    "https://environment.ld.admin.ch/foen/gefahren-waldbrand-praeventionsmassnahmen-kantone/1",
-    "Int"
-  );
+test("localized abbreviations @noci", async ({
+  actions,
+  selectors,
+  replayFromHAR,
+}) => {
+  await replayFromHAR();
+
+  await actions.chart.createFrom({
+    iri: "https://environment.ld.admin.ch/foen/gefahren-waldbrand-praeventionsmassnahmen-kantone/1",
+    dataSource: "Prod",
+    createURLParams: harReplayGraphqlEndpointQueryParam,
+  });
 
   await selectors.edition.drawerLoaded();
   await actions.editor.changeChartType("Map");

e2e/actions.ts

@@ -6,9 +6,10 @@ type ActionTestContext = TestContext & { selectors: Selectors };
 const selectActiveEditorField =
   ({ selectors, within }: ActionTestContext) =>
   async (field: string) => {
-    const fieldLocator = await within(
-      selectors.edition.controlSectionBySubtitle("Chart Options")
-    ).findByText(field);
+    const chartOptions =
+      selectors.edition.controlSectionBySubtitle("Chart Options");
+    chartOptions.scrollIntoViewIfNeeded();
+    const fieldLocator = await within(chartOptions).findByText(field);
     await fieldLocator.click();
     await selectors.panels
       .drawer()
@@ -26,9 +27,19 @@ export const createActions = ({
     clear: async () => await screen.getByTestId("clearSearch").click(),
   },
   datasetPreview: {
-    load: async (iri: string, dataSource: "Int" | "Prod") => {
+    load: async ({
+      iri,
+      dataSource,
+      urlParams,
+    }: {
+      iri: string;
+      dataSource: "Int" | "Prod";
+      urlParams?: string;
+    }) => {
       await page.goto(
-        `en/browse?dataset=${encodeURIComponent(iri)}&dataSource=${dataSource}`
+        `/en/browse?dataset=${encodeURIComponent(
+          iri
+        )}&dataSource=${dataSource}&${urlParams}`
       );
 
       await selectors.datasetPreview.loaded();
@@ -40,13 +51,21 @@ export const createActions = ({
     },
   },
   chart: {
-    createFrom: async (
-      iri: string,
-      dataSource: "Int" | "Prod",
-      chartLoadedOptions?: Parameters<typeof selectors.chart.loaded>[0]
-    ) => {
+    createFrom: async ({
+      iri,
+      dataSource,
+      chartLoadedOptions,
+      createURLParams,
+    }: {
+      iri: string;
+      dataSource: "Int" | "Prod";
+      chartLoadedOptions?: Parameters<typeof selectors.chart.loaded>[0];
+      createURLParams?: string;
+    }) => {
       await page.goto(
-        `en/create/new?cube=${encodeURIComponent(iri)}&dataSource=${dataSource}`
+        `/en/create/new?cube=${encodeURIComponent(
+          iri
+        )}&dataSource=${dataSource}&${createURLParams ?? ""}`
       );
 
       await selectors.chart.loaded(chartLoadedOptions);

e2e/chart-snapshots.spec.ts

@@ -3,6 +3,7 @@ import percySnapshot from "@percy/playwright";
 import intConfigs from "../app/test/__fixtures/config/int/configs";
 
 import { setup, sleep } from "./common";
+import { harReplayGraphqlEndpointQueryParam } from "./har-utils";
 
 const { test } = setup();
 
@@ -25,14 +26,13 @@ for (let [viewportName, viewportSize] of Object.entries(viewports)) {
     test(`Chart Snapshots ${slug} ${env} ${viewportName}`, async ({
       page,
       selectors,
+      replayFromHAR
     }) => {
-      if (process.env.E2E_HAR !== "false") {
-        await page.routeFromHAR(`./e2e/har/chart-snapshots/${slug}.zip`, {
-          notFound: "fallback",
-        });
-      }
+      await replayFromHAR()
       await page.setViewportSize(viewportSize);
-      await page.goto(`/en/__test/${env}/${slug}?dataSource=Int`);
+      await page.goto(
+        `/en/__test/${env}/${slug}?dataSource=Int&${harReplayGraphqlEndpointQueryParam}`
+      );
       await selectors.chart.loaded();
 
       await sleep(2_000);

e2e/color-mapping-maps.spec.ts

@@ -1,19 +1,23 @@
 import { loadChartInLocalStorage } from "./charts-utils";
 import { setup } from "./common";
 import forestFireDanger from "./fixtures/forest-fire-danger-chart-config.json";
+import { harReplayGraphqlEndpointQueryParam } from "./har-utils";
 
-const { test, expect } = setup();
+const { test } = setup();
 
-test("should be possible to de-select options from color component in maps", async ({
+test("should be possible to de-select options from color component in maps @noci", async ({
   page,
   within,
   actions,
   selectors,
+  replayFromHAR
 }) => {
+
+  await replayFromHAR()
   const key = "color-mapping-maps.spec";
   const config = forestFireDanger;
   await loadChartInLocalStorage(page, key, config);
-  page.goto(`/en/create/${key}`);
+  await page.goto(`/en/create/${key}?${harReplayGraphqlEndpointQueryParam}`);
   await selectors.edition.drawerLoaded();
 
   await selectors.chart.loaded();

e2e/common.ts

@@ -2,15 +2,19 @@ import {
   locatorFixtures as fixtures,
   LocatorFixtures as TestingLibraryFixtures,
 } from "@playwright-testing-library/test/fixture";
-import { test as base, PlaywrightTestOptions } from "@playwright/test";
+import { test as base, Page, PlaywrightTestOptions } from "@playwright/test";
 
-import { Actions, createActions } from "./actions";
+import { Actions, createActions, } from "./actions";
 import { createSelectors, Selectors } from "./selectors";
+import slugify from "./slugify";
+
+type RouteFromHAROptions = Parameters<Page['routeFromHAR']>[1];
 
 const setup = (contextOptions?: PlaywrightTestOptions["contextOptions"]) => {
   const test = base.extend<TestingLibraryFixtures>(fixtures).extend<{
     selectors: Selectors;
     actions: Actions;
+    replayFromHAR: (routeFromHAROptions?: RouteFromHAROptions) => void;
   }>({
     selectors: async ({ page, screen, within }, use) => {
       const ctx = { page, screen, within };
@@ -22,6 +26,24 @@ const setup = (contextOptions?: PlaywrightTestOptions["contextOptions"]) => {
       const actions = createActions(ctx);
       await use(actions);
     },
+    replayFromHAR: async ({ page }, use, testInfo) => {
+      let index = 0;
+      const replay = async (routeFromHAROptions?: RouteFromHAROptions
+      ) => {
+        const name = `${testInfo.titlePath
+          .map((x) => x.replace(/\.spec\.ts$/, ""))
+          .map(slugify)
+          .join(" > ")} ${index++}`;
+        if (process.env.E2E_HAR !== "false") {
+          await page.routeFromHAR(`./e2e/har/${name}.zip`, {
+            url: /api\/graphql/,
+            notFound: "abort",
+            ...routeFromHAROptions
+          });
+        }
+      };
+      await use(replay);
+    },
     contextOptions,
   });
 

e2e/filter-position.spec.ts

@@ -3,10 +3,10 @@ import { setup } from "./common";
 const { test, expect } = setup();
 
 test("Filters should be sorted by position", async ({ selectors, actions }) => {
-  await actions.chart.createFrom(
-    "https://environment.ld.admin.ch/foen/ubd003001/14",
-    "Int"
-  );
+  await actions.chart.createFrom({
+    iri: "https://environment.ld.admin.ch/foen/ubd003001/14",
+    dataSource: "Int",
+  });
 
   await selectors.edition.drawerLoaded();
 

e2e/har-utils.ts

@@ -73,3 +73,13 @@ export const getEnv = (name: string) => {
 
   return found;
 };
+
+/**
+ * HAR traces have been saved on http://localhost:3000. Even if we are targetting
+ * our E2E tests on a Vercel Preview URL, we still want the client to make the
+ * request to http://localhost:3000 so that Playwrights' HAR replay is used.
+ */
+
+export const harReplayGraphqlEndpointQueryParam = `flag__graphql.endpoint=${encodeURIComponent(
+  JSON.stringify(`http://localhost:3000/api/graphql`)
+)}`;

e2e/high-filter-value-count.spec.ts

@@ -13,11 +13,11 @@ testFn(
   "should be able to load a map with a dimension with a large number of values",
   async ({ page, selectors, actions }) => {
     test.setTimeout(300_000);
-    await actions.chart.createFrom(
-      "https://environment.ld.admin.ch/foen/fab_hierarchy_test13_switzerland_canton_municipality/3",
-      "Int",
-      { timeout: 60 * 1000 }
-    );
+    await actions.chart.createFrom({
+      iri: "https://environment.ld.admin.ch/foen/fab_hierarchy_test13_switzerland_canton_municipality/3",
+      dataSource: "Int",
+      chartLoadedOptions: { timeout: 60 * 1000 },
+    });
     await selectors.edition.drawerLoaded();
     await actions.editor.changeChartType("Map");
     await selectors.chart.loaded({ timeout: 240_000 });