From c070f2af95c9815798fd6c091b3701c3ef3f93a7 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Tue, 26 Apr 2022 09:52:00 -0400 Subject: [PATCH] CSR-447: expand/update unit tests --- .../button-question/button-question.spec.js | 113 ++++++++++++++++++ .../list-button-horizontal.spec.js | 56 ++++++++- .../list-button/list-button.spec.js | 63 ++++++++-- src/ux-components/list-card/list-card.spec.js | 90 +++++++++++++- 4 files changed, 302 insertions(+), 20 deletions(-) diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index d36b73012..591b34317 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -1,6 +1,9 @@ import { shallowMount } from "@vue/test-utils"; import buttonQuestion from "@/common-components/button-question/button-question"; import { nextTick } from "vue"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import store from "@/store"; +jest.mock("@/store",()=>{return{};},{virtual:true}); describe("buttonQuestion.vue", () => { it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => { @@ -45,6 +48,65 @@ describe("buttonQuestion.vue", () => { }); }); +describe("buttonQuestion.vue", () => { + it("Fieldset classes should contain ui-radio if button type is radio", () => { + // Act + const wrapper = shallowMount(buttonQuestion, { + propsData: { + buttonType: "radio", + } + }); + // Assert + const Div = wrapper.find('fieldset div'); + expect(Div.classes()).toContain("ui-radio"); + }); +}); + + +// testing a computed property +describe("buttonQuestion.vue", () => { + it("getColLength should return '12' if prop isWide is set to true", () => { + // Act + const localThis = { isWide: true } + + expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12"); + }); +}); + +describe("buttonQuestion.vue", () => { + it("getColLength should return '' if prop isWide is set to false", () => { + // Act + const localThis = { + isWide: false, + answers: ['a', 'b'] + } + + expect(buttonQuestion.computed.getColLength.call(localThis)).toBe(""); + }); +}); + +describe("buttonQuestion.vue", () => { + it("Should return answer.Text if prop useTextForValue is true", async () => { + // Act + const localThis = { useTextForValue: true }; + const answer = { 'Name': 'testName', 'Text': 'testText' }; + + // Assert + expect(buttonQuestion.methods.getValues.call(localThis, answer)).toBe('testText'); + }); +}); + +describe("buttonQuestion.vue", () => { + it("Should return answer.Name if prop useTextForValue is false and answer.Name exists", async () => { + // Act + const localThis = { useTextForValue: false }; + const answer = { 'Name': 'testName', 'Text': 'testText' }; + + // Assert + expect(buttonQuestion.methods.getValues.call(localThis, answer)).toBe('testName'); + }); +}); + describe("buttonQuestion.vue", () => { it("Should trigger event modelValue change to new value on when radio button selected", async () => { // Act @@ -76,3 +138,54 @@ describe("buttonQuestion.vue", () => { }); }); +describe("buttonQuestion.vue", () => { + it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => { + // Act + const wrapper = shallowMount(buttonQuestion, { + propsData: { + isMultiSelect: true, + modelValue: [ 'a', 'b' ] + } + }); + const val = { checkValue: true, value: "2021", } + wrapper.vm.handleCheckedChanged(val); + + // Assert + expect(wrapper.vm.selectedValues).toEqual(["a", "b", "2021"]); + }); +}); + +describe("buttonQuestion.vue", () => { + it("Should remove a value to this.selectedValues if prop isMultiSelect is true, checkValue is false and this.selectedValues already exists", () => { + // Act + const wrapper = shallowMount(buttonQuestion, { + propsData: { + isMultiSelect: true, + modelValue: [ 'a', 'b' ] + } + }); + const val = { checkValue: false, value: "a", } + wrapper.vm.handleCheckedChanged(val); + + // Assert + expect(wrapper.vm.selectedValues).toEqual(["b"]); + }); +}); + + +describe("buttonQuestion.vue", () => { + it("Should do nothing to this.selectedValues if this.selectedValues is not an array", () => { + // Act + const wrapper = shallowMount(buttonQuestion, { + propsData: { + isMultiSelect: true, + modelValue: 'a', + } + }); + const val = { checkValue: true, value: "c", } + wrapper.vm.handleCheckedChanged(val); + + // Assert + expect(wrapper.vm.selectedValues).toEqual("a"); + }); +}); diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index f95b378d7..cbd757a88 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -100,7 +100,7 @@ describe("list-button-horizontal.vue", () => { const label = wrapper.find("label"); wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.handleClick(); + wrapper.vm.triggerButton(); await nextTick(); @@ -123,7 +123,7 @@ describe("list-button-horizontal.vue", () => { const label = wrapper.find("label"); wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.handleClick(); + wrapper.vm.triggerButton(); await nextTick(); @@ -146,7 +146,7 @@ describe("list-button-horizontal.vue", () => { const label = wrapper.find("label"); wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.handleClick(); + wrapper.vm.triggerButton(); await nextTick(); @@ -195,4 +195,54 @@ describe("list-button-horizontal.vue", () => { // Assert expect(wrapper.componentVM.checkValue).toEqual("Car-Front"); }); + + it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + selectingInitiatesLoad: false, + }, + }); + + // Assert + wrapper.vm.handleInputChange(); + + await nextTick(); + + expect(wrapper.vm.handleCheckChange).toBeCalled; + }); + + it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + isMultiSelect: true, + }, + }); + + // Assert + wrapper.vm.handleKeyupArrow(); + + await nextTick(); + + expect(wrapper.vm.handleKeyupArrow).toHaveReturned; + }); + + it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + selectingInitiatesLoad: false, + isMultiSelect: false, + }, + }); + + // Assert + wrapper.vm.handleKeyupArrow(); + + await nextTick(); + + expect(wrapper.vm.handleCheckChange).toBeCalled; + }); + }); diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js index 7cc885b49..7a244a5bf 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -96,11 +96,8 @@ describe("list-button.vue", () => { }); // Assert - - const label = wrapper.find("label"); - wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.handleClick(); + wrapper.vm.triggerButton(); await nextTick(); @@ -119,10 +116,8 @@ describe("list-button.vue", () => { }); // Assert - - const label = wrapper.find("label"); wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.handleClick(); + wrapper.vm.triggerButton(); await nextTick(); const loader = wrapper.find("loader-stub"); @@ -140,11 +135,8 @@ describe("list-button.vue", () => { }); // Assert - - const label = wrapper.find("label"); - wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.handleClick(); + wrapper.vm.triggerButton(); await nextTick(); @@ -197,4 +189,53 @@ describe("list-button.vue", () => { expect(wrapper.componentVM.checkValue).toEqual("Car-Front"); }); + it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => { + // Act + const wrapper = shallowMount(listButton, { + propsData: { + selectingInitiatesLoad: false, + }, + }); + + // Assert + wrapper.vm.handleInputChange(); + + await nextTick(); + + expect(wrapper.vm.handleCheckChange).toBeCalled; + }); + + it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => { + // Act + const wrapper = shallowMount(listButton, { + propsData: { + isMultiSelect: true, + }, + }); + + // Assert + wrapper.vm.handleKeyupArrow(); + + await nextTick(); + + expect(wrapper.vm.handleKeyupArrow).toHaveReturned; + }); + + it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => { + // Act + const wrapper = shallowMount(listButton, { + propsData: { + selectingInitiatesLoad: false, + isMultiSelect: false, + }, + }); + + // Assert + wrapper.vm.handleKeyupArrow(); + + await nextTick(); + + expect(wrapper.vm.handleCheckChange).toBeCalled; + }); + }); diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js index 3aa803cc1..d810909e8 100644 --- a/src/ux-components/list-card/list-card.spec.js +++ b/src/ux-components/list-card/list-card.spec.js @@ -1,5 +1,6 @@ import { shallowMount } from "@vue/test-utils"; import listCard from "./list-card"; +import { nextTick } from "vue"; describe("list-card.vue", () => { it("Should return input type checkbox if isMultiSelect is true", async () => { @@ -18,7 +19,6 @@ describe("list-card.vue", () => { // Assert const input = wrapper.find("input"); - expect(input.attributes().type).toEqual("checkbox"); }); @@ -38,7 +38,6 @@ describe("list-card.vue", () => { // Assert const paragraph = wrapper.find("p"); - expect(paragraph.text()).toEqual("Windshield"); }); @@ -59,7 +58,6 @@ describe("list-card.vue", () => { // Assert const paragraph = wrapper.find("p:nth-of-type(2)"); - expect(paragraph.text()).toEqual("Test"); }); @@ -80,7 +78,6 @@ describe("list-card.vue", () => { // Assert const label = wrapper.find("label"); - expect(label.attributes().for).toEqual("List Card Checkbox"); }); @@ -101,7 +98,6 @@ describe("list-card.vue", () => { // Assert const input = wrapper.find("input"); - expect(input.attributes().name).toEqual("radio 1"); }); @@ -122,7 +118,6 @@ describe("list-card.vue", () => { // Assert const input = wrapper.find("input"); - expect(input.attributes()["aria-required"]).toEqual("true"); }); @@ -247,5 +242,88 @@ describe("list-card.vue", () => { expect(wrapper.vm.fieldOptions.initialValue).toEqual([ 'Windshield' ]); }); + it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => { + // Act + const wrapper = shallowMount(listCard, { + propsData: { + selectingInitiatesLoad: false, + }, + }); + + // Assert + wrapper.vm.handleInputChange(); + + await nextTick(); + + expect(wrapper.vm.handleCheckChange).toBeCalled; + }); + + it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => { + // Act + const wrapper = shallowMount(listCard, { + propsData: { + isMultiSelect: true, + }, + }); + + // Assert + wrapper.vm.handleKeyupArrow(); + + await nextTick(); + + expect(wrapper.vm.handleKeyupArrow).toHaveReturned; + }); + + it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => { + // Act + const wrapper = shallowMount(listCard, { + propsData: { + selectingInitiatesLoad: false, + isMultiSelect: false, + }, + }); + + // Assert + wrapper.vm.handleKeyupArrow(); + + await nextTick(); + + expect(wrapper.vm.handleCheckChange).toBeCalled; + }); + + it("Should run handleChange if triggerButton is triggered", async () => { + // Act + const wrapper = shallowMount(listCard, { + propsData: { + selectingInitiatesLoad: false, + }, + }); + + // Assert + wrapper.vm.triggerButton(); + + await nextTick(); + + expect(wrapper.vm.handleChange).toBeCalled; + expect(wrapper.vm.handleCheckChange).not.toBeCalled; + expect(wrapper.vm.displayLoader).not.toBeCalled; + }); + + it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => { + // Act + const wrapper = shallowMount(listCard, { + propsData: { + selectingInitiatesLoad: true, + }, + }); + + // Assert + wrapper.vm.triggerButton(); + + await nextTick(); + + expect(wrapper.vm.handleCheckChange).toBeCalled; + expect(wrapper.vm.displayLoader).toBeCalled; + }); });