Skip to content

Commit 26d2c19

Browse files
pngwnpngwn
authored
add test infra + add browser tests to CI (#852)
* add test infra * improve test setup and utils * finish a test * add browser tests to ci * fix ci * fix ci * fix ci * fix ci * debug ci * debug ci * debug ci * debug ci * debug ci * debug ci * debug ci * fix ci * update lockfile * fix formatting * install browser when not cached * bust cache * debug test in ci * fix button label * generate screenshots for failed tests * generate screenshots for failed tests * generate screenshots for failed tests * fix tests * clean uip debug logs * add setuip + teardown to functional tests * remove build from static checks
1 parent 398f556 commit 26d2c19

30 files changed

Lines changed: 2382 additions & 369 deletions

File tree

‎.github/workflows/ui.yml‎

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ name: gradio-ui
22

33
on:
44
push:
5-
branches:
6-
- "master"
5+
branches:
6+
- "main"
77
paths:
88
- "ui/**"
99
pull_request:
@@ -12,23 +12,30 @@ on:
1212

1313
defaults:
1414
run:
15-
working-directory: ./ui
15+
working-directory: ui
16+
17+
env:
18+
CI: true
19+
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
1620

1721
concurrency:
1822
group: deploy-${{ github.ref }}-${{ github.event_name == 'push' || github.event.inputs.fire != null }}
1923
cancel-in-progress: true
2024

2125
jobs:
22-
check:
26+
quick-checks:
2327
name: static checks
2428
runs-on: ubuntu-latest
2529
steps:
26-
- uses: actions/checkout@v2
27-
- run: npm i -g pnpm@6
28-
- uses: actions/setup-node@v2
30+
- uses: actions/checkout@v3
31+
- uses: pnpm/action-setup@v2.2.1
32+
with:
33+
version: 6
34+
- uses: actions/setup-node@v3
2935
with:
3036
node-version: 16
31-
37+
cache: pnpm
38+
cache-dependency-path: ui/pnpm-lock.yaml
3239
- name: install dependencies
3340
run: pnpm i --frozen-lockfile
3441
- name: formatting check
@@ -38,5 +45,32 @@ jobs:
3845
continue-on-error: true
3946
- name: unit tests
4047
run: pnpm test:run
41-
- name: build
42-
run: pnpm build
48+
functional-test:
49+
runs-on: ubuntu-latest
50+
steps:
51+
- uses: actions/checkout@v3
52+
- uses: pnpm/action-setup@v2.2.1
53+
with:
54+
version: 6
55+
- uses: actions/setup-node@v3
56+
with:
57+
node-version: 16
58+
cache: pnpm
59+
cache-dependency-path: ui/pnpm-lock.yaml
60+
- name: Cache browsers
61+
id: browser_cache
62+
uses: actions/cache@main
63+
with:
64+
path: "~/.cache/ms-playwright"
65+
key: chromium-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
66+
- run: pnpm install --frozen-lockfile
67+
- run: pnpx playwright install chromium
68+
- run: pnpm build
69+
- run: pnpm test:browser
70+
- name: Upload failed tests screenshots
71+
if: failure()
72+
uses: actions/upload-artifact@v3
73+
with:
74+
retention-days: 3
75+
name: test-failure-${{ github.run_id }}
76+
path: ui/packages/app/test-results

‎demo/xray_blocks/config.json‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
{
2+
"mode": "blocks",
3+
"components": [
4+
{
5+
"id": 1,
6+
"type": "markdown",
7+
"props": {
8+
"value": "<pre><code># Detect Disease From Scan\nWith this model you can lorem ipsum\n- ipsum 1\n- ipsum 2\n</code></pre>\n",
9+
"name": "markdown",
10+
"label": null,
11+
"css": {}
12+
}
13+
},
14+
{
15+
"id": 2,
16+
"type": "checkboxgroup",
17+
"props": {
18+
"choices": ["Covid", "Malaria", "Lung Cancer"],
19+
"default": [],
20+
"name": "checkboxgroup",
21+
"label": "Disease to Scan For",
22+
"css": {}
23+
}
24+
},
25+
{ "id": 3, "type": "tabs", "props": null },
26+
{ "id": 4, "type": "tabitem", "props": { "label": "X-ray" } },
27+
{ "id": 5, "type": "row", "props": { "type": "row" } },
28+
{
29+
"id": 6,
30+
"type": "image",
31+
"props": {
32+
"image_mode": "RGB",
33+
"shape": null,
34+
"source": "upload",
35+
"tool": "editor",
36+
"name": "image",
37+
"label": null,
38+
"css": {}
39+
}
40+
},
41+
{
42+
"id": 7,
43+
"type": "json",
44+
"props": { "name": "json", "label": null, "css": {} }
45+
},
46+
{
47+
"id": 8,
48+
"type": "button",
49+
"props": {
50+
"value": "Run",
51+
"name": "button",
52+
"label": null,
53+
"css": { "background-color": "red", "--hover-color": "orange" }
54+
}
55+
},
56+
{ "id": 9, "type": "tabitem", "props": { "label": "CT Scan" } },
57+
{ "id": 10, "type": "row", "props": { "type": "row" } },
58+
{
59+
"id": 11,
60+
"type": "image",
61+
"props": {
62+
"image_mode": "RGB",
63+
"shape": null,
64+
"source": "upload",
65+
"tool": "editor",
66+
"name": "image",
67+
"label": null,
68+
"css": {}
69+
}
70+
},
71+
{
72+
"id": 12,
73+
"type": "json",
74+
"props": { "name": "json", "label": null, "css": {} }
75+
},
76+
{
77+
"id": 13,
78+
"type": "button",
79+
"props": { "value": "Run", "name": "button", "label": null, "css": {} }
80+
},
81+
{
82+
"id": 14,
83+
"type": "textbox",
84+
"props": {
85+
"lines": 1,
86+
"placeholder": null,
87+
"default": "",
88+
"name": "textbox",
89+
"label": null,
90+
"css": {}
91+
}
92+
}
93+
],
94+
"theme": "default",
95+
"layout": {
96+
"id": 0,
97+
"children": [
98+
{ "id": 1 },
99+
{ "id": 2 },
100+
{
101+
"id": 3,
102+
"children": [
103+
{
104+
"id": 4,
105+
"children": [
106+
{ "id": 5, "children": [{ "id": 6 }, { "id": 7 }] },
107+
{ "id": 8 }
108+
]
109+
},
110+
{
111+
"id": 9,
112+
"children": [
113+
{ "id": 10, "children": [{ "id": 11 }, { "id": 12 }] },
114+
{ "id": 13 }
115+
]
116+
}
117+
]
118+
},
119+
{ "id": 14 }
120+
]
121+
},
122+
"dependencies": [
123+
{ "targets": [8], "trigger": "click", "inputs": [2, 6], "outputs": [7] },
124+
{ "targets": [13], "trigger": "click", "inputs": [2, 11], "outputs": [12] }
125+
]
126+
}

‎demo/xray_blocks/run.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
from textwrap import indent
12
import gradio as gr
23

34
import random
@@ -38,4 +39,5 @@
3839

3940
overall_probability = gr.components.Textbox()
4041

42+
print(xray_blocks.get_config_file())
4143
xray_blocks.launch()

‎gradio/templates/frontend/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@
4545
</script>
4646
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
4747
<title>Gradio</title>
48-
<script type="module" crossorigin src="./assets/index.b8adfcc9.js"></script>
49-
<link rel="modulepreload" href="./assets/vendor.cb9b505c.js">
50-
<link rel="stylesheet" href="./assets/index.7e32d9ef.css">
48+
<script type="module" crossorigin src="./assets/index.cdad49d2.js"></script>
49+
<link rel="modulepreload" href="./assets/vendor.90013e04.js">
50+
<link rel="stylesheet" href="./assets/index.778d40cb.css">
5151
</head>
5252

5353
<body style="height: 100%; margin: 0; padding: 0">

‎gradio/templates/frontend/lang/en.json‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎gradio/templates/frontend/lang/es.json‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎ui/.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
node_modules
22
public/build/
3-
3+
test-results
44

‎ui/package.json‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,38 @@
1010
"format:write": "prettier --write --plugin-search-dir=. .",
1111
"ts:check": "svelte-check --tsconfig tsconfig.json",
1212
"test": "vitest dev",
13-
"test:run": "vitest run"
13+
"test:run": "vitest run",
14+
"test:browser": "pnpm test:browser --filter @gradio/app",
15+
"test:browser:full": "run-s build test:browser",
16+
"test:browser:debug": "pnpm test:browser:debug --filter @gradio/app"
1417
},
1518
"type": "module",
1619
"author": "",
1720
"license": "ISC",
1821
"private": true,
1922
"dependencies": {
20-
"autoprefixer": "^9.8.8",
23+
"@gradio/tootils": "workspace:^0.0.1",
24+
"@playwright/test": "^1.20.0",
25+
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
26+
"@testing-library/dom": "^8.11.3",
27+
"@testing-library/svelte": "^3.1.0",
28+
"autoprefixer": "^10.4.4",
29+
"happy-dom": "^2.49.0",
30+
"npm-run-all": "^4.1.5",
31+
"polka": "^1.0.0-next.22",
2132
"postcss": "^8.4.5",
2233
"postcss-nested": "^5.0.6",
2334
"prettier": "^2.5.1",
2435
"prettier-plugin-svelte": "^2.6.0",
36+
"sirv": "^2.0.2",
37+
"sirv-cli": "^2.0.2",
2538
"svelte": "^3.46.3",
2639
"svelte-check": "^2.4.1",
2740
"svelte-i18n": "^3.3.13",
2841
"svelte-preprocess": "^4.10.1",
2942
"tailwindcss": "^3.0.23",
30-
"vitest": "^0.3.2"
43+
"tinyspy": "^0.3.0",
44+
"vite": "^2.7.13",
45+
"vitest": "^0.7.4"
3146
}
3247
}

‎ui/packages/app/package.json‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@
55
"scripts": {
66
"dev": "vite",
77
"build": "vite build",
8-
"preview": "vite preview"
9-
},
10-
"devDependencies": {
11-
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
12-
"vite": "^2.7.13"
8+
"preview": "vite preview",
9+
"test:browser": "pnpx playwright test test/ --config=../../playwright.config.js",
10+
"test:browser:debug": "pnpx playwright test test/ --debug"
1311
},
1412
"dependencies": {
1513
"@gradio/audio": "workspace:^0.0.1",
@@ -30,7 +28,6 @@
3028
"@gradio/theme": "workspace:^0.0.1",
3129
"@gradio/upload": "workspace:^0.0.1",
3230
"@gradio/video": "workspace:^0.0.1",
33-
"autoprefixer": "^9.8.8",
3431
"mime-types": "^2.1.34",
3532
"svelte-i18n": "^3.3.13"
3633
}

‎ui/packages/app/src/Blocks.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
const c = await component_map[name]();
6868
res({ name, component: c });
6969
} catch (e) {
70-
console.log(name)
70+
console.log(name);
7171
rej(e);
7272
}
7373
});

0 commit comments

Comments
 (0)
⚡