From 4128b644b9506d2a072bfab0cbcab4dc155162b3 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 30 Sep 2022 15:12:12 -0400 Subject: [PATCH] CSR-762 WIP tests --- .../list-button-horizontal.spec.js | 80 ++++++++++++++++++- .../list-button/list-button.spec.js | 55 ++++++++++++- src/ux-components/list-button/list-button.vue | 3 - 3 files changed, 131 insertions(+), 7 deletions(-) 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 a205022ad..24c978ba7 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 @@ -4,9 +4,9 @@ import { nextTick } from "vue"; import { GaActions } from "@/constants/analytics"; import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; -// TODO KO describe("list-button-horizontal.vue", () => { - describe("baseInputButton checks", () => { + // TODO KO Have this moved out to somewhere shared + describe("Shared baseInputButton checks", () => { it("Should return input type checkbox if isMultiSelect is true", async () => { // Act const { wrapper } = setupMocks({ @@ -19,7 +19,6 @@ describe("list-button-horizontal.vue", () => { // Assert const input = wrapper.find("input"); - expect(input.attributes().type).toEqual("checkbox"); }); @@ -114,6 +113,75 @@ describe("list-button-horizontal.vue", () => { expect(input.attributes()["aria-required"]).toEqual("true"); }); + + it("is cash or insurance button => has 'radio-fancy' class", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isCashOrInsurance: true, + }, + }, + }); + + // Assert + const label = wrapper.find("label"); + + expect(label.classes()).toContain("radio-fancy"); + }); + + test("has buttonLabel => displays buttonLabel", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + }, + }, + }); + + // Assert + const content = wrapper.find(".list-button-horizontal-content"); + expect(content.isVisible()).toBe(true); + expect(content.text()).toContain("Surprise!"); + }); + + test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + buttonLabelSubCopy: "Super duper surprise :)", + }, + }, + }); + + // Assert + const content = wrapper.find(".list-button-horizontal-content"); + expect(content.isVisible()).toBe(true); + expect(content.text()).toContain("Super duper surprise :)"); + }); + + test("has screenReaderOnlyText => displays screenReaderOnlyText", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + buttonLabelSubCopy: "Super duper surprise :)", + screenReaderOnlyText: "Tests are fun!" + }, + }, + }); + + // Assert + const content = wrapper.find(".list-button-horizontal-content"); + const screenReaderOnlyText = wrapper.find(".sr-only"); + expect(content.isVisible()).toBe(true); + expect(screenReaderOnlyText.exists()).toBe(true); + expect(screenReaderOnlyText.text()).toContain("Tests are fun!"); + }); }); }); @@ -121,6 +189,12 @@ function setupMocks({ mockData }) { console.log(mockData); const wrapper = mount(listButtonHorizontal, { ...mockData, + propsData: { + ...mockData.propsData, + groupName: "my-group", + modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5", + value: mockData.propsData?.isMultiSelect ? ["4"] : "4" + }, mixins: [inputButtonWrapperMixin], }); diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js index a7ff986bd..ff9542e18 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -6,7 +6,7 @@ import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; describe("list-button.vue", () => { describe("loader", () => { - it("Should return loader enabled true", async () => { + it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => { // Act const { wrapper } = setupMocks({ mockData: { @@ -148,6 +148,59 @@ describe("list-button.vue", () => { }); describe("styling/UI", () => { + test("has buttonLabel => displays buttonLabel", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + }, + }, + }); + + // Assert + const content = wrapper.find(".list-button-content"); + expect(content.isVisible()).toBe(true); + expect(content.text()).toContain("Surprise!"); + }); + + test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + buttonLabelSubCopy: "Super duper surprise :)", + }, + }, + }); + + // Assert + const content = wrapper.find(".list-button-content"); + expect(content.isVisible()).toBe(true); + expect(content.text()).toContain("Super duper surprise :)"); + }); + + test("has screenReaderOnlyText => displays screenReaderOnlyText", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + buttonLabelSubCopy: "Super duper surprise :)", + screenReaderOnlyText: "Tests are fun!", + }, + }, + }); + + // Assert + const content = wrapper.find(".list-button-content"); + const screenReaderOnlyText = wrapper.find(".sr-only"); + expect(content.isVisible()).toBe(true); + expect(screenReaderOnlyText.exists()).toBe(true); + expect(screenReaderOnlyText.text()).toContain("Tests are fun!"); + }); + it("Should return screen reader text", async () => { // Act const { wrapper } = setupMocks({ diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index e069f4de2..e9b99190a 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -48,14 +48,11 @@ export default { }, methods: { displayLoader() { - console.log("Display me!") console.log(this.selectingInitiatesLoad) this.isLoaderDisplayed = true; }, preHandleAnswerChange() { - console.log("HIII") if (this.selectingInitiatesLoad) { - console.log("EYY") this.displayLoader(); } },