Component Stubs evaluate internal templates

[robokozo]

<headerBox :class="{ warning: !isValid }">
    <span>{{ date | timeDisplay }}</span>
</headerBox>

I've configured vuenit to stub out all components using

stubComponents: true,

and

components: {
    headerBox: true
},

I get the following error when running the test:
Failed to resolve filter: timeDisplay

The work-around is to use the install method to get around this:

install(Vue){
    Vue.filter("timeDisplay", jest.fn());
}

[jackmellis]

Okay so I assume you're testing a component that looks something like:

<template>
<div>
  <headerBox/>
</div>
</template>
<script>
import headerBox from '...';
export default {
  components : {headerBox}
};

and in your test you want to replace headerBox. If that is the case and you're getting a warning relating to a component that should be stubbed, it's probably not stubbing correctly.

If I've got the wrong idea and you're actually testing headerBox itself, then no it won't stub the component under test, only its children, if you see what I mean.

Any chance you could link to an example of the issue?

[robokozo]

I'm sorry I'm not able to provide a link to the issue but your assumption is correct. So I think you know what I'm talking about.

I don't care what headerBox is doing or how it's rendered.

console.error node_modules\vue\dist\vue.runtime.common.js:556
[Vue warn]: Failed to resolve filter: timeDisplay

Here is more context, but like I said, you nailed it.

<template>
    <div>
        <headerBox :class="{ warning: !isValid }">
            <span>{{ date | timeDisplay }}</span>
        </headerBox>
    </div>
</template>

    import HeaderBox from "./HeaderBox.vue";

    export default {
        dependencies: ["appSettings", "timeValidator"],
        props: ["date"],
        components: {
            HeaderBox
        },
      ...
}

        options = {
            name: "headerClock",
            props: {
                date: new Date(1000)
            },
            inject: {...},
            components: {
                headerBox: true
            }
            // install(Vue){
            //     Vue.filter("timeDisplay", jest.fn());
            // }
        };

        vm = vuenit.component(HeaderClock, options);

[jackmellis]

Interesting that it's actually the slot content that's causing the issue. If you were to console.log(vm.$el.outerHTML) do you see the real headerBox rather than a stub?

I will try to replicate this..

[robokozo]

I see the stubbed headerbox:

components: {
    headerBox: "<span>component object</span>"
}

console.log(vm.$el.outerHTML)
<div><span class="warning">component object</span></div>

[jackmellis]

I don't care what headerBox is doing or how it's rendered.

No you don't, but the part of your template causing the error is technically part of this component, not headerBox

I'm making an assumption here but I would imagine that Vue's render function will evaluate the inner html of your component even if it isn't used in the final render (because the stubbed component doesn't have any <slot>s), so it still has to determine the filter method being used within your distributed content.

Do we want to strip distributed content out of components? I would say no because you could easily create a stubbed component with slots as part of your tests.

So what we're really talking about here is what we should be doing with filters (and probably directives). Should they also be stubbable? (I'm not sure how easy that would be).

Your workaround seems reasonable to me, or you could add a filters property to your component definition.

The [Vue Warn] message shouldn't be failing your tests as it's just a console.error rather than an actual thrown error.

[jackmellis]

I think the best solution here is to be able to stub/mock filters as this is what's causing the warning message.

Check out this issue which will be part of 0.3.0