From 9683ae64ffae8e5ca78e1ec6c6bcd4d90b6be294 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Thu, 6 Oct 2022 22:36:50 +0800
Subject: [PATCH] Add test for suffix hydration (#4982)

---
 .../react-component/src/components/Suffix.react.tsx  | 10 ++++++++++
 .../fixtures/react-component/src/pages/index.astro   |  3 +++
 packages/astro/e2e/react-component.test.js           | 12 ++++++++++++
 3 files changed, 25 insertions(+)
 create mode 100644 packages/astro/e2e/fixtures/react-component/src/components/Suffix.react.tsx

diff --git a/packages/astro/e2e/fixtures/react-component/src/components/Suffix.react.tsx b/packages/astro/e2e/fixtures/react-component/src/components/Suffix.react.tsx
new file mode 100644
index 0000000000..10dddf275f
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react-component/src/components/Suffix.react.tsx
@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+
+export default function () {
+  const [open, setOpen] = useState(false);
+  return (
+    <button id="suffix" onClick={() => setOpen(!open)}>
+      suffix toggle {open.toString()}
+    </button>
+  );
+}
diff --git a/packages/astro/e2e/fixtures/react-component/src/pages/index.astro b/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
index 0a9a212d00..f9e0ae3958 100644
--- a/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Counter from '../components/Counter.jsx';
 import ReactComponent from '../components/JSXComponent.jsx';
+import Suffix from '../components/Suffix.react';
 
 const someProps = {
 	count: 0,
@@ -33,5 +34,7 @@ const someProps = {
 		</Counter>
 
 		<ReactComponent id="client-only" client:only="react" />
+
+		<Suffix client:load />
 	</body>
 </html>
diff --git a/packages/astro/e2e/react-component.test.js b/packages/astro/e2e/react-component.test.js
index a1918b8547..8eb10a7edb 100644
--- a/packages/astro/e2e/react-component.test.js
+++ b/packages/astro/e2e/react-component.test.js
@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test';
 import { prepareTestFactory } from './shared-component-tests.js';
 
 const { test, createTests } = prepareTestFactory({ root: './fixtures/react-component/' });
@@ -30,3 +31,14 @@ test.describe('React components in MDX files', () => {
 		pageSourceFilePath: './src/pages/mdx.mdx',
 	});
 });
+
+test.describe('dev', () => {
+	test('Loads .react suffix', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const suffix = page.locator('#suffix');
+		expect(await suffix.textContent()).toBe('suffix toggle false');
+		await suffix.click();
+		expect(await suffix.textContent()).toBe('suffix toggle true');
+	});
+});