0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00

Split up e2e HMR test (#3425)

This commit is contained in:
Matthew Phillips 2022-05-23 15:56:38 -04:00 committed by GitHub
parent 8eec97fdd1
commit 28ede84a88
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -106,41 +106,51 @@ test.describe('Multiple frameworks', () => {
await expect(bComponent, 'component text is visible').toHaveText('Hello Astro (B)'); await expect(bComponent, 'component text is visible').toHaveText('Hello Astro (B)');
}); });
test('HMR', async ({ astro, page }) => { test.describe('HMR', () => {
await page.goto('/'); test('Page template', async ({ astro, page }) => {
await page.goto('/');
// 1: updating the page template // 1: updating the page template
const preactSlot = page.locator('#preact-counter + .counter-message'); const preactSlot = page.locator('#preact-counter + .counter-message');
await expect(preactSlot, 'initial slot content').toHaveText('Hello Preact!'); await expect(preactSlot, 'initial slot content').toHaveText('Hello Preact!');
await astro.editFile('./src/pages/index.astro', (content) => await astro.editFile('./src/pages/index.astro', (content) =>
content.replace('Hello Preact!', 'Hello Preact, updated!') content.replace('Hello Preact!', 'Hello Preact, updated!')
); );
await expect(preactSlot, 'slot content updated').toHaveText('Hello Preact, updated!'); await expect(preactSlot, 'slot content updated').toHaveText('Hello Preact, updated!');
});
// Edit the react component test('React component', async ({ astro, page }) => {
await astro.editFile('./src/components/ReactCounter.jsx', (content) => await page.goto('/');
content.replace('useState(0)', 'useState(5)')
);
const reactCount = await page.locator('#react-counter pre'); // Edit the react component
await expect(reactCount, 'initial count updated to 5').toHaveText('5'); await astro.editFile('./src/components/ReactCounter.jsx', (content) =>
content.replace('useState(0)', 'useState(5)')
);
// Edit the svelte component's style const reactCount = await page.locator('#react-counter pre');
const svelteCounter = page.locator('#svelte-counter'); await expect(reactCount, 'initial count updated to 5').toHaveText('5');
await expect(svelteCounter, 'initial background is white').toHaveCSS( });
'background-color',
'rgb(255, 255, 255)'
);
await astro.editFile('./src/components/SvelteCounter.svelte', (content) => test('Svelte component', async ({ astro, page }) => {
content.replace('background: white', 'background: rgb(230, 230, 230)') await page.goto('/');
);
await expect(svelteCounter, 'background color updated').toHaveCSS( // Edit the svelte component's style
'background-color', const svelteCounter = page.locator('#svelte-counter');
'rgb(230, 230, 230)' await expect(svelteCounter, 'initial background is white').toHaveCSS(
); 'background-color',
'rgb(255, 255, 255)'
);
await astro.editFile('./src/components/SvelteCounter.svelte', (content) =>
content.replace('background: white', 'background: rgb(230, 230, 230)')
);
await expect(svelteCounter, 'background color updated').toHaveCSS(
'background-color',
'rgb(230, 230, 230)'
);
});
}); });
}); });