tooltip vr tests

Author: pan-kot

pages/03-core/core-line-chart.page.tsx

@@ -52,9 +52,9 @@ const baseline = [
   { x: 1601013600000, y: 293910 },
 ];
 
-const dataA = baseline.map(({ x, y }) => ({ name: "A", x, y }));
-const dataB = baseline.map(({ x, y }) => ({ name: "B", x, y: y === null ? null : y + randomInt(-100000, 100000) }));
-const dataC = baseline.map(({ x, y }) => ({ name: "C", x, y: y === null ? null : y + randomInt(-150000, 50000) }));
+const dataA = baseline.map(({ x, y }) => ({ x, y }));
+const dataB = baseline.map(({ x, y }) => ({ x, y: y === null ? null : y + randomInt(-100000, 100000) }));
+const dataC = baseline.map(({ x, y }) => ({ x, y: y === null ? null : y + randomInt(-150000, 50000) }));
 
 const series: Highcharts.SeriesOptionsType[] = [
   {

pages/03-core/debugger-module.page.tsx

@@ -24,6 +24,7 @@ export default function () {
     <Page
       title="Debugger module demo"
       subtitle="The page demonstrates how debugger module (active in development mode only) helps finding issues."
+      screenshotArea={false}
     >
       <ExampleMixedChart />
     </Page>

pages/03-core/simple-zooming.page.tsx

@@ -141,6 +141,7 @@ export default function () {
           ]}
         />
       }
+      screenshotArea={false}
     >
       <Charts />
     </Page>

pages/03-core/synced-charts.page.tsx

@@ -115,6 +115,7 @@ export default function () {
       title="Synched charts demo"
       subtitle="This page demonstrates how charts can have a synchronized tooltip and legend"
       settings={<PageSettingsForm selectedSettings={["showLegend", "tooltipSize", "tooltipPlacement"]} />}
+      screenshotArea={false}
     >
       <Charts />
     </Page>

pages/06-visual-tests/cartesian-tooltip.page.tsx

@@ -0,0 +1,68 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { omit } from "lodash";
+
+import Button from "@cloudscape-design/components/button";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { dateFormatter } from "../common/formatters";
+import { useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+
+const baseline = [
+  { x: 1600984800000, y: 58020 },
+  { x: 1600985700000, y: 102402 },
+  { x: 1600986600000, y: 104920 },
+  { x: 1600987500000, y: 94031 },
+  { x: 1600988400000, y: 125021 },
+  { x: 1600989300000, y: 159219 },
+  { x: 1600990200000, y: 193082 },
+  { x: 1600991100000, y: 162592 },
+  { x: 1600992000000, y: 274021 },
+  { x: 1600992900000, y: 264286 },
+  { x: 1600993800000, y: 289210 },
+  { x: 1600994700000, y: 256362 },
+  { x: 1600995600000, y: 257306 },
+  { x: 1600996500000, y: 186776 },
+];
+
+const dataA = baseline.map(({ x, y }) => ({ x, y }));
+const dataB = baseline.map(({ x, y }, index) => ({ x, y: y + index * 10000 }));
+
+const series: Highcharts.SeriesOptionsType[] = [
+  { name: "A", type: "spline", data: dataA },
+  { name: "B", type: "spline", data: dataB },
+];
+
+export default function () {
+  const { chartProps } = useChartSettings();
+  return (
+    <Page title="Cartesian chart tooltip visual regression page">
+      <CoreChart
+        {...omit(chartProps.cartesian, "ref")}
+        options={{
+          lang: { accessibility: { chartContainerLabel: "Line chart" } },
+          series: series,
+          xAxis: [{ type: "datetime", title: { text: "Time (UTC)" }, valueFormatter: dateFormatter }],
+          yAxis: [{ title: { text: "Events" } }],
+        }}
+        chartHeight={400}
+        tooltip={{ placement: "outside" }}
+        getTooltipContent={() => ({
+          footer() {
+            return <Button>Footer action</Button>;
+          },
+        })}
+        callback={(api) => {
+          setTimeout(() => {
+            if (api.chart.series) {
+              const point = api.chart.series[0].data.find((p) => p.x === 1600990200000)!;
+              api.highlightChartPoint(point);
+            }
+          }, 0);
+        }}
+      />
+    </Page>
+  );
+}

pages/06-visual-tests/pie-tooltip.page.tsx

@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { omit } from "lodash";
+
+import Button from "@cloudscape-design/components/button";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+
+const series: Highcharts.SeriesOptionsType[] = [
+  {
+    name: "Resource count",
+    type: "pie",
+    data: [
+      { name: "Running", y: 60 },
+      { name: "Failed", y: 30 },
+      { name: "In-progress", y: 10 },
+    ],
+  },
+];
+
+export default function () {
+  const { chartProps } = useChartSettings();
+  return (
+    <Page title="Pie chart tooltip visual regression page">
+      <CoreChart
+        {...omit(chartProps.cartesian, "ref")}
+        options={{
+          lang: { accessibility: { chartContainerLabel: "Pie chart" } },
+          series: series,
+        }}
+        chartHeight={400}
+        getTooltipContent={() => ({
+          footer() {
+            return <Button>Footer action</Button>;
+          },
+        })}
+        callback={(api) => {
+          setTimeout(() => {
+            if (api.chart.series) {
+              const point = api.chart.series[0].data.find((p) => p.y === 30)!;
+              api.highlightChartPoint(point);
+            }
+          }, 0);
+        }}
+      />
+    </Page>
+  );
+}

src/core/styles.scss

@@ -4,7 +4,6 @@
 */
 
 @use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
-@use "@cloudscape-design/component-toolkit/internal/focus-visible" as focus-visible;
 
 $side-legend-max-inline-size: 30%;
 $side-legend-min-inline-size: max(20%, 150px);
@@ -82,12 +81,6 @@ $side-legend-min-inline-size: max(20%, 150px);
   text-overflow: ellipsis;
 }
 
-.focus-outline {
-  @include focus-visible.when-visible-unfocused {
-    stroke: cs.$color-border-item-focused;
-  }
-}
-
 .error-range {
   display: flex;
   justify-content: space-between;

src/internal/styles.scss

@@ -3,6 +3,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
 @use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
+@use "@cloudscape-design/component-toolkit/internal/focus-visible" as focus-visible;
 
 $base-size: 10px;
 $font-family-base: cs.$font-family-base;
@@ -107,3 +108,9 @@ $font-weight-normal: 400;
   // But its replacement, `overflow-wrap: anywhere`, is not supported in Safari 14.0 and 15.0.
   word-break: break-word;
 }
+
+.focus-outline {
+  @include focus-visible.when-visible-unfocused {
+    stroke: cs.$color-border-item-focused;
+  }
+}

test/visual/index.test.ts

@@ -11,13 +11,14 @@ import { setupTest } from "../utils";
 const pagesMap = import.meta.glob("../../pages/**/*.page.tsx", { as: "raw" });
 const pages = Object.keys(pagesMap)
   .map((page) => page.replace(/\.page\.tsx$/, ""))
-  .map((page) => "/#/" + path.relative("../../pages/", page));
+  .map((page) => "/#/" + path.relative("../../pages/", page) + "?screenshotMode=true");
 
 test.each(pages)("matches snapshot for %s", (route) =>
   setupTest(route, ScreenshotPageObject, async (page) => {
     const hasScreenshotArea = await page.isExisting(".screenshot-area");
 
     if (hasScreenshotArea) {
+      await page.waitForJsTimers(100);
       const pngString = await page.fullPageScreenshot();
       expect(pngString).toMatchImageSnapshot();
     }