From f3ab68d1f9f75ce4788c8ebea5e3856cab340e43 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Mon, 7 Nov 2022 20:07:30 +0100 Subject: [PATCH 1/8] feat(ct): solid before mount wrapper --- packages/playwright-ct-solid/hooks.d.ts | 4 +- .../playwright-ct-solid/registerSource.mjs | 9 ++-- tests/components/ct-solid/package.json | 7 +-- .../components/ct-solid/playwright/index.html | 2 +- .../playwright/{index.ts => index.tsx} | 11 +++-- tests/components/ct-solid/src/App.module.css | 33 ------------- tests/components/ct-solid/src/App.tsx | 41 +++++++---------- tests/components/ct-solid/src/index.tsx | 3 +- .../ct-solid/src/pages/DashboardPage.tsx | 3 ++ .../ct-solid/src/pages/LoginPage.tsx | 3 ++ tests/components/ct-solid/src/tests.spec.tsx | 46 ++++++++++--------- 11 files changed, 72 insertions(+), 90 deletions(-) rename tests/components/ct-solid/playwright/{index.ts => index.tsx} (58%) delete mode 100644 tests/components/ct-solid/src/App.module.css create mode 100644 tests/components/ct-solid/src/pages/DashboardPage.tsx create mode 100644 tests/components/ct-solid/src/pages/LoginPage.tsx diff --git a/packages/playwright-ct-solid/hooks.d.ts b/packages/playwright-ct-solid/hooks.d.ts index aa4680694afa9..e4aea7604111e 100644 --- a/packages/playwright-ct-solid/hooks.d.ts +++ b/packages/playwright-ct-solid/hooks.d.ts @@ -14,12 +14,14 @@ * limitations under the License. */ +import { JSXElement } from "solid-js"; + type JsonPrimitive = string | number | boolean | null; type JsonValue = JsonPrimitive | JsonObject | JsonArray; type JsonArray = JsonValue[]; type JsonObject = { [Key in string]?: JsonValue }; export declare function beforeMount( - callback: (params: { hooksConfig: HooksConfig }) => Promise + callback: (params: { hooksConfig: HooksConfig, App: () => JSXElement }) => Promise ): void; export declare function afterMount( callback: (params: { hooksConfig: HooksConfig }) => Promise diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs index 4b9c44869f5ad..632abd3cead17 100644 --- a/packages/playwright-ct-solid/registerSource.mjs +++ b/packages/playwright-ct-solid/registerSource.mjs @@ -78,10 +78,13 @@ function createComponent(component) { const unmountKey = Symbol('unmountKey'); window.playwrightMount = async (component, rootElement, hooksConfig) => { - for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || []) - await hook({ hooksConfig }); + let App = () => createComponent(component); + for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || []) { + const wrapper = await hook({ App, hooksConfig }); + if (wrapper) App = () => wrapper; + } - const unmount = solidRender(() => createComponent(component), rootElement); + const unmount = solidRender(App, rootElement); rootElement[unmountKey] = unmount; for (const hook of /** @type {any} */(window).__pw_hooks_after_mount || []) diff --git a/tests/components/ct-solid/package.json b/tests/components/ct-solid/package.json index 608dbfcc1e437..c82300fba0f21 100644 --- a/tests/components/ct-solid/package.json +++ b/tests/components/ct-solid/package.json @@ -10,14 +10,15 @@ "typecheck": "tsc --noEmit" }, "license": "MIT", + "dependencies": { + "@solidjs/router": "^0.5.0", + "solid-js": "^1.4.7" + }, "devDependencies": { "typescript": "^4.7.4", "vite": "^3.2.1", "vite-plugin-solid": "^2.3.10" }, - "dependencies": { - "solid-js": "^1.4.7" - }, "@standaloneDevDependencies": { "@playwright/experimental-ct-solid": "^1.22.2", "@playwright/test": "^1.22.2" diff --git a/tests/components/ct-solid/playwright/index.html b/tests/components/ct-solid/playwright/index.html index c04914b10d0f9..1985b43bc1d47 100644 --- a/tests/components/ct-solid/playwright/index.html +++ b/tests/components/ct-solid/playwright/index.html @@ -8,6 +8,6 @@
- + diff --git a/tests/components/ct-solid/playwright/index.ts b/tests/components/ct-solid/playwright/index.tsx similarity index 58% rename from tests/components/ct-solid/playwright/index.ts rename to tests/components/ct-solid/playwright/index.tsx index 438b107ffa863..de3eea3285f5a 100644 --- a/tests/components/ct-solid/playwright/index.ts +++ b/tests/components/ct-solid/playwright/index.tsx @@ -1,12 +1,17 @@ -import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-solid/hooks'; +import { Router } from "@solidjs/router"; +import '../src/assets/index.css'; export type HooksConfig = { - route: string; + route?: string; + routing?: boolean; } -beforeMount(async ({ hooksConfig }) => { +beforeMount(async ({ hooksConfig, App }) => { console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); + + if (hooksConfig?.routing) + return ; }); afterMount(async () => { diff --git a/tests/components/ct-solid/src/App.module.css b/tests/components/ct-solid/src/App.module.css deleted file mode 100644 index 48308b24a8402..0000000000000 --- a/tests/components/ct-solid/src/App.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.App { - text-align: center; -} - -.logo { - animation: logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; -} - -.header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.link { - color: #b318f0; -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/tests/components/ct-solid/src/App.tsx b/tests/components/ct-solid/src/App.tsx index 5810710a36175..c57cd5642d990 100644 --- a/tests/components/ct-solid/src/App.tsx +++ b/tests/components/ct-solid/src/App.tsx @@ -1,27 +1,20 @@ -import type { Component } from 'solid-js'; - +import { Routes, Route, A } from "@solidjs/router" import logo from './assets/logo.svg'; -import styles from './App.module.css'; +import LoginPage from './pages/LoginPage'; +import DashboardPage from './pages/DashboardPage'; -const App: Component = () => { - return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn Solid - -
-
- ); +export default function App() { + return <> +
+ logo + Login + Dashboard +
+ + + + + + + }; - -export default App; diff --git a/tests/components/ct-solid/src/index.tsx b/tests/components/ct-solid/src/index.tsx index 9ad9412423d3d..15976a07a61bf 100644 --- a/tests/components/ct-solid/src/index.tsx +++ b/tests/components/ct-solid/src/index.tsx @@ -1,6 +1,7 @@ /* @refresh reload */ import { render } from 'solid-js/web'; +import { Router } from "@solidjs/router"; import App from './App'; import './assets/index.css'; -render(() => , document.getElementById('root') as HTMLElement); +render(() => , document.getElementById('root')!); diff --git a/tests/components/ct-solid/src/pages/DashboardPage.tsx b/tests/components/ct-solid/src/pages/DashboardPage.tsx new file mode 100644 index 0000000000000..64307e87f34d3 --- /dev/null +++ b/tests/components/ct-solid/src/pages/DashboardPage.tsx @@ -0,0 +1,3 @@ +export default function DashboardPage() { + return
Dashboard
+} diff --git a/tests/components/ct-solid/src/pages/LoginPage.tsx b/tests/components/ct-solid/src/pages/LoginPage.tsx new file mode 100644 index 0000000000000..96adc431edb51 --- /dev/null +++ b/tests/components/ct-solid/src/pages/LoginPage.tsx @@ -0,0 +1,3 @@ +export default function LoginPage() { + return
Login
+} diff --git a/tests/components/ct-solid/src/tests.spec.tsx b/tests/components/ct-solid/src/tests.spec.tsx index 01cbc66a7a244..b6876e7225c2f 100644 --- a/tests/components/ct-solid/src/tests.spec.tsx +++ b/tests/components/ct-solid/src/tests.spec.tsx @@ -1,4 +1,5 @@ import { test, expect } from '@playwright/experimental-ct-solid'; +import App from './App'; import Button from './components/Button'; import Counter from './components/Counter'; import DefaultChildren from './components/DefaultChildren'; @@ -81,19 +82,15 @@ test('execute callback when the button is clicked', async ({ mount }) => { }); test('render a default child', async ({ mount }) => { - const component = await mount( - Main Content - ); + const component = await mount(Main Content); await expect(component).toContainText('Main Content'); }); test('render multiple children', async ({ mount }) => { - const component = await mount( - -
One
-
Two
- - ); + const component = await mount( +
One
+
Two
+ ); await expect(component.locator('#one')).toContainText('One'); await expect(component.locator('#two')).toContainText('Two'); }); @@ -107,13 +104,11 @@ test('render a component as slot', async ({ mount }) => { }); test('render named children', async ({ mount }) => { - const component = await mount( - -
Header
-
Main Content
-
Footer
- - ); + const component = await mount( +
Header
+
Main Content
+
Footer
+ ); await expect(component).toContainText('Header'); await expect(component).toContainText('Main Content'); await expect(component).toContainText('Footer'); @@ -121,11 +116,9 @@ test('render named children', async ({ mount }) => { test('execute callback when a child node is clicked', async ({ mount }) => { let clickFired = false; - const component = await mount( - - (clickFired = true)}>Main Content - - ); + const component = await mount( + (clickFired = true)}>Main Content + ); await component.locator('text=Main Content').click(); expect(clickFired).toBeTruthy(); }); @@ -163,3 +156,14 @@ test('get textContent of the empty fragment', async ({ mount }) => { 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: { 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'); +}); From 75aadfd4573fe433e8b3e844e62b16fbefc4325d Mon Sep 17 00:00:00 2001 From: sand4rt Date: Fri, 11 Nov 2022 14:04:14 +0100 Subject: [PATCH 2/8] feat(ct): react vite before mount wrapper --- packages/playwright-ct-react/hooks.d.ts | 2 +- packages/playwright-ct-react/registerSource.mjs | 10 +++++++--- tests/components/ct-react-vite/playwright/index.html | 2 +- .../ct-react-vite/playwright/{index.ts => index.tsx} | 12 ++++++++---- tests/components/ct-react-vite/src/tests.spec.tsx | 5 +++-- 5 files changed, 20 insertions(+), 11 deletions(-) rename tests/components/ct-react-vite/playwright/{index.ts => index.tsx} (55%) diff --git a/packages/playwright-ct-react/hooks.d.ts b/packages/playwright-ct-react/hooks.d.ts index aa4680694afa9..bd84d3bcfeb9f 100644 --- a/packages/playwright-ct-react/hooks.d.ts +++ b/packages/playwright-ct-react/hooks.d.ts @@ -19,7 +19,7 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray; type JsonArray = JsonValue[]; type JsonObject = { [Key in string]?: JsonValue }; export declare function beforeMount( - callback: (params: { hooksConfig: HooksConfig }) => Promise + callback: (params: { hooksConfig: HooksConfig; App: () => JSX.Element }) => Promise ): void; export declare function afterMount( callback: (params: { hooksConfig: HooksConfig }) => Promise diff --git a/packages/playwright-ct-react/registerSource.mjs b/packages/playwright-ct-react/registerSource.mjs index 6e79401cac03b..ccc4d87cc74eb 100644 --- a/packages/playwright-ct-react/registerSource.mjs +++ b/packages/playwright-ct-react/registerSource.mjs @@ -36,6 +36,7 @@ export function register(components) { /** * @param {Component} component + * @returns {JSX.Element} */ function render(component) { let componentFunc = registry.get(component.type); @@ -69,10 +70,13 @@ function render(component) { } window.playwrightMount = async (component, rootElement, hooksConfig) => { - for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || []) - await hook({ hooksConfig }); + let App = () => render(component); + for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || []) { + const wrapper = await hook({ App, hooksConfig }); + if (wrapper) App = () => wrapper; + } - ReactDOM.render(render(component), rootElement); + ReactDOM.render(App(), rootElement); for (const hook of /** @type {any} */(window).__pw_hooks_after_mount || []) await hook({ hooksConfig }); diff --git a/tests/components/ct-react-vite/playwright/index.html b/tests/components/ct-react-vite/playwright/index.html index 2b1557e4efb95..f7b45778173e3 100644 --- a/tests/components/ct-react-vite/playwright/index.html +++ b/tests/components/ct-react-vite/playwright/index.html @@ -8,6 +8,6 @@
- + diff --git a/tests/components/ct-react-vite/playwright/index.ts b/tests/components/ct-react-vite/playwright/index.tsx similarity index 55% rename from tests/components/ct-react-vite/playwright/index.ts rename to tests/components/ct-react-vite/playwright/index.tsx index 956fc9625f8af..fa0563dbcdf9d 100644 --- a/tests/components/ct-react-vite/playwright/index.ts +++ b/tests/components/ct-react-vite/playwright/index.tsx @@ -1,13 +1,17 @@ -//@ts-check -import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks'; +import { BrowserRouter } from 'react-router-dom'; +import '../src/assets/index.css'; export type HooksConfig = { - route: string; + route?: string; + routing?: boolean; } -beforeMount(async ({ hooksConfig }) => { +beforeMount(async ({ hooksConfig, App }) => { console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); + + if (hooksConfig?.routing) + return ; }); afterMount(async () => { diff --git a/tests/components/ct-react-vite/src/tests.spec.tsx b/tests/components/ct-react-vite/src/tests.spec.tsx index d8c18554a81a9..da802c030d436 100644 --- a/tests/components/ct-react-vite/src/tests.spec.tsx +++ b/tests/components/ct-react-vite/src/tests.spec.tsx @@ -1,5 +1,4 @@ import { test, expect } from '@playwright/experimental-ct-react'; -import { BrowserRouter } from 'react-router-dom'; import App from './App'; import Button from './components/Button'; import DefaultChildren from './components/DefaultChildren'; @@ -143,7 +142,9 @@ test('get textContent of the empty fragment', async ({ mount }) => { }); test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(); + const component = await mount(, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); From ad939c9f8ef180a9b5d895529d1a469ef9e463ff Mon Sep 17 00:00:00 2001 From: sand4rt Date: Fri, 11 Nov 2022 14:08:50 +0100 Subject: [PATCH 3/8] feat(ct): react before mount wrapper --- tests/components/ct-react/playwright/index.html | 2 +- .../ct-react/playwright/{index.ts => index.tsx} | 11 ++++++++--- tests/components/ct-react/src/tests.spec.tsx | 5 +++-- 3 files changed, 12 insertions(+), 6 deletions(-) rename tests/components/ct-react/playwright/{index.ts => index.tsx} (55%) diff --git a/tests/components/ct-react/playwright/index.html b/tests/components/ct-react/playwright/index.html index 280ca94d982e8..080e66f9b1b51 100644 --- a/tests/components/ct-react/playwright/index.html +++ b/tests/components/ct-react/playwright/index.html @@ -8,6 +8,6 @@
- + diff --git a/tests/components/ct-react/playwright/index.ts b/tests/components/ct-react/playwright/index.tsx similarity index 55% rename from tests/components/ct-react/playwright/index.ts rename to tests/components/ct-react/playwright/index.tsx index 7da5ae0387f31..fa0563dbcdf9d 100644 --- a/tests/components/ct-react/playwright/index.ts +++ b/tests/components/ct-react/playwright/index.tsx @@ -1,12 +1,17 @@ -import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks'; +import { BrowserRouter } from 'react-router-dom'; +import '../src/assets/index.css'; export type HooksConfig = { - route: string; + route?: string; + routing?: boolean; } -beforeMount(async ({ hooksConfig }) => { +beforeMount(async ({ hooksConfig, App }) => { console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); + + if (hooksConfig?.routing) + return ; }); afterMount(async () => { diff --git a/tests/components/ct-react/src/tests.spec.tsx b/tests/components/ct-react/src/tests.spec.tsx index 9d7c882269f81..d17b4d171bdc9 100644 --- a/tests/components/ct-react/src/tests.spec.tsx +++ b/tests/components/ct-react/src/tests.spec.tsx @@ -1,6 +1,5 @@ import { test, expect } from '@playwright/experimental-ct-react'; const { serverFixtures } = require('../../../../tests/config/serverFixtures'); -import { BrowserRouter } from 'react-router-dom'; import App from './App'; import Fetch from './components/Fetch'; import DelayedData from './components/DelayedData'; @@ -151,7 +150,9 @@ test('get textContent of the empty fragment', async ({ mount }) => { }); test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(); + const component = await mount(, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); From c2e6d88dff388e784b0766573e712d4592023c91 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Fri, 11 Nov 2022 14:18:24 +0100 Subject: [PATCH 4/8] chore(ct): vue vite before mount hook wrapper --- tests/components/ct-vue-vite/playwright/index.ts | 6 ++++-- tests/components/ct-vue-vite/src/notation-jsx.spec.tsx | 4 +++- tests/components/ct-vue-vite/src/notation-vue.spec.js | 4 +++- tests/components/ct-vue-vite/src/notation-vue.spec.ts | 4 +++- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/tests/components/ct-vue-vite/playwright/index.ts b/tests/components/ct-vue-vite/playwright/index.ts index 2e548b550d4f6..977ee338459e1 100644 --- a/tests/components/ct-vue-vite/playwright/index.ts +++ b/tests/components/ct-vue-vite/playwright/index.ts @@ -4,11 +4,13 @@ import Button from '../src/components/Button.vue'; import '../src/assets/index.css'; export type HooksConfig = { - route: string; + route?: string; + routing?: boolean; } beforeMount(async ({ app, hooksConfig }) => { - app.use(router as any); // TODO: remove any and fix the various installed conflicting Vue versions + if (hooksConfig?.routing) + app.use(router as any); // TODO: remove any and fix the various installed conflicting Vue versions app.component('Button', Button); console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`); }); diff --git a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx index b770739df8dc0..db1f341519d66 100644 --- a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx @@ -144,7 +144,9 @@ test('get textContent of the empty template', async ({ mount }) => { }); test('render app and navigate to a page', async ({ page, mount }) => { - const component = await mount(App); + const component = await mount(, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.js b/tests/components/ct-vue-vite/src/notation-vue.spec.js index 2e072c257c44f..f9284454bcf1f 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.js +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.js @@ -160,7 +160,9 @@ test('get textContent of the empty template', async ({ mount }) => { }); test('render app and navigate to a page', async ({ page, mount }) => { - const component = await mount(App); + const component = await mount(App, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.ts b/tests/components/ct-vue-vite/src/notation-vue.spec.ts index 850ca45fd7b72..2e10c3fa2c58f 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.ts +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.ts @@ -168,7 +168,9 @@ test('get textContent of the empty template', async ({ mount }) => { }); test('render app and navigate to a page', async ({ page, mount }) => { - const component = await mount(App); + const component = await mount(App, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); From 5be9d6fcd7fd124ab2b3c99f2b05a40f63aaf3f7 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Fri, 11 Nov 2022 14:23:14 +0100 Subject: [PATCH 5/8] chore(ct): vue cli before mount hook wrapper --- tests/components/ct-vue-cli/playwright/index.ts | 6 ++++-- tests/components/ct-vue-cli/src/notation-jsx.spec.tsx | 4 +++- tests/components/ct-vue-cli/src/notation-vue.spec.ts | 4 +++- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/tests/components/ct-vue-cli/playwright/index.ts b/tests/components/ct-vue-cli/playwright/index.ts index b87f588e10f52..2e32dc82f47b9 100644 --- a/tests/components/ct-vue-cli/playwright/index.ts +++ b/tests/components/ct-vue-cli/playwright/index.ts @@ -3,11 +3,13 @@ import { router } from '../src/router'; import '../src/assets/index.css'; export type HooksConfig = { - route: string; + route?: string; + routing?: boolean; } beforeMount(async ({ app, hooksConfig }) => { - app.use(router); + if (hooksConfig?.routing) + app.use(router); console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`); }); diff --git a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx index 258a1217fa0cb..f9315a1954069 100644 --- a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx @@ -122,7 +122,9 @@ test('get textContent of the empty template', async ({ mount }) => { }); test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(); + const component = await mount(, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); diff --git a/tests/components/ct-vue-cli/src/notation-vue.spec.ts b/tests/components/ct-vue-cli/src/notation-vue.spec.ts index 5e331e4be4a18..9a6c04714c1ea 100644 --- a/tests/components/ct-vue-cli/src/notation-vue.spec.ts +++ b/tests/components/ct-vue-cli/src/notation-vue.spec.ts @@ -128,7 +128,9 @@ test('get textContent of the empty template', async ({ mount }) => { }); test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(App); + const component = await mount(App, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); From 412f894bd71a104b12b652056b3c922e59123e3b Mon Sep 17 00:00:00 2001 From: sand4rt Date: Wed, 21 Dec 2022 14:48:45 +0100 Subject: [PATCH 6/8] chore(ct): vue vite consistent test naming --- tests/components/ct-vue-vite/src/notation-jsx.spec.tsx | 2 +- tests/components/ct-vue-vite/src/notation-vue.spec.js | 2 +- tests/components/ct-vue-vite/src/notation-vue.spec.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx index db1f341519d66..1b38f83212985 100644 --- a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx @@ -143,7 +143,7 @@ test('get textContent of the empty template', async ({ mount }) => { await expect(component).toHaveText(''); }); -test('render app and navigate to a page', async ({ page, mount }) => { +test('navigate to a page by clicking a link', async ({ page, mount }) => { const component = await mount(, { hooksConfig: { routing: true } }); diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.js b/tests/components/ct-vue-vite/src/notation-vue.spec.js index f9284454bcf1f..a3c8e52d2f479 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.js +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.js @@ -159,7 +159,7 @@ test('get textContent of the empty template', async ({ mount }) => { await expect(component).toHaveText(''); }); -test('render app and navigate to a page', async ({ page, mount }) => { +test('navigate to a page by clicking a link', async ({ page, mount }) => { const component = await mount(App, { hooksConfig: { routing: true } }); diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.ts b/tests/components/ct-vue-vite/src/notation-vue.spec.ts index 2e10c3fa2c58f..1070a5bd08781 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.ts +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.ts @@ -167,7 +167,7 @@ test('get textContent of the empty template', async ({ mount }) => { await expect(component).toHaveText(''); }); -test('render app and navigate to a page', async ({ page, mount }) => { +test('navigate to a page by clicking a link', async ({ page, mount }) => { const component = await mount(App, { hooksConfig: { routing: true } }); From 7857ebb04dd54f3ca54dc36a34e812434b2ff8bc Mon Sep 17 00:00:00 2001 From: sand4rt Date: Wed, 21 Dec 2022 14:49:52 +0100 Subject: [PATCH 7/8] chore(ct): vue2 consistent tests --- tests/components/ct-vue2-cli/playwright/index.ts | 10 +++++++--- tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx | 4 +++- tests/components/ct-vue2-cli/src/notation-vue.spec.ts | 4 +++- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/tests/components/ct-vue2-cli/playwright/index.ts b/tests/components/ct-vue2-cli/playwright/index.ts index cc8c383b3df48..d608a40218d40 100644 --- a/tests/components/ct-vue2-cli/playwright/index.ts +++ b/tests/components/ct-vue2-cli/playwright/index.ts @@ -4,13 +4,17 @@ import { router } from '../src/router'; import '../src/assets/index.css'; export type HooksConfig = { - route: string; + route?: string; + routing?: boolean; } beforeMount(async ({ Vue, hooksConfig }) => { console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); - Vue.use(Router as any); // TODO: remove any and fix the various installed conflicting Vue versions - return { router } + + if (hooksConfig?.routing) { + Vue.use(Router as any); // TODO: remove any and fix the various installed conflicting Vue versions + return { router } + } }); afterMount(async ({ instance }) => { diff --git a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx index 82bef40c8dfab..f023394b50fbd 100644 --- a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx @@ -143,7 +143,9 @@ test('get textContent of the empty template', async ({ mount }) => { }); test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(); + const component = await mount(, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); diff --git a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts b/tests/components/ct-vue2-cli/src/notation-vue.spec.ts index 3b182f5f05558..dd09a152bb2a1 100644 --- a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts +++ b/tests/components/ct-vue2-cli/src/notation-vue.spec.ts @@ -152,7 +152,9 @@ test('get textContent of the empty template', async ({ mount }) => { }); test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(App); + const component = await mount(App, { + hooksConfig: { routing: true } + }); await expect(component.getByRole('main')).toHaveText('Login'); await expect(page).toHaveURL('/'); await component.getByRole('link', { name: 'Dashboard' }).click(); From 354049453b8187e01268b3ae1f8ee1fd531ab5f9 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Wed, 21 Dec 2022 23:38:22 +0100 Subject: [PATCH 8/8] chore(ct): multiline if statement --- packages/playwright-ct-react/registerSource.mjs | 3 ++- packages/playwright-ct-solid/registerSource.mjs | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/playwright-ct-react/registerSource.mjs b/packages/playwright-ct-react/registerSource.mjs index ccc4d87cc74eb..a89f05b48c5ce 100644 --- a/packages/playwright-ct-react/registerSource.mjs +++ b/packages/playwright-ct-react/registerSource.mjs @@ -73,7 +73,8 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => { let App = () => render(component); for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || []) { const wrapper = await hook({ App, hooksConfig }); - if (wrapper) App = () => wrapper; + if (wrapper) + App = () => wrapper; } ReactDOM.render(App(), rootElement); diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs index 632abd3cead17..7781807cd1d8e 100644 --- a/packages/playwright-ct-solid/registerSource.mjs +++ b/packages/playwright-ct-solid/registerSource.mjs @@ -81,7 +81,8 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => { let App = () => createComponent(component); for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || []) { const wrapper = await hook({ App, hooksConfig }); - if (wrapper) App = () => wrapper; + if (wrapper) + App = () => wrapper; } const unmount = solidRender(App, rootElement);