chore(types): add event handler type tests

Author: wmertens

packages/qwik/src/core/shared/jsx/types/jsx-polymorphic.unit.tsx

@@ -0,0 +1,70 @@
+import type { EventHandler, FunctionComponent, PropsOf } from '@qwik.dev/core';
+import { component$ } from '@qwik.dev/core';
+import { describe, expectTypeOf, test } from 'vitest';
+
+// This is in a separate file because it makes TS very slow
+describe('polymorphism', () => {
+  test('polymorphic component', () => () => {
+    const Poly = component$(
+      <C extends string | FunctionComponent = 'div'>({
+        as,
+        ...props
+      }: { as?: C } & PropsOf<string extends C ? 'div' : C>) => {
+        const Cmp = as || 'div';
+        return <Cmp {...props}>hi</Cmp>;
+      }
+    );
+    expectTypeOf<Parameters<typeof Poly<'button'>>[0]['popovertarget']>().toEqualTypeOf<
+      string | undefined
+    >();
+    expectTypeOf<Parameters<typeof Poly<'a'>>[0]['href']>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<Parameters<typeof Poly<'button'>>[0]>().not.toHaveProperty('href');
+    expectTypeOf<Parameters<typeof Poly<'a'>>[0]>().not.toHaveProperty('popovertarget');
+    expectTypeOf<
+      Parameters<Extract<Parameters<typeof Poly>[0]['onClick$'], EventHandler>>[1]
+    >().toEqualTypeOf<HTMLDivElement>();
+
+    const MyCmp = component$((p: { name: string }) => <span>Hi {p.name}</span>);
+
+    return (
+      <>
+        <Poly
+          onClick$={(ev, el) => {
+            expectTypeOf(ev).not.toBeAny();
+            expectTypeOf(ev).toEqualTypeOf<PointerEvent>();
+            expectTypeOf(el).toEqualTypeOf<HTMLDivElement>();
+          }}
+          // This should error
+          // popovertarget
+        >
+          Foo
+        </Poly>
+        <Poly
+          as="a"
+          onClick$={(ev, el) => {
+            expectTypeOf(ev).not.toBeAny();
+            expectTypeOf(ev).toEqualTypeOf<PointerEvent>();
+            expectTypeOf(el).toEqualTypeOf<HTMLAnchorElement>();
+          }}
+          href="hi"
+          // This should error
+          // popovertarget
+        >
+          Foo
+        </Poly>
+        <Poly
+          as="button"
+          onClick$={(ev, el) => {
+            expectTypeOf(ev).not.toBeAny();
+            expectTypeOf(ev).toEqualTypeOf<PointerEvent>();
+            expectTypeOf(el).toEqualTypeOf<HTMLButtonElement>();
+          }}
+          popovertarget="foo"
+        >
+          Bar
+        </Poly>
+        <Poly as={MyCmp} name="meep" />
+      </>
+    );
+  });
+});

packages/qwik/src/core/shared/jsx/types/jsx-types.unit.tsx

@@ -148,6 +148,18 @@ describe('types', () => {
       type: 'button';
       popovertarget?: string;
     }>().toMatchTypeOf<PropsOf<'input'>>();
+
+    $((_, element) => {
+      element.select();
+      expectTypeOf(element).toEqualTypeOf<HTMLInputElement>();
+    }) as QRLEventHandlerMulti<FocusEvent, HTMLInputElement>;
+
+    const t = $<EventHandler<FocusEvent, HTMLInputElement>>((_, element) => {
+      element.select();
+      expectTypeOf(element).toEqualTypeOf<HTMLInputElement>();
+    });
+    expectTypeOf(t).toExtend<QRLEventHandlerMulti<FocusEvent, HTMLInputElement>>();
+
     <>
       <button popovertarget="meep" />
       <input type="button" popovertarget="meep" />
@@ -225,70 +237,6 @@ describe('types', () => {
     </>;
   });
 
-  test('polymorphic component', () => () => {
-    const Poly = component$(
-      <C extends string | FunctionComponent = 'div'>({
-        as,
-        ...props
-      }: { as?: C } & PropsOf<string extends C ? 'div' : C>) => {
-        const Cmp = as || 'div';
-        return <Cmp {...props}>hi</Cmp>;
-      }
-    );
-    expectTypeOf<Parameters<typeof Poly<'button'>>[0]['popovertarget']>().toEqualTypeOf<
-      string | undefined
-    >();
-    expectTypeOf<Parameters<typeof Poly<'a'>>[0]['href']>().toEqualTypeOf<string | undefined>();
-    expectTypeOf<Parameters<typeof Poly<'button'>>[0]>().not.toHaveProperty('href');
-    expectTypeOf<Parameters<typeof Poly<'a'>>[0]>().not.toHaveProperty('popovertarget');
-    expectTypeOf<
-      Parameters<Extract<Parameters<typeof Poly>[0]['onClick$'], EventHandler>>[1]
-    >().toEqualTypeOf<HTMLDivElement>();
-
-    const MyCmp = component$((p: { name: string }) => <span>Hi {p.name}</span>);
-
-    return (
-      <>
-        <Poly
-          onClick$={(ev, el) => {
-            expectTypeOf(ev).not.toBeAny();
-            expectTypeOf(ev).toEqualTypeOf<PointerEvent>();
-            expectTypeOf(el).toEqualTypeOf<HTMLDivElement>();
-          }}
-          // This should error
-          // popovertarget
-        >
-          Foo
-        </Poly>
-        <Poly
-          as="a"
-          onClick$={(ev, el) => {
-            expectTypeOf(ev).not.toBeAny();
-            expectTypeOf(ev).toEqualTypeOf<PointerEvent>();
-            expectTypeOf(el).toEqualTypeOf<HTMLAnchorElement>();
-          }}
-          href="hi"
-          // This should error
-          // popovertarget
-        >
-          Foo
-        </Poly>
-        <Poly
-          as="button"
-          onClick$={(ev, el) => {
-            expectTypeOf(ev).not.toBeAny();
-            expectTypeOf(ev).toEqualTypeOf<PointerEvent>();
-            expectTypeOf(el).toEqualTypeOf<HTMLButtonElement>();
-          }}
-          popovertarget="foo"
-        >
-          Bar
-        </Poly>
-        <Poly as={MyCmp} name="meep" />
-      </>
-    );
-  });
-
   test('FunctionComponent', () => () => {
     const Cmp = component$((props: { foo: string }) => null);
     expectTypeOf(Cmp).toMatchTypeOf<FunctionComponent<{ foo: string }>>();