Skip to content

Commit 5108eca

Browse files
mrginglymusmrginglymus
committed
parameterize
1 parent c9d8218 commit 5108eca

File tree

3 files changed

+119
-108
lines changed

3 files changed

+119
-108
lines changed

‎libraries/__shared__/tests/advanced-tests.test.js‎

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -16,62 +16,60 @@
1616
*/
1717

1818
import {expect, test} from '@playwright/test';
19-
import {getProp} from "./util";
19+
import {getProp, each} from "./util";
2020

21-
test.beforeEach(async ({page}) => {
22-
await page.goto('/react');
23-
})
21+
each(() => {
22+
test.describe('advanced support', () => {
23+
test.describe('attributes and properties', () => {
24+
test('will pass array data as a property', async ({page}) => {
25+
const ce = page.locator('#ce-with-properties');
26+
expect(await getProp(ce, 'arr')).toEqual(['R', 'e', 'a', 'c', 't'])
27+
})
2428

25-
test.describe('advanced support', () => {
26-
test.describe('attributes and properties', () => {
27-
test('will pass array data as a property', async ({page}) => {
28-
const ce = page.locator('#ce-with-properties');
29-
expect(await getProp(ce, 'arr')).toEqual(['R', 'e', 'a', 'c', 't'])
30-
})
29+
test('will pass object data as a property', async ({page}) => {
30+
const ce = page.locator('#ce-with-properties');
31+
expect(await getProp(ce, 'obj')).toEqual({org: "facebook", repo: "react"})
32+
})
3133

32-
test('will pass object data as a property', async ({page}) => {
33-
const ce = page.locator('#ce-with-properties');
34-
expect(await getProp(ce, 'obj')).toEqual({org: "facebook", repo: "react"})
35-
})
34+
test("will pass object data to a camelCase-named property", async ({page}) => {
35+
const ce = page.locator('#ce-with-properties');
36+
expect(await getProp(ce, 'camelCaseObj')).toEqual({label: "passed"})
37+
})
38+
});
3639

37-
test("will pass object data to a camelCase-named property", async ({page}) => {
38-
const ce = page.locator('#ce-with-properties');
39-
expect(await getProp(ce, 'camelCaseObj')).toEqual({label: "passed"})
40-
})
41-
});
40+
test.describe('events', () => {
4241

43-
test.describe('events', () => {
42+
test("can declaratively listen to a lowercase DOM event dispatched by a Custom Element", async ({page}) => {
43+
const ce = page.locator('#ce-with-declarative-event');
44+
await expect(page.getByText(/lowercase:/)).toHaveText(/false/);
45+
await ce.click();
46+
await expect(page.getByText(/lowercase:/)).toHaveText(/true/);
47+
})
4448

45-
test("can declaratively listen to a lowercase DOM event dispatched by a Custom Element", async ({page}) => {
46-
const ce = page.locator('#ce-with-declarative-event');
47-
await expect(page.getByText(/lowercase:/)).toHaveText(/false/);
48-
await ce.click();
49-
await expect(page.getByText(/lowercase:/)).toHaveText(/true/);
50-
})
51-
52-
test("can declaratively listen to a camelCase DOM event dispatched by a Custom Element", async ({page}) => {
53-
const ce = page.locator('#ce-with-declarative-event');
54-
await expect(page.getByText(/camelCase:/)).toHaveText(/false/);
55-
await ce.click();
56-
await expect(page.getByText(/camelCase:/)).toHaveText(/true/);
57-
})
58-
test("can declaratively listen to a kebab-case DOM event dispatched by a Custom Element", async ({page}) => {
59-
const ce = page.locator('#ce-with-declarative-event');
60-
await expect(page.getByText(/kebab-case:/)).toHaveText(/false/);
61-
await ce.click();
62-
await expect(page.getByText(/kebab-case:/)).toHaveText(/true/);
63-
})
64-
test("can declaratively listen to a CAPScase DOM event dispatched by a Custom Element", async ({page}) => {
65-
const ce = page.locator('#ce-with-declarative-event');
66-
await expect(page.getByText(/CAPScase:/)).toHaveText(/false/);
67-
await ce.click();
68-
await expect(page.getByText(/CAPScase:/)).toHaveText(/true/);
69-
})
70-
test("can declaratively listen to a PascalCase DOM event dispatched by a Custom Element", async ({page}) => {
71-
const ce = page.locator('#ce-with-declarative-event');
72-
await expect(page.getByText(/PascalCase:/)).toHaveText(/false/);
73-
await ce.click();
74-
await expect(page.getByText(/PascalCase:/)).toHaveText(/true/);
75-
})
76-
});
49+
test("can declaratively listen to a camelCase DOM event dispatched by a Custom Element", async ({page}) => {
50+
const ce = page.locator('#ce-with-declarative-event');
51+
await expect(page.getByText(/camelCase:/)).toHaveText(/false/);
52+
await ce.click();
53+
await expect(page.getByText(/camelCase:/)).toHaveText(/true/);
54+
})
55+
test("can declaratively listen to a kebab-case DOM event dispatched by a Custom Element", async ({page}) => {
56+
const ce = page.locator('#ce-with-declarative-event');
57+
await expect(page.getByText(/kebab-case:/)).toHaveText(/false/);
58+
await ce.click();
59+
await expect(page.getByText(/kebab-case:/)).toHaveText(/true/);
60+
})
61+
test("can declaratively listen to a CAPScase DOM event dispatched by a Custom Element", async ({page}) => {
62+
const ce = page.locator('#ce-with-declarative-event');
63+
await expect(page.getByText(/CAPScase:/)).toHaveText(/false/);
64+
await ce.click();
65+
await expect(page.getByText(/CAPScase:/)).toHaveText(/true/);
66+
})
67+
test("can declaratively listen to a PascalCase DOM event dispatched by a Custom Element", async ({page}) => {
68+
const ce = page.locator('#ce-with-declarative-event');
69+
await expect(page.getByText(/PascalCase:/)).toHaveText(/false/);
70+
await ce.click();
71+
await expect(page.getByText(/PascalCase:/)).toHaveText(/true/);
72+
})
73+
});
74+
})
7775
})

‎libraries/__shared__/tests/basic-tests.test.js‎

Lines changed: 54 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,75 +16,73 @@
1616
*/
1717

1818
import {expect, test} from '@playwright/test';
19-
import {getPropOrAttr} from './util';
19+
import {each, getPropOrAttr} from './util';
2020

21-
test.beforeEach(async ({page}) => {
22-
await page.goto('/react');
23-
})
2421

22+
each(() => {
23+
test.describe("basic support", () => {
24+
test.describe("no children", () => {
25+
test("can display a Custom Element with no children", async ({page}) => {
26+
await expect(page.locator('#ce-without-children')).toBeAttached();
27+
});
2528

26-
test.describe("basic support", () => {
27-
test.describe("no children", () => {
28-
test("can display a Custom Element with no children", async ({page}) => {
29-
await expect(page.locator('#ce-without-children')).toBeAttached();
30-
});
31-
32-
test.describe('with children', () => {
33-
const expectHasChildren = async (wc) => {
34-
await expect(wc.locator('h1')).toHaveText('Test h1');
35-
await expect(wc.locator('p')).toHaveText('Test p');
36-
}
29+
test.describe('with children', () => {
30+
const expectHasChildren = async (wc) => {
31+
await expect(wc.locator('h1')).toHaveText('Test h1');
32+
await expect(wc.locator('p')).toHaveText('Test p');
33+
}
3734

38-
test("can display a Custom Element with children in a Shadow Root", async ({page}) => {
39-
await expectHasChildren(page.locator('#ce-with-children'))
40-
})
35+
test("can display a Custom Element with children in a Shadow Root", async ({page}) => {
36+
await expectHasChildren(page.locator('#ce-with-children'))
37+
})
4138

42-
test("can display a Custom Element with children in a Shadow Root and pass in Light DOM children", async ({page}) => {
43-
const ce = page.locator('#ce-with-children-renderer');
44-
await expectHasChildren(ce);
45-
await expect(ce).toHaveText(/2/);
46-
})
39+
test("can display a Custom Element with children in a Shadow Root and pass in Light DOM children", async ({page}) => {
40+
const ce = page.locator('#ce-with-children-renderer');
41+
await expectHasChildren(ce);
42+
await expect(ce).toHaveText(/2/);
43+
})
4744

48-
test('can display a Custom Element with children in the Shadow DOM and handle hiding and showing the element', async ({page}) => {
49-
const ce = page.locator('#ce-with-different-views')
50-
const toggle = page.getByRole('button', {name: /toggle views/i});
45+
test('can display a Custom Element with children in the Shadow DOM and handle hiding and showing the element', async ({page}) => {
46+
const ce = page.locator('#ce-with-different-views')
47+
const toggle = page.getByRole('button', {name: /toggle views/i});
5148

52-
await expectHasChildren(ce);
49+
await expectHasChildren(ce);
5350

54-
await toggle.click();
55-
await expect(ce).toHaveText(/dummy view/i);
51+
await toggle.click();
52+
await expect(ce).toHaveText(/dummy view/i);
5653

57-
await toggle.click();
58-
await expectHasChildren(ce);
54+
await toggle.click();
55+
await expectHasChildren(ce);
56+
})
5957
})
60-
})
61-
});
62-
63-
test.describe('attributes and properties', () => {
64-
test("will pass boolean data as either an attribute or a property", async ({page}) => {
65-
const ce = page.locator('#ce-with-properties');
66-
expect(await getPropOrAttr(ce, 'bool')).toEqual(true)
67-
});
68-
69-
test("will pass numeric data as either an attribute or a property", async ({page}) => {
70-
const ce = page.locator('#ce-with-properties');
71-
expect(parseInt(await getPropOrAttr(ce, 'num'))).toEqual(42)
7258
});
7359

74-
test("will pass string data as either an attribute or a property", async ({page}) => {
75-
const ce = page.locator('#ce-with-properties');
76-
expect(await getPropOrAttr(ce, 'str')).toEqual("React")
60+
test.describe('attributes and properties', () => {
61+
test("will pass boolean data as either an attribute or a property", async ({page}) => {
62+
const ce = page.locator('#ce-with-properties');
63+
expect(await getPropOrAttr(ce, 'bool')).toEqual(true)
64+
});
65+
66+
test("will pass numeric data as either an attribute or a property", async ({page}) => {
67+
const ce = page.locator('#ce-with-properties');
68+
expect(parseInt(await getPropOrAttr(ce, 'num'))).toEqual(42)
69+
});
70+
71+
test("will pass string data as either an attribute or a property", async ({page}) => {
72+
const ce = page.locator('#ce-with-properties');
73+
expect(await getPropOrAttr(ce, 'str')).toEqual("React")
74+
});
7775
});
78-
});
7976

80-
test.describe('events', () => {
81-
test("can imperatively listen to a DOM event dispatched by a Custom Element", async ({page}) => {
82-
const ce = page.locator('#ce-with-imperative-event');
83-
const result = page.locator('#ce-with-imperative-event-handled');
84-
await expect(result).toHaveText(/false/i);
85-
await ce.click();
86-
await expect(result).toHaveText(/true/i);
77+
test.describe('events', () => {
78+
test("can imperatively listen to a DOM event dispatched by a Custom Element", async ({page}) => {
79+
const ce = page.locator('#ce-with-imperative-event');
80+
const result = page.locator('#ce-with-imperative-event-handled');
81+
await expect(result).toHaveText(/false/i);
82+
await ce.click();
83+
await expect(result).toHaveText(/true/i);
84+
})
8785
})
88-
})
8986

90-
});
87+
});
88+
});

‎libraries/__shared__/tests/util.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
1+
import fs from 'node:fs';
2+
import {test} from '@playwright/test';
3+
14
export const getProp = async (ce, name) => {
25
return await (await (await ce.elementHandle()).getProperty(name)).jsonValue()
36
}
47

58
export const getPropOrAttr = async (ce, name) => {
69
return await getProp(ce, name) ?? ce.getAttribute(name);
10+
}
11+
12+
export const each = (cb) => {
13+
fs.readdirSync('./harness', {withFileTypes: true}).filter(d => d.isDirectory()).forEach(({name}) => {
14+
test.describe(name, () => {
15+
test.beforeEach(async ({page}) => {
16+
await page.goto(`/${name}/`);
17+
})
18+
19+
cb();
20+
})
21+
})
722
}

0 commit comments

Comments
 (0)