Add playwright test to verify the image export functionality

apps/plotly_examples/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.16.0",
-    "@fluentui/react-charting": "^5.23.46",
+    "@fluentui/react-charting": "^5.23.48",
     "@fluentui/react-components": "^9.21.0",
     "@fluentui/react-portal-compat": "9.0.176",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

apps/plotly_examples/playwright.config.ts

@@ -76,4 +76,6 @@ export default defineConfig({
   //   url: 'http://127.0.0.1:3000',
   //   reuseExistingServer: !process.env.CI,
   // },
+
+  snapshotPathTemplate: '{testDir}/{testFilePath}-snapshots/{arg}{ext}'
 });

apps/plotly_examples/src/App.tsx

@@ -61,7 +61,7 @@ const App: React.FC = () => {
             onChange={handleRTLSwitchChange}
             label={labelRTLMode}
           />
-          &nbsp;&nbsp;<Body2>@fluentui/react-charting &nbsp;</Body2><Subtitle2>v5.23.43</Subtitle2>
+          &nbsp;&nbsp;<Body2>@fluentui/react-charting &nbsp;</Body2><Subtitle2>v5.23.48</Subtitle2>
           <br />
           <Subtitle2>Chart Width:</Subtitle2>&nbsp;&nbsp;
           <Slider

apps/plotly_examples/src/components/DeclarativeChart.tsx

@@ -281,7 +281,7 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
         <br />
         <button
           onClick={() => {
-            declarativeChartRef.current?.exportAsImage().then((imgData: string) => {
+            declarativeChartRef.current?.exportAsImage({ scale: 1 }).then((imgData: string) => {
               fileSaver(imgData);
             });
           }}

apps/plotly_examples/tests/DeclarativeChart.spec.ts

@@ -1,35 +1,65 @@
-import { test, expect, Locator } from '@playwright/test';
-import * as dotenv from 'dotenv';
+import { test, expect } from '@playwright/test';
 
-const chartsListWithErrors = [];
+const chartsListWithErrors: number[] = [];
 var totalChartExamplesCount = 302;
 
-test.beforeEach( async ({ page }) => {
+test.beforeEach(async ({ page }) => {
   //Pass base URL as part of playwright command 
   //ex:  npx cross-env BASE_URL='https://fluentchartstest-stage.azurewebsites.net/' npx playwright test
   await page.goto(process.env.BASE_URL);
 });
 
 for (let index = 0; index < totalChartExamplesCount; index++) {
-  test(`Declarative chart example ${ index + 1 }`, async ({ page }) => {
-   const iframe = page.locator('#webpack-dev-server-client-overlay');
-   if (await iframe.count() > 0) {
+  test(`Declarative chart example ${index + 1}`, async ({ page }) => {
+    const iframe = page.locator('#webpack-dev-server-client-overlay');
+    if (await iframe.count() > 0) {
       await iframe.evaluate((el) => el.remove()).catch(() => {
-      console.warn("Failed to remove overlay iframe.");
-    });
-  }
-  const combobox = page.getByRole('combobox');
-  await combobox.nth(1).click();
-  const listbox = page.getByRole('listbox');
-  const listitems = listbox.last().getByRole('option');
-  if (!chartsListWithErrors.includes(index)) {
+        console.warn("Failed to remove overlay iframe.");
+      });
+    }
+    const combobox = page.getByRole('combobox');
+    await combobox.nth(1).click();
+    const listbox = page.getByRole('listbox');
+    const listitems = listbox.last().getByRole('option');
+    if (!chartsListWithErrors.includes(index)) {
+      await listitems.nth(index).scrollIntoViewIfNeeded();
+      await listitems.nth(index).click();
+      const chart = page.getByTestId('chart-container');
+      await expect(chart).toHaveScreenshot();
+    } else {
+      test.fail();
+    }
+  });
+
+  test(`Declarative chart example ${index + 1} downloaded image`, async ({ page }) => {
+    const iframe = page.locator('#webpack-dev-server-client-overlay');
+    if (await iframe.count() > 0) {
+      await iframe.evaluate((el) => el.remove()).catch(() => {
+        console.warn("Failed to remove overlay iframe.");
+      });
+    }
+
+    const combobox = page.getByRole('combobox');
+    await combobox.nth(1).click();
+    const listbox = page.getByRole('listbox');
+    const listitems = listbox.last().getByRole('option');
     await listitems.nth(index).scrollIntoViewIfNeeded();
     await listitems.nth(index).click();
-    const chart = page.getByTestId('chart-container');
-    await expect(chart).toHaveScreenshot();
-    await combobox.last().click();
-  } else {
-    test.fail();
-  }
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      page.getByRole('button', { name: "Download as Image" }).click()
+    ]);
+    const downloadedImageBuffer = await stream2buffer(await download.createReadStream())
+    expect(downloadedImageBuffer).toMatchSnapshot(`downloaded-declarative-chart-example-${index + 1}.png`)
+    await download.delete()
   });
 };
+
+async function stream2buffer(stream: Stream) {
+  return new Promise<Buffer>((resolve, reject) => {
+    const _buf = Array<any>();
+    stream.on("data", chunk => _buf.push(chunk));
+    stream.on("end", () => resolve(Buffer.concat(_buf)));
+    stream.on("error", err => reject(`error converting stream - ${err}`));
+  });
+}