fix: Fixes popover pin when highlight moves from point to group (#106)

* fix: Fixes popover pin when highlight moves from point to group

* add integ regression test

Author: pan-kot

pages/01-cartesian-chart/column-chart-test.page.tsx

@@ -0,0 +1,35 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import ColumnLayout from "@cloudscape-design/components/column-layout";
+
+import { CartesianChart } from "../../lib/components";
+import { numberFormatter } from "../common/formatters";
+import { useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+
+const categories = ["Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019", "Dec 2019"];
+const costsData = [6562, 8768, 9742, 10464, 16777, 9956, 5876];
+const prevCostsData = [6862, 6322, 10112, 9220, 13123, 11277, 7862];
+const costsSeries = [
+  { id: "costs", name: "Costs", type: "column", data: costsData },
+  { id: "prev-costs", name: "Prev costs", type: "column", data: prevCostsData },
+] as const;
+
+export default function () {
+  const { chartProps } = useChartSettings();
+  return (
+    <Page title="Integration tests page for column cartesian charts">
+      <ColumnLayout columns={2}>
+        <CartesianChart
+          {...chartProps.cartesian}
+          ariaLabel="Grouped column chart"
+          data-testid="grouped-column-chart"
+          series={costsSeries}
+          xAxis={{ type: "category", title: "Budget month", categories }}
+          yAxis={{ title: "Costs (USD)", valueFormatter: numberFormatter }}
+        />
+      </ColumnLayout>
+    </Page>
+  );
+}

src/core/__tests__/chart-core-navigation-cartesian.test.tsx

@@ -8,8 +8,7 @@ import { vi } from "vitest";
 import { KeyCode } from "@cloudscape-design/component-toolkit/internal";
 
 import "highcharts/modules/accessibility";
-import { CoreChartProps } from "../../../lib/components/core/interfaces";
-import { createChartWrapper, renderChart } from "./common";
+import { CoreChartTestProps, createChartWrapper, renderChart } from "./common";
 
 const seriesShort2: Highcharts.SeriesOptionsType[] = [
   {
@@ -64,7 +63,7 @@ const seriesLong1: Highcharts.SeriesOptionsType[] = [
     data: range(1, 1001).map((x) => ({ x, y: -x })),
   },
 ];
-function commonProps(invertedSetting: boolean | "random" = false, series = seriesShort2): CoreChartProps {
+function commonProps(invertedSetting: boolean | "random" = false, series = seriesShort2): CoreChartTestProps {
   const inverted = invertedSetting === "random" ? Math.random() > 0.5 : invertedSetting;
   return {
     highcharts,

src/core/__tests__/common.tsx

@@ -33,12 +33,12 @@ export function StatefulChart(props: CoreChartProps) {
   );
 }
 
-type TestProps = Partial<CoreChartProps> & {
+export type CoreChartTestProps = Partial<CoreChartProps> & {
   onLegendItemHighlight?: () => void;
   i18nProvider?: Record<string, Record<string, string>>;
 };
 
-export function renderChart({ i18nProvider, ...props }: TestProps, Component = CoreChart) {
+export function renderChart({ i18nProvider, ...props }: CoreChartTestProps, Component = CoreChart) {
   const ComponentWrapper = (props: CoreChartProps) => {
     return i18nProvider ? (
       <TestI18nProvider messages={i18nProvider}>
@@ -51,11 +51,11 @@ export function renderChart({ i18nProvider, ...props }: TestProps, Component = C
   const { rerender } = render(<ComponentWrapper {...props} />);
   return {
     wrapper: createChartWrapper(),
-    rerender: (props: TestProps) => rerender(<ComponentWrapper {...props} />),
+    rerender: (props: CoreChartTestProps) => rerender(<ComponentWrapper {...props} />),
   };
 }
 
-export function renderStatefulChart(props: TestProps) {
+export function renderStatefulChart(props: CoreChartTestProps) {
   return renderChart(props, StatefulChart);
 }
 

src/core/chart-api/chart-extra-tooltip.tsx

@@ -103,9 +103,8 @@ export class ChartExtraTooltip extends AsyncStore<ReactiveTooltipState> {
     function isGroupEqual(a: Highcharts.Point, b: Highcharts.Point) {
       return a?.x === b?.x && a?.y === b?.y && getSeriesId(a?.series) === getSeriesId(b?.series);
     }
-
     this.set((prev) => {
-      return isEqualArrays(prev.group, group, isGroupEqual)
+      return prev.point === null && isEqualArrays(prev.group, group, isGroupEqual)
         ? prev
         : { visible: true, pinned: false, point: null, group };
     });

test/functional/cartesian-chart.test.ts

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { expect, test } from "vitest";
+
+import "@cloudscape-design/components/test-utils/selectors";
+import "../../lib/components/test-utils/selectors";
+import createWrapper from "../../lib/components/test-utils/selectors";
+import { setupTest } from "../utils";
+
+const w = createWrapper();
+
+test(
+  "pins chart tooltip after hovering chart point and then chart point group",
+  setupTest("#/01-cartesian-chart/column-chart-test", async (page) => {
+    const chart = w.findCartesianHighcharts('[data-testid="grouped-column-chart"]');
+    const point = chart.find('[aria-label="Jul 2019 6.32K, Prev costs"]');
+    const expectedTooltipContent = ["Jul 2019\nCosts\n8.77K\nPrev costs\n6.32K"];
+
+    const pointBox = await page.getBoundingBox(point.toSelector());
+    const pointCenter = [pointBox.left + pointBox.width / 2, pointBox.top + pointBox.height / 2];
+
+    // Hover on the 2nd point in group.
+    await page.moveCursorTo(pointCenter[0], pointCenter[1]);
+    await expect(page.getElementsText(chart.findTooltip().toSelector())).resolves.toEqual(expectedTooltipContent);
+    await expect(page.isExisting(chart.findTooltip().findDismissButton().toSelector())).resolves.toBe(false);
+
+    // Hover above the point (on the group).
+    await page.moveCursorBy(0, -pointBox.height);
+    await expect(page.getElementsText(chart.findTooltip().toSelector())).resolves.toEqual(expectedTooltipContent);
+    await expect(page.isExisting(chart.findTooltip().findDismissButton().toSelector())).resolves.toBe(false);
+
+    // Clicking on the group should pin the tooltip.
+    await page.clickHere();
+    await expect(page.getElementsText(chart.findTooltip().toSelector())).resolves.toEqual(expectedTooltipContent);
+    await expect(page.isExisting(chart.findTooltip().findDismissButton().toSelector())).resolves.toBe(true);
+  }),
+);

test/functional/index.test.ts

@@ -3,7 +3,6 @@
 
 import { expect, test } from "vitest";
 
-import { BasePageObject } from "@cloudscape-design/browser-test-tools/page-objects";
 import createWrapper from "@cloudscape-design/components/test-utils/selectors";
 
 import "../../lib/components/test-utils/selectors";
@@ -13,7 +12,7 @@ const wrapper = createWrapper();
 
 test(
   "index page",
-  setupTest("#", BasePageObject, async (page) => {
+  setupTest("#", async (page) => {
     await expect(page.getText("h1")).resolves.toBe("Welcome!");
     await expect(page.getElementsCount(wrapper.findLink().toSelector())).resolves.toBeGreaterThan(5);
   }),

test/functional/selectors.test.ts

@@ -3,8 +3,6 @@
 
 import { expect, test } from "vitest";
 
-import { BasePageObject } from "@cloudscape-design/browser-test-tools/page-objects";
-
 import "@cloudscape-design/components/test-utils/selectors";
 import "../../lib/components/test-utils/selectors";
 import createWrapper from "../../lib/components/test-utils/selectors";
@@ -14,7 +12,7 @@ const w = createWrapper();
 
 test(
   "root selectors",
-  setupTest("#/05-demos/website-playground-examples", BasePageObject, async (page) => {
+  setupTest("#/05-demos/website-playground-examples", async (page) => {
     await expect(page.getElementsCount(w.findCartesianHighcharts().toSelector())).resolves.toBe(11);
     await expect(page.getElementsCount(w.findAllCartesianHighcharts().toSelector())).resolves.toBe(11);
     await expect(page.getElementsCount(w.findAllCartesianHighcharts().get(1).toSelector())).resolves.toBe(11);

test/utils.ts

@@ -1,12 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { BasePageObject } from "@cloudscape-design/browser-test-tools/page-objects";
+import { BasePageObject, ScreenshotPageObject } from "@cloudscape-design/browser-test-tools/page-objects";
 import useBrowser from "@cloudscape-design/browser-test-tools/use-browser";
 
-export function setupTest<P extends BasePageObject & { init?(): Promise<void> }>(
-  url: string,
+export function setupTest(url: string, test: (page: ChartPageObject) => Promise<void>) {
+  return setupTestBase(ChartPageObject, url, test);
+}
+
+export function setupScreenshotTest(url: string, test: (page: ScreenshotPageObject) => Promise<void>) {
+  return setupTestBase(ScreenshotPageObject, url, test);
+}
+
+function setupTestBase<P extends BasePageObject & { init?(): Promise<void> }>(
   PageClass: new (browser: WebdriverIO.Browser) => P,
+  url: string,
   test: (page: P) => Promise<void>,
 ) {
   return useBrowser({}, async (browser) => {
@@ -22,3 +30,48 @@ export function setupTest<P extends BasePageObject & { init?(): Promise<void> }>
     await test(page);
   });
 }
+
+class ChartPageObject extends BasePageObject {
+  async moveCursorTo(x: number, y: number) {
+    await this.browser.performActions([
+      {
+        type: "pointer",
+        id: "event",
+        parameters: { pointerType: "mouse" },
+        actions: [
+          { type: "pointerMove", duration: 100, origin: "viewport", x, y },
+          { type: "pause", duration: 150 },
+        ],
+      },
+    ]);
+  }
+
+  async moveCursorBy(xOffset: number, yOffset: number) {
+    await this.browser.performActions([
+      {
+        type: "pointer",
+        id: "event",
+        parameters: { pointerType: "mouse" },
+        actions: [
+          { type: "pointerMove", duration: 100, origin: "pointer", x: xOffset, y: yOffset },
+          { type: "pause", duration: 150 },
+        ],
+      },
+    ]);
+  }
+
+  async clickHere() {
+    await this.browser.performActions([
+      {
+        type: "pointer",
+        id: "event",
+        parameters: { pointerType: "mouse" },
+        actions: [
+          { type: "pointerDown", origin: "pointer", button: 0, duration: 20 },
+          { type: "pointerUp", origin: "pointer", button: 0, duration: 20 },
+          { type: "pause", duration: 150 },
+        ],
+      },
+    ]);
+  }
+}

test/visual/index.test.ts

@@ -4,9 +4,7 @@
 import path from "path";
 import { expect, test } from "vitest";
 
-import { ScreenshotPageObject } from "@cloudscape-design/browser-test-tools/page-objects";
-
-import { setupTest } from "../utils";
+import { setupScreenshotTest } from "../utils";
 
 const pagesMap = import.meta.glob("../../pages/**/*.page.tsx", { as: "raw" });
 const allPages = Object.keys(pagesMap)
@@ -18,7 +16,7 @@ const rtlPages = allPages
   .map((page) => page + "&direction=rtl");
 
 test.each([...allPages, ...rtlPages])("matches snapshot for %s", (route) =>
-  setupTest(route, ScreenshotPageObject, async (page) => {
+  setupScreenshotTest(route, async (page) => {
     const hasScreenshotArea = await page.isExisting(".screenshot-area");
     if (hasScreenshotArea) {
       await page.waitForJsTimers(100);