Add types

Author: afontcu

types/index.d.ts

@@ -0,0 +1,71 @@
+// TypeScript Version: 3.8
+
+import Vue, {ComponentOptions} from 'vue'
+import {ThisTypedMountOptions, VueClass} from '@vue/test-utils'
+import {Store, StoreOptions} from 'vuex'
+import Router, {RouteConfig} from 'vue-router'
+import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
+import {queries, EventType, BoundFunctions} from '@testing-library/dom'
+
+// NOTE: fireEvent is overridden below
+export * from '@testing-library/dom'
+
+export interface RenderResult extends BoundFunctions<typeof queries> {
+  container: HTMLElement
+  baseElement: HTMLElement
+  debug: (
+    baseElement?:
+      | HTMLElement
+      | DocumentFragment
+      | Array<HTMLElement | DocumentFragment>,
+    maxLength?: number,
+    options?: PrettyFormatOptions,
+  ) => void
+  unmount(): void
+  isUnmounted(): boolean
+  html(): string
+  emitted(): {[name: string]: any[][]}
+  updateProps(props: object): Promise<void>
+}
+
+export interface RenderOptions<V extends Vue, S = {}>
+  // The props and store options special-cased by Vue Testing Library and NOT passed to mount().
+  extends Omit<ThisTypedMountOptions<V>, 'store' | 'props'> {
+  props?: object
+  store?: StoreOptions<S>
+  routes?: RouteConfig[]
+  container?: HTMLElement
+  baseElement?: HTMLElement
+}
+
+export type ConfigurationCallback<V extends Vue> = (
+  localVue: typeof Vue,
+  store: Store<any>,
+  router: Router,
+) => Partial<ThisTypedMountOptions<V>> | void
+
+export function render<V extends Vue>(
+  TestComponent: VueClass<V> | ComponentOptions<V>,
+  options?: RenderOptions<V>,
+  configure?: ConfigurationCallback<V>,
+): RenderResult
+
+export type AsyncFireObject = {
+  [K in EventType]: (
+    element: Document | Element | Window,
+    options?: {},
+  ) => Promise<void>
+}
+
+export interface VueFireEventObject extends AsyncFireObject {
+  (element: Document | Element | Window, event: Event): Promise<void>
+  touch(element: Document | Element | Window): Promise<void>
+  update(element: HTMLOptionElement): Promise<void>
+  update(
+    element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+    value: string,
+  ): Promise<void>
+  update(element: HTMLElement, value?: string): Promise<void>
+}
+
+export const fireEvent: VueFireEventObject

types/test.ts

@@ -0,0 +1,124 @@
+import Vue from 'vue'
+import {render, fireEvent, screen, waitFor} from '@testing-library/vue'
+
+declare const elem: HTMLElement
+
+const SomeComponent = Vue.extend({
+  name: 'SomeComponent',
+  props: {
+    foo: Number,
+    bar: String,
+  },
+})
+
+async function testRender() {
+  const page = render({template: '<div />'})
+
+  // single queries
+  page.getByText('foo')
+  page.queryByText('foo')
+  await page.findByText('foo')
+
+  // multiple queries
+  page.getAllByText('bar')
+  page.queryAllByText('bar')
+  await page.findAllByText('bar')
+
+  // helpers
+  const {container, unmount, debug} = page
+
+  debug(elem) // $ExpectType void
+  debug([elem, elem], 100, {highlight: false}) // $ExpectType void
+}
+
+async function testRenderOptions() {
+  const container = document.createElement('div')
+  const options = {container}
+  render({template: 'div'}, options)
+}
+
+async function testFireEvent() {
+  const {container} = render({template: 'button'})
+  await fireEvent.click(container)
+}
+
+async function testDebug() {
+  const {debug, getAllByTestId} = render({
+    render(h) {
+      return h('div', [
+        h('h1', {attrs: {'data-testId': 'testid'}}, 'hello world'),
+        h('h2', {attrs: {'data-testId': 'testid'}}, 'hello world'),
+      ])
+    },
+  })
+
+  debug(getAllByTestId('testid'))
+}
+
+async function testScreen() {
+  render({template: 'button'})
+
+  await screen.findByRole('button')
+}
+
+async function testWaitFor() {
+  const {container} = render({template: 'button'})
+  fireEvent.click(container)
+  await waitFor(() => {})
+}
+
+async function testOptions() {
+  render(SomeComponent, {
+    // options for new Vue()
+    name: 'SomeComponent',
+    methods: {
+      glorb() {
+        return 42
+      },
+    },
+    // options for vue-test-utils mount()
+    slots: {
+      quux: '<p>Baz</p>',
+    },
+    mocks: {
+      isThisFake() {
+        return true
+      },
+    },
+    // options for Vue Testing Library render()
+    container: elem,
+    baseElement: elem,
+    props: {
+      foo: 9,
+      bar: 'x',
+    },
+    store: {
+      state: {
+        foos: [4, 5],
+        bars: ['a', 'b'],
+      },
+      getters: {
+        fooCount() {
+          return this.foos.length
+        },
+      },
+    },
+    routes: [
+      {path: '/', name: 'home', component: SomeComponent},
+      {
+        path: '/about',
+        name: 'about',
+        component: () => Promise.resolve(SomeComponent),
+      },
+    ],
+  })
+}
+
+function testConfigCallback() {
+  const ExamplePlugin: Vue.PluginFunction<never> = () => {}
+  render(SomeComponent, {}, (localVue, store, router) => {
+    localVue.use(ExamplePlugin)
+    store.replaceState({foo: 'bar'})
+    router.onError(error => console.log(error.message))
+  })
+}

types/tsconfig.json

@@ -0,0 +1,17 @@
+// this additional tsconfig is required by dtslint
+// see: https://github.com/Microsoft/dtslint#typestsconfigjson
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["es6", "dom"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@testing-library/vue": ["."]
+    }
+  }
+}

types/tslint.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["dtslint/dtslint.json"],
+  "rules": {
+    "semicolon": false,
+    "whitespace": false
+  }
+}