feat(ct): vue type safe mount props (microsoft#23151)

OctoMind-dev · Oct 27, 2023 · cfcd78c · cfcd78c
1 parent e0a3bcf
commit cfcd78c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts
@@ -35,21 +35,31 @@ export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig
   };
 };
 
-type Slot = string | string[];
+type ComponentSlot = string | string[];
+type ComponentSlots = Record<string, ComponentSlot> & { default?: ComponentSlot };
 
-export interface MountOptions<
- HooksConfig extends JsonObject,
- Props extends Record<string, unknown>
-> {
-  props?: Props;
-  slots?: Record<string, Slot> & { default?: Slot };
-  on?: Record<string, Function>;
+type ComponentEvents = Record<string, Function>;
+
+// Copied from: https://github.com/vuejs/language-tools/blob/master/packages/vue-component-type-helpers/index.d.ts#L10-L13
+type ComponentProps<T> =
+	T extends new () => { $props: infer P; } ? NonNullable<P> :
+	T extends (props: infer P, ...args: any) => any ? P :
+	{};
+
+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,27 +69,17 @@ 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<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
   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/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": {