test(ct): vue cli router (#18603)

tests/components/ct-vue-cli/package.json

@@ -10,13 +10,15 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "@vue/tsconfig": "^0.1.3",
     "eslint": "^7.32.0",

tests/components/ct-vue-cli/playwright/index.ts

@@ -1,12 +1,13 @@
-//@ts-check
-import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
+import { router } from '../src/router';
+import '../src/assets/index.css';
 
 export type HooksConfig = {
   route: string;
 }
 
 beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
+  app.use(router);
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
 });
 

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

@@ -1,21 +1,8 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
+  <header>
+    <img alt="Vue logo" class="logo" src="./assets/logo.png" width="125" height="125" />
+    <router-link to="/">Login</router-link>
+    <router-link to="/dashboard">Dashboard</router-link>
+  </header>
+  <router-view />
 </template>
-
-<script>
-
-export default {
-  name: 'App',
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

tests/components/ct-vue-cli/src/main.js

@@ -1,5 +1,6 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import App from './App.vue'
+import { router } from './router';
+import App from './App.vue';
 import './assets/index.css'; 
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app');

tests/components/ct-vue-cli/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'
@@ -119,3 +120,12 @@ test('get textContent of the empty template', 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(<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-cli/src/notation-vue.spec.ts

@@ -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'
@@ -125,3 +126,12 @@ test('get textContent of the empty template', 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(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-cli/src/pages/DashboardPage.vue

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

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

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

tests/components/ct-vue-cli/src/router/index.js

@@ -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('/'),
+  routes: [
+    { path: '/', component: LoginPage },
+    { path: '/dashboard', component: DashboardPage },
+  ],
+})

tests/components/ct-vue-cli/tsconfig.test.json

@@ -1,8 +1,8 @@
 {
   "extends": "./tsconfig.app.json",
-  "include": ["playwright"],
+  "include": ["playwright", "src/**/*"],
-  "exclude": [],
   "compilerOptions": {
+    "allowJs": true,
     "composite": true,
     "lib": [],
     "jsx": "react-jsx",

tests/components/ct-vue-cli/vue.config.js

@@ -1,16 +1,4 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
-  pages: {
-    index: {
-      entry: 'src/main.js',
-      template: 'public/index.html',
-      filename: 'index.html',
-    },
-    tests: {
-      entry: 'src/tests.js',
-      template: 'src/tests.html',
-      filename: 'tests.html',
-    },
-  }
 })