jackmellis / vuenit Goto Github PK
View Code? Open in Web Editor NEWVue Unit Test Helpers for server-side testing of client-side code
Vue Unit Test Helpers for server-side testing of client-side code
Whether or not to isolate the component from other components.
clear definition's components
property
clear vue's global components (except for internal ones like KeepAlive)
should it also kill the transition
and transition-group
components?
if the component being generated is a globally registered one, don't delete that one!
should it also clear filters and directives?
is there some way of supressing vue's unknown component warning message?
vuenit.component(def, { isolate : true });
component.components = {};
Object.keys(Vue.options.components).forEach(k => !['KeepAlive', 'Transition', 'TransitionGroup'].includes(k) ...);
Vue.config.isUnknownElement = () => false;
Looks for a child component within the current component. The returned component must also be augmented with the same methods.
Should also be able to do a plain querySelector search?
Must accept either a component name, query selector string, a dom element, or a component definition (use its name property?), or a vm instance
Returns a an array of component instances or elements
vm.$find('.myClass'); // returns dom element
vm.$find(MyComponent); // returns component instance within vm
vm.$find('myComponent'); // returns component instance with this name within vm
// component.vue
export default {
props : ['propA', 'propB']
}
// test.spec.js
var vm = vuenit.component(c, {
props : {
propA : 'foo'
}
});
vm.propsData.propA = 'bah';
vm.propsData.propB = 'zoo';
await vm.$nextTick();
vm.propA // 'bah'
vm.propB // undefined
Should just be as simple as looping through component.props
and adding any props that haven't been passed in...
It would be nice to be able to set some global configuration flags that are then defaulted everywhere.
Then this could be a set in a helper file that all tests load before running.
vuenit.component.config = { mount : false, isolate : true };
Hello, I'm trying to mock my store, which consists of 2 modules that contain state and actions. mockStore
lets me pass state inside the modules
object, but actions
don't get properly mapped via mapActions
unless they're top-level. Any suggestions?
A hook that fires just before instantiating the component, with the cloned component and the ready options. Would allow you to spy on stuff etc.
Basically a shortcut for setting stubComponents stubDirectives and stubFilters
Like components and filters:
mount(c, {
directives : {
foo : { bind(){} },
bah : () => {},
zoo : true
}
});
Could potentially wrap the api in getters so if you never use say http, we don't need to bother requiring it. Not sure if it's worth the effort...
Could calling $mount be optional?
I just want to test some methods in my vue component and I'm using a UI Component library which I haven't figured out how to test-around yet. (Unknown custom element: etc)
Before finding vuenit, I was just not calling out to $mount to prevent Vue from worrying about the template code.
The component.js file is getting a little unwieldy
I know this isn't technically an issue with vuenit itself, but in order to use vuenit with the Vue-CLI Webpack template (which uses PhantomJS), a polyfill like phantomjs-polyfill-find is required.
lib/router/router.js:137
is the breaking line when mockRouter is used without a polyfill.
Perhaps a note should be added to the ReadMe and/or the docs.
Trigger a DOM event
let input = vm.$find('input');
input.value = 'v';
vuenit.trigger(input, 'input');
Can also accept a vm:
vuenit.trigger(vm, 'change');
// or
vuenit.trigger(vm.$find('myComponent'), 'change');
With event args:
vuenit.trigger(vm, 'change', { value : 'bah' });
With an Event object:
vuenit.trigger(vm, new Event('change'));
Trigger should attach target
to the event object.
If a component contains a transition group (possibly a transition, not sure), when testing with jsdom it gives an error.
Can just be an empty object, just means you don't have to check if it's already been set before adding properties to it
Currently there's nothing in the mock store to allow for this.
Add some aliases so you can import ES6-style without having to call it component
:
import {mockComponent} from 'vuenit';
const h = vm.$html
Shorthand for
const h = vm.$el.outerHTML
In lib/component/index.js
, the "Run install option" block happens before options are merged with defaults; so, an install
function in component.config
will never run.
In my current project, I am using a component library (element-ui), and almost all of my components will contain components from this library; so, the ability to use
this extension by default would be beneficial.
I thought about making a pull request, but wondered if there was a good reason for install not to be included as a default.
vuenit.component('my-component', {
components : {
stubbed : '<div>stubbed</div>'
}
});
for some reason this isn't working. Moreover, it seems that <stubbed>
isn't being resolved. See failing test...
See #4.
vuenit.component(def, {
install(Vue, injector){
Vue.use(whatever);
injector.constant('whatever');
}
});
Rather than innerHtml, pass an object of slot = template and the innerHtml is constructed.
vm.component(c, {
slots : {
header : '<div></div>',
default : '<span><span>',
footer : '<div/>'
}
});
would become something like:
vm.component(c, {
innerHTML : '<div slot="header"></div><span></span><div slot="footer"/>'
});
Not exactly sure how this would work. It would need to re-use the current configuration options and create a new component instance.
var vm2 = vm.$create();
Basically copy what the http module does
I have a test for a watcher that aims to test the outcome of a data property changing from one non-initial value to another non-initial value, e.g.
{
data () {
return {
gid: null
}
},
watch: {
gid (newVal, oldVal) {
if (oldVal) { /* Do B */ }
if (newVal) { /* Do A */ }
}
}
}
The test wants to see the outcome of /* Do B */
. Obviously, this can be done by mounting the component, changing the value, waiting for next tick, changing the value again, waiting for next tick again, and then making the assertion. Another way that I've done this is by using the before
option, e.g.
describe('gid watcher', () => {
it('should Do A and Do B when gid changes from an existing value to a new existing value', async () => {
let before = (component) => {
let data = component.data()
component.data = () => ({ ...data, gid: 123 })
}
let vm = shallow(Component, { before })
vm.gid = 321
await vm.$nextTick()
expect(/* to have done A and B */)
})
})
All of this works fine, but it seems like there should be an easier way to set initial data values to test individual watchers and methods.
๐ณ
I have a component that looks like this:
export default {
props: {
...
to: { ... }
},
methods: {
go () { this.$router.push(this.to) }
}
}
And a test that looks like this:
describe('go()', () => {
it('should change the current route', () => {
const { $router, $route } = mockRouter(['/', '/businesses'], '/')
const vm = shallow(ButtonLink, { inject: { $router, $route }, props: { to: '/businesses' } })
vm.go()
expect(vm.$route.path).to.eql('/businesses')
})
})
})
When I run this test, I get the following error:
undefined is not an object (evaluating 'this.$router.push')
For some reason vm.$router
is undefined, while $router
is defined in the scope of the test.
Vuenit.component(c, {
on : {
click : MySpy
}
})
all this would do is vm.$on(name, mySpy)
i.e. vuex-mock, http-mock, vue-router-mock
I've got a custom directive: Vue.directive('editor')
which it is used on an element in such way <div v-editor></div>
When testing I always get a warning '[Vue warn]: Failed to resolve directive: editor (found in )'.
I did vuenit.directive('editor'), but this does not seem to be helping. How can I fix this?
Each mock library should have a config.Promise property. Vuenit could easily use defineProperty to set Promise to return vue-inject's $promise factory
See #17 i.e. vm.$find('foo') !== undefined
Following on from #21
<headerBox :class="{ warning: !isValid }">
<span>{{ date | timeDisplay }}</span>
</headerBox>
I've configured vuenit to stub out all components using
stubComponents: true,
and
components: {
headerBox: true
},
I get the following error when running the test:
Failed to resolve filter: timeDisplay
The work-around is to use the install method to get around this:
install(Vue){
Vue.filter("timeDisplay", jest.fn());
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.