Skip to content

Commit 0a64b18

Browse files
JulianCataldoJulianCataldo
committed
test: real e2e with dedicated example app
1 parent 9ae6201 commit 0a64b18

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1721
-136
lines changed

‎e2e/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "@jsfe/e2e",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"private": true,
6+
"scripts": {
7+
"test": "playwright test",
8+
"test:ui": "playwright test --ui"
9+
},
10+
"devDependencies": {
11+
"@axe-core/playwright": "^4.10.1",
12+
"@playwright/test": "^1.38.1",
13+
"playwright": "^1.38.1"
14+
}
15+
}

‎tests/playwright.config.ts renamed to ‎e2e/playwright.config.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default defineConfig({
2121

2222
use: {
2323
// Base URL to use in actions like `await page.goto('/')`.
24-
baseURL: 'http://localhost:9898',
24+
baseURL: 'http://localhost:3032',
2525

2626
// Collect trace when retrying the failed test.
2727
trace: 'on-first-retry',
@@ -34,9 +34,9 @@ export default defineConfig({
3434
},
3535
],
3636
// 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-
// },
37+
webServer: {
38+
command: 'pnpm -C .. --filter=example-app dev',
39+
url: 'http://localhost:3032',
40+
reuseExistingServer: !process.env.CI,
41+
},
4242
});

‎e2e/tests/all-features-generics.spec.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { common } from './all-features.js';
2+
3+
common({
4+
url: '/test-1/',
5+
system: 'generic',
6+
});

‎e2e/tests/all-features-webawesome.spec.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// import { common } from './all-features.js';
2+
3+
// common({
4+
// url: '/test-2/',
5+
// system: 'shoelace',
6+
// });

‎e2e/tests/all-features.interactivity.ts

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
import test, { expect } from 'playwright/test';
2+
3+
import type { System } from './all-features.js';
4+
5+
export function interactivity({
6+
url,
7+
system: _system,
8+
}: {
9+
url: string;
10+
// skip: { buttonGroup: boolean; rating: boolean };
11+
system: System;
12+
}) {
13+
test('02 - All feats - Fill and submit form', async ({ page }) => {
14+
await page.goto(url);
15+
// await addOutline();
16+
17+
await page.keyboard.press('Tab'); // Skip details
18+
19+
await page.keyboard.press('Tab');
20+
await page.keyboard.type('Some text input');
21+
await page.keyboard.press('Tab');
22+
await page.keyboard.type('Some other -required- text input');
23+
await page.keyboard.press('Tab');
24+
await page.keyboard.type('Simple inline string');
25+
await page.keyboard.press('Tab');
26+
await page.keyboard.type('STRING WITH CONSTRAINTS');
27+
await page.keyboard.press('Tab');
28+
await page.keyboard.type('Password format');
29+
await page.keyboard.press('Tab');
30+
await page.keyboard.type('Email@format.com');
31+
await page.keyboard.press('Tab');
32+
await page.keyboard.type(
33+
'Text area Text area Text area Text area Text area Text area Text area Text area Text area Text area Text area Text area',
34+
);
35+
// Color picker
36+
await page.keyboard.press('Tab');
37+
await page.keyboard.press('Space');
38+
await page.keyboard.press('ArrowLeft');
39+
await page.keyboard.press('ArrowLeft');
40+
await page.keyboard.press('Enter');
41+
42+
await page.keyboard.press('Tab');
43+
await page.keyboard.type('123.123');
44+
await page.keyboard.press('Tab');
45+
await page.keyboard.type('1234');
46+
await page.keyboard.press('Tab');
47+
await page.keyboard.type('90');
48+
// Range 1
49+
await page.keyboard.press('Tab');
50+
await page.keyboard.press('ArrowLeft');
51+
await page.keyboard.press('ArrowLeft');
52+
// Range 2
53+
await page.keyboard.press('Tab');
54+
await page.keyboard.press('ArrowRight');
55+
await page.keyboard.press('ArrowRight');
56+
57+
// TODO: Rating
58+
59+
// Checkbox 1
60+
await page.keyboard.press('Tab');
61+
await page.keyboard.press('Space');
62+
// Checkbox 2
63+
await page.keyboard.press('Tab');
64+
await page.keyboard.press('Space');
65+
// Switch
66+
await page.keyboard.press('Tab');
67+
await page.keyboard.press('Space');
68+
// Radio 1
69+
await page.keyboard.press('Tab');
70+
await page.keyboard.press('ArrowRight');
71+
// HACK: REMOVE after bug fix
72+
await page.keyboard.press('ArrowRight');
73+
await page.keyboard.press('ArrowRight');
74+
// HACK: --^
75+
// Radio 1
76+
await page.keyboard.press('Tab');
77+
await page.keyboard.press('ArrowRight');
78+
await page.keyboard.press('ArrowLeft');
79+
// await page.keyboard.type('Text area');
80+
81+
// Select 1
82+
await page.keyboard.press('Tab');
83+
await page.keyboard.type('H');
84+
// Select 2
85+
await page.keyboard.press('Tab');
86+
await page.keyboard.type('1');
87+
88+
// Radio group 1
89+
await page.keyboard.press('Tab');
90+
await page.keyboard.press('ArrowRight');
91+
await page.keyboard.press('ArrowRight');
92+
// Radio group 2
93+
await page.keyboard.press('Tab');
94+
await page.keyboard.press('ArrowRight');
95+
await page.keyboard.press('ArrowRight');
96+
97+
// MARK: Enumerations
98+
// await page.keyboard.press('Tab');
99+
// TODO: Buttons group
100+
// if (theme === 'shoelace')
101+
102+
// FIXME: Dates
103+
104+
// NOTE: Browser quirk, we can't use keyboard actions.
105+
await page.fill(
106+
'input[name="Primitives.Date.DateTime"]',
107+
'2025-04-23T14:30',
108+
);
109+
await page.fill('input[name="Primitives.Date.Date"]', '2025-04-23');
110+
await page.fill('input[name="Primitives.Date.Time"]', '14:30');
111+
112+
await page.keyboard.press('Tab');
113+
await page.keyboard.press('Tab');
114+
await page.keyboard.press('Tab');
115+
116+
// FIXME: Date
117+
// await page.keyboard.press('Tab');
118+
// await page.keyboard.press('Tab');
119+
// await page.keyboard.press('Tab');
120+
// await page.keyboard.press('Tab');
121+
// await page.keyboard.press('Tab');
122+
// await page.keyboard.press('Tab');
123+
// await page.keyboard.press('Tab');
124+
// await page.keyboard.press('Tab');
125+
// await page.keyboard.press('Tab');
126+
// await page.keyboard.press('Tab');
127+
// await page.keyboard.press('Tab');
128+
// await page.keyboard.press('Tab');
129+
// await page.keyboard.press('Tab');
130+
131+
// await page.fill('id=birthday', date);
132+
// // await page.keyboard.type('1');
133+
// // await page.keyboard.press('Tab');
134+
// // await page.keyboard.type('1');
135+
// // await page.keyboard.press('Tab');
136+
// // await page.keyboard.type('1999');
137+
// // await page.keyboard.type('11');
138+
// // await page.keyboard.press('Tab');
139+
// // await page.keyboard.type('11');
140+
// // await page.keyboard.press('Tab');
141+
// // await page.keyboard.press('Tab');
142+
143+
// // Date and time
144+
// await page.keyboard.press('Tab');
145+
// await page.keyboard.press('Tab');
146+
// await page.keyboard.press('Tab');
147+
// await page.keyboard.press('Tab');
148+
149+
// // Time
150+
// await page.keyboard.press('Tab');
151+
// await page.keyboard.press('Tab');
152+
// await page.keyboard.press('Tab');
153+
154+
// // MARK: Arrays
155+
156+
// await page.keyboard.press('Tab');
157+
// await page.keyboard.press('Tab');
158+
// await page.keyboard.type('I tried');
159+
// // Down
160+
// await page.keyboard.press('Shift+Tab');
161+
// await page.keyboard.press('Space');
162+
163+
// New
164+
// await page.keyboard.press('Tab');
165+
// await page.keyboard.press('Tab');
166+
// await page.keyboard.press('Tab');
167+
// await page.keyboard.press('Tab');
168+
// await page.keyboard.press('Tab');
169+
// await page.keyboard.press('Space');
170+
// await page.keyboard.press('Space');
171+
// await page.keyboard.press('Space');
172+
173+
// Up
174+
// await page.keyboard.press('Shift+Tab');
175+
// await page.keyboard.type('UPPED');
176+
// await page.keyboard.press('Shift+Tab');
177+
// await page.keyboard.press('Space');
178+
179+
// await page.keyboard.press('Tab');
180+
// await page.keyboard.press('Tab');
181+
// await page.keyboard.press('Tab');
182+
// await page.keyboard.press('Shift+Tab');
183+
// await page.keyboard.type('New 2');
184+
// await page.keyboard.press('Shift+Tab');
185+
// await page.keyboard.press('Space');
186+
// await page.keyboard.press('Shift+Tab');
187+
// await page.keyboard.press('Space');
188+
189+
await page.keyboard.press('Tab');
190+
191+
// return;
192+
// Submit
193+
await page.keyboard.press('Enter');
194+
195+
expect(
196+
JSON.parse(await page.locator('#form-result pre').innerText()),
197+
).toStrictEqual([
198+
['Object.TextFoo', 'Some text input'],
199+
['Object.TextBar', 'Some other -required- text input'],
200+
201+
['Primitives.Strings.SimpleString', 'Simple inline string'],
202+
['Primitives.Strings.StringConstrained', 'STRING WIT'],
203+
['Primitives.Strings.Password', 'Password format'],
204+
['Primitives.Strings.Email', 'Email@format.com'],
205+
[
206+
'Primitives.Strings.TextArea',
207+
'Text area Text area Text area Text area Text area Text area Text area Text area Text area Text area Text area Text area',
208+
],
209+
['Primitives.Strings.Color', '#4c92e1'],
210+
211+
['Primitives.Numbers.Float', '123.123'],
212+
['Primitives.Numbers.Integer', '1234'],
213+
['Primitives.Numbers.NumberConstrained', '90'],
214+
['Primitives.Numbers.Range', '48'],
215+
['Primitives.Numbers.RangeConstrained', '50'],
216+
217+
['Primitives.Booleans.Checkbox', 'false'],
218+
['Primitives.Booleans.Checkbox', 'true'],
219+
// ['Primitives.Booleans.CheckboxWithData', 'false'], // NOTE: Special case.
220+
['Primitives.Booleans.Radio', 'false'],
221+
['Primitives.Booleans.RadioWithDefault', 'false'],
222+
223+
['Primitives.Enumerations.Selects.StringList', 'Hello'],
224+
['Primitives.Enumerations.Selects.NumberList', '100'],
225+
['Primitives.Enumerations.Radios.String', 'Bonjour'],
226+
['Primitives.Enumerations.Radios.Number', '10'],
227+
228+
['Primitives.Date.DateTime', '2025-04-23T14:30'],
229+
['Primitives.Date.Date', '2025-04-23'],
230+
['Primitives.Date.Time', '14:30'],
231+
232+
['Arrays.Fixed.0', ''],
233+
['Arrays.Fixed.2.when', ''],
234+
['Arrays.MultipleChoicesSelect', 'Apple'],
235+
['Arrays.MultipleChoicesSelect', 'Pineapple'],
236+
['Arrays.MultipleChoicesSelect', 'Banana'],
237+
['Arrays.MultipleChoicesSelect', 'Mango'],
238+
['Arrays.MultipleChoicesSelect', 'Avocado'],
239+
['Arrays.MultipleChoicesCheckboxes', 'on'],
240+
['Arrays.MultipleChoicesCheckboxes', 'on'],
241+
['Arrays.MultipleChoicesCheckboxes', 'on'],
242+
['Arrays.MultipleChoicesCheckboxes', 'on'],
243+
244+
['Arrays.Primitives.0', 'Try me!'],
245+
['Arrays.Primitives.1', 'Second entry…'],
246+
// ['Arrays.Primitives.0', 'Second entry…'],
247+
// ['Arrays.Primitives.1', 'Try me!'],
248+
// ['Arrays.Fixed.0', '42'],
249+
// ['Arrays.Fixed.1', 'on'],
250+
251+
// ['Arrays.Fixed.0', '42'],
252+
// ['Arrays.Fixed.2.when', ''],
253+
]);
254+
});
255+
}

‎e2e/tests/all-features.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { interactivity } from './all-features.interactivity.js';
2+
import { visibility } from './all-features.visibility.js';
3+
4+
export type System = 'shoelace' | 'generic';
5+
6+
export function common({
7+
url,
8+
system: theme,
9+
}: {
10+
url: string;
11+
system: System;
12+
}) {
13+
visibility({ url, system: theme });
14+
interactivity({ url, system: theme });
15+
16+
// TODO: Errors (interactivity + a11y)
17+
}

0 commit comments

Comments
 (0)