test: Add abbreviations e2e test

Author: bprusinowski

app/charts/shared/axis-width-band.tsx

@@ -34,7 +34,7 @@ export const AxisWidthBand = () => {
     const fontSize =
       xScale.bandwidth() > labelFontSize ? labelFontSize : xScale.bandwidth();
 
-    g.call(axis);
+    g.call(axis).attr("data-testid", "axis-width-band");
 
     g.select(".domain").remove();
     g.selectAll(".tick line").attr(

app/configurator/components/chart-options-selector.tsx

@@ -423,6 +423,7 @@ const ChartFieldAbbreviations = ({
 
   return (
     <ChartOptionCheckboxField
+      data-testid="use-abbreviations"
       label={getFieldLabel("abbreviations")}
       field={field}
       path={path ? `${path}.useAbbreviations` : "useAbbreviations"}

e2e/abbreviations.spec.ts

@@ -0,0 +1,68 @@
+import { expect, sleep, test } from "./common";
+
+test("it should be possible to enable abbreviations", async ({
+  actions,
+  selectors,
+}) => {
+  await actions.chart.createFrom(
+    "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/6",
+    "Prod"
+  );
+
+  await actions.editor.selectActiveField("Horizontal Axis");
+
+  let checkbox = await selectors.edition.useAbbreviationsCheckbox();
+
+  expect(await checkbox.isDisabled()).toEqual(true);
+
+  await (
+    await selectors.panels.drawer().within().findByText("Jahr der Vergütung")
+  ).click();
+
+  await actions.mui.selectOption("Kanton");
+
+  // Wait for the data to load.
+  await selectors.chart.loaded();
+  await selectors.edition.filtersLoaded();
+
+  expect(await checkbox.isDisabled()).toEqual(false);
+
+  await checkbox.click();
+
+  await sleep(5_000);
+
+  const xAxis = await selectors.chart.axisWidthBand();
+  const ticks = (await xAxis.textContent()) as string;
+  expect([ticks.slice(0, 2), ticks.slice(-2)]).toEqual(["ZH", "NE"]);
+
+  await (await selectors.panels.drawer().within().findByText("Kanton")).click();
+
+  await actions.mui.selectOption("Jahr der Vergütung");
+
+  await sleep(5_000);
+
+  await actions.drawer.close();
+
+  await actions.editor.selectActiveField("Color");
+
+  await (await selectors.panels.drawer().within().findByText("None")).click();
+
+  await actions.mui.selectOption("Kanton");
+
+  checkbox = await selectors.edition.useAbbreviationsCheckbox();
+  await checkbox.click();
+
+  // Wait for the data to load.
+  await selectors.chart.loaded();
+  await selectors.edition.filtersLoaded();
+  await selectors.chart.colorLegend(undefined, { setTimeout: 5_000 });
+
+  const legendItems = await (
+    await selectors.chart.colorLegendItems()
+  ).allInnerTexts();
+
+  expect([legendItems[0], legendItems[legendItems.length - 1]]).toEqual([
+    "ZH",
+    "JU",
+  ]);
+});

e2e/actions.ts

@@ -80,6 +80,9 @@ export const createActions = ({
       within,
     }),
   },
+  drawer: {
+    close: async () => await screen.locator('text="Back to main"').click(),
+  },
 });
 
 export type Actions = ReturnType<typeof createActions>;

e2e/selectors.ts

@@ -53,12 +53,18 @@ export const createSelectors = ({ screen, page, within }: Ctx) => {
         }),
       dataFilterInput: (label: string) =>
         page.locator(`div[role="button"]:has-text("${label}")`),
+      useAbbreviationsCheckbox: () =>
+        screen
+          .getByTestId("panel-drawer")
+          .within()
+          .findByText("Use abbreviations"),
     },
     published: {
       interactiveFilters: () =>
         screen.getByTestId("published-chart-interactive-filters"),
     },
     chart: {
+      axisWidthBand: async () => screen.findByTestId("axis-width-band"),
       colorLegend: (options?, waitForOptions?) =>
         screen.findByTestId("colorLegend", options, waitForOptions),
       colorLegendItems: async () =>

e2e/sorting.spec.ts

@@ -76,7 +76,7 @@ test("Segment sorting", async ({
 
     await actions.mui.selectOption("Automatic");
 
-    await page.locator('text="Back to main"').click();
+    await actions.drawer.close();
   }
 });