Render component names/ids when shallow about vue-test-utils HOT 12 CLOSED

I think this is a great idea, I'd be interested in a PR ☺

from vue-test-utils.

Great. Have been having a think about it and wanted some input on the interface.

While including the component name is not too hard, if I keep it as HTML comments I don't know how to check for their presence (short of searching through the rendered HTML text, which I don't like).

If I render a <div/> with the appropriate id attribute (based on the component type property), it becomes trivial to assert if the components are present but am I making too many assumptions by rendering a div for each component? Something like this:

import { mount } from 'vue-test-utils'
import { expect } from 'chai'
// Contains an instance of the Foo component, with type "foo"
import App from './App.vue'

const wrapper = mount(App)
expect(wrapper.contains('div#foo')).to.equal(true)

Keep in mind I'm new to Vue, so let me know if I'm not being idomatic.

from vue-test-utils.

I think we should keep it as comments.

You can check that a component has rendered using this method -

import Child from '~/Child.vue'
import ComponentWithChild from '~/ComponentWithChild.vue'

const wrapper = shallow(ComponentWithChild)

expect(wrapper.find(Child).exists()).toBe(true)
expect(wrapper.findAll(Child).length).toEqual(1)

from vue-test-utils.

from vue-test-utils.

@blocka

import Child from '~/Child.vue'
import ComponentWithChild from '~/ComponentWithChild.vue'

const wrapper = shallow(ComponentWithChild)

expect(wrapper.find(Child).vm.someProp).toEqual('a value')

from vue-test-utils.

from vue-test-utils.

@rowanu any luck with this? Would be a good feature for snapshot testing.

from vue-test-utils.

Haven't had much chance, and need to learn a bit more about Vue. Still on my list of things to do.

Just want to make sure my understanding is correct: You said previously that you want to keep the child components rendered as comments, but want to use the usual find/findAll syntax (in your example); This means most of my modifications will likely be on the selectors (rather than the render), right?

from vue-test-utils.

Hi @rowanu. Have you looked into this anymore?

from vue-test-utils.

@eddyerburgh I've taken a brief look into this, and best I can produce are empty component stubs <my-component></my-component> in place of <!-- MyComponent -->. I've not gone too far into it, but Vue strips comments from rendering, so not sure how to complete this as discussed above.

from vue-test-utils.

@andycopley I believe you can set an option to stop comments being stripped by the template compiler. But I don't think comments can be a root vnode. Not 100% as I haven't looked into it.

Thanks for taking a look. I don't think adding components is a good option. We should either add the comments, or not add anything.

from vue-test-utils.

I think we can just leave the component in place, removing only the import of the component. Leaving the component with properties and so on. The normal Vue behavior is just to throw a warning that the component in the template does not exists. This way the template will be rendered as it is, not having to deal with comment transpilation.

I don't know how to implement this, but my guess is that this render function should render the component template instead of nothing.

Also we must know how this will impact the selectors and api methods, probabily some patches to handle not rendered templates, or exclusive methods to deal with stub components

from vue-test-utils.