Comments (9)
Reopen as I am revisiting this feature. After having to manually create spies for all the events I wanted to assert, it felt quite tedious. I am proposing an API that requires minimal setup by simply auto-recording all emitted events in a wrapper.emitted
object.
Say you emit the following events:
wrapper.vm.$emit('foo', 1)
wrapper.vm.$emit('foo', 2, 3)
wrapper.vm.$emit('bar')
Then wrapper.emitted
would look like this:
{
foo: [[1], [2, 3]],
bar: [[]]
}
This simple data structure allows all kinds of assertions:
// assert event emitted
expect(wrapper.emitted.foo).toBeTruthy()
// assert event count
expect(wrapper.emitted.foo.length).toBe(2)
// assert event payload
expect(wrapper.emitted.foo[0]).toEqual([1])
The best part is you don't need to do any wiring or setup, you can just assert it after you trigger the events.
from vue-test-utils.
What about making it wrapper.on
to be consistent with vm.$on
? It seems to be just an alias.
from vue-test-utils.
Thought about this a little more. I can make a good case for either one of these directions.
What do you think about keeping the number of things the library does to a minimum initially and going with encouraging using wrapper.vm
. Doing that may alleviate confusion for having the wrapper only implementing some of the methods available.
from vue-test-utils.
Closing: can reopen and implement after we have more information on what we are needing.
from vue-test-utils.
I'll go ahead and begin implementing this tomorrow. @eddyerburgh could you set as in progress in that todo list when you have a sec so that others don't duplicate effort.
from vue-test-utils.
I think there needs to be more discussion on this before we build anything.
Personally, for methods like vm.$on
, vm.$destroy
, maybe even vm.$emit
, we should encourage using the wrapper vm.
wrapper.vm.$on
wrapper.on
wrapper.vm.$emit
wrapper.emit
wrapper.vm.$destroy
wrapper.destroy
Otherwise we'll end up with a huge API.
Although maybe on and emit are such common use cases that we should include them as methods.
from vue-test-utils.
I think this is an elegant solution, and we should implement it. Are you able to make a PR @yyx990803? I'm happy to if you're not.
from vue-test-utils.
That absolutely looks like a very clean approach on the events.
I support @eddyerburgh view regarding keeping the API minimal and encourage using the vm
as longterm it allows/teaches users to also start using functionality that may be introduced with upcoming Vue versions, while it won't be necessary to update the test utils right away.
On the comment from @yyx990803 I think that's a piece of API that brings the test-utils forward.
It provides an API that adds value on top of what using single vm.$on
events couldn't do.
I'm all for it :)
from vue-test-utils.
Closed with 0033c4a
from vue-test-utils.
Related Issues (20)
- When setProps() is called on a wrapper which renders a slot, the slot's content element gets destroyed
- `RouterLink.useLink` is missing when using `RouterLinkStub`. HOT 3
- Test child component, which is the root element HOT 3
- Computed value does not update when data updates
- isVisible() not seeing display: none using vitest with jsdom HOT 4
- Testing component with onBeforeRouteLeave hook raising "No active route record was found" warning HOT 1
- vue2 引入 element2. 页面存在table 表格 jest 测试报错 HOT 1
- *.svg?inline issues
- Errors in `setup()` are silent if `render()` throws an error HOT 6
- Check style changes on hover HOT 1
- setData on writable computed property does not seem to work as it does in VTU.1
- classes documentation
- Support Vue 2.7.16 HOT 2
- Vue test utils not updating template when testing composables
- TypeError: $setup.mergeProps is not a function
- Data property is already defined in Props. HOT 1
- Unable to use vitest spy within vue/nuxt 3 component methods. HOT 3
- `findComponent` doesn't find anything when using `@vue/compat` HOT 1
- Components with TS generic HOT 1
- event.keyCode is deprecated
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.
from vue-test-utils.