Lazy testing huge Vue Container

Vitalie Andries
3 min readOct 15, 2020

Another attempt to help devs embrace writing tests.

Photo by Hal Gatewood on Unsplash

Did you ever felt a huge discomfort every time you have to write a test (case) for a quite big (with complex logic) vue component? I have everytime I come across one specific container. Having huge containers is quite bad. And it doesn’t matter how we end up like this. To say it is quite challenging it’s like to say nothing. My case (excuse) was that it was not just ready to be refactored. I didn’t have the whole picture yet. Morevore, the situation was caused by decision to store all main features under one roof (url) e.g.: /featureA, /featureB, /featureC ended up living under same root url with 3 “mega” containers.

Containers — aka smart components — the one that knows where the data come from and/or have a decision to make, or contains “complicate logic”.

Everytime I looked at my spec file it scares me. To scaffold all the (store) modules it uses (different features use various combination of modules, so I had to provide them all) it’s one hell of the job.

Latest task for me was to show some errors (from store). It looks like an opportunity to face my fear of testing huge containers.
Imho, better to separate by behavior. I called it ErrorHandlerMixin (after half a year I renounced Mixin sufix in favor of Feature):
(that has a getter and an action to dismiss the error)

import Vue from 'vue';
import Component from 'vue-class-component';
import { namespace } from 'vuex-class';
const errorStoreModule = namespace('myFeature');
@Component
export default class ErrorHandlerMixin extends Vue {
@errorStoreModule.Getter errors;
@errorStoreModule.Action dismissError;
}

We need as well an BaseErrors component whose purpose it to list the errors param and notify parent about any (dismiss) action.

The mega component will be excused from including specific store actions and getters for showing errors (that burden is now on mixin’s shoulder we just created).

Now the fun part, no more painful scaffolding. We add what we need to provide in order to mount the component. We can create very simple mock vue component:

const mockMegaComponent = {
components: { BaseErrors }…

--

--