File size: 3,104 Bytes
a03b3ba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { test, expect } from "@gradio/tootils";

test("selecting matplotlib should show matplotlib image and pressing clear should clear output", async ({
	page
}) => {
	await page.getByLabel("Plot Type").click();
	await page.getByRole("option", { name: "Matplotlib" }).click();
	await page.getByLabel("Month").click();
	await page.getByRole("option", { name: "January" }).click();
	await page.getByLabel("Social Distancing?").check();

	await page.click("text=Submit");

	const matplotlib_img = await page.getByTestId("matplotlib").getByRole("img");
	const matplotlib_img_data = await matplotlib_img.getAttribute("src");
	await expect(matplotlib_img_data).toBeTruthy();

	await page.getByRole("button", { name: "Clear" }).click();
	await expect(matplotlib_img).toHaveCount(0);
});

test("selecting plotly should show plotly plot and pressing clear should clear output", async ({
	page
}) => {
	await page.getByLabel("Plot Type").click();
	await page.getByRole("option", { name: "Plotly" }).click();
	await page.getByLabel("Month").click();
	await page.getByRole("option", { name: "January" }).click();
	await page.getByLabel("Social Distancing?").check();

	await page.click("text=Submit");
	await expect(page.locator(".js-plotly-plot")).toHaveCount(1);
	await page.getByRole("button", { name: "Clear" }).click();
	await expect(page.locator(".js-plotly-plot")).toHaveCount(0);
});

test("selecting altair should show altair plot and pressing clear should clear output", async ({
	page
}) => {
	await page.getByLabel("Plot Type").click();
	await page.getByRole("option", { name: "altair" }).click();
	await page.getByLabel("Month").click();
	await page.getByRole("option", { name: "January" }).click();
	await page.getByLabel("Social Distancing?").check();

	await page.click("text=Submit");

	const altair = await page.getByTestId("altair");
	await expect(altair).toHaveCount(1);

	await page.getByRole("button", { name: "Clear" }).click();
	await expect(altair).toHaveCount(0);
});

test("switching between all 3 plot types and pressing submit should update output component to corresponding plot type", async ({
	page
}) => {
	//Matplotlib
	await page.getByLabel("Plot Type").click();
	await page.getByRole("option", { name: "Matplotlib" }).click();
	await page.getByLabel("Month").click();
	await page.getByRole("option", { name: "January" }).click();
	await page.getByLabel("Social Distancing?").check();

	await page.click("text=Submit");

	const matplotlib_img = await page.getByTestId("matplotlib").getByRole("img");
	const matplotlib_img_data = await matplotlib_img.getAttribute("src");
	await expect(matplotlib_img_data).toBeTruthy();

	//Plotly
	await page.getByLabel("Plot Type").click();
	await page.getByRole("option", { name: "Plotly" }).click();

	await page.click("text=Submit");
	await expect(page.locator(".js-plotly-plot")).toHaveCount(1);

	//Altair
	await page.getByLabel("Plot Type").click();
	await page.getByRole("option", { name: "Altair" }).click();

	await page.click("text=Submit");
	const altair = await page.getByTestId("altair");
	await expect(altair).toHaveCount(1);
});