Skip to content

Commit 8541d99

Browse files
v-baambativ-baambati
committed
added new test file for v9 charts download button action
1 parent e2c3aac commit 8541d99

File tree

2 files changed

+81
-49
lines changed

2 files changed

+81
-49
lines changed

‎apps/plotly_examples/tests/DeclarativeChart_v9.spec.ts‎

Lines changed: 9 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable no-loop-func */
2-
import { test, expect, Page, BrowserContext } from '@playwright/test';
3-
import { chartsListWithErrors, testMatrix } from './test-matrix';
4-
2+
import { test, expect } from '@playwright/test';
3+
import { chartsListWithErrorsV9, testMatrix } from './test-matrix';
54

65
for (const testConfig of testMatrix) {
76
const theme = testConfig.theme;
@@ -10,8 +9,8 @@ for (const testConfig of testMatrix) {
109
const testLocaleName = locale ? `-${locale}` : '';
1110
const highContrast = testConfig.highContrast ? '-HighContrast' : '';
1211
test.describe('', () => {
13-
let context: BrowserContext;
14-
let page: Page;
12+
let context;
13+
let page;
1514

1615
test.beforeAll(async ({ browser }) => {
1716
if (testConfig.highContrast) {
@@ -28,8 +27,9 @@ for (const testConfig of testMatrix) {
2827
test.afterAll(async () => {
2928
await context?.close();
3029
});
30+
//test.describe(`Declarative chart examples in ${theme} mode and ${mode} layout`, () => {
3131
for (let index = testConfig.startExampleIndex; index <= testConfig.endExampleIndex; index++) {
32-
test(`Declarative chart example ${index + 1}-${theme}-${mode} mode${testLocaleName}${highContrast}`, async () => {
32+
test(`Declarative chart example ${index + 1}-${theme}-${mode} mode${testLocaleName}${highContrast}` , async () => {
3333
const iframe = page.locator('#webpack-dev-server-client-overlay');
3434
if (await iframe.count() > 0) {
3535
await iframe.evaluate((el) => el.remove()).catch(() => {
@@ -47,57 +47,17 @@ for (const testConfig of testMatrix) {
4747
const combobox = page.getByRole('combobox');
4848
await combobox.nth(1).click();
4949
const listitems = listbox.last().getByRole('option');
50-
5150
await listitems.nth(index).scrollIntoViewIfNeeded();
5251
await listitems.nth(index).click();
53-
const chart = page.getByTestId('chart-container');
52+
const chart = page.getByTestId('chart-container-v9');
5453
await page.mouse.move(0, 0); // Move mouse to top-left corner
55-
if (!chartsListWithErrors.includes(index + 1)) {
54+
if (!chartsListWithErrorsV9.includes(index + 1)) {
5655
await expect(chart).toHaveScreenshot();
5756
await combobox.last().click();
5857
} else {
5958
await expect(chart).not.toHaveScreenshot();
6059
}
6160
});
62-
63-
test(`Declarative chart example ${index + 1}-${theme}-${mode} mode${testLocaleName}${highContrast} Download V9 Chart Image`, async () => {
64-
const iframe = page.locator('#webpack-dev-server-client-overlay');
65-
if (await iframe.count() > 0) {
66-
await iframe.evaluate((el) => el.remove()).catch(() => {
67-
console.warn("Failed to remove overlay iframe.");
68-
});
69-
}
70-
await page.getByRole('combobox').first().click();
71-
const listbox = page.getByRole('listbox');
72-
await listbox.getByRole('option').locator(`text=${theme}`).click();
73-
const rtlSwitch = page.getByTestId('rtl_switch');
74-
const isCurrentlyRTL = await rtlSwitch.isChecked();
75-
if ((mode === 'RTL' && !isCurrentlyRTL) || (mode === 'LTR' && isCurrentlyRTL)) {
76-
await rtlSwitch.click();
77-
}
78-
const combobox = page.getByRole('combobox');
79-
await combobox.nth(1).click();
80-
const listbox1 = page.getByRole('listbox');
81-
const listitems = listbox1.last().getByRole('option');
82-
await listitems.nth(index).scrollIntoViewIfNeeded();
83-
await listitems.nth(index).click();
84-
const [download] = await Promise.all([
85-
page.waitForEvent('download'),
86-
page.getByRole('button', { name: "Download V9 Chart as Image" }).click()
87-
]);
88-
const downloadedImageBuffer = await stream2buffer(await download.createReadStream())
89-
expect(downloadedImageBuffer).toMatchSnapshot(`downloaded-declarative-chart-example-${index + 1}-${theme}-${mode}mode${testLocaleName}${highContrast}.png`)
90-
await download.delete()
91-
});
9261
};
9362
});
94-
}
95-
96-
async function stream2buffer(stream: Stream) {
97-
return new Promise<Buffer>((resolve, reject) => {
98-
const _buf = Array<any>();
99-
stream.on("data", chunk => _buf.push(chunk));
100-
stream.on("end", () => resolve(Buffer.concat(_buf)));
101-
stream.on("error", err => reject(`error converting stream - ${err}`));
102-
});
103-
}
63+
}

‎apps/plotly_examples/tests/DeclarativeChart_v9ChartsDownload.spec.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* eslint-disable no-loop-func */
2+
import { test, expect, Page, BrowserContext } from '@playwright/test';
3+
import { testMatrix } from './test-matrix';
4+
5+
6+
for (const testConfig of testMatrix) {
7+
const theme = testConfig.theme;
8+
const mode = testConfig.mode;
9+
const locale = testConfig.locale;
10+
const testLocaleName = locale ? `-${locale}` : '';
11+
const highContrast = testConfig.highContrast ? '-HighContrast' : '';
12+
test.describe('', () => {
13+
let context: BrowserContext;
14+
let page: Page;
15+
16+
test.beforeAll(async ({ browser }) => {
17+
if (testConfig.highContrast) {
18+
context = await browser.newContext({ locale, forcedColors: 'active', colorScheme: theme === 'Dark'? 'dark': 'light' });
19+
}
20+
else {
21+
context = await browser.newContext({ locale });
22+
}
23+
24+
page = await context.newPage();
25+
await page.goto(process.env.BASE_URL!);
26+
});
27+
28+
test.afterAll(async () => {
29+
await context?.close();
30+
});
31+
for (let index = testConfig.startExampleIndex; index <= testConfig.endExampleIndex; index++) {
32+
test(`Declarative chart example ${index + 1}-${theme}-${mode} mode${testLocaleName}${highContrast} Download V9 Chart Image`, async () => {
33+
const iframe = page.locator('#webpack-dev-server-client-overlay');
34+
if (await iframe.count() > 0) {
35+
await iframe.evaluate((el) => el.remove()).catch(() => {
36+
console.warn("Failed to remove overlay iframe.");
37+
});
38+
}
39+
await page.getByRole('combobox').first().click();
40+
const listbox = page.getByRole('listbox');
41+
await listbox.getByRole('option').locator(`text=${theme}`).click();
42+
const rtlSwitch = page.getByTestId('rtl_switch');
43+
const isCurrentlyRTL = await rtlSwitch.isChecked();
44+
if ((mode === 'RTL' && !isCurrentlyRTL) || (mode === 'LTR' && isCurrentlyRTL)) {
45+
await rtlSwitch.click();
46+
}
47+
const combobox = page.getByRole('combobox');
48+
await combobox.nth(1).click();
49+
const listbox1 = page.getByRole('listbox');
50+
const listitems = listbox1.last().getByRole('option');
51+
await listitems.nth(index).scrollIntoViewIfNeeded();
52+
await listitems.nth(index).click();
53+
const [download] = await Promise.all([
54+
page.waitForEvent('download'),
55+
page.getByRole('button', { name: "Download V9 Chart as Image" }).click()
56+
]);
57+
const downloadedImageBuffer = await stream2buffer(await download.createReadStream())
58+
expect(downloadedImageBuffer).toMatchSnapshot(`downloaded-declarative-chart-example-${index + 1}-${theme}-${mode}mode${testLocaleName}${highContrast}.png`)
59+
await download.delete()
60+
});
61+
};
62+
});
63+
}
64+
65+
async function stream2buffer(stream: Stream) {
66+
return new Promise<Buffer>((resolve, reject) => {
67+
const _buf = Array<any>();
68+
stream.on("data", chunk => _buf.push(chunk));
69+
stream.on("end", () => resolve(Buffer.concat(_buf)));
70+
stream.on("error", err => reject(`error converting stream - ${err}`));
71+
});
72+
}

0 commit comments

Comments
 (0)