1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
import { test as base, expect } from '@playwright/test';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
const fixture = await loadFixture({ root: './fixtures/react-component/' });
await use(fixture);
},
});
let devServer;
test.beforeEach(async ({ astro }) => {
devServer = await astro.startDevServer();
});
test.afterEach(async () => {
await devServer.stop();
});
test.describe('React components', () => {
test('server only', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#server-only');
await expect(counter, 'component is visible').toBeVisible();
const count = counter.locator('pre');
await expect(count, 'initial count is 0').toHaveText('0');
const inc = counter.locator('.increment');
await inc.click();
await expect(count, 'component not hydrated').toHaveText('0');
});
test('client:idle', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#client-idle');
await expect(counter, 'component is visible').toBeVisible();
const count = counter.locator('pre');
await expect(count, 'initial count is 0').toHaveText('0');
const inc = counter.locator('.increment');
await inc.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
test('client:load', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#client-load');
await expect(counter, 'component is visible').toBeVisible();
const count = counter.locator('pre');
await expect(count, 'initial count is 0').toHaveText('0');
const inc = counter.locator('.increment');
await inc.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
test('client:visible', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
// Make sure the component is on screen to trigger hydration
const counter = page.locator('#client-visible');
await counter.scrollIntoViewIfNeeded();
await expect(counter, 'component is visible').toBeVisible();
const count = counter.locator('pre');
await expect(count, 'initial count is 0').toHaveText('0');
const inc = counter.locator('.increment');
await inc.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
test('client:media', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#client-media');
await expect(counter, 'component is visible').toBeVisible();
const count = counter.locator('pre');
await expect(count, 'initial count is 0').toHaveText('0');
const inc = counter.locator('.increment');
await inc.click();
await expect(count, 'component not hydrated yet').toHaveText('0');
// Reset the viewport to hydrate the component (max-width: 50rem)
await page.setViewportSize({ width: 414, height: 1124 });
await inc.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
test('client:only', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const label = page.locator('#client-only');
await expect(label, 'component is visible').toBeVisible();
await expect(label, 'slot text is visible').toHaveText('React client:only component');
});
test('HMR', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#client-idle');
const count = counter.locator('pre');
await expect(count, 'initial count is 0').toHaveText('0');
// Edit the component's initial count prop
await astro.editFile('./src/pages/index.astro', (original) =>
original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
);
await expect(count, 'count prop updated').toHaveText('5');
await expect(counter, 'component styles persisted').toHaveCSS('display', 'grid');
// Edit the component's slot text
await astro.editFile('./src/components/JSXComponent.jsx', (original) =>
original.replace('React client:only component', 'Updated react client:only component')
);
const label = page.locator('#client-only');
await expect(label, 'client:only component is visible').toBeVisible();
await expect(label, 'client:only slot text is visible').toHaveText(
'Updated react client:only component'
);
// Edit the imported CSS file
await astro.editFile('./src/components/Counter.css', (original) =>
original.replace('font-size: 2em;', 'font-size: 24px;')
);
await expect(count, 'imported CSS updated').toHaveCSS('font-size', '24px');
});
});
|
