chore: Adds iframe helper and iframe vr test

Author: pan-kot

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

@@ -41,8 +41,8 @@ export default function () {
     <Page title="Cartesian chart tooltip visual regression page">
       <CoreChart
         {...omit(chartProps.cartesian, "ref")}
+        ariaLabel="Line chart"
         options={{
-          lang: { accessibility: { chartContainerLabel: "Line chart" } },
           series: series,
           xAxis: [{ type: "datetime", title: { text: "Time (UTC)" }, valueFormatter: dateFormatter }],
           yAxis: [{ title: { text: "Events" } }],

pages/06-visual-tests/in-iframe.page.tsx

@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { omit } from "lodash";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+import { IframeWrapper } from "../utils/iframe-wrapper";
+
+export default function () {
+  return (
+    <IframeWrapper
+      AppComponent={() => {
+        const { chartProps } = useChartSettings();
+        return (
+          <Page title="Chart inside iframe visual regression page">
+            <CoreChart
+              {...omit(chartProps.pie, "ref")}
+              ariaLabel="Pie chart"
+              options={{
+                series: [
+                  {
+                    name: "Resource count",
+                    type: "pie",
+                    data: [
+                      { name: "Running", y: 60 },
+                      { name: "Failed", y: 30 },
+                      { name: "In-progress", y: 10 },
+                    ],
+                  },
+                ],
+              }}
+              callback={(api) => {
+                setTimeout(() => {
+                  if (api.chart.series) {
+                    const point = api.chart.series[0].data.find((p) => p.y === 10)!;
+                    api.highlightChartPoint(point);
+                  }
+                }, 0);
+              }}
+            />
+          </Page>
+        );
+      }}
+    />
+  );
+}

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

@@ -26,9 +26,9 @@ export default function () {
   return (
     <Page title="Pie chart tooltip visual regression page">
       <CoreChart
-        {...omit(chartProps.cartesian, "ref")}
+        {...omit(chartProps.pie, "ref")}
+        ariaLabel="Pie chart"
         options={{
-          lang: { accessibility: { chartContainerLabel: "Pie chart" } },
           series: series,
         }}
         chartHeight={400}

pages/utils/iframe-wrapper.module.scss

@@ -0,0 +1,14 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.full-screen {
+  inline-size: 100%;
+  block-size: calc(
+    100vh - var(--awsui-sticky-vertical-top-offset, 0px) - var(--awsui-sticky-vertical-bottom-offset, 0px)
+  );
+  border-inline: 0;
+  border-block: 0;
+  display: block;
+}

pages/utils/iframe-wrapper.tsx

@@ -0,0 +1,75 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+
+import styles from "./iframe-wrapper.module.scss";
+
+export function IframeWrapper({ id = "iframe", AppComponent }: { id?: string; AppComponent: React.ComponentType }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
+    const iframeEl = container.ownerDocument.createElement("iframe");
+    iframeEl.className = styles["full-screen"];
+    iframeEl.id = id;
+    iframeEl.title = id;
+    container.appendChild(iframeEl);
+
+    const iframeDocument = iframeEl.contentDocument!;
+    // Prevent iframe document instance from reload
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=543435
+    iframeDocument.open();
+    // set html5 doctype
+    iframeDocument.writeln("<!DOCTYPE html>");
+    iframeDocument.close();
+
+    const innerAppRoot = iframeDocument.createElement("div");
+    iframeDocument.body.appendChild(innerAppRoot);
+    copyStyles(document, iframeDocument);
+    iframeDocument.dir = document.dir;
+    const syncClassesCleanup = syncClasses(document.body, iframeDocument.body);
+    const root = createRoot(innerAppRoot);
+    root.render(<AppComponent />);
+    return () => {
+      syncClassesCleanup();
+      root.unmount();
+      container.removeChild(iframeEl);
+    };
+  }, [id, AppComponent]);
+
+  return <div ref={ref}></div>;
+}
+
+function copyStyles(srcDoc: Document, targetDoc: Document) {
+  for (const stylesheet of Array.from(srcDoc.querySelectorAll("link[rel=stylesheet]"))) {
+    const newStylesheet = targetDoc.createElement("link");
+    for (const attr of stylesheet.getAttributeNames()) {
+      newStylesheet.setAttribute(attr, stylesheet.getAttribute(attr)!);
+    }
+    targetDoc.head.appendChild(newStylesheet);
+  }
+
+  for (const styleEl of Array.from(srcDoc.querySelectorAll("style"))) {
+    const newStyle = targetDoc.createElement("style");
+    newStyle.textContent = styleEl.textContent;
+    targetDoc.head.appendChild(newStyle);
+  }
+}
+
+function syncClasses(from: HTMLElement, to: HTMLElement) {
+  to.className = from.className;
+  const observer = new MutationObserver(() => {
+    to.className = from.className;
+  });
+
+  observer.observe(from, { attributes: true, attributeFilter: ["class"] });
+
+  return () => {
+    observer.disconnect();
+  };
+}