feat(csp): support view transitions

packages/astro/e2e/csp-client-only.test.js

@@ -0,0 +1,126 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory(import.meta.url, {
+	root: './fixtures/client-only/',
+	experimental: {
+		csp: true,
+	},
+});
+
+let previewServer;
+
+test.beforeAll(async ({ astro }) => {
+	await astro.build();
+	previewServer = await astro.preview();
+});
+
+test.afterAll(async () => {
+	await previewServer.stop();
+});
+test.describe('CSP Client only', () => {
+	test('React counter', async ({ astro, page }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const counter = await page.locator('#react-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const fallback = await page.locator('[data-fallback=react]');
+		await expect(fallback, 'fallback content is hidden').not.toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const children = await counter.locator('.children');
+		await expect(children, 'children exist').toHaveText('react');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Preact counter', async ({ astro, page }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const counter = await page.locator('#preact-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const fallback = await page.locator('[data-fallback=preact]');
+		await expect(fallback, 'fallback content is hidden').not.toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const children = await counter.locator('.children');
+		await expect(children, 'children exist').toHaveText('preact');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Solid counter', async ({ astro, page }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const counter = await page.locator('#solid-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const fallback = await page.locator('[data-fallback=solid]');
+		await expect(fallback, 'fallback content is hidden').not.toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const children = await counter.locator('.children');
+		await expect(children, 'children exist').toHaveText('solid');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Vue counter', async ({ astro, page }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const counter = await page.locator('#vue-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const fallback = await page.locator('[data-fallback=vue]');
+		await expect(fallback, 'fallback content is hidden').not.toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const children = await counter.locator('.children');
+		await expect(children, 'children exist').toHaveText('vue');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('Svelte counter', async ({ astro, page }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const counter = await page.locator('#svelte-counter');
+		await expect(counter, 'component is visible').toBeVisible();
+
+		const fallback = await page.locator('[data-fallback=svelte]');
+		await expect(fallback, 'fallback content is hidden').not.toBeVisible();
+
+		const count = await counter.locator('pre');
+		await expect(count, 'initial count is 0').toHaveText('0');
+
+		const children = await counter.locator('.children');
+		await expect(children, 'children exist').toHaveText('svelte');
+
+		const increment = await counter.locator('.increment');
+		await increment.click();
+
+		await expect(count, 'count incremented by 1').toHaveText('1');
+	});
+});