feat: Switch to Argos & fix E2E tests

.github/workflows/e2e.yml

@@ -3,7 +3,6 @@ name: E2E
 on: [deployment_status]
 jobs:
   e2e:
-    # only runs this job on successful deploy
     if: github.event.deployment_status.state == 'success'
     runs-on: ubuntu-latest
     strategy:
@@ -29,24 +28,19 @@ jobs:
           yarn e2e -- --grep-invert @noci --shard=${{ matrix.shardIndex }}/${{
           matrix.shardTotal }}
         env:
+          ARGOS_BRANCH:
+            ${{ github.event.deployment_status.environment == 'Production' &&
+            'main' || '' }}
           E2E_BASE_URL: ${{ github.event.deployment_status.target_url }}
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
           E2E_HAR: ${{ secrets.E2E_HAR }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Upload blob report to GitHub Actions Artifacts
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
         with:
           name: blob-report-${{ matrix.shardIndex }}
           path: blob-report
           retention-days: 1
-      - name: Upload E2E artifacts to job
-        uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: e2e-screenshots
-          path: |
-            e2e-screenshots
-            playwright-report
   merge-reports:
     if: ${{ !cancelled() }}
     needs: [e2e]

CHANGELOG.md

@@ -20,6 +20,10 @@ You can also check the
   - Fixed preview via API (iframe)
   - Fixed cut table scroll-bars and unnecessary scroll of bar charts when
     switching between chart types
+  - Sorting dataset results by score option is now correctly available to select
+- Maintenance
+  - Re-enabled screenshot tests using Argos CI
+  - Fixed E2E HAR-based tests
   - Fixed map dimension symbols to increase the elements size for small values,
     whilst preventing any 0 and undefined values from displaying
   - Added Footer to the Profile Page

app/browser/dataset-browse.tsx

@@ -222,7 +222,7 @@ export const SearchDatasetControls = ({
         <SearchDatasetSortControl
           value={order}
           onChange={onSetOrder}
-          disableScore={isSearching}
+          disableScore={!isSearching}
         />
       </Flex>
     </Flex>

app/package.json

@@ -146,8 +146,6 @@
     "@lingui/macro": "^3.17.2",
     "@lingui/vite-plugin": "^4.7.1",
     "@mdx-js/loader": "^1.6.22",
-    "@percy/cli": "^1.26.1",
-    "@percy/playwright": "^1.0.4",
     "@playwright-testing-library/test": "^4.5.0",
     "@playwright/test": "^1.44.1",
     "@svgr/cli": "^5.5.0",

e2e/chart-snapshots.spec.ts

@@ -1,4 +1,4 @@
-import percySnapshot from "@percy/playwright";
+import { argosScreenshot } from "@argos-ci/playwright";
 
 import intConfigs from "../app/test/__fixtures/config/int/configs";
 
@@ -36,7 +36,7 @@ for (let [viewportName, viewportSize] of Object.entries(viewports)) {
       await selectors.chart.loaded();
 
       await sleep(2_000);
-      await percySnapshot(page, `chart-snapshot-${viewportName}-${slug}`);
+      await argosScreenshot(page, `chart-snapshot-${viewportName}-${slug}`);
     });
   }
 }

e2e/common.ts

@@ -2,13 +2,13 @@ import {
   locatorFixtures as fixtures,
   LocatorFixtures as TestingLibraryFixtures,
 } from "@playwright-testing-library/test/fixture";
-import { test as base, Page, PlaywrightTestOptions } from "@playwright/test";
+import { Page, PlaywrightTestOptions, test as base } 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];
+type RouteFromHAROptions = Parameters<Page["routeFromHAR"]>[1];
 
 const setup = (contextOptions?: PlaywrightTestOptions["contextOptions"]) => {
   const test = base.extend<TestingLibraryFixtures>(fixtures).extend<{
@@ -28,18 +28,17 @@ const setup = (contextOptions?: PlaywrightTestOptions["contextOptions"]) => {
     },
     replayFromHAR: async ({ page }, use, testInfo) => {
       let index = 0;
-      const replay = async (routeFromHAROptions?: RouteFromHAROptions
-      ) => {
+      const replay = async (routeFromHAROptions?: RouteFromHAROptions) => {
         const name = `${testInfo.titlePath
           .map((x) => x.replace(/\.spec\.ts$/, ""))
           .map((x) => x.replace(/@[^\s]+$/, ""))
           .map(slugify)
           .join(" > ")} ${index++}`;
-        if (process.env.E2E_HAR !== "false") {
+        if (process.env.E2E_HAR && process.env.E2E_HAR !== "false") {
           await page.routeFromHAR(`./e2e/har/${name}.zip`, {
             url: /api\/graphql/,
             notFound: "abort",
-            ...routeFromHAROptions
+            ...routeFromHAROptions,
           });
         }
       };

e2e/edition.spec.ts

@@ -1,4 +1,4 @@
-import percySnapshot from "@percy/playwright";
+import { argosScreenshot } from "@argos-ci/playwright";
 
 import { loadChartInLocalStorage } from "./charts-utils";
 import { setup, sleep } from "./common";
@@ -39,7 +39,5 @@ test("should be possible to edit filters of a hierarchy", async ({
   });
 
   await sleep(2_000);
-  await percySnapshot(page, `chart-edition-${key}`, {
-    scope: "[data-testid='panel-middle']",
-  });
+  await argosScreenshot(page, `chart-edition-${key}`);
 });

e2e/fixtures/hierarchy-test-13-municipality-population.json

@@ -3,7 +3,7 @@
   "dataSet": "https://environment.ld.admin.ch/foen/fab_hierarchy_test13_switzerland_canton_municipality/3",
   "dataSource": {
     "type": "sparql",
-    "url": "https://int.lindas.admin.ch/query"
+    "url": "https://lindas-cached.int.cluster.ldbar.ch/query"
   },
   "meta": {
     "title": { "de": "", "fr": "", "it": "", "en": "" },

e2e/har-utils.ts

@@ -80,6 +80,9 @@ export const getEnv = (name: string) => {
  * 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`)
-)}`;
+export const harReplayGraphqlEndpointQueryParam =
+  process.env.E2E_HAR && process.env.E2E_HAR !== "false"
+    ? `flag__graphql.endpoint=${encodeURIComponent(
+        JSON.stringify(`http://localhost:3000/api/graphql`)
+      )}`
+    : "";

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

@@ -1,4 +1,4 @@
-import percySnapshot from "@percy/playwright";
+import { argosScreenshot } from "@argos-ci/playwright";
 
 import { setup, sleep } from "./common";
 
@@ -16,13 +16,12 @@ testFn(
     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 });
+    await selectors.chart.loaded();
 
     await sleep(2_000);
-    await percySnapshot(page, "chart-map-high-filter-value-count");
+    argosScreenshot(page, `chart-map-high-filter-value-count`);
   }
 );

e2e/search.spec.ts

@@ -43,7 +43,7 @@ test("search results count coherence", async ({
   const categories = [
     "Administration",
     "Agriculture, forestry",
-    "Finances",
+    "National economy",
     "Territory and environment",
   ];
 
@@ -57,10 +57,14 @@ test("search results count coherence", async ({
     await page.goto(
       `/en/browse?dataSource=Int&${harReplayGraphqlEndpointQueryParam}`
     );
+
     await selectors.search.resultsCount();
 
     const panelLeft = await selectors.panels.left();
-    await (await within(panelLeft).getAllByText("Show all")[0]).click();
+
+    await (
+      await within(panelLeft).locator(`button:has-text("Show all")`).first()
+    ).click();
 
     await within(panelLeft).findByText(t, undefined, { timeout: 10_000 });
 
@@ -71,7 +75,7 @@ test("search results count coherence", async ({
 
     await page
       .locator(`:text("${count} datasets")`)
-      .waitFor({ timeout: 10000 });
+      .waitFor({ timeout: 10_000 });
   }
 });
 
@@ -189,22 +193,22 @@ test("sort language consistency", async ({
 }) => {
   test.slow();
   await replayFromHAR();
-  const count1 = await getResultCountForSearch("wasser", {
+  const count1 = await getResultCountForSearch("badegewässer", {
     locale: "en",
     page,
     selectors,
   });
-  const count2 = await getResultCountForSearch("wasser", {
+  const count2 = await getResultCountForSearch("badegewässer", {
     locale: "de",
     page,
     selectors,
   });
-  const count3 = await getResultCountForSearch("wasser", {
+  const count3 = await getResultCountForSearch("badegewässer", {
     locale: "fr",
     page,
     selectors,
   });
-  const count4 = await getResultCountForSearch("wasser", {
+  const count4 = await getResultCountForSearch("badegewässer", {
     locale: "it",
     page,
     selectors,
@@ -214,12 +218,12 @@ test("sort language consistency", async ({
   expect(count1).toEqual(count3);
   expect(count1).toEqual(count4);
 
-  const count5 = await getResultCountForSearch("water", {
+  const count5 = await getResultCountForSearch("bathing water", {
     locale: "en",
     page,
     selectors,
   });
-  const count6 = await getResultCountForSearch("eaux", {
+  const count6 = await getResultCountForSearch("baignade", {
     locale: "de",
     page,
     selectors,
@@ -229,7 +233,7 @@ test("sort language consistency", async ({
     page,
     selectors,
   });
-  const count8 = await getResultCountForSearch("water", {
+  const count8 = await getResultCountForSearch("bathing water", {
     locale: "it",
     page,
     selectors,

e2e/sorting.spec.ts

@@ -10,22 +10,20 @@ const { test, expect } = setup();
  * - For each type of chart, changes the sorting between Name and Automatic
  * - Checks that the legend item order is coherent.
  */
-// FIX: works without Browser, some bug with Browser closed error
-test.skip("Segment sorting", async ({
+test("Segment sorting", async ({
   selectors,
   actions,
   within,
   screen,
-  page,
   replayFromHAR,
 }) => {
   test.setTimeout(60_000);
 
   await replayFromHAR();
 
   await actions.chart.createFrom({
-    iri: "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/13",
-    dataSource: "Int",
+    iri: "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/10",
+    dataSource: "Prod",
     createURLParams: harReplayGraphqlEndpointQueryParam,
   });
 
@@ -119,19 +117,44 @@ test("Segment sorting with hierarchy", async ({
   const legendItems = await selectors.chart.colorLegendItems();
 
   const expectedLegendItems = [
+    "Jura",
+    "Jura + Plateau",
+    "Western Jura",
     "Zurich",
     "Bern",
+    "Eastern Jura",
+    "Northwestern Alps",
+    "Plateau",
     "Lucerne",
+    "Northeastern Alps",
+    "Pre-Alps",
+    "Western Plateau",
+    "Alps",
+    "Central Plateau",
+    "Southwestern Alps",
     "Uri",
+    "Eastern Plateau",
     "Schwyz",
+    "Southeastern Alps",
+    "Southern Alps",
     "Obwalden",
+    "Southern Alps",
+    "Western Pre-Alps",
+    "Central Pre-Alps",
     "Nidwalden",
+    "Eastern Pre-Alps",
     "Glarus",
+    "Northwestern Alps",
     "Zug",
+    "Central Alps",
     "Fribourg",
+    "Northeastern Alps",
     "Solothurn",
+    "Southwestern Alps",
+    "Southeastern Alps",
     "both Basel",
     "Schaffhausen",
+    "Southern Alps",
     "Appenzell Ausserrhoden",
     "Appenzell Innerrhoden",
     "St Gallen",
@@ -154,19 +177,7 @@ test("Segment sorting with hierarchy", async ({
   );
 });
 
-const uniqueWithoutSorting = <T>(arr: T[]) => {
-  const res: T[] = [];
-  for (let i = 0; i < arr.length; i++) {
-    const prev = i > 0 ? arr[i - 1] : undefined;
-    const cur = arr[i];
-    if (prev !== cur) {
-      res.push(cur);
-    }
-  }
-  return res;
-};
-
-test("Map legend preview table sorting", async ({
+test.skip("Map legend preview table sorting", async ({
   actions,
   selectors,
   replayFromHAR,
@@ -185,11 +196,6 @@ test("Map legend preview table sorting", async ({
   await actions.chart.switchToTableView();
   await actions.datasetPreview.sortBy("Danger ratings");
   const cells = await selectors.datasetPreview.columnCells("Danger ratings");
-
-  const texts = await cells.allInnerTexts();
-  // TODO: Think about other cube / validation as this cube is updated quite often (day / week)
-  // and thus will fail often.
-  // expect(uniqueWithoutSorting(texts)).toEqual(["low danger", "moderate danger"]);
 });
 
 test("Sorting with values with same label as other values in the tree", async ({
@@ -202,7 +208,7 @@ test("Sorting with values with same label as other values in the tree", async ({
   const config = hierarchyTest13;
   await loadChartInLocalStorage(page, key, config);
   page.goto(`/en/create/${key}?${harReplayGraphqlEndpointQueryParam}`);
-  await selectors.chart.loaded({ timeout: 30_000 });
+  await selectors.chart.loaded();
 
   const texts = await Promise.all(
     await (

e2e/undefined-literals.spec.ts

@@ -12,7 +12,7 @@ test("should not have literal undefined values inside a table preview", async ({
   const iri =
     "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/13";
 
-  await actions.datasetPreview.load(iri, "Int");
+  await actions.datasetPreview.load({ iri, dataSource: "Int" });
 
   await selectors.datasetPreview.loaded();