mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adds more tests to outbreak_forecast.spec.ts (#4752)

Browse Source 
* tests

* Update outbreak_forecast.spec.ts
This commit is contained in:
Dawood Khan 2023-07-04 15:23:50 -04:00 committed by GitHub
parent a2805d5591
commit 95ca4d9d69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
js/app/test/outbreak_forecast.spec.ts
View File

@ -1,6 +1,6 @@
import { test, expect } from "@gradio/tootils";
test("matplotlib", async ({ page }) => {
test("selecting matplotlib should show matplotlib image and pressing clear should clear output", async ({ page }) => {
await page.getByLabel("Plot Type").click();
await page.getByRole("button", { name: "Matplotlib" }).click();
await page.getByLabel("Month").click();
@ -12,12 +12,15 @@ test("matplotlib", async ({ page }) => {
page.waitForResponse("**/run/predict")
]);
const matplotlib_img = await page.locator("img").nth(0);
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("plotly", async ({ page }) => {
test("selecting plotly should show plotly plot and pressing clear should clear output", async ({ page }) => {
await page.getByLabel("Plot Type").click();
await page.getByRole("button", { name: "Plotly" }).click();
await page.getByLabel("Month").click();
@ -29,4 +32,64 @@ test("plotly", async ({ page }) => {
page.waitForResponse("**/run/predict")
]);
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("button", { name: "altair" }).click();
await page.getByLabel("Month").click();
await page.getByRole("button", { name: "January" }).click();
await page.getByLabel("Social Distancing?").check();
await Promise.all([
page.click("text=Submit"),
page.waitForResponse("**/run/predict")
]);
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("button", { name: "Matplotlib" }).click();
await page.getByLabel("Month").click();
await page.getByRole("button", { name: "January" }).click();
await page.getByLabel("Social Distancing?").check();
await Promise.all([
page.click("text=Submit"),
page.waitForResponse("**/run/predict")
]);
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("button", { name: "Plotly" }).click();
await Promise.all([
page.click("text=Submit"),
page.waitForResponse("**/run/predict")
]);
await expect(page.locator(".js-plotly-plot")).toHaveCount(1);
//Altair
await page.getByLabel("Plot Type").click();
await page.getByRole("button", { name: "Altair" }).click();
await Promise.all([
page.click("text=Submit"),
page.waitForResponse("**/run/predict")
]);
const altair = await page.getByTestId('altair');
await expect(altair).toHaveCount(1);
});

9
js/plot/src/Plot.svelte
View File

@ -1,3 +1,4 @@
<script lang="ts">
//@ts-nocheck
import Plotly from "plotly.js-dist-min";
@ -190,11 +191,11 @@
</script>
{#if value && type == "plotly"}
<div bind:this={plotDiv} />
<div data-testid={"plotly"} bind:this={plotDiv} />
{:else if type == "bokeh"}
<div id={divId} class="gradio-bokeh"/>
<div data-testid={"bokeh"} id={divId} class="gradio-bokeh"/>
{:else if type == "altair"}
<div class="altair layout">
<div data-testid={"altair"} class="altair layout">
<Vega {spec} />
{#if caption}
<div class="caption layout">
@ -203,7 +204,7 @@
{/if}
</div>
{:else if type == "matplotlib"}
<div class="matplotlib layout">
<div data-testid={"matplotlib"} class="matplotlib layout">
<!-- svelte-ignore a11y-missing-attribute -->
<img src={plot} />
</div>