From 91d802e73b78d743dba7b4a994013cd73b7dbb3a Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Sun, 15 May 2022 13:03:58 -0600
Subject: [PATCH] adding hydration and HMR tests  for preact

---
 .../e2e/fixtures/preact/astro.config.mjs      |   7 ++
 .../astro/e2e/fixtures/preact/package.json    |  11 ++
 .../preact/src/components/Counter.css         |  11 ++
 .../preact/src/components/Counter.jsx         |  20 ++++
 .../preact/src/components/JSXComponent.jsx    |   5 +
 .../e2e/fixtures/preact/src/pages/index.astro |  29 +++++
 packages/astro/e2e/preact.test.js             | 109 ++++++++++++++++++
 pnpm-lock.yaml                                |  12 ++
 8 files changed, 204 insertions(+)
 create mode 100644 packages/astro/e2e/fixtures/preact/astro.config.mjs
 create mode 100644 packages/astro/e2e/fixtures/preact/package.json
 create mode 100644 packages/astro/e2e/fixtures/preact/src/components/Counter.css
 create mode 100644 packages/astro/e2e/fixtures/preact/src/components/Counter.jsx
 create mode 100644 packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx
 create mode 100644 packages/astro/e2e/fixtures/preact/src/pages/index.astro
 create mode 100644 packages/astro/e2e/preact.test.js

diff --git a/packages/astro/e2e/fixtures/preact/astro.config.mjs b/packages/astro/e2e/fixtures/preact/astro.config.mjs
new file mode 100644
index 000000000..08916b1fe
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [preact()],
+});
diff --git a/packages/astro/e2e/fixtures/preact/package.json b/packages/astro/e2e/fixtures/preact/package.json
new file mode 100644
index 000000000..07bb82299
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@e2e/react",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/preact": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/preact/src/components/Counter.css b/packages/astro/e2e/fixtures/preact/src/components/Counter.css
new file mode 100644
index 000000000..fb21044d7
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/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;
+}
diff --git a/packages/astro/e2e/fixtures/preact/src/components/Counter.jsx b/packages/astro/e2e/fixtures/preact/src/components/Counter.jsx
new file mode 100644
index 000000000..526f26963
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/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>
+		</>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/preact/src/components/JSXComponent.jsx
new file mode 100644
index 000000000..6cc7b7858
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/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>
+}
diff --git a/packages/astro/e2e/fixtures/preact/src/pages/index.astro b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
new file mode 100644
index 000000000..e9c582ba5
--- /dev/null
+++ b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
@@ -0,0 +1,29 @@
+---
+import Counter from '../components/Counter.jsx';
+import PreactComponent from '../components/JSXComponent.jsx';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<Counter id="counter-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="counter-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+    <Counter id="counter-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+
+		<PreactComponent id="client-only" client:only="preact" />
+  </body>
+</html>
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
new file mode 100644
index 000000000..c64f4feef
--- /dev/null
+++ b/packages/astro/e2e/preact.test.js
@@ -0,0 +1,109 @@
+import { test as base, expect } from '@playwright/test';
+import { loadFixture, onAfterHMR } from './test-utils.js';
+
+const test = base.extend({
+	astro: async ({}, use) => {
+		const fixture = await loadFixture({ root: './fixtures/preact/' });
+		await use(fixture);
+	},
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async ({ astro }) => {
+	await devServer.stop();
+});
+
+test.afterEach(async ({ astro }) => {
+	astro.clean();
+});
+
+test.only('Preact', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
+	await test.step('client:idle', async () => {
+		const counter = page.locator('#counter-idle');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:load', async () => {
+		const counter = page.locator('#counter-load');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:visible', async () => {
+		const counter = page.locator('#counter-visible');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		const inc = counter.locator('.increment');
+		await inc.click();
+
+		await expect(count).toHaveText('1');
+	});
+
+	await test.step('client:only', async () => {
+		const label = page.locator('#client-only');
+		await expect(label).toBeVisible();
+
+		await expect(label).toHaveText('Preact client:only component');
+	});
+
+	await test.step('HMR', async () => {
+		const afterHMR = onAfterHMR(page);
+
+		// test 1: updating the page component
+		await astro.writeFile(
+			'src/pages/index.astro',
+			(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
+		);
+
+		await afterHMR;
+
+		const count = page.locator('#counter-idle pre');
+		await expect(count).toHaveText('5');
+
+		// test 2: updating the react component
+		await astro.writeFile(
+			'src/components/JSXComponent.jsx',
+			(original) => original.replace('Preact client:only component', 'Updated preact client:only component')
+		);
+
+		await afterHMR;
+
+		const label = page.locator('#client-only');
+		await expect(label).toBeVisible();
+
+		await expect(label).toHaveText('Updated preact client:only component');
+
+		// test 3: updating imported CSS
+		await astro.writeFile(
+			'src/components/Counter.css',
+			(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
+		);
+
+		await expect(count).toHaveCSS('font-size', '24px');
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a1d78e6d..8fd816659 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -661,6 +661,18 @@ importers:
       chai-as-promised: 7.1.1_chai@4.3.6
       mocha: 9.2.2
 
+  packages/astro/e2e/fixtures/preact:
+    specifiers:
+      '@astrojs/preact': workspace:*
+      astro: workspace:*
+      react: ^18.1.0
+      react-dom: ^18.1.0
+    dependencies:
+      '@astrojs/preact': link:../../../../integrations/preact
+      astro: link:../../..
+      react: 18.1.0
+      react-dom: 18.1.0_react@18.1.0
+
   packages/astro/e2e/fixtures/react:
     specifiers:
       '@astrojs/react': workspace:*