From fbfec186789b8e8b0e84b278aedb8f0951f9a503 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Mon, 31 Oct 2022 20:58:07 +0100 Subject: [PATCH] fix(ct): vite base url (#17767) --- packages/playwright-test/src/mount.ts | 2 +- .../playwright-test/src/plugins/vitePlugin.ts | 10 ++- tests/components/ct-vue-vite/package.json | 3 +- .../ct-vue-vite/playwright.config.ts | 3 +- .../ct-vue-vite/playwright/index.ts | 2 + tests/components/ct-vue-vite/src/App.vue | 70 +----------------- .../ct-vue-vite/src/assets/base.css | 74 ------------------- tests/components/ct-vue-vite/src/main.js | 7 +- .../ct-vue-vite/src/notation-jsx.spec.tsx | 10 +++ .../ct-vue-vite/src/notation-vue.spec.js | 10 +++ .../ct-vue-vite/src/notation-vue.spec.ts | 14 +++- .../ct-vue-vite/src/pages/DashboardPage.vue | 3 + .../ct-vue-vite/src/pages/LoginPage.vue | 3 + .../ct-vue-vite/src/router/index.ts | 11 +++ .../components/ct-vue-vite/tsconfig.test.json | 1 + 15 files changed, 68 insertions(+), 155 deletions(-) delete mode 100644 tests/components/ct-vue-vite/src/assets/base.css create mode 100644 tests/components/ct-vue-vite/src/pages/DashboardPage.vue create mode 100644 tests/components/ct-vue-vite/src/pages/LoginPage.vue create mode 100644 tests/components/ct-vue-vite/src/router/index.ts diff --git a/packages/playwright-test/src/mount.ts b/packages/playwright-test/src/mount.ts index 94a273b662..3d2176da92 100644 --- a/packages/playwright-test/src/mount.ts +++ b/packages/playwright-test/src/mount.ts @@ -42,7 +42,7 @@ export const fixtures: Fixtures< await page.exposeFunction('__ct_dispatch', (ordinal: number, args: any[]) => { boundCallbacksForMount[ordinal](...args); }); - await page.goto(process.env.PLAYWRIGHT_VITE_COMPONENTS_BASE_URL!); + await page.goto(process.env.PLAYWRIGHT_TEST_BASE_URL!); }, true); await use(page); }, diff --git a/packages/playwright-test/src/plugins/vitePlugin.ts b/packages/playwright-test/src/plugins/vitePlugin.ts index 99ea778672..010c43899d 100644 --- a/packages/playwright-test/src/plugins/vitePlugin.ts +++ b/packages/playwright-test/src/plugins/vitePlugin.ts @@ -27,11 +27,12 @@ import type { FullConfig } from '../types'; import { assert, calculateSha1 } from 'playwright-core/lib/utils'; import type { AddressInfo } from 'net'; import { getPlaywrightVersion } from 'playwright-core/lib/common/userAgent'; +import type { PlaywrightTestConfig as BasePlaywrightTestConfig } from '@playwright/test'; let stoppableServer: any; const playwrightVersion = getPlaywrightVersion(); -type CtConfig = { +type CtConfig = BasePlaywrightTestConfig['use'] & { ctPort?: number; ctTemplateDir?: string; ctCacheDir?: string; @@ -139,8 +140,10 @@ export function createPlugin( sourcemap: true, }; - if (sourcesDirty) + if (sourcesDirty) { await build(viteConfig); + await fs.promises.rename(`${outDir}/${relativeTemplateDir}/index.html`, `${outDir}/index.html`); + } if (hasNewTests || hasNewComponents || sourcesDirty) await fs.promises.writeFile(buildInfoFile, JSON.stringify(buildInfo, undefined, 2)); @@ -150,7 +153,8 @@ export function createPlugin( const isAddressInfo = (x: any): x is AddressInfo => x?.address; const address = previewServer.httpServer.address(); if (isAddressInfo(address)) - process.env.PLAYWRIGHT_VITE_COMPONENTS_BASE_URL = `http://localhost:${address.port}/${relativeTemplateDir}/index.html`; + process.env.PLAYWRIGHT_TEST_BASE_URL = `http://localhost:${address.port}`; + }, teardown: async () => { diff --git a/tests/components/ct-vue-vite/package.json b/tests/components/ct-vue-vite/package.json index 121bd4bde1..47ba6482f3 100644 --- a/tests/components/ct-vue-vite/package.json +++ b/tests/components/ct-vue-vite/package.json @@ -8,7 +8,8 @@ "typecheck": "vue-tsc --noEmit --project tsconfig.test.json" }, "dependencies": { - "vue": "^3.2.31" + "vue": "^3.2.31", + "vue-router": "^4.1.5" }, "devDependencies": { "@vitejs/plugin-vue": "^3.2.0", diff --git a/tests/components/ct-vue-vite/playwright.config.ts b/tests/components/ct-vue-vite/playwright.config.ts index 273d2968f3..04b35fde3d 100644 --- a/tests/components/ct-vue-vite/playwright.config.ts +++ b/tests/components/ct-vue-vite/playwright.config.ts @@ -23,8 +23,7 @@ const config: PlaywrightTestConfig = { reporter: 'html', use: { ctTemplateDir: 'playwright', - ctCacheDir: 'playwright/.cache', - trace: 'on-first-retry', + trace: 'on-first-retry' }, projects: [ { diff --git a/tests/components/ct-vue-vite/playwright/index.ts b/tests/components/ct-vue-vite/playwright/index.ts index ff31bfe92f..2e548b550d 100644 --- a/tests/components/ct-vue-vite/playwright/index.ts +++ b/tests/components/ct-vue-vite/playwright/index.ts @@ -1,4 +1,5 @@ import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks'; +import { router } from '../src/router'; import Button from '../src/components/Button.vue'; import '../src/assets/index.css'; @@ -7,6 +8,7 @@ export type HooksConfig = { } beforeMount(async ({ app, hooksConfig }) => { + 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/App.vue b/tests/components/ct-vue-vite/src/App.vue index abbbc3e3e9..8eced563f8 100644 --- a/tests/components/ct-vue-vite/src/App.vue +++ b/tests/components/ct-vue-vite/src/App.vue @@ -1,72 +1,8 @@ - - diff --git a/tests/components/ct-vue-vite/src/assets/base.css b/tests/components/ct-vue-vite/src/assets/base.css deleted file mode 100644 index 71dc55a3cb..0000000000 --- a/tests/components/ct-vue-vite/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/tests/components/ct-vue-vite/src/main.js b/tests/components/ct-vue-vite/src/main.js index 719495a2f2..dff530a737 100644 --- a/tests/components/ct-vue-vite/src/main.js +++ b/tests/components/ct-vue-vite/src/main.js @@ -1,5 +1,6 @@ -import { createApp } from 'vue' -import App from './App.vue' +import { createApp } from 'vue'; +import App from './App.vue'; import './assets/index.css'; +import { router } from './router'; -createApp(App).mount('#app') +createApp(App).use(router).mount('#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 dd2db996ae..b770739df8 100644 --- a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx @@ -1,4 +1,5 @@ import { test, expect } from '@playwright/experimental-ct-vue' +import App from './App.vue'; import Button from './components/Button.vue' import Counter from './components/Counter.vue' import DefaultSlot from './components/DefaultSlot.vue' @@ -141,3 +142,12 @@ test('get textContent of the empty template', async ({ mount }) => { expect(await component.textContent()).toBe(''); await expect(component).toHaveText(''); }); + +test('render app and navigate to a page', async ({ page, mount }) => { + const component = await mount(App); + 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'); +}); 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 03ba922f2f..2e072c257c 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.js +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.js @@ -1,4 +1,5 @@ import { test, expect } from '@playwright/experimental-ct-vue' +import App from './App.vue'; import Button from './components/Button.vue' import Counter from './components/Counter.vue' import DefaultSlot from './components/DefaultSlot.vue' @@ -157,3 +158,12 @@ test('get textContent of the empty template', async ({ mount }) => { expect(await component.textContent()).toBe(''); await expect(component).toHaveText(''); }); + +test('render app and navigate to a page', async ({ page, mount }) => { + const component = await mount(App); + 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'); +}); 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 2216af825e..850ca45fd7 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.ts +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.ts @@ -1,5 +1,5 @@ import { test, expect } from '@playwright/experimental-ct-vue' - +import App from './App.vue'; import Button from './components/Button.vue' import Counter from './components/Counter.vue' import DefaultSlot from './components/DefaultSlot.vue' @@ -153,12 +153,9 @@ test('unmount', async ({ page, mount }) => { 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') }) @@ -169,3 +166,12 @@ test('get textContent of the empty template', async ({ mount }) => { expect(await component.textContent()).toBe(''); await expect(component).toHaveText(''); }); + +test('render app and navigate to a page', async ({ page, mount }) => { + const component = await mount(App); + 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'); +}); diff --git a/tests/components/ct-vue-vite/src/pages/DashboardPage.vue b/tests/components/ct-vue-vite/src/pages/DashboardPage.vue new file mode 100644 index 0000000000..0dcf8cc990 --- /dev/null +++ b/tests/components/ct-vue-vite/src/pages/DashboardPage.vue @@ -0,0 +1,3 @@ + diff --git a/tests/components/ct-vue-vite/src/pages/LoginPage.vue b/tests/components/ct-vue-vite/src/pages/LoginPage.vue new file mode 100644 index 0000000000..aaa18be8ab --- /dev/null +++ b/tests/components/ct-vue-vite/src/pages/LoginPage.vue @@ -0,0 +1,3 @@ + diff --git a/tests/components/ct-vue-vite/src/router/index.ts b/tests/components/ct-vue-vite/src/router/index.ts new file mode 100644 index 0000000000..e4e5a9e37f --- /dev/null +++ b/tests/components/ct-vue-vite/src/router/index.ts @@ -0,0 +1,11 @@ +import DashboardPage from '../pages/DashboardPage.vue'; +import LoginPage from '../pages/LoginPage.vue'; +import { createRouter, createWebHistory } from 'vue-router'; + +export const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { path: '/', component: LoginPage }, + { path: '/dashboard', component: DashboardPage }, + ], +}) diff --git a/tests/components/ct-vue-vite/tsconfig.test.json b/tests/components/ct-vue-vite/tsconfig.test.json index 96b555f526..c54e8e0d55 100644 --- a/tests/components/ct-vue-vite/tsconfig.test.json +++ b/tests/components/ct-vue-vite/tsconfig.test.json @@ -1,5 +1,6 @@ { "extends": "./tsconfig.app.json", + "include": ["playwright", "env.d.ts", "src/**/*"], "compilerOptions": { "composite": true, "lib": [],