wrseward / vue-unit Goto Github PK
View Code? Open in Web Editor NEWComponent testing utilities for Vue.js
License: MIT License
vue-unit's People
Contributors
Stargazers
Watchers
vue-unit's Issues
Failing tests in waitForUpdate chains time out in Mocha
When run in Mocha, using waitForUpdate with a failing test results in the async call timing out.
This is because the waitForUpdate code assumes that the done call will have done.fail and checks for that, but Mocha uses done(e) to report failures.
PR to resolve: #3
Suggestion: Add a way of handling subsequent async assertions
First of all thanks for the repo. It really helps hiding a lot of boilerplate code when writing unit tests.
By default when changes are triggered on data you have to use $nextTick in order to verify the expected output.
Example:
vm.msg= "some value"
vm.$nextTick(()=>{
//verify that DOM changed here
vm.msg = "some other value"
vm.$nextTick(()=>{
//verify that DOM changed here for the second message update
done(); //call done callback for the test
})
})Such a way of testing updates can become really cumbersome and ugly. Maybe adding a helper method that will be exposed in the library like waitForUpdate from vue repo.
The usage would be:
waitForUpdate(() => {
expect(vm.$el.textContent).toBe('123')
vm.a = 234
})
.then(() => {
// more assertions...
})
.then(done)This can be refined of course so it fits vue-unit better.
Implement handling for provide/inject functionality
Not sure if you want me to write an issue when I've submitted a PR already, but just in case:
Vue 2.2+ includes the provide/inject functionality for a sort of component-level dependency injection. Could be faked in the existing vue-unit build by mounting the component to be tested within another component using build() to set up the provider, but it'd be nice to be able to stub out provides as part of mount().
So, PR with that functionality and tests at #5
vue-unit hasn't been rebuilt on NPM recently
The NPM version of this library doesn't seem to have the latest changes on it, so it could do with rebuilding :)
Configurable Render Depth
An option to pass an arbitrary render depth for renderShallow would be very useful. This would allow for testing modules with dependent children / parent dependencies without rendering the whole component tree. The depth would be an integer and would recursively render children x levels deep.
Seems it's impossible to simulate a keyboard event
For example, I'd like to test key Enter being pressed:
simulate(input, 'keydown')Obviously there is no way to specify which key to be simulated XD
Errors testing extended components with 'Vue' option
I am testing component 'Transformation' which extends the 'Translation' component.
The code is running fine but I am getting these errors when attempting to mount:
'[Vue warn]: The data property "modules" is already declared as a prop. Use prop default value instead.
(found in <Root>)'
'[Vue warn]: The data property "model" is already declared as a prop. Use prop default value instead.
(found in <Root>)'
'[Vue warn]: The data property "aliases" is already declared as a prop. Use prop default value instead.
This is what my unit tests look like
import Vue from 'vue';
import { mount } from 'vuenit';
import Transformation from './Transformation.vue';
import Translation from '../Translation/Translation.vue';
const options = {
Vue: Vue.extend(Translation),
};
fdescribe('Transformation component', () => {
let model;
let vm;
beforeEach(() => {
model = { id: 3, name: 'name' };
options.props = { aliases: [], model, modules: [] };
vm = mount(Transformation, options);
});
it('should open the edit modal when edit is clicked', () => {
});
it('should emit a remove event when the delete button is clicked', () => {
});
});Translation has the properties defined, but transformation only defines a few functions that aren't defined in translation. If you need that code as well then I can link it, but it doesn't seem relevant to the problem.
Whether it must be installed Vuex ?
Hi! Thanks for your repo! 👍
In my project, did not use vuex. when I run the unit test, it throw a warning.
WARNING in ./~/vue-unit/build/index.js
Module not found: Error: Cannot resolve module 'vuex' in /Users/name/Documents/project/node_modules/vue-unit/buildDoes that mean vuex should be a pre-dependent?
Support this.$store.state in components
From what I can tell, it seems right now Vuex testing support is limited to actions and getters. It would be useful to access or fake state as well.
Currently you get this error if you access state in the component code:
'[Vue warn]: Error in created hook: "TypeError: undefined is not an object (evaluating 'this.$store.state')"
running unit tests .. 5 errors ...
node 8, no modification in packge.json
> [email protected] test /Users/yves/Developments/WIP/VUE.JS/UNIT TESTING/vue-unit
> NODE_ENV=test karma start test/karma.conf.js --single-run
16 09 2017 18:15:22.358:WARN [watcher]: All files matched by "/Users/yves/Developments/WIP/VUE.JS/UNIT TESTING/vue-unit/node_modules/chai/chai.js" were excluded or matched by prior matchers.
16 09 2017 18:15:22.372:WARN [watcher]: All files matched by "/Users/yves/Developments/WIP/VUE.JS/UNIT TESTING/vue-unit/node_modules/chai/chai.js" were excluded or matched by prior matchers.
16 09 2017 18:15:36.299:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
16 09 2017 18:15:36.300:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
16 09 2017 18:15:36.388:INFO [launcher]: Starting browser PhantomJS
16 09 2017 18:15:42.679:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket 5I4iT6Y8INf1tlTZAAAA with id 29606836
INFO LOG: 'You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html'
build
✓ returns a partially applied mount function
✓ returns a partially applied mount function which takes an options object and callback
✓ provides a default callback to mount
✓ provides a default callback only when the 2nd argument is a function
buildShallow
✓ returns a partially applied shallow function
fakeActions
✓ returns a sinon stub for a given action
✓ can assert against what arguments an action was dispatched with
✓ can stub what the action returns using sinon
✓ takes an object to stub multiple actions
fakeGetters
✓ returns a sinon stub for a given getter
✓ takes an object to stub multiple getters
hooks
beforeEachHooks
✓ appends a div element to body for mounting components
✓ creates a wrapper div to which components are append when mounted
afterEachHooks
✓ removes the div element created by beforeEachHooks only if one exists
✓ destroys mounted Vue instances only when they exists
✓ resets Vue.config.ignoredElements from shallow rendering
mount
✓ mounts a basic component
✓ mounts a component with props
✓ mounts a component and listens for events
✓ mounts a component with a slot
✓ mounts a component with a default and named slots
ERROR LOG: '[Vue warn]: Error in render function: "Error: [VueUnit]: Error when rendering default slot:
[Vue warn]: Error compiling template:
Hello World
- Component template requires a root element, rather than just text.
"
(found in <Root>)'
ERROR LOG: Error{line: 3085, stack: '
map@[native code]
createSlots
render
_render
updateComponent
get
Watcher
mountComponent
$mount
$mount
mount
callFn@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4481:25
run@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4473:13
runTest@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4969:13
http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:5075:19
next@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4887:16
http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4897:11
next@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4821:16
http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4860:11
done@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4428:7
callFn@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4499:11
run@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4473:13
next@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4835:13
http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4865:9
timeslice@http://localhost:9876/absolute/Users/yves/Developments/WIP/VUE.JS/UNIT%20TESTING/vue-unit/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:82:27'}
✗ mounts a component with a default slot only with a text node
Attempted to assign to readonly property.
mount
✗ throws an Error when named slots are not parsed
expected [Function: callMount] to throw error including 'Error when rendering named slot "foo"' but got 'Attempted to assign toreadonly property.'
✗ throws an Error for defaults slots which are not related to text node rendering
expected [Function: callMount] to throw error including 'Error when rendering default slot' but got 'Attempted to assign to readonly property.'
✓ mounts a component with provided dependencies
✓ receives an optional callback which is passed the vm after mounting
✓ receives an optional callback without any options
✓ can also take an options object
✓ can take an options object with a callback as well
shallow
✓ shallow renders locally registered components
waitForUpdate
✓ tests message updates
mounting TestComponent
✓ sets and changes props
✓ listens for events
✗ renders slots
Attempted to assign to readonly property.
mount
mount
✗ does all three
Attempted to assign to readonly property.
mount
mount
shallow rendering TestComponent
✓ has a shallow rendered child
✓ conditionally renders the child
✓ can still be fully rendered
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 38 of 38 (5 FAILED) (0.504 secs / 0.19 secs)
TOTAL: 5 FAILED, 33 SUCCESS
1) mounts a component with a default slot only with a text node
mount
Attempted to assign to readonly property.
mount
2) throws an Error when named slots are not parsed
mount
expected [Function: callMount] to throw error including 'Error when rendering named slot "foo"' but got 'Attempted to assign to readonly property.'
3) throws an Error for defaults slots which are not related to text node rendering
mount
expected [Function: callMount] to throw error including 'Error when rendering default slot' but got 'Attempted to assign to readonly property.'
4) renders slots
mounting TestComponent
Attempted to assign to readonly property.
mount
mount
5) does all three
mounting TestComponent
Attempted to assign to readonly property.
mount
mount
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.