In my attempt to validate props with various data types in a Vue component (built using TypeScript), I utilized the Vue-test-utils package. Despite implementing expect().tobe(), there remains an untested line:
DropDownList.vue
<template>
<v-select
:id="dropDownListID"
:label="labelDisplay"
:placeholder="getPlaceHolder"
:item-text="itemtext"
:item-value="itemvalue"
:items="items"
:value="value"
@input="handleInput"
:required="required"
:rules="[required ? rules.required :false,additionalRulesFormated]"
:class="{ 'roboto10':true,'xddl':true,['xddl-'+size] :true}"
:return-object="returnobjectvalue"
append-icon="expand_more"
:disabled="disabled"
:clearable="clearableValue"
>
<template slot="item" slot-scope="data">
<v-flex>{{ data.item[itemtext] }}</v-flex>
</template>
<template slot="selection" slot-scope="data">
<v-flex xs2 v-if="itemicon">
<v-icon color="#3F3F3F" size="25px">{{ data.item[itemicon] }}</v-icon>
</v-flex>
<v-flex>{{ data.item[itemtext] }}</v-flex>
</template>
</v-select>
</template>
<script lang="ts">
import Vue from "vue";
import { logger } from "@/app/helpers/Logger";
export default Vue.extend({
name: "x-drop-down-list",
data: function() {
return {
rules: {
required: (value: any) => {
let label = (this as any).getRulesLabel;
return !!value || label + " is required";
}
}
};
},
props: {
id: String,
value: [String, Number, Boolean, Object, Array],
size: String,
label: String,
placeholder: String,
required: Boolean,
itemtext: String,
itemvalue: String,
itemicon: String,
items: Array,
returnobject: String,
ruleslabel: String || null,
disabled: Boolean,
additionalRules: [String, Boolean] || null,
clearable: Boolean
},
computed: {
dropDownListID: function() {
let lbl = String(this.label === undefined || this.label === null ? null : String(this.label).replace(/ /g, ""));
let id = String(this.id === undefined || this.id === null ? lbl : this.id);
return id;
},
returnobjectvalue: function() {
let ret = this.returnobject === undefined || this.returnobject === null || this.returnobject === "" ? false : String(this.returnobject).toLowerCase() == "true" ? true : false;
return ret;
},
getRulesLabel: function() {
let id = this.label || this.id;
let c = this.ruleslabel == undefined || this.ruleslabel == null ? id : this.ruleslabel;
return c;
},
getPlaceHolder: function() {
if (this.placeholder === undefined || this.placeholder === null || this.placeholder === this.label) return " ";
let lbl = this.label == undefined || this.label == null ? "" : String(this.label).replace(" *", "");
let c = this.placeholder == undefined || this.placeholder == null ? lbl : this.placeholder;
return c;
},
labelDisplay: function() {
return (this.label || "") != "" ? this.label + (this.required ? " *" : "") : "";
},
additionalRulesFormated: function() {
return String(this.additionalRules || "") != "" ? this.additionalRules : false;
},
clearableValue: function() {
return this.clearable === undefined || this.clearable === null ? true : this.clearable;
}
},
methods: {
handleInput: function(val: string) {
this.$emit("input", val);
}
}
});
</script>
<style lang="scss">
</style>
dropdownlist.spec.ts
/**
* Unit test for component DropdownList.vue.
*/
import Vue from "vue";
import Vuetify from "vuetify";
import DropdownList from "@/components/dropdown/DropdownList.vue";
import { createLocalVue, shallowMount, Wrapper } from "@vue/test-utils";
describe("DropdownList.vue", () => {
let vuetify: any;
let mountFunction: (options?: object) => Wrapper<Vue>;
const localVue = createLocalVue();
Vue.use(Vuetify);
const id = "dropdownlistcomponentid";
beforeEach(() => {
vuetify = new Vuetify();
mountFunction = (options = {}) => {
return shallowMount(DropdownList, { localVue, vuetify, ...options });
};
});
it("props.ruleslabel as string || null", () => {
var mywrapper = mountFunction({
propsData: {
id: id,
ruleslabel: "ruleslabel" || null
} });
expect(mywrapper.vm.$props.ruleslabel).toBe("ruleslabel" || null);
});
});
To validate the ruleslabel and additionalRules props, I executed npm run test:unit. The test was successful, yet line 59 remains uncovered: