Large Amount of Component Dependencies

[robokozo]

When testing relatively small components, the install(Vue, injector) method gets the job done quite nicely.

I'm thinking about possibly running an integration test on a much larger parent component to ensure everything is looking correctly when I've mocked out the api requests.

My components have a LOT of dependencies wired up (using vue-inject) and what I see myself doing is copying my the contents of my bootstrapping file into the install method. This is a little inconvenient, because as I add dependencies to the bootstrapping file, I would need to update the install method too.

Would it be possible to add an option, to pass in the instance of Vue, and the instance of injector to use within vuenit?

This way I can do something like

var { injector } = bootstrapper(appsettings, Vue); //does all the injector.service/factories/constants and all Vue.use/filter/component

const options = {
    props: {
        issueKey: "96626"
    },
    injector: injector,
    vue: Vue
};

const vm = component(componentToTest, options);

vm.$nextTick(() => {
    expect(vm.$el.outerHTML).toMatchSnapshot();
    done();
});

I'm open to suggestions if you have any ideas to improve my situation.

Thank you!
PS: I really appreciate the new dedicated docs page for this repo!

[jackmellis]

I'd be interested to understand what your bootstrapper does, is this some test-only method or does it register all of your real dependencies on the injector?

In my tests I generally do something like this:

import someMockService from 'spec/someMockService';
import someRealService from 'src/someRealService';
const someStubbedService = { foo : sinon.stub() };

const vm = mount(c, { inject : {someMockService, someRealService, someStubbedService} });

So I often make up simple stubs as and when required, then I have some dependencies that I use a lot so I have a mock service file that I'll use. And very occasionally I will actually want to inject a real version of a dependency in.
I guess what you're trying to do is to say "almost all of my components rely on these dependencies so I'll register them all in once place", which makes sense.

So yes the simplest solution here is to allow Vue and injector to be configurable. This is an idea I had a while back but I forgot about.

[robokozo]

The bootstrapper function is the place where I handle -all- the vue-inject wiring up and all the global vue configuration/installation of things.

Here is a sample of what the bootstrapper looks like:

const bootstrapper = function(appSettings, Vue) {

    injector.constant("inDev", process.env.NODE_ENV !== 'production');
    injector.constant("window", window);
	
    ...
	
    injector.service("timelineDataProcessor", ["statusDataProcessor", "impactDataProcessor", "timelineDateExtentProvider", "mintNotificationsDataProcessor", "isIncidentOverProvider"], TimelineDataProcessor).lifecycle.application();
    injector.factory("statusDataProcessor", ["statusAttributeProvider", "appConfig"], (statusAttributeProvider, appConfig) => new StatusDataProcessor(statusAttributeProvider, appConfig.status.closed)).lifecycle.application();
    
    ...
	
    Vue.filter("timeDisplay", timeDisplay);
    Vue.filter("dateDisplay", dateDisplay);
    Vue.component("multiselect", VueMultiselect);
    Vue.use(injector);
	
    return {
        injector
    };
}

export default bootstrapper;

The bootstrapper takes in appSettings which is configured with my API endpoint urls. In my tests, I can call the bootstrapper function with a testing appSettings file that is configured to provide testing endpoints that return fixed json data.

So my test would actually use all my real dependencies with the only difference being the api endpoints that are hit on ajax requests.

I already have individual component tests, but I was trying to create tests that check the 'glue' between components to ensure everything is wired correctly.

My testing framework, jest, allows me to compare the html of a component vs the html retrieved during the last successful run of the tests

expect(vm.$el.outerHTML).toMatchSnapshot();

Doing this on a huge parent component, could make it very easy to verify that everything is connected correctly.

[jackmellis]

Sorry i missed that this is more about using Vuenit for integration testing, that all makes more sense now.

This is probably a feature I should implement, it would help in this scenario and there have been a couple of times that it would've made life easier too