Render component names/ids when shallow

[rowanu]

Is it possible/a good idea for shallow() output to included the component names?

Right now shallow(component).html() gives me:

<div data-v-1d62245a="" id="app"><!----> <!----></div>

It would be great if included the name of the component, or similar. For example:

<div data-v-1d62245a="" id="app"><!--Login--> <!--SignUp--></div>

This would me a I could make basic assertions about what components would have been included, based on conditional logic of the component under test.

Let me know if the current behaviour is a deliberate design decision, or if you're interested in a PR.

[eddyerburgh]

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

[rowanu]

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.

[eddyerburgh]

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)

[blocka]

How do you check what props have been passed to child components?

…

On Sun, Aug 20, 2017 at 5:17 AM, Edd Yerburgh ***@***.***> wrote: 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) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#28 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACoun__agurkrfJTNgmTZS2_sDGNSZhks5sZ_mNgaJpZM4O1zZb> .

[eddyerburgh]

@blocka

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

const wrapper = shallow(ComponentWithChild)

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

[blocka]

Ok, so this is completely orthogonal to the present discussion. _goes back to hiding_

…

On Sun, Aug 20, 2017 at 5:23 AM, Edd Yerburgh ***@***.***> wrote: @blocka <https://github.com/blocka> import Child from '~/Child.vue'import ComponentWithChild from '~/ComponentWithChild.vue' const wrapper = shallow(ComponentWithChild) expect(wrapper.find(Child).vm.someProp).toEqual('a value') — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#28 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACouscjg7xsLdW4IBCdqfzjHRzRVJqJks5sZ_sdgaJpZM4O1zZb> .

[eddyerburgh]

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

[rowanu]

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?

[eddyerburgh]

Hi @rowanu. Have you looked into this anymore?

[andycopley]

@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.

[eddyerburgh]

@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.

[klarkc]

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