-
Notifications
You must be signed in to change notification settings - Fork 272
POC extending without plugin #55
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export const config = { | ||
plugins: { | ||
VueWrapper: {} as any, | ||
DOMWrapper: {} | ||
} | ||
} |
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 } |
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' | ||
|
@@ -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]) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. lol, nice! you can also use |
||
this[name] = handler.bind(this) | ||
} | ||
) | ||
} | ||
|
||
private get appRootNode() { | ||
|
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' { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this is something users would normally do in an |
||
interface VueWrapper { | ||
name(): string | ||
|
||
lowerCaseName(): string[] | ||
} | ||
} | ||
|
||
VueWrapper.prototype.name = function () { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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') | ||
}) | ||
}) |
There was a problem hiding this comment.
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