make typescript happy

Author: RobinMalfait

packages/@headlessui-vue/src/components/description/description.test.ts

@@ -8,7 +8,8 @@ import { html } from '../../test-utils/html'
 import { click } from '../../test-utils/interactions'
 import { getByText } from '../../test-utils/accessibility-assertions'
 
-function format(input: Element | string) {
+function format(input: Element | null | string) {
+  if (input === null) throw new Error('input is null')
   let contents = (typeof input === 'string' ? input : (input as HTMLElement).outerHTML).trim()
   return prettier.format(contents, { parser: 'babel' })
 }
@@ -22,32 +23,19 @@ beforeAll(() => {
 
 afterAll(() => jest.restoreAllMocks())
 
-function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
-  let defaultComponents = { Description }
-
-  if (typeof input === 'string') {
-    return render(defineComponent({ template: input, components: defaultComponents }))
-  }
-
-  return render(
-    defineComponent(
-      Object.assign({}, input, {
-        components: { ...defaultComponents, ...input.components },
-      }) as Parameters<typeof defineComponent>[0]
-    )
-  )
-}
-
 it('should be possible to use useDescriptions without using a Description', async () => {
-  let { container } = renderTemplate({
-    render() {
-      return h('div', [h('div', { 'aria-describedby': this.describedby }, ['No description'])])
-    },
-    setup() {
-      let describedby = useDescriptions()
-      return { describedby }
-    },
-  })
+  let { container } = render(
+    defineComponent({
+      components: { Description },
+      render() {
+        return h('div', [h('div', { 'aria-describedby': this.describedby }, ['No description'])])
+      },
+      setup() {
+        let describedby = useDescriptions()
+        return { describedby }
+      },
+    })
+  )
 
   expect(format(container.firstElementChild)).toEqual(
     format(html`
@@ -59,20 +47,23 @@ it('should be possible to use useDescriptions without using a Description', asyn
 })
 
 it('should be possible to use useDescriptions and a single Description, and have them linked', async () => {
-  let { container } = renderTemplate({
-    render() {
-      return h('div', [
-        h('div', { 'aria-describedby': this.describedby }, [
-          h(Description, () => 'I am a description'),
-          h('span', 'Contents'),
-        ]),
-      ])
-    },
-    setup() {
-      let describedby = useDescriptions()
-      return { describedby }
-    },
-  })
+  let { container } = render(
+    defineComponent({
+      components: { Description },
+      render() {
+        return h('div', [
+          h('div', { 'aria-describedby': this.describedby }, [
+            h(Description, () => 'I am a description'),
+            h('span', 'Contents'),
+          ]),
+        ])
+      },
+      setup() {
+        let describedby = useDescriptions()
+        return { describedby }
+      },
+    })
+  )
 
   await new Promise<void>(nextTick)
 
@@ -89,21 +80,24 @@ it('should be possible to use useDescriptions and a single Description, and have
 })
 
 it('should be possible to use useDescriptions and multiple Description components, and have them linked', async () => {
-  let { container } = renderTemplate({
-    render() {
-      return h('div', [
-        h('div', { 'aria-describedby': this.describedby }, [
-          h(Description, () => 'I am a description'),
-          h('span', 'Contents'),
-          h(Description, () => 'I am also a description'),
-        ]),
-      ])
-    },
-    setup() {
-      let describedby = useDescriptions()
-      return { describedby }
-    },
-  })
+  let { container } = render(
+    defineComponent({
+      components: { Description },
+      render() {
+        return h('div', [
+          h('div', { 'aria-describedby': this.describedby }, [
+            h(Description, () => 'I am a description'),
+            h('span', 'Contents'),
+            h(Description, () => 'I am also a description'),
+          ]),
+        ])
+      },
+      setup() {
+        let describedby = useDescriptions()
+        return { describedby }
+      },
+    })
+  )
 
   await new Promise<void>(nextTick)
 
@@ -121,21 +115,24 @@ it('should be possible to use useDescriptions and multiple Description component
 })
 
 it('should be possible to update a prop from the parent and it should reflect in the Description component', async () => {
-  let { container } = renderTemplate({
-    render() {
-      return h('div', [
-        h('div', { 'aria-describedby': this.describedby }, [
-          h(Description, () => 'I am a description'),
-          h('button', { onClick: () => this.count++ }, '+1'),
-        ]),
-      ])
-    },
-    setup() {
-      let count = ref(0)
-      let describedby = useDescriptions({ props: { 'data-count': count } })
-      return { count, describedby }
-    },
-  })
+  let { container } = render(
+    defineComponent({
+      components: { Description },
+      render() {
+        return h('div', [
+          h('div', { 'aria-describedby': this.describedby }, [
+            h(Description, () => 'I am a description'),
+            h('button', { onClick: () => this.count++ }, '+1'),
+          ]),
+        ])
+      },
+      setup() {
+        let count = ref(0)
+        let describedby = useDescriptions({ props: { 'data-count': count } })
+        return { count, describedby }
+      },
+    })
+  )
 
   await new Promise<void>(nextTick)
 

packages/@headlessui-vue/src/components/dialog/dialog.test.ts

@@ -1,4 +1,4 @@
-import { defineComponent, ref, nextTick, h } from 'vue'
+import { defineComponent, ref, nextTick, h, ComponentOptionsWithoutProps } from 'vue'
 import { render } from '../../test-utils/vue-testing-library'
 
 import { Dialog, DialogOverlay, DialogTitle, DialogDescription } from './dialog'
@@ -42,7 +42,7 @@ beforeAll(() => {
 
 afterAll(() => jest.restoreAllMocks())
 
-function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
+function renderTemplate(input: string | ComponentOptionsWithoutProps) {
   let defaultComponents = { Dialog, DialogOverlay, DialogTitle, DialogDescription, TabSentinel }
 
   if (typeof input === 'string') {

packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, ref, watch, h } from 'vue'
+import { defineComponent, nextTick, ref, watch, h, ComponentOptionsWithoutProps } from 'vue'
 import { render } from '../../test-utils/vue-testing-library'
 import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
@@ -19,7 +19,7 @@ jest.mock('../../hooks/use-id')
 
 afterAll(() => jest.restoreAllMocks())
 
-function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
+function renderTemplate(input: string | ComponentOptionsWithoutProps) {
   let defaultComponents = { Disclosure, DisclosureButton, DisclosurePanel }
 
   if (typeof input === 'string') {

packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts

@@ -1,4 +1,4 @@
-import { defineComponent, ref, nextTick, onMounted } from 'vue'
+import { defineComponent, ref, nextTick, onMounted, ComponentOptionsWithoutProps } from 'vue'
 
 import { FocusTrap } from './focus-trap'
 import { assertActiveElement, getByText } from '../../test-utils/accessibility-assertions'
@@ -16,7 +16,7 @@ beforeAll(() => {
 
 afterAll(() => jest.restoreAllMocks())
 
-function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
+function renderTemplate(input: string | ComponentOptionsWithoutProps) {
   let defaultComponents = { FocusTrap }
 
   if (typeof input === 'string') {
@@ -41,7 +41,7 @@ it('should focus the first focusable element inside the FocusTrap', async () =>
     `
   )
 
-  await new Promise(nextTick)
+  await new Promise<void>(nextTick)
 
   assertActiveElement(getByText('Trigger'))
 })
@@ -64,7 +64,7 @@ it('should focus the autoFocus element inside the FocusTrap if that exists', asy
     },
   })
 
-  await new Promise(nextTick)
+  await new Promise<void>(nextTick)
 
   assertActiveElement(document.getElementById('b'))
 })
@@ -84,7 +84,7 @@ it('should focus the initialFocus element inside the FocusTrap if that exists',
     },
   })
 
-  await new Promise(nextTick)
+  await new Promise<void>(nextTick)
 
   assertActiveElement(document.getElementById('c'))
 })
@@ -104,7 +104,7 @@ it('should focus the initialFocus element inside the FocusTrap even if another e
     },
   })
 
-  await new Promise(nextTick)
+  await new Promise<void>(nextTick)
 
   assertActiveElement(document.getElementById('c'))
 })
@@ -121,7 +121,7 @@ it('should warn when there is no focusable element inside the FocusTrap', async
     `
   )
 
-  await new Promise(nextTick)
+  await new Promise<void>(nextTick)
 
   expect(spy.mock.calls[0][0]).toBe('There are no focusable elements inside the <FocusTrap />')
 })
@@ -143,7 +143,7 @@ it(
       `,
     })
 
-    await new Promise(nextTick)
+    await new Promise<void>(nextTick)
 
     let [a, b, c, d] = Array.from(document.querySelectorAll('input'))
 
@@ -210,7 +210,7 @@ it('should restore the previously focused element, before entering the FocusTrap
     },
   })
 
-  await new Promise(nextTick)
+  await new Promise<void>(nextTick)
 
   // The input should have focus by default because of the autoFocus prop
   assertActiveElement(document.getElementById('item-1'))
@@ -243,7 +243,7 @@ it('should be possible to tab to the next focusable element within the focus tra
     `
   )
 
-  await new Promise(nextTick)
+  await new Promise<void>(nextTick)
 
   // Item A should be focused because the FocusTrap will focus the first item
   assertActiveElement(document.getElementById('item-a'))