From 344077b04ec9c6b4eefe9728350f595aacb54150 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Mon, 12 Sep 2022 18:30:04 +0200
Subject: [PATCH] feat(ct): svelte mount type (#17228)

---
 packages/playwright-ct-svelte/index.d.ts              | 11 +++++++----
 .../ct-svelte-vite/src/components/Button.svelte       |  4 ++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts
index 68c749149e..f98097a39c 100644
--- a/packages/playwright-ct-svelte/index.d.ts
+++ b/packages/playwright-ct-svelte/index.d.ts
@@ -24,6 +24,7 @@ import type {
   Locator,
 } from '@playwright/test';
 import type { InlineConfig } from 'vite';
+import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime'
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
@@ -36,8 +37,8 @@ export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
 
 type Slot = string | string[];
 
-export interface MountOptions<Props = Record<string, unknown>> {
-  props?: Props;
+export interface MountOptions<Component extends SvelteComponent> {
+  props?: ComponentProps<Component>;
   slots?: Record<string, Slot> & { default?: Slot };
   on?: Record<string, Function>;
   hooksConfig?: any;
@@ -48,8 +49,10 @@ interface MountResult extends Locator {
 }
 
 interface ComponentFixtures {
-  mount(component: any, options?: MountOptions): Promise<MountResult>;
-  mount<Props>(component: any, options: MountOptions & { props: Props }): Promise<MountResult>;
+  mount<Component extends SvelteComponent>(
+    component: new (...args: any[]) => Component,
+    options?: MountOptions<Component>
+  ): Promise<MountResult>;
 }
 
 export const test: TestType<
diff --git a/tests/components/ct-svelte-vite/src/components/Button.svelte b/tests/components/ct-svelte-vite/src/components/Button.svelte
index 733ae32729..2011c48b6b 100644
--- a/tests/components/ct-svelte-vite/src/components/Button.svelte
+++ b/tests/components/ct-svelte-vite/src/components/Button.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
   import { createEventDispatcher } from "svelte";
-  export let title;
+  export let title: string;
   const dispatch = createEventDispatcher();
 </script>