From 712ce0dce93a35851ca433a5ff0f30fdd0e8f08f Mon Sep 17 00:00:00 2001 From: sand4rt Date: Tue, 8 Nov 2022 17:40:29 +0100 Subject: [PATCH] test(ct): vue cli router (#18603) --- tests/components/ct-vue-cli/package.json | 4 ++- .../components/ct-vue-cli/playwright/index.ts | 5 ++-- tests/components/ct-vue-cli/src/App.vue | 25 +++++-------------- tests/components/ct-vue-cli/src/main.js | 7 +++--- .../ct-vue-cli/src/notation-jsx.spec.tsx | 10 ++++++++ .../ct-vue-cli/src/notation-vue.spec.ts | 10 ++++++++ .../ct-vue-cli/src/pages/DashboardPage.vue | 3 +++ .../ct-vue-cli/src/pages/LoginPage.vue | 3 +++ .../components/ct-vue-cli/src/router/index.js | 11 ++++++++ .../components/ct-vue-cli/tsconfig.test.json | 4 +-- tests/components/ct-vue-cli/vue.config.js | 12 --------- 11 files changed, 55 insertions(+), 39 deletions(-) create mode 100644 tests/components/ct-vue-cli/src/pages/DashboardPage.vue create mode 100644 tests/components/ct-vue-cli/src/pages/LoginPage.vue create mode 100644 tests/components/ct-vue-cli/src/router/index.js diff --git a/tests/components/ct-vue-cli/package.json b/tests/components/ct-vue-cli/package.json index e2990f0f21..2e959d076f 100644 --- a/tests/components/ct-vue-cli/package.json +++ b/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", diff --git a/tests/components/ct-vue-cli/playwright/index.ts b/tests/components/ct-vue-cli/playwright/index.ts index c9951c0163..b87f588e10 100644 --- a/tests/components/ct-vue-cli/playwright/index.ts +++ b/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(async ({ app, hooksConfig }) => { + app.use(router); console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`); }); diff --git a/tests/components/ct-vue-cli/src/App.vue b/tests/components/ct-vue-cli/src/App.vue index 2509905571..d648a97c34 100644 --- a/tests/components/ct-vue-cli/src/App.vue +++ b/tests/components/ct-vue-cli/src/App.vue @@ -1,21 +1,8 @@ - - - - diff --git a/tests/components/ct-vue-cli/src/main.js b/tests/components/ct-vue-cli/src/main.js index d25dbd8b42..aac97dde17 100644 --- a/tests/components/ct-vue-cli/src/main.js +++ b/tests/components/ct-vue-cli/src/main.js @@ -1,5 +1,6 @@ -import { createApp } from 'vue' -import App from './App.vue' +import { createApp } from 'vue'; +import { router } from './router'; +import App from './App.vue'; import './assets/index.css'; -createApp(App).mount('#app') +createApp(App).use(router).mount('#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 27143b444e..258a1217fa 100644 --- a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx +++ b/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(); + 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-cli/src/notation-vue.spec.ts b/tests/components/ct-vue-cli/src/notation-vue.spec.ts index 2ba1be9ba3..5e331e4be4 100644 --- a/tests/components/ct-vue-cli/src/notation-vue.spec.ts +++ b/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'); +}); diff --git a/tests/components/ct-vue-cli/src/pages/DashboardPage.vue b/tests/components/ct-vue-cli/src/pages/DashboardPage.vue new file mode 100644 index 0000000000..0dcf8cc990 --- /dev/null +++ b/tests/components/ct-vue-cli/src/pages/DashboardPage.vue @@ -0,0 +1,3 @@ + diff --git a/tests/components/ct-vue-cli/src/pages/LoginPage.vue b/tests/components/ct-vue-cli/src/pages/LoginPage.vue new file mode 100644 index 0000000000..aaa18be8ab --- /dev/null +++ b/tests/components/ct-vue-cli/src/pages/LoginPage.vue @@ -0,0 +1,3 @@ + diff --git a/tests/components/ct-vue-cli/src/router/index.js b/tests/components/ct-vue-cli/src/router/index.js new file mode 100644 index 0000000000..783898a3dc --- /dev/null +++ b/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 }, + ], +}) diff --git a/tests/components/ct-vue-cli/tsconfig.test.json b/tests/components/ct-vue-cli/tsconfig.test.json index 34e0d41121..8ca3e2c472 100644 --- a/tests/components/ct-vue-cli/tsconfig.test.json +++ b/tests/components/ct-vue-cli/tsconfig.test.json @@ -1,8 +1,8 @@ { "extends": "./tsconfig.app.json", - "include": ["playwright"], - "exclude": [], + "include": ["playwright", "src/**/*"], "compilerOptions": { + "allowJs": true, "composite": true, "lib": [], "jsx": "react-jsx", diff --git a/tests/components/ct-vue-cli/vue.config.js b/tests/components/ct-vue-cli/vue.config.js index 5a6a178319..523a634b5c 100644 --- a/tests/components/ct-vue-cli/vue.config.js +++ b/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', - }, - } })