Add component hydration in .md E2E tests, refactor (#3610)

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

1 files changed, 15 insertions, 111 deletions

diff --git a/packages/astro/e2e/svelte-component.test.js b/packages/astro/e2e/svelte-component.test.js
index de5dc46b2..6ee9f1100 100644
--- a/packages/astro/e2e/svelte-component.test.js
+++ b/packages/astro/e2e/svelte-component.test.js
@@ -1,117 +1,21 @@
-import { test as base, expect } from '@playwright/test';
-import { loadFixture } from './test-utils.js';
+import { prepareTestFactory } from './shared-component-tests.js';
 
-const test = base.extend({
-	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/svelte-component/' });
-		await use(fixture);
-	},
-});
-
-let devServer;
-
-test.beforeEach(async ({ astro }) => {
-	devServer = await astro.startDevServer();
-});
-
-test.afterEach(async () => {
-	await devServer.stop();
-});
-
-test.describe('Svelte 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 { test, createTests } = prepareTestFactory({ root: './fixtures/svelte-component/' });
 
-		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.describe('Svelte components in Astro files', () => {
+	createTests({
+		pageUrl: '/',
+		pageSourceFilePath: './src/pages/index.astro',
+		componentFilePath: './src/components/SvelteComponent.svelte',
+		counterCssFilePath: './src/components/Counter.svelte',
 	});
+});
 
-	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('HMR', async ({ page, astro }) => {
-		await page.goto(astro.resolveUrl('/'));
-
-		// Edit the component's slot text
-		await astro.editFile('./src/pages/index.astro', (original) =>
-			original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
-		);
-
-		const counter = page.locator('#client-idle');
-		const label = page.locator('#client-idle-message');
-
-		await expect(label, 'slot text updated').toHaveText('Hello, updated client:idle!');
-		await expect(counter, 'component styles persisted').toHaveCSS('display', 'grid');
+test.describe('Svelte components in Markdown files', () => {
+	createTests({
+		pageUrl: '/markdown/',
+		pageSourceFilePath: './src/pages/markdown.md',
+		componentFilePath: './src/components/SvelteComponent.svelte',
+		counterCssFilePath: './src/components/Counter.svelte',
 	});
 });