chore(ct): react vite tests (#16525)

tests/components/ct-react-vite/playwright/index.ts

@@ -1,7 +1,5 @@
 //@ts-check
-
+import '../src/assets/index.css';
-import '../src/index.css';
-
 import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';
 
 beforeMount(async ({ hooksConfig }) => {

tests/components/ct-react-vite/src/App.spec.tsx

@@ -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!');
-});

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() {

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>
+}

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>
+}

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>
+  </>
+}

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>
+}

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(

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')
+})