From 5e1720d2601e05add43cd11e5c4ad5f73d887939 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Fri, 19 May 2023 00:22:05 +0200
Subject: [PATCH] feat(ct): vue type safe mount props

---
 package-lock.json                          | 16 +++++++--
 packages/playwright-ct-vue/index.d.ts      | 42 ++++++++++------------
 packages/playwright-ct-vue/package.json    |  3 +-
 tests/components/ct-vue-vite/tsconfig.json |  2 +-
 4 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cbe2db9208f5c..fec61f84e9b19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6038,6 +6038,11 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.6.5.tgz",
+      "integrity": "sha512-iGdlqtajmiqed8ptURKPJ/Olz0/mwripVZszg6tygfZSIL9kYFPJTNY6+Q6OjWGznl2L06vxG5HvNvAnWrnzbg=="
+    },
     "node_modules/vue/node_modules/@vue/compiler-sfc": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
@@ -6428,7 +6433,8 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@playwright/experimental-ct-core": "1.37.0-next",
-        "@vitejs/plugin-vue": "^4.2.1"
+        "@vitejs/plugin-vue": "^4.2.1",
+        "vue-component-type-helpers": "^1.6.5"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7420,7 +7426,8 @@
       "version": "file:packages/playwright-ct-vue",
       "requires": {
         "@playwright/experimental-ct-core": "1.37.0-next",
-        "@vitejs/plugin-vue": "^4.2.1"
+        "@vitejs/plugin-vue": "^4.2.1",
+        "vue-component-type-helpers": "^1.6.5"
       },
       "dependencies": {
         "@vitejs/plugin-vue": {
@@ -10516,6 +10523,11 @@
         }
       }
     },
+    "vue-component-type-helpers": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.6.5.tgz",
+      "integrity": "sha512-iGdlqtajmiqed8ptURKPJ/Olz0/mwripVZszg6tygfZSIL9kYFPJTNY6+Q6OjWGznl2L06vxG5HvNvAnWrnzbg=="
+    },
     "web": {
       "version": "file:packages/web",
       "requires": {
diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts
index f992773bee5af..6861582239188 100644
--- a/packages/playwright-ct-vue/index.d.ts
+++ b/packages/playwright-ct-vue/index.d.ts
@@ -25,6 +25,7 @@ import type {
 } from '@playwright/test';
 import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { InlineConfig } from 'vite';
+import type { ComponentProps } from 'vue-component-type-helpers';
 
 export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig<T, W>, 'use'> & {
   use?: BasePlaywrightTestConfig<T, W>['use'] & {
@@ -35,21 +36,24 @@ export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig
   };
 };
 
-type Slot = string | string[];
+type ComponentSlot = string | string[];
+type ComponentSlots = Record<string, ComponentSlot> & { default?: ComponentSlot };
+type ComponentEvents = Record<string, Function>;
 
-export interface MountOptions<
- HooksConfig extends JsonObject,
- Props extends Record<string, unknown>
-> {
-  props?: Props;
-  slots?: Record<string, Slot> & { default?: Slot };
-  on?: Record<string, Function>;
+export interface MountOptions< HooksConfig extends JsonObject, Component> {
+  props?: ComponentProps<Component>;
+  slots?: ComponentSlots;
+  on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-interface MountResult<Props extends Record<string, unknown>> extends Locator {
+interface MountResult<Component> extends Locator {
   unmount(): Promise<void>;
-  update(options: Omit<MountOptions<never, Props>, 'hooksConfig'>): Promise<void>;
+  update(options: {
+    props?: Partial<ComponentProps<Component>>;
+    slots?: Partial<ComponentSlots>;
+    on?: Partial<ComponentEvents>;
+  }): Promise<void>;
 }
 
 interface MountResultJsx extends Locator {
@@ -59,17 +63,10 @@ interface MountResultJsx extends Locator {
 
 export interface ComponentFixtures {
   mount(component: JSX.Element): Promise<MountResultJsx>;
-  mount<HooksConfig extends JsonObject>(
-    component: 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, never> & { props: Props }
-  ): Promise<MountResult<Props>>;
+  mount<HooksConfig extends JsonObject, Component = unknown>(
+    component: Component,
+    options?: MountOptions<HooksConfig, Component>
+  ): Promise<MountResult<Component>>;
 }
 
 export const test: TestType<
@@ -77,9 +74,6 @@ export const test: TestType<
   PlaywrightWorkerArgs & PlaywrightWorkerOptions
 >;
 
-/**
- * Defines Playwright config
- */
 export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
 export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
 export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
diff --git a/packages/playwright-ct-vue/package.json b/packages/playwright-ct-vue/package.json
index 0ccebc381f90f..867de11c5349e 100644
--- a/packages/playwright-ct-vue/package.json
+++ b/packages/playwright-ct-vue/package.json
@@ -27,7 +27,8 @@
   },
   "dependencies": {
     "@playwright/experimental-ct-core": "1.37.0-next",
-    "@vitejs/plugin-vue": "^4.2.1"
+    "@vitejs/plugin-vue": "^4.2.1",
+    "vue-component-type-helpers": "^1.6.5"
   },
   "bin": {
     "playwright": "./cli.js"
diff --git a/tests/components/ct-vue-vite/tsconfig.json b/tests/components/ct-vue-vite/tsconfig.json
index d6d2007656811..a1d96a55c5e56 100644
--- a/tests/components/ct-vue-vite/tsconfig.json
+++ b/tests/components/ct-vue-vite/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "playwright"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "tests/**/*", "playwright"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {