feat(ct): vue2 plugins (#18596)

packages/playwright-ct-vue2/hooks.d.ts

@@ -14,14 +14,19 @@
  * limitations under the License.
  */
 
-import { CombinedVueInstance, Vue } from 'vue/types/vue';
-
+import { ComponentOptions } from 'vue';
+import { CombinedVueInstance, Vue, VueConstructor } from 'vue/types/vue';
+ 
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
+
 export declare function beforeMount<HooksConfig extends JsonObject>(
-  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+  callback: (params: { 
+    hooksConfig: HooksConfig, 
+    Vue: VueConstructor<Vue>, 
+  }) => Promise<void | ComponentOptions<Vue> & Record<string, unknown>>
 ): void;
 export declare function afterMount<HooksConfig extends JsonObject>(
   callback: (params: {

packages/playwright-ct-vue2/index.d.ts

@@ -48,17 +48,14 @@ export interface MountOptions<
   props?: Props;
   slots?: Record<string, Slot> & { default?: Slot };
   on?: Record<string, Function>;
-  hooksConfig?: JsonObject;
+  hooksConfig?: HooksConfig;
 }
 
 interface MountResult<
-  HooksConfig extends JsonObject,
   Props extends Record<string, unknown>
 > extends Locator {
   unmount(): Promise<void>;
-  update(
-    options: Omit<MountOptions<HooksConfig, Props>, 'hooksConfig'>
-  ): Promise<void>;
+  update(options: Omit<MountOptions<never, Props>, 'hooksConfig'>): Promise<void>;
 }
 
 interface MountResultJsx extends Locator {
@@ -70,15 +67,15 @@ export interface ComponentFixtures {
   mount(component: JSX.Element): Promise<MountResultJsx>;
   mount<HooksConfig extends JsonObject>(
     component: any,
-    options?: MountOptions<HooksConfig, any>
-  ): Promise<MountResult<HooksConfig, any>>;
+    options?: MountOptions<HooksConfig, Record<string, unknown>>
+  ): Promise<MountResult<Record<string, unknown>>>;
   mount<
     HooksConfig extends JsonObject,
     Props extends Record<string, unknown> = Record<string, unknown>
   >(
     component: any,
-    options: MountOptions<HooksConfig, any> & { props: Props }
-  ): Promise<MountResult<HooksConfig, Props>>;
+    options: MountOptions<HooksConfig, never> & { props: Props }
+  ): Promise<MountResult<Props>>;
 }
 
 export const test: TestType<

packages/playwright-ct-vue2/registerSource.mjs

@@ -160,10 +160,12 @@ const instanceKey = Symbol('instanceKey');
 const wrapperKey = Symbol('wrapperKey');
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
+  let options = {};
   for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || [])
-    await hook({ hooksConfig });
+    options = await hook({ hooksConfig, Vue });
 
   const instance = new Vue({
+    ...options,
     render: h => {
       const wrapper = createWrapper(component, h);
       /** @type {any} */ (rootElement)[wrapperKey] = wrapper;

tests/components/ct-vue-vite/playwright.config.ts

@@ -22,7 +22,6 @@ const config: PlaywrightTestConfig = {
   retries: process.env.CI ? 2 : 0,
   reporter: 'html',
   use: {
-    ctTemplateDir: 'playwright',
     trace: 'on-first-retry'
   },
   projects: [

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

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^2.7.13"
+    "vue": "^2.7.13",
+    "vue-router": "^3.6.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

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

@@ -1,14 +1,18 @@
-import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue2/hooks';
+import Router from 'vue-router';
+import { router } from '../src/router';
+import '../src/assets/index.css';
 
-export type hooksConfig = {
+export type HooksConfig = {
   route: string;
 }
 
-beforeMount(async ({ hooksConfig }) => {
+beforeMount<HooksConfig>(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 }
 });
 
-afterMount(async ({ instance }) => {
+afterMount<HooksConfig>(async ({ instance }) => {
   console.log(`After mount el: ${instance.$el.constructor.name}`);
 });

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

@@ -1,28 +1,10 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <header>
+      <img alt="Vue logo" src="./assets/logo.png" width="60" height="60">
+      <router-link to="/">Login</router-link>
+      <router-link to="/dashboard">Dashboard</router-link>
+    </header>
+    <router-view />
   </div>
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</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>
+</template>

tests/components/ct-vue2-cli/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

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

@@ -1,9 +1,14 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from 'vue';
+import Router from 'vue-router';
+import App from './App.vue';
+import { router } from './router';
 import './assets/index.css';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+
+Vue.use(Router);
 
 new Vue({
+  router,
   render: h => h(App),
-}).$mount('#app')
+}).$mount('#app');

tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx

@@ -1,10 +1,11 @@
 import { test, expect } from '@playwright/experimental-ct-vue2'
-import Button from './components/Button.vue'
-import Counter from './components/Counter.vue'
-import DefaultSlot from './components/DefaultSlot.vue'
-import NamedSlots from './components/NamedSlots.vue'
-import EmptyTemplate from './components/EmptyTemplate.vue'
-import type { hooksConfig } from '../playwright'
+import App from './App.vue';
+import Button from './components/Button.vue';
+import Counter from './components/Counter.vue';
+import DefaultSlot from './components/DefaultSlot.vue';
+import NamedSlots from './components/NamedSlots.vue';
+import EmptyTemplate from './components/EmptyTemplate.vue';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -121,7 +122,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount<hooksConfig>(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
   })
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount el: HTMLButtonElement'])
@@ -140,3 +141,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-vue2-cli/src/notation-vue.spec.ts

@@ -1,15 +1,16 @@
-import { test, expect } from '@playwright/experimental-ct-vue2'
-import Button from './components/Button.vue'
-import Counter from './components/Counter.vue'
-import DefaultSlot from './components/DefaultSlot.vue'
-import NamedSlots from './components/NamedSlots.vue'
-import Component from './components/Component.vue'
-import EmptyTemplate from './components/EmptyTemplate.vue'
-import type { hooksConfig } from '../playwright'
+import { test, expect } from '@playwright/experimental-ct-vue2';
+import App from './App.vue';
+import Button from './components/Button.vue';
+import Counter from './components/Counter.vue';
+import DefaultSlot from './components/DefaultSlot.vue';
+import NamedSlots from './components/NamedSlots.vue';
+import Component from './components/Component.vue';
+import EmptyTemplate from './components/EmptyTemplate.vue';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } })
 
-test('render props', async ({ mount }) => {
+test('render props', async ({ page, mount }) => {
   const component = await mount(Button, {
     props: {
       title: 'Submit'
@@ -123,7 +124,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount<hooksConfig>(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },
@@ -149,3 +150,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-vue2-cli/src/pages/DashboardPage.vue

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

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

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

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

@@ -0,0 +1,12 @@
+import Router from 'vue-router';
+import LoginPage from '../pages/LoginPage.vue';
+import DashboardPage from '../pages/DashboardPage.vue';
+
+export const router = new Router({
+  mode: 'history',
+  base: '/',
+  routes: [
+    { path: '/', component: LoginPage },
+    { path: '/dashboard', component: DashboardPage }
+  ]
+});

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

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