Merge pull request #15 from ktsn/add-types

feat(types): add typescript declarations

Author: eddyerburgh

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "description": "Utilities for testing Vue components.",
   "main": "dist/vue-test-utils.js",
+  "types": "types/index.d.ts",
   "files": [
     "src",
-    "dist/*.js"
+    "dist/*.js",
+    "types/index.d.ts"
   ],
   "scripts": {
     "build": "node build/build.js",
@@ -16,10 +18,11 @@
     "lint:docs": "eslint --ext js,vue,md docs --ignore-path .gitignore",
     "lint:fix": "npm run lint -- --fix",
     "postinstall": "node build/install-hooks.js",
-    "test": "npm run lint && npm run lint:docs && npm run flow && npm run test:unit && npm run test:integration && npm run test:integration:karma",
+    "test": "npm run lint && npm run lint:docs && npm run flow && npm run test:types && npm run test:unit && npm run test:integration && npm run test:integration:karma",
     "test:integration": "cross-env BABEL_ENV=test mocha-webpack --webpack-config build/webpack.test.config.js test/integration/specs --recursive --require test/integration/setup/mocha.setup.js",
     "test:integration:karma": "cross-env BABEL_ENV=test TARGET=browser karma start test/integration/setup/karma.conf.js --single-run",
     "test:unit": "cross-env BABEL_ENV=test mocha-webpack --webpack-config build/webpack.test.config.js test/unit/specs --recursive --require test/unit/setup/mocha.setup.js",
+    "test:types": "tsc -p types",
     "release": "bash build/release.sh",
     "release:note": "node build/gen-release-note.js"
   },
@@ -72,6 +75,7 @@
     "shelljs": "^0.7.8",
     "sinon": "^2.3.2",
     "sinon-chai": "^2.10.0",
+    "typescript": "^2.4.1",
     "vue": "^2.3.3",
     "vue-loader": "^12.2.1",
     "vue-router": "^2.6.0",

types/index.d.ts

@@ -0,0 +1,101 @@
+import Vue, { VNodeData, Component, ComponentOptions, FunctionalComponentOptions } from 'vue'
+
+/**
+ * Utility type to declare an extended Vue constructor
+ */
+type VueClass<V extends Vue> = (new (...args: any[]) => V) & typeof Vue
+
+/**
+ * Utility type for a selector
+ */
+type Selector = string | Component
+
+/**
+ * Utility type for slots
+ */
+type Slots = {
+  [key: string]: (Component | string)[] | Component | string
+}
+
+/**
+ * Utility type for stubs which can be a string of template as a shorthand
+ * If it is an array of string, the specified children are replaced by blank components
+ */
+type Stubs = {
+  [key: string]: Component | string | true
+} | string[]
+
+/**
+ * Base class of Wrapper and WrapperArray
+ * It has common methods on both Wrapper and WrapperArray
+ */
+interface BaseWrapper {
+  contains (selector: Selector): boolean
+  exists (): boolean
+
+  hasAttribute (attribute: string, value: string): boolean
+  hasClass (className: string): boolean
+  hasProp (prop: string, value: any): boolean
+  hasStyle (style: string, value: string): boolean
+
+  is (selector: Selector): boolean
+  isEmpty (): boolean
+  isVueInstance (): boolean
+
+  update (): void
+  setData (data: object): void
+  setProps (props: object): void
+  trigger (eventName: string, options?: object): void
+}
+
+interface Wrapper<V extends Vue> extends BaseWrapper {
+  readonly vm: V
+  readonly element: HTMLElement
+  readonly options: WrapperOptions
+
+  find<R extends Vue, Ctor extends VueClass<R> = VueClass<R>> (selector: Ctor): Wrapper<R>
+  find<R extends Vue> (selector: ComponentOptions<R>): Wrapper<R>
+  find (selector: FunctionalComponentOptions): Wrapper<Vue>
+  find (selector: string): Wrapper<Vue>
+
+  findAll<R extends Vue, Ctor extends VueClass<R> = VueClass<R>> (selector: Ctor): WrapperArray<R>
+  findAll<R extends Vue> (selector: ComponentOptions<R>): WrapperArray<R>
+  findAll (selector: FunctionalComponentOptions): WrapperArray<Vue>
+  findAll (selector: string): WrapperArray<Vue>
+
+  html (): string
+  text (): string
+  name (): string
+}
+
+interface WrapperArray<V extends Vue> extends BaseWrapper {
+  readonly length: number
+
+  at (index: number): Wrapper<V>
+}
+
+interface WrapperOptions {
+  attachedToDocument: boolean
+}
+
+interface MountOptions<V extends Vue> extends ComponentOptions<V> {
+  attachToDocument?: boolean
+  clone?: boolean
+  context?: VNodeData
+  localVue?: typeof Vue
+  intercept?: object
+  slots?: Slots
+  stubs?: Stubs
+}
+
+type ShallowOptions<V extends Vue> = MountOptions<V>
+
+export declare function createLocalVue (): typeof Vue
+
+export declare function mount<V extends Vue, Ctor extends VueClass<V> = VueClass<V>> (component: Ctor, options?: MountOptions<V>): Wrapper<V>
+export declare function mount<V extends Vue> (component: ComponentOptions<V>, options?: MountOptions<V>): Wrapper<V>
+export declare function mount (component: FunctionalComponentOptions, options?: MountOptions<Vue>): Wrapper<Vue>
+
+export declare function shallow<V extends Vue, Ctor extends VueClass<V> = VueClass<V>> (component: Ctor, options?: ShallowOptions<V>): Wrapper<V>
+export declare function shallow<V extends Vue> (component: ComponentOptions<V>, options?: ShallowOptions<V>): Wrapper<V>
+export declare function shallow (component: FunctionalComponentOptions, options?: ShallowOptions<Vue>): Wrapper<Vue>

types/test/mount.ts

@@ -0,0 +1,62 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue } from '../'
+import { normalOptions, functionalOptions, Normal, ClassComponent } from './resources'
+
+/**
+ * Should create wrapper vm based on (function) component options or constructors
+ * The users can specify component type via the type parameter
+ */
+const normalWrapper = mount(normalOptions)
+const normalFoo: string = normalWrapper.vm.foo
+
+const classWrapper = mount<ClassComponent>(ClassComponent)
+const classFoo: string = classWrapper.vm.bar
+
+const functinalWrapper = mount(functionalOptions)
+
+/**
+ * Test for mount options
+ */
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+const store = new Vuex.Store({})
+
+mount<ClassComponent>(ClassComponent, {
+  attachToDocument: true,
+  clone: true,
+  localVue,
+  intercept: {
+    $store: store
+  },
+  slots: {
+    default: `<div>Foo</div>`,
+    foo: [normalOptions, functionalOptions],
+    bar: ClassComponent
+  },
+  stubs: {
+    foo: normalOptions,
+    bar: functionalOptions,
+    baz: ClassComponent,
+    qux: `<div>Test</div>`
+  }
+})
+
+mount(functionalOptions, {
+  context: {
+    props: { foo: 'test' }
+  },
+  stubs: ['child']
+})
+
+/**
+ * MountOptions should receive Vue's component options
+ */
+mount<ClassComponent>(ClassComponent, {
+  propsData: {
+    test: 'test'
+  },
+  created () {
+    this.bar
+  }
+})

types/test/resources.ts

@@ -0,0 +1,33 @@
+import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'
+
+/**
+ * Normal component options
+ */
+export interface Normal extends Vue {
+  foo: string
+}
+export const normalOptions: ComponentOptions<Normal> = {
+  name: 'normal',
+  data () {
+    return {
+      foo: 'bar'
+    }
+  }
+}
+
+/**
+ * Functional component options
+ */
+export const functionalOptions: FunctionalComponentOptions = {
+  functional: true,
+  render (h) {
+    return h('div')
+  }
+}
+
+/**
+ * Component constructor declared with vue-class-component etc.
+ */
+export class ClassComponent extends Vue {
+  bar = 'bar'
+}

types/test/shallow.ts

@@ -0,0 +1,62 @@
+import Vuex from 'vuex'
+import { shallow, createLocalVue } from '../'
+import { normalOptions, functionalOptions, Normal, ClassComponent } from './resources'
+
+/**
+ * Should create wrapper vm based on (function) component options or constructors
+ * The users can specify component type via the type parameter
+ */
+const normalWrapper = shallow(normalOptions)
+const normalFoo: string = normalWrapper.vm.foo
+
+const classWrapper = shallow<ClassComponent>(ClassComponent)
+const classFoo: string = classWrapper.vm.bar
+
+const functinalWrapper = shallow(functionalOptions)
+
+/**
+ * Test for shallow options
+ */
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+const store = new Vuex.Store({})
+
+shallow<ClassComponent>(ClassComponent, {
+  attachToDocument: true,
+  clone: true,
+  localVue,
+  intercept: {
+    $store: store
+  },
+  slots: {
+    default: `<div>Foo</div>`,
+    foo: [normalOptions, functionalOptions],
+    baz: ClassComponent
+  },
+  stubs: {
+    foo: normalOptions,
+    bar: functionalOptions,
+    baz: ClassComponent,
+    qux: `<div>Test</div>`
+  }
+})
+
+shallow(functionalOptions, {
+  context: {
+    props: { foo: 'test' }
+  },
+  stubs: ['child']
+})
+
+/**
+ * ShallowOptions should receive Vue's component options
+ */
+shallow<ClassComponent>(ClassComponent, {
+  propsData: {
+    test: 'test'
+  },
+  created () {
+    this.bar
+  }
+})

types/test/wrapper.ts

@@ -0,0 +1,59 @@
+import { mount } from '../'
+import { normalOptions, functionalOptions, Normal, ClassComponent } from './resources'
+
+/**
+ * Tests for BaseWrapper API
+ */
+let wrapper = mount<Normal>(normalOptions)
+
+let bool: boolean = wrapper.contains('.foo')
+bool = wrapper.contains(normalOptions)
+bool = wrapper.contains(ClassComponent)
+
+bool = wrapper.exists()
+
+bool = wrapper.hasAttribute('foo', 'bar')
+bool = wrapper.hasClass('foo-class')
+bool = wrapper.hasProp('checked', true)
+bool = wrapper.hasStyle('color', 'red')
+
+bool = wrapper.is(normalOptions)
+bool = wrapper.isEmpty()
+bool = wrapper.isVueInstance()
+
+wrapper.update()
+wrapper.setData({ foo: 'bar' })
+wrapper.setProps({ checked: true })
+wrapper.trigger('mousedown.enter', {
+  preventDefault: true
+})
+
+/**
+ * Tests for Wrapper API
+ */
+wrapper.vm.foo
+wrapper.vm.$emit('event', 'arg')
+
+let el: HTMLElement = wrapper.element
+
+bool = wrapper.options.attachedToDocument
+
+let found = wrapper.find('.foo')
+found = wrapper.find(normalOptions)
+found = wrapper.find(functionalOptions)
+found = wrapper.find<ClassComponent>(ClassComponent)
+
+let array = wrapper.findAll('.bar')
+array = wrapper.findAll(normalOptions)
+array = wrapper.findAll(functionalOptions)
+array = wrapper.findAll<ClassComponent>(ClassComponent)
+
+let str: string = wrapper.html()
+str = wrapper.text()
+str = wrapper.name()
+
+/**
+ * Tests for WrapperArray API
+ */
+let num: number = array.length
+found = array.at(1)

types/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

yarn.lock

@@ -6342,6 +6342,10 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
+
 uglify-js@^2.6, uglify-js@^2.8.27:
   version "2.8.27"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.27.tgz#47787f912b0f242e5b984343be8e35e95f694c9c"