Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const config = {
plugins: {
VueWrapper: {} as any,
DOMWrapper: {}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will look into typing this! I want to get better as TS, but I think this is fine for now, nice

}
5 changes: 4 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { mount } from './mount'
import { RouterLinkStub } from './components/RouterLinkStub'
import { VueWrapper } from './vue-wrapper'

export { mount, RouterLinkStub }
import { config } from './config'

export { mount, RouterLinkStub, VueWrapper, config }
8 changes: 8 additions & 0 deletions src/vue-wrapper.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ComponentPublicInstance, nextTick } from 'vue'
import { ShapeFlags } from '@vue/shared'
import { config } from './config'

import { DOMWrapper } from './dom-wrapper'
import { WrapperAPI } from './types'
Expand All @@ -21,6 +22,13 @@ export class VueWrapper implements WrapperAPI {
this.__setProps = setProps
this.componentVM = this.vm.$refs['VTU_COMPONENT'] as ComponentPublicInstance
this.__emitted = events

// plugins hook
Object.entries(config.plugins.VueWrapper).forEach(
([name, handler]: [string, () => any]) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol, nice! you can also use unknown for the return type, reflecting an unknown value, both fine

this[name] = handler.bind(this)
}
)
}

private get appRootNode() {
Expand Down
32 changes: 32 additions & 0 deletions tests/features/plugins.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { mount, VueWrapper, config } from '../../src'
import Hello from '../components/Hello.vue'
// add a method to the VueWrapper
declare module '../../src/vue-wrapper' {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IDK if thats how you should do it, just used the first thing I saw.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is something users would normally do in an index.d.ts file on the top level

interface VueWrapper {
name(): string

lowerCaseName(): string[]
}
}

VueWrapper.prototype.name = function () {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The cool thing here is, all the instanced will get the function as its native.

return this.componentVM.$.type.name
}

config.plugins.VueWrapper.lowerCaseName = function lowerCaseName(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a little easier to grasp for people with little prototype knowledge, but has a little higher memory cost I guess?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think people who want to write an extension prob know enough to learn about a prototype

this: VueWrapper
) {
return this.name().toLocaleLowerCase()
}

describe('Plugin', () => {
it('adds name property', () => {
const wrapper = mount(Hello)
expect(wrapper.name()).toEqual('Hello')
})

it('adds loweCase name property', () => {
const wrapper = mount(Hello)
expect(wrapper.lowerCaseName()).toEqual('hello')
})
})