fix(ct): vite base url (#17767)

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);
     },

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

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",

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: [
     {

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<HooksConfig>(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}`);
 });

tests/components/ct-vue-vite/src/App.vue

@@ -1,72 +1,8 @@
 <template>
   <header>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      You did it
-    </div>
+    <router-link to="/">Login</router-link>
+    <router-link to="/dashboard">Dashboard</router-link>
   </header>
+  <router-view />
 </template>
-
-<style>
-@import './assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-}
-</style>

tests/components/ct-vue-vite/src/assets/base.css

@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-: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;
-}

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');

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

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

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

tests/components/ct-vue-vite/src/pages/DashboardPage.vue

@@ -0,0 +1,3 @@
+<template>
+  <main>Dashboard</main>
+</template>

tests/components/ct-vue-vite/src/pages/LoginPage.vue

@@ -0,0 +1,3 @@
+<template>
+  <main>Login</main>
+</template>

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 },
+  ],
+})

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": [],