test(ct): react vite slice by feature (#20098)

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

@@ -15,14 +15,22 @@
  */
 
 import { defineConfig, devices } from '@playwright/experimental-ct-react';
+import { resolve } from 'path';
 
 export default defineConfig({
-  testDir: 'src',
+  testDir: 'tests',
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   reporter: 'html',
   use: {
     trace: 'on-first-retry',
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, './src'),
+        }
+      }
+    }
   },
   projects: [
     {

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

@@ -1,153 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import App from './App';
-import Button from './components/Button';
-import DefaultChildren from './components/DefaultChildren';
-import MultipleChildren from './components/MultipleChildren';
-import MultiRoot from './components/MultiRoot';
-import Counter from './components/Counter';
-import EmptyFragment from './components/EmptyFragment';
-import type { HooksConfig } from '../playwright';
-
-test.use({ viewport: { width: 500, height: 500 } });
-
-test('render props', async ({ mount }) => {
-  const component = await mount(<Button title="Submit" />);
-  await expect(component).toContainText('Submit');
-});
-
-test('render attributes', async ({ mount }) => {
-  const component = await mount(<Button className="primary" title="Submit" />)
-  await expect(component).toHaveClass('primary');
-});
-
-test('update props without remounting', async ({ mount }) => {
-  const component = await mount(<Counter count={9001} />)
-  await expect(component.locator('#props')).toContainText('9001')
-
-  await component.update(<Counter count={1337} />)
-  await expect(component).not.toContainText('9001')
-  await expect(component.locator('#props')).toContainText('1337')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('update callbacks without remounting', async ({ mount }) => {
-  const component = await mount(<Counter />)
-
-  const messages: string[] = []
-  await component.update(<Counter onClick={message => {
-    messages.push(message)
-  }} />)
-  await component.click();
-  expect(messages).toEqual(['hello'])
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('update slots without remounting', async ({ mount }) => {
-  const component = await mount(<Counter>Default Slot</Counter>)
-  await expect(component).toContainText('Default Slot')
-
-  await component.update(<Counter>Test Slot</Counter>)
-  await expect(component).not.toContainText('Default Slot')
-  await expect(component).toContainText('Test Slot')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('execute callback when the button is clicked', 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('render a default child', async ({ mount }) => {
-  const component = await mount(<DefaultChildren>
-    Main Content
-  </DefaultChildren>)
-  await expect(component).toContainText('Main Content')
-})
-
-test('render a component as slot', async ({ mount }) => {
-  const component = await mount(<DefaultChildren>
-    <Button title="Submit" />
-  </DefaultChildren>)
-  await expect(component).toContainText('Submit')
-});
-
-test('render multiple children', 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('render named children', 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('execute callback when a child node is clicked', 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('run hooks', async ({ page, mount }) => {
-  const messages: string[] = [];
-  page.on('console', m => messages.push(m.text()));
-  await mount<HooksConfig>(<Button title="Submit" />, {
-    hooksConfig: {
-      route: 'A'
-    }
-  });
-  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount']);
-});
-
-test('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', 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')
-});
-
-test('get textContent of the empty fragment', async ({ mount }) => {
-  const component = await mount(<EmptyFragment />);
-  expect(await component.allTextContents()).toEqual(['']);
-  expect(await component.textContent()).toBe('');
-  await expect(component).toHaveText('');
-});
-
-test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, { 
-    hooksConfig: { routing: true }
-  });
-  await expect(component.getByRole('main')).toHaveText('Login');
-  await expect(page).toHaveURL('/');
-  await component.getByRole('link', { name: 'Dashboard' }).click();
-  await expect(component.getByRole('main')).toHaveText('Dashboard');
-  await expect(page).toHaveURL('/dashboard');
-});

tests/components/ct-react-vite/tests/callbacks.spec.tsx

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import Button from '@/components/Button';
+import DefaultChildren from '@/components/DefaultChildren';
+
+test('execute callback when the button is clicked', 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('execute callback when a child node is clicked', 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();
+});

tests/components/ct-react-vite/tests/children.spec.tsx

@@ -0,0 +1,44 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import Button from '@/components/Button';
+import DefaultChildren from '@/components/DefaultChildren';
+import MultipleChildren from '@/components/MultipleChildren';
+
+test('render a default child', async ({ mount }) => {
+  const component = await mount(
+    <DefaultChildren>Main Content</DefaultChildren>
+  );
+  await expect(component).toContainText('Main Content');
+});
+
+test('render a component as child', async ({ mount }) => {
+  const component = await mount(
+    <DefaultChildren>
+      <Button title="Submit" />
+    </DefaultChildren>
+  );
+  await expect(component).toContainText('Submit');
+});
+
+test('render multiple children', 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('render named children', 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');
+});

tests/components/ct-react-vite/tests/react-router.spec.tsx

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import App from '@/App';
+import type { HooksConfig } from '../playwright';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount<HooksConfig>(<App />, {
+    hooksConfig: { routing: true },
+  });
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});

tests/components/ct-react-vite/tests/render.spec.tsx

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import Button from '@/components/Button';
+import EmptyFragment from '@/components/EmptyFragment';
+
+test('render props', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await expect(component).toContainText('Submit');
+});
+
+test('render attributes', async ({ mount }) => {
+  const component = await mount(<Button className="primary" title="Submit" />);
+  await expect(component).toHaveClass('primary');
+});
+
+test('get textContent of the empty fragment', async ({ mount }) => {
+  const component = await mount(<EmptyFragment />);
+  expect(await component.allTextContents()).toEqual(['']);
+  expect(await component.textContent()).toBe('');
+  await expect(component).toHaveText('');
+});

tests/components/ct-react-vite/tests/unmount.spec.tsx

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import Button from '@/components/Button';
+import MultiRoot from '@/components/MultiRoot';
+
+test('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', 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');
+});

tests/components/ct-react-vite/tests/update.spec.tsx

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import Counter from '@/components/Counter';
+
+test('update props without remounting', async ({ mount }) => {
+  const component = await mount(<Counter count={9001} />);
+  await expect(component.locator('#props')).toContainText('9001');
+
+  await component.update(<Counter count={1337} />);
+  await expect(component).not.toContainText('9001');
+  await expect(component.locator('#props')).toContainText('1337');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
+
+test('update callbacks without remounting', async ({ mount }) => {
+  const component = await mount(<Counter />);
+
+  const messages: string[] = [];
+  await component.update(
+    <Counter
+      onClick={(message) => {
+        messages.push(message);
+      }}
+    />
+  );
+  await component.click();
+  expect(messages).toEqual(['hello']);
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
+
+test('update slots without remounting', async ({ mount }) => {
+  const component = await mount(<Counter>Default Slot</Counter>);
+  await expect(component).toContainText('Default Slot');
+
+  await component.update(<Counter>Test Slot</Counter>);
+  await expect(component).not.toContainText('Default Slot');
+  await expect(component).toContainText('Test Slot');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});

tests/components/ct-react-vite/tsconfig.json

@@ -14,8 +14,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"],
+  "include": ["src", "tests"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

tests/components/ct-svelte-vite/playwright.config.ts

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import { defineConfig } from '@playwright/experimental-ct-svelte';
-import { devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/experimental-ct-svelte';
 import { resolve } from 'path';
 
 export default defineConfig({