wip: shallow

[lmiller1990]

It works! Tracking in #6.

Evan made a feature to let us have shallowMount without hacking Vue to pieces like we do in beta:

Source
Tests

Basically, you call transformVNodeArgs and you can override the default behavior - this is so clean.

TODO:

1. no way to access the instance of stubbed component (maybe we don't need it anymore? only use case I can think of is making a stubbed child emit and event, we will need to figure this out)
2. this stubs out EVERYTHING; implementing stubs should be easy, though (I prefer people use a test runner for this, eg jest.mock? Although this is a popular feature in beta)
3. I really like the idea of having a shallow mounting option instead of a shallowMount method. I see shallow as just one feature of VTU, not a main API. Instead of "you can mount or shallowMount" I want people to say "you mount your component. There is a shallow mounting option, among other mounting options, you can use to test your components).

I wonder instead of using a basic stub we can use a more specialized on that can emit events or something 🤔

[JessicaSachs]

Short and sweet. Would love to see an impl of stubs 👍

[dobromir-hristov]

GJ!. Should we keep stubs to just an array of names or allow providing your own component definition as well?

[lmiller1990]

Hm, I think we should start with default stubs (that would be the MVP). We can add support for custom definitions after. Maybe not an array, but object syntax like beta? Unless there is a good use case for an array instead (?)

stubs: {
  'blah': true
}

Makes it easy to add custom implementations if we want. Also faster to lookup O(1) if a component is stubbed than if we use an array, which is worst case O(n).

[afontcu]

I'd go with the object syntax too, so there's only a single way to define stubs 👍

[dobromir-hristov]

{
  stubs: {
    componentA: true,
    componentB: { template: '<div class="stub" />' },
    componentC: { render: () => h('') },
  }
}

Like this, and we start just with Boolean?

[lmiller1990]

Looks good! I think boolean only will be enough for a public alpha.

[afontcu]

I love how clean getting a stubbed version of the component looks like. It might get dirtier at some point, but this is a great starting point 👌

[afontcu]

Suggested change

	it('stubs everything with a single root node', async () => {
	it('stubs child components when rendering a single root node', () => {

[afontcu]

Suggested change

	it('stubs everything with a single root node', async () => {
	it('stubs child components when rendering several root nodes', () => {

[lmiller1990]

Unfortunately I see no way to do find(Component) that works properly at this point. 🤔 subTree doesn't seem to be what you might expect from a DOM like tree structure like in v2.

Need some way for people to emit events from stubbed components. Common use case. Also find(Foo).vm.{methods,data,props} is no longer a thing. There are going to be some big breaking changes, I think, not just in VTU next but for Vue 3, for anyone who used the vm property.

[dobromir-hristov]

I can try to see if I can make Find work with a component tomorrow.

[lmiller1990]

Sure. I have spent quite a few hours doing so and failed. Make sure you consider components with and without a single root node.

[lmiller1990]

closed in favor of #56, I will use the work done there for shallow mount