From b41da08c1ea0c55805d090bdf498de418a6d09dd Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Mon, 15 Aug 2022 22:17:56 +0200
Subject: [PATCH] chore(ct): react vite tests (#16525)

---
 .../ct-react-vite/playwright/index.ts         |  4 +-
 .../components/ct-react-vite/src/App.spec.tsx | 27 ------
 tests/components/ct-react-vite/src/App.tsx    |  3 +-
 .../src/{ => assets}/favicon.svg              |  0
 .../ct-react-vite/src/{ => assets}/index.css  |  0
 .../ct-react-vite/src/{ => assets}/logo.svg   |  0
 .../ct-react-vite/src/components/Button.tsx   |  7 ++
 .../src/components/DefaultChildren.tsx        | 15 ++++
 .../src/components/MultiRoot.tsx              |  6 ++
 .../src/components/MultipleChildren.tsx       | 18 ++++
 tests/components/ct-react-vite/src/main.tsx   |  2 +-
 .../ct-react-vite/src/tests.spec.tsx          | 84 +++++++++++++++++++
 12 files changed, 133 insertions(+), 33 deletions(-)
 delete mode 100644 tests/components/ct-react-vite/src/App.spec.tsx
 rename tests/components/ct-react-vite/src/{ => assets}/favicon.svg (100%)
 rename tests/components/ct-react-vite/src/{ => assets}/index.css (100%)
 rename tests/components/ct-react-vite/src/{ => assets}/logo.svg (100%)
 create mode 100644 tests/components/ct-react-vite/src/components/Button.tsx
 create mode 100644 tests/components/ct-react-vite/src/components/DefaultChildren.tsx
 create mode 100644 tests/components/ct-react-vite/src/components/MultiRoot.tsx
 create mode 100644 tests/components/ct-react-vite/src/components/MultipleChildren.tsx
 create mode 100644 tests/components/ct-react-vite/src/tests.spec.tsx

diff --git a/tests/components/ct-react-vite/playwright/index.ts b/tests/components/ct-react-vite/playwright/index.ts
index 3d3b46bdc0..267e6fd64f 100644
--- a/tests/components/ct-react-vite/playwright/index.ts
+++ b/tests/components/ct-react-vite/playwright/index.ts
@@ -1,7 +1,5 @@
 //@ts-check
-
-import '../src/index.css';
-
+import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';
 
 beforeMount(async ({ hooksConfig }) => {
diff --git a/tests/components/ct-react-vite/src/App.spec.tsx b/tests/components/ct-react-vite/src/App.spec.tsx
deleted file mode 100644
index 4de184d7c0..0000000000
--- a/tests/components/ct-react-vite/src/App.spec.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import App from './App';
-
-test.use({ viewport: { width: 500, height: 500 } });
-
-test('should work', async ({ mount }) => {
-  const component = await mount(<App></App>);
-  await expect(component).toContainText('Hello Vite + React!');
-});
-
-test('should configure app', async ({ page, mount }) => {
-  const messages: string[] = [];
-  page.on('console', m => messages.push(m.text()));
-  await mount(<App></App>, {
-    hooksConfig: {
-      route: 'A'
-    }
-  });
-  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount']);
-});
-
-test('should unmount', async ({ page, mount }) => {
-  const component = await mount(<App></App>);
-  await expect(page.locator('#root')).toContainText('Hello Vite + React!');
-  await component.unmount();
-  await expect(page.locator('#root')).not.toContainText('Hello Vite + React!');
-});
diff --git a/tests/components/ct-react-vite/src/App.tsx b/tests/components/ct-react-vite/src/App.tsx
index 78b8518c54..1a5c71390f 100644
--- a/tests/components/ct-react-vite/src/App.tsx
+++ b/tests/components/ct-react-vite/src/App.tsx
@@ -1,6 +1,5 @@
-import React from 'react'
 import { useState } from 'react'
-import logo from './logo.svg'
+import logo from './components/logo.svg'
 import './App.css'
 
 function App() {
diff --git a/tests/components/ct-react-vite/src/favicon.svg b/tests/components/ct-react-vite/src/assets/favicon.svg
similarity index 100%
rename from tests/components/ct-react-vite/src/favicon.svg
rename to tests/components/ct-react-vite/src/assets/favicon.svg
diff --git a/tests/components/ct-react-vite/src/index.css b/tests/components/ct-react-vite/src/assets/index.css
similarity index 100%
rename from tests/components/ct-react-vite/src/index.css
rename to tests/components/ct-react-vite/src/assets/index.css
diff --git a/tests/components/ct-react-vite/src/logo.svg b/tests/components/ct-react-vite/src/assets/logo.svg
similarity index 100%
rename from tests/components/ct-react-vite/src/logo.svg
rename to tests/components/ct-react-vite/src/assets/logo.svg
diff --git a/tests/components/ct-react-vite/src/components/Button.tsx b/tests/components/ct-react-vite/src/components/Button.tsx
new file mode 100644
index 0000000000..78b0a7791f
--- /dev/null
+++ b/tests/components/ct-react-vite/src/components/Button.tsx
@@ -0,0 +1,7 @@
+type ButtonProps = {
+  title: string;
+  onClick?(props: string): void;
+}
+export default function Button(props: ButtonProps) {
+  return <button onClick={() => props.onClick?.('hello')}>{props.title}</button>
+}
diff --git a/tests/components/ct-react-vite/src/components/DefaultChildren.tsx b/tests/components/ct-react-vite/src/components/DefaultChildren.tsx
new file mode 100644
index 0000000000..691b6a0806
--- /dev/null
+++ b/tests/components/ct-react-vite/src/components/DefaultChildren.tsx
@@ -0,0 +1,15 @@
+type DefaultChildrenProps = {
+  children?: any;
+}
+
+export default function DefaultChildren(props: DefaultChildrenProps) {
+  return <div>
+    <h1>Welcome!</h1>
+    <main>
+      {props.children}
+    </main>
+    <footer>
+      Thanks for visiting.
+    </footer>
+  </div>
+}
diff --git a/tests/components/ct-react-vite/src/components/MultiRoot.tsx b/tests/components/ct-react-vite/src/components/MultiRoot.tsx
new file mode 100644
index 0000000000..f29e397c0f
--- /dev/null
+++ b/tests/components/ct-react-vite/src/components/MultiRoot.tsx
@@ -0,0 +1,6 @@
+export default function MultiRoot() {
+  return <>
+    <div>root 1</div>
+    <div>root 2</div>
+  </>
+}
diff --git a/tests/components/ct-react-vite/src/components/MultipleChildren.tsx b/tests/components/ct-react-vite/src/components/MultipleChildren.tsx
new file mode 100644
index 0000000000..63bd0104c6
--- /dev/null
+++ b/tests/components/ct-react-vite/src/components/MultipleChildren.tsx
@@ -0,0 +1,18 @@
+
+type MultipleChildrenProps = {
+  children?: [any, any, any];
+}
+
+export default function MultipleChildren(props: MultipleChildrenProps) {
+  return <div>
+  <header>
+    {props.children?.at(0)}
+  </header>
+  <main>
+    {props.children?.at(1)}
+  </main>
+  <footer>
+    {props.children?.at(2)}
+  </footer>
+</div>
+}
diff --git a/tests/components/ct-react-vite/src/main.tsx b/tests/components/ct-react-vite/src/main.tsx
index 606a3cf44e..919f50052b 100644
--- a/tests/components/ct-react-vite/src/main.tsx
+++ b/tests/components/ct-react-vite/src/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
+import './assets/index.css'
 import App from './App'
 
 ReactDOM.render(
diff --git a/tests/components/ct-react-vite/src/tests.spec.tsx b/tests/components/ct-react-vite/src/tests.spec.tsx
new file mode 100644
index 0000000000..2fb1a5be69
--- /dev/null
+++ b/tests/components/ct-react-vite/src/tests.spec.tsx
@@ -0,0 +1,84 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import Button from './components/Button';
+import DefaultChildren from './components/DefaultChildren';
+import MultipleChildren from './components/MultipleChildren';
+import MultiRoot from './components/MultiRoot';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('props should work', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await expect(component).toContainText('Submit');
+});
+
+test('callback should work', async ({ mount }) => {
+  const messages: string[] = []
+  const component = await mount(<Button title="Submit" onClick={data => {
+    messages.push(data)
+  }}></Button>)
+  await component.click()
+  expect(messages).toEqual(['hello'])
+})
+
+test('default slot should work', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>
+    Main Content
+  </DefaultChildren>)
+  await expect(component).toContainText('Main Content')
+})
+
+test('multiple children should work', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>
+    <div id="one">One</div>
+    <div id="two">Two</div>
+  </DefaultChildren>)
+  await expect(component.locator('#one')).toContainText('One')
+  await expect(component.locator('#two')).toContainText('Two')
+})
+
+test('named children should work', async ({ mount }) => {
+  const component = await mount(<MultipleChildren>
+    <div>Header</div>
+    <div>Main Content</div>
+    <div>Footer</div>
+  </MultipleChildren>);
+  await expect(component).toContainText('Header')
+  await expect(component).toContainText('Main Content')
+  await expect(component).toContainText('Footer')
+})
+
+test('children should callback', async ({ mount }) => {
+  let clickFired = false;
+  const component = await mount(<DefaultChildren>
+    <span onClick={() => clickFired = true}>Main Content</span>
+  </DefaultChildren>);
+  await component.locator('text=Main Content').click();
+  expect(clickFired).toBeTruthy();
+})
+
+test('should run hooks', async ({ page, mount }) => {
+  const messages: string[] = [];
+  page.on('console', m => messages.push(m.text()));
+  await mount(<Button title="Submit" />, {
+    hooksConfig: {
+      route: 'A'
+    }
+  });
+  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount']);
+});
+
+test('should unmount', async ({ page, mount }) => {
+  const component = await mount(<Button title="Submit" />)
+  await expect(page.locator('#root')).toContainText('Submit')
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('Submit');
+});
+
+test('unmount a multi root component should work', async ({ mount, page }) => {
+  const component = await mount(<MultiRoot />)
+  await expect(page.locator('#root')).toContainText('root 1')
+  await expect(page.locator('#root')).toContainText('root 2')
+  await component.unmount()
+  await expect(page.locator('#root')).not.toContainText('root 1')
+  await expect(page.locator('#root')).not.toContainText('root 2')
+})