Skip to content

Commit 785cc0e

Browse files
JulianCataldoJulianCataldo
committed
test: init playwright + initial test
1 parent 62499b0 commit 785cc0e

File tree

5 files changed

+157
-0
lines changed

5 files changed

+157
-0
lines changed

‎playwright.config.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
export default defineConfig({
4+
// Look for test files in the "tests" directory, relative to this configuration file.
5+
testDir: 'tests',
6+
7+
// Run all tests in parallel.
8+
fullyParallel: true,
9+
10+
// Fail the build on CI if you accidentally left test.only in the source code.
11+
forbidOnly: !!process.env.CI,
12+
13+
// Retry on CI only.
14+
retries: process.env.CI ? 2 : 0,
15+
16+
// Opt out of parallel tests on CI.
17+
workers: process.env.CI ? 1 : undefined,
18+
19+
// Reporter to use
20+
// reporter: 'html',
21+
22+
use: {
23+
// Base URL to use in actions like `await page.goto('/')`.
24+
baseURL: 'http://localhost:9898',
25+
26+
// Collect trace when retrying the failed test.
27+
trace: 'on-first-retry',
28+
},
29+
// Configure projects for major browsers.
30+
projects: [
31+
{
32+
name: 'chromium',
33+
use: { ...devices['Desktop Chrome'] },
34+
},
35+
],
36+
// Run your local dev server before starting the tests.
37+
// webServer: {
38+
// command: 'pnpm vite dev',
39+
// url: 'http://localhost:9898',
40+
// reuseExistingServer: !process.env.CI,
41+
// },
42+
});

‎tests/__fixtures__/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="sl-theme-light">
3+
<head>
4+
<script type="module">
5+
import '@shoelace-style/shoelace/dist/themes/light.css';
6+
import '@shoelace-style/shoelace/dist/themes/dark.css';
7+
8+
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
9+
10+
setBasePath('/shoelace');
11+
12+
import '../../lib/index.ts';
13+
</script>
14+
<style>
15+
body {
16+
font-family: var(--sl-font-sans);
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<textarea id="dump"></textarea>
22+
<hr />
23+
</body>
24+
</html>

‎tests/__fixtures__/prepare.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { type Page } from 'playwright';
2+
3+
import type { JSONSchema7, FromSchema } from '../../lib/index.js';
4+
5+
export async function prepare(
6+
page: Page,
7+
initialData: any,
8+
schema: JSONSchema7,
9+
) {
10+
await page.goto('/');
11+
12+
await page.evaluate(
13+
({ initialData, schema }) => {
14+
const dump = document.querySelector<HTMLTextAreaElement>('#dump')!;
15+
const jsfe = document.createElement('json-schema-form');
16+
17+
document.body.appendChild(jsfe);
18+
19+
jsfe.schema = schema;
20+
21+
jsfe.data = initialData;
22+
23+
jsfe.onDataChange = (newData) => {
24+
console.log(newData);
25+
console.log({ newData: JSON.stringify(newData) });
26+
dump.innerText = JSON.stringify(newData);
27+
};
28+
29+
jsfe.onFormSubmit = (newData, valid) => {
30+
dump.innerText = JSON.stringify(newData);
31+
console.log({ newData: JSON.stringify(newData), valid });
32+
};
33+
},
34+
{ initialData, schema },
35+
);
36+
}

‎tests/numbers.test.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import test, { expect } from 'playwright/test';
2+
import type { JSONSchema7, FromSchema } from '../lib/index.js';
3+
import { prepare } from './__fixtures__/prepare.js';
4+
5+
const schema = {
6+
type: 'object',
7+
title: 'Numbers',
8+
properties: {
9+
foo: {
10+
default: 4,
11+
type: 'number',
12+
},
13+
bar: {
14+
default: 2,
15+
type: 'number',
16+
maximum: 12,
17+
},
18+
},
19+
} as const satisfies JSONSchema7;
20+
type Data = FromSchema<typeof schema>;
21+
22+
const initialData: Data = { foo: 123 };
23+
24+
test('Numbers', async ({ page }) => {
25+
await prepare(page, initialData, schema);
26+
27+
expect(page.getByLabel('foo')).toBeVisible();
28+
expect(page.getByLabel('foo')).toHaveValue('123');
29+
expect(page.getByLabel('bar')).toBeVisible();
30+
expect(page.getByLabel('bar')).toHaveValue('2');
31+
32+
await page.getByLabel('bar').fill('10');
33+
expect(page.getByLabel('bar')).toHaveValue('10');
34+
await page.getByLabel('foo').fill('14');
35+
expect(page.getByLabel('foo')).toHaveValue('14');
36+
await page.getByLabel('bar').fill('223');
37+
38+
expect(page.locator('#dump')).toHaveValue(
39+
JSON.stringify({ foo: 14, bar: 223 }),
40+
);
41+
42+
await page.getByRole('button', { name: 'Submit' }).click();
43+
44+
expect(page.locator('#bar[data-user-invalid]')).toBeVisible();
45+
46+
expect(page.locator('#dump')).toHaveValue(
47+
JSON.stringify({ foo: 14, bar: 223 }),
48+
);
49+
});

‎vite.config.mjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { defineConfig } from 'vite';
2+
3+
export default defineConfig({
4+
root: 'tests/__fixtures__/',
5+
server: { port: 9898 },
6+
});

0 commit comments

Comments
 (0)