diff --git a/packages/playwright-ct-vue2/hooks.d.ts b/packages/playwright-ct-vue2/hooks.d.ts index 18147cd857..a8482a6c8c 100644 --- a/packages/playwright-ct-vue2/hooks.d.ts +++ b/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( - callback: (params: { hooksConfig: HooksConfig }) => Promise + callback: (params: { + hooksConfig: HooksConfig, + Vue: VueConstructor, + }) => Promise & Record> ): void; export declare function afterMount( callback: (params: { diff --git a/packages/playwright-ct-vue2/index.d.ts b/packages/playwright-ct-vue2/index.d.ts index e732fa9191..170a9d84e8 100644 --- a/packages/playwright-ct-vue2/index.d.ts +++ b/packages/playwright-ct-vue2/index.d.ts @@ -48,17 +48,14 @@ export interface MountOptions< props?: Props; slots?: Record & { default?: Slot }; on?: Record; - hooksConfig?: JsonObject; + hooksConfig?: HooksConfig; } interface MountResult< - HooksConfig extends JsonObject, Props extends Record > extends Locator { unmount(): Promise; - update( - options: Omit, 'hooksConfig'> - ): Promise; + update(options: Omit, 'hooksConfig'>): Promise; } interface MountResultJsx extends Locator { @@ -70,15 +67,15 @@ export interface ComponentFixtures { mount(component: JSX.Element): Promise; mount( component: any, - options?: MountOptions - ): Promise>; + options?: MountOptions> + ): Promise>>; mount< HooksConfig extends JsonObject, Props extends Record = Record >( component: any, - options: MountOptions & { props: Props } - ): Promise>; + options: MountOptions & { props: Props } + ): Promise>; } export const test: TestType< diff --git a/packages/playwright-ct-vue2/registerSource.mjs b/packages/playwright-ct-vue2/registerSource.mjs index 85a7187691..8db13ca24c 100644 --- a/packages/playwright-ct-vue2/registerSource.mjs +++ b/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; diff --git a/tests/components/ct-vue-vite/playwright.config.ts b/tests/components/ct-vue-vite/playwright.config.ts index 04b35fde3d..84d5f1a57b 100644 --- a/tests/components/ct-vue-vite/playwright.config.ts +++ b/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: [ diff --git a/tests/components/ct-vue2-cli/package.json b/tests/components/ct-vue2-cli/package.json index 8cca9b95fc..ebc160bc8f 100644 --- a/tests/components/ct-vue2-cli/package.json +++ b/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", diff --git a/tests/components/ct-vue2-cli/playwright/index.ts b/tests/components/ct-vue2-cli/playwright/index.ts index 4cd9effc9b..cc8c383b3d 100644 --- a/tests/components/ct-vue2-cli/playwright/index.ts +++ b/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(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(async ({ instance }) => { console.log(`After mount el: ${instance.$el.constructor.name}`); }); diff --git a/tests/components/ct-vue2-cli/src/App.vue b/tests/components/ct-vue2-cli/src/App.vue index 55df315325..c2209eb5d7 100644 --- a/tests/components/ct-vue2-cli/src/App.vue +++ b/tests/components/ct-vue2-cli/src/App.vue @@ -1,28 +1,10 @@ - - - - + \ No newline at end of file diff --git a/tests/components/ct-vue2-cli/src/components/HelloWorld.vue b/tests/components/ct-vue2-cli/src/components/HelloWorld.vue deleted file mode 100644 index 2b04639e8b..0000000000 --- a/tests/components/ct-vue2-cli/src/components/HelloWorld.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - diff --git a/tests/components/ct-vue2-cli/src/main.js b/tests/components/ct-vue2-cli/src/main.js index b9840f5446..b92d6e3e04 100644 --- a/tests/components/ct-vue2-cli/src/main.js +++ b/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'); diff --git a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx index aee2b7e994..82bef40c8d 100644 --- a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx +++ b/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(