Adding E2E tests for client hydration and HMR

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@example/*", "@test/*"]
+  "ignore": ["@example/*", "@test/*", "@e2e/*"]
 }

package.json

@@ -19,6 +19,7 @@
     "test:smoke": "node scripts/smoke/index.js",
     "test:vite-ci": "turbo run test --no-deps --scope=astro --concurrency=1",
     "test:e2e": "cd packages/astro && pnpm playwright install && pnpm run test:e2e",
+    "test:e2e:match": "cd packages/astro && pnpm playwright install && pnpm run test:e2e:match",
     "benchmark": "turbo run benchmark --scope=astro",
     "lint": "eslint \"packages/**/*.ts\"",
     "format": "prettier -w .",

packages/astro/e2e/astro-component.test.js

@@ -0,0 +1,42 @@
+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/astro-component/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeEach(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterEach(async () => {
+	await devServer.stop();
+});
+
+test.describe('Astro components', () => {
+	test('HMR', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const hero = page.locator('section');
+		await expect(hero, 'hero has background: white').toHaveCSS(
+			'background-color',
+			'rgb(255, 255, 255)'
+		);
+		await expect(hero, 'hero has color: black').toHaveCSS('color', 'rgb(0, 0, 0)');
+
+		// Edit the Hero component with a new background color
+		await astro.editFile('./src/components/Hero.astro', (content) =>
+			content.replace('background: white', 'background: rgb(230, 230, 230)')
+		);
+
+		await expect(hero, 'background color updated').toHaveCSS(
+			'background-color',
+			'rgb(230, 230, 230)'
+		);
+	});
+});

packages/astro/e2e/fixtures/astro-component/astro.config.mjs

@@ -0,0 +1,4 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});

packages/astro/e2e/fixtures/astro-component/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@e2e/astro-component",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/e2e/fixtures/astro-component/src/components/Counter.css

@@ -0,0 +1,11 @@
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+
+.counter-message {
+	text-align: center;
+}

packages/astro/e2e/fixtures/astro-component/src/components/Counter.jsx

@@ -0,0 +1,20 @@
+import { h, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+import './Counter.css';
+
+export default function Counter({ children, count: initialCount, id }) {
+	const [count, setCount] = useState(initialCount);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} className="counter">
+				<button className="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button className="increment" onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}

packages/astro/e2e/fixtures/astro-component/src/components/Hero.astro

@@ -0,0 +1,25 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<section>
+	<h1>{title}</h1>
+	<slot />
+</section>
+
+<style>
+section {
+	width: 100%;
+	height: 80vh;
+	background: white;
+	color: black;
+}
+
+h1 {
+	text-align: center;
+}
+</style>

packages/astro/e2e/fixtures/astro-component/src/components/JSXComponent.jsx

@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+export default function({ id }) {
+	return <div id={id}>Preact client:only component</div>
+}

packages/astro/e2e/fixtures/astro-component/src/pages/index.astro

@@ -0,0 +1,16 @@
+---
+import Hero from '../components/Hero.astro';
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<main>
+			<Hero title="Astro Components">
+				Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+			</Hero>
+		</main>
+  </body>
+</html>

packages/astro/e2e/fixtures/lit-component/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import lit from '@astrojs/lit';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [lit()],
+});

packages/astro/e2e/fixtures/lit-component/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@e2e/lit-component",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/lit": "workspace:*",
+    "astro": "workspace:*",
+    "@webcomponents/template-shadowroot": "^0.1.0",
+    "lit": "^2.2.3"
+  }
+}

packages/astro/e2e/fixtures/lit-component/src/components/Counter.js

@@ -0,0 +1,36 @@
+import { LitElement, html } from 'lit';
+
+export const tagName = 'my-counter';
+
+class Counter extends LitElement {
+	static get properties() {
+		return {
+			count: {
+				type: Number,
+			},
+		};
+	}
+
+	constructor() {
+		super();
+		this.count = 0;
+	}
+
+	increment() {
+		this.count++;
+	}
+
+	render() {
+		return html`
+			<div>
+				<p>Count: ${this.count}</p>
+
+				<button type="button" @click=${this.increment}>Increment</button>
+
+				<slot />
+			</div>
+		`;
+	}
+}
+
+customElements.define(tagName, Counter);

packages/astro/e2e/fixtures/lit-component/src/pages/index.astro

@@ -0,0 +1,26 @@
+---
+import '../components/Counter.js';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<my-counter id="client-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</my-counter>
+
+		<my-counter id="client-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</my-counter>
+
+    <my-counter id="client-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</my-counter>
+  </body>
+</html>

packages/astro/e2e/fixtures/lit-component/src/pages/media.astro

@@ -0,0 +1,18 @@
+---
+import '../components/Counter.js';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<my-counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</my-counter>
+  </body>
+</html>

packages/astro/e2e/fixtures/multiple-frameworks/astro.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import react from '@astrojs/react';
+import svelte from '@astrojs/svelte';
+import vue from '@astrojs/vue';
+import solid from '@astrojs/solid-js';
+
+// https://astro.build/config
+export default defineConfig({
+	// Enable many frameworks to support all different kinds of components.
+	integrations: [preact(), react(), svelte(), vue(), solid()],
+});

packages/astro/e2e/fixtures/multiple-frameworks/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@e2e/multiple-frameworks",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@astrojs/lit": "^0.1.3",
+    "@astrojs/preact": "^0.1.2",
+    "@astrojs/react": "^0.1.2",
+    "@astrojs/solid-js": "^0.1.2",
+    "@astrojs/svelte": "^0.1.3",
+    "@astrojs/vue": "^0.1.4",
+    "astro": "^1.0.0-beta.31"
+  },
+  "dependencies": {
+    "@webcomponents/template-shadowroot": "^0.1.0",
+    "lit": "^2.2.4",
+    "preact": "^10.7.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "solid-js": "^1.4.2",
+    "svelte": "^3.48.0",
+    "vue": "^3.2.34"
+  }
+}

packages/astro/e2e/fixtures/multiple-frameworks/src/components/A.astro

@@ -0,0 +1,7 @@
+---
+const { id } = Astro.props
+---
+
+<div id={id} class="children">
+	<h1>Hello Astro (A)</h1>
+</div>

packages/astro/e2e/fixtures/multiple-frameworks/src/components/B.astro

@@ -0,0 +1,7 @@
+---
+const { id } = Astro.props
+---
+
+<div id={id} class="children">
+	<h1>Hello Astro (B)</h1>
+</div>

packages/astro/e2e/fixtures/multiple-frameworks/src/components/LitCounter.js

@@ -0,0 +1,33 @@
+import { LitElement, html } from 'lit';
+
+export const tagName = 'my-counter';
+
+class Counter extends LitElement {
+	static get properties() {
+		return {
+			count: {
+				type: Number,
+			},
+		};
+	}
+
+	constructor() {
+		super();
+		this.count = 0;
+	}
+
+	increment() {
+		this.count++;
+	}
+
+	render() {
+		return html`
+			<div>
+				<p>Count: ${this.count}</p>
+				<button type="button" @click=${this.increment}>Increment</button>
+			</div>
+		`;
+	}
+}
+
+customElements.define(tagName, Counter);

packages/astro/e2e/fixtures/multiple-frameworks/src/components/PreactCounter.tsx

@@ -0,0 +1,19 @@
+import { useState } from 'preact/hooks';
+
+/** a counter written in Preact */
+export function PreactCounter({ children, id }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} class="counter">
+				<button class="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button class="increment" onClick={add}>+</button>
+			</div>
+			<div class="counter-message">{children}</div>
+		</>
+	);
+}

packages/astro/e2e/fixtures/multiple-frameworks/src/components/ReactCounter.jsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+/** a counter written in React */
+export function Counter({ children, id }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} className="counter">
+				<button className="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button className="increment" onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}