From d695ab2c6458e523e33fcf710eccae63207ace15 Mon Sep 17 00:00:00 2001 From: Katie Date: Wed, 12 Oct 2022 13:46:18 -0400 Subject: [PATCH] CSR-762 Edit prettier file --- .prettierrc | 3 +- .../base-input-button.spec.js | 592 ++++++++++++++++-- .../base-input-button/base-input-button.vue | 15 +- 3 files changed, 547 insertions(+), 63 deletions(-) diff --git a/.prettierrc b/.prettierrc index 21209f49e..548cc94c4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "tabWidth": 4, - "bracketSameLine": true + "bracketSameLine": true, + "printWidth": 100 } \ No newline at end of file diff --git a/src/common-components/base-input-button/base-input-button.spec.js b/src/common-components/base-input-button/base-input-button.spec.js index 190448df9..1cb244997 100644 --- a/src/common-components/base-input-button/base-input-button.spec.js +++ b/src/common-components/base-input-button/base-input-button.spec.js @@ -76,9 +76,7 @@ describe("baseInputButton.vue", () => { await wrapper.trigger("click"); // Assert - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ - "X", - ]); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["X"]); }); }); @@ -99,22 +97,16 @@ describe("baseInputButton.vue", () => { await wrapper.trigger("click"); // Assert - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( - "X" - ); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("X"); }); }); }); describe("keyboard navigation and events", () => { describe("checkbox", () => { - test.todo( - "focus on a checkbox => inputButtonClicked is not emitted" - ); + test.todo("focus on a checkbox => inputButtonClicked is not emitted"); - test.todo( - "blur from a checkbox => inputButtonClicked is not emitted" - ); + test.todo("blur from a checkbox => inputButtonClicked is not emitted"); test("change event fired from checkbox => inputButtonClicked is emitted with correct value", async () => { // Arrange @@ -133,9 +125,7 @@ describe("baseInputButton.vue", () => { await input.trigger("change"); // Assert - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ - "Hi", - ]); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["Hi"]); }); test("focus and click space on a checkbox => inputButtonClicked is not emitted", async () => { @@ -155,9 +145,7 @@ describe("baseInputButton.vue", () => { await input.trigger("keypress", { key: "space" }); // Assert - expect(wrapper.emitted()).not.toHaveProperty( - "inputButtonClicked" - ); + expect(wrapper.emitted()).not.toHaveProperty("inputButtonClicked"); }); test("focus and click enter on a checkbox => inputButtonClicked is emitted with correct value", async () => { @@ -177,20 +165,14 @@ describe("baseInputButton.vue", () => { await input.trigger("keypress", { key: "enter" }); // Assert - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ - "Hi", - ]); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(["Hi"]); }); }); describe("radio", () => { - test.todo( - "focus on a radio button => inputButtonClicked is not emitted" - ); + test.todo("focus on a radio button => inputButtonClicked is not emitted"); - test.todo( - "blur from a radio button => inputButtonClicked is not emitted" - ); + test.todo("blur from a radio button => inputButtonClicked is not emitted"); test("focus and click space on a radio button => inputButtonClicked is emitted with correct value", async () => { // Arrange @@ -210,9 +192,7 @@ describe("baseInputButton.vue", () => { // Assert expect(wrapper.emitted()).toHaveProperty("inputButtonClicked"); - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( - "Hi" - ); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("Hi"); }); test("focus and click enter on a radio button => inputButtonClicked is emitted with correct value", async () => { @@ -233,44 +213,546 @@ describe("baseInputButton.vue", () => { // Assert expect(wrapper.emitted()).toHaveProperty("inputButtonClicked"); - expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( - "Hi" - ); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("Hi"); }); }); }); describe("methods", () => { - describe("handleEventAction", () => {}); + describe("handleEventAction", () => { + describe("isMultiSelect", () => { + test("eventType === eventTypes.CLICK => do nothing", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("click", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).not.toHaveBeenCalled(); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.ENTER => call handleClick and handlePushClickEventToGACheck", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("enter", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.CHANGE => call handleClick and handlePushClickEventToGACheck", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("change", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.MOUNT => do nothing", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("mount", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).not.toHaveBeenCalled(); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.SPACE => do nothing", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("space", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).not.toHaveBeenCalled(); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + }); + + describe("!isMultiSelect", () => { + test("eventType === eventTypes.CLICK => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("click", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.ENTER => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("enter", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.SPACE => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("space", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.MOUNT => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("mount", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).toHaveBeenCalledWith("click"); + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.CHANGE && selectOnKeypress => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + selectOnKeypress: true, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("change", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleSelectionChange).not.toHaveBeenCalled(); + expect(wrapper.vm.handleClick).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + + test("eventType === eventTypes.CHANGE && !selectOnKeypress => call correct methods", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + selectOnKeypress: false, + }, + }, + }); + wrapper.vm.handleClick = jest.fn(); + wrapper.vm.handlePushClickEventToGACheck = jest.fn(); + wrapper.vm.handleSelectionChange = jest.fn(); + + // Act + wrapper.vm.handleEventAction("change", { myEvent: "test" }); + + // Assert + expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ + myEvent: "test", + }); + expect(wrapper.vm.handleClick).not.toHaveBeenCalled(); + expect(wrapper.vm.handlePushClickEventToGACheck).not.toHaveBeenCalled(); + }); + }); + }); describe("handleSelectionChange", () => { - test.todo("handleChange is called with valueToEmit"); + const isCheckbox = [ + [true, ["Hi"]], + [false, "Hi"], + ]; + test.each(isCheckbox)( + "handleChange is called with valueToEmit", + (isMultiSelect, resultingValueToEmit) => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: isMultiSelect, + value: "Hi", + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(resultingValueToEmit); + } + ); describe("checkbox", () => { - test.todo("modelValue is null => valueToEmit is correct value"); + test("modelValue is null => valueToEmit is correct value", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: null, + }, + }, + }); - test.todo( - "modelValue is undefined => valueToEmit is correct value" - ); - test.todo( - "modelValue is empty => valueToEmit is correct value" - ); + wrapper.vm.handleChange = jest.fn(); - test.todo( - "modelValue is not empty and does not contain this button's value => valueToEmit is correct value" - ); - test.todo( - "modelValue is not empty and does contain this button's value => valueToEmit is correct value" + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Bello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]); + }); + + test("modelValue is undefined => valueToEmit is correct value", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: undefined, + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Bello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]); + }); + + test("modelValue is empty => valueToEmit is correct value", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: [], + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Bello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Bello"]); + }); + + test("modelValue is not empty and does not contain this button's value => valueToEmit is correct value", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: ["Hello"], + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Hello", "Bello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Hello", "Bello"]); + }); + + // testing when value is at start/middle/end of modelValue + const modelValues = [ + [["Bello", "Hello", "Mello"]], + [["Hello", "Bello", "Mello"]], + [["Hello", "Mello", "Bello"]], + ]; + test.each(modelValues)( + "modelValue is not empty and does contain this button's value => valueToEmit is correct value", + (modelValue) => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Bello", + modelValue: modelValue, + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual(["Hello", "Mello"]); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith(["Hello", "Mello"]); + } ); }); - describe("radio", () => {}); + describe("radio", () => { + const modelValues = [null, undefined, "Bello", "Hello"]; + test.each(modelValues)( + "regardless of modelValue, set valueToEmit to correct value", + (modelValue) => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + value: "Bello", + modelValue: modelValue, + }, + }, + }); + + wrapper.vm.handleChange = jest.fn(); + + // Act + wrapper.vm.handleSelectionChange({ myEvent: "TEST" }); + + // Assert + expect(wrapper.vm.valueToEmit).toEqual("Bello"); + expect(wrapper.vm.handleChange).toHaveBeenCalledWith("Bello"); + } + ); + }); }); describe("handleClick", () => { - test.todo("handleSelectChange is also called"); + const isCheckbox = [[true], [false]]; + test.each(isCheckbox)("handleSelectionChange is also called", async (isMultiSelect) => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: isMultiSelect, + value: "Bello", + }, + }, + }); - test.todo("inputButtonClicked is emitted with valueToEmit"); + wrapper.vm.handleSelectionChange = jest.fn(); + await wrapper.setData({ valueToEmit: "HELLO WORLD" }); + + // Act + wrapper.vm.handleClick({ myEvent: "Test" }); + + // Assert + expect(wrapper.vm.handleSelectionChange).toHaveBeenCalledWith({ myEvent: "Test" }); + }); + + test.each(isCheckbox)("inputButtonClicked is emitted with valueToEmit", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: isMultiSelect, + value: "Bello", + }, + }, + }); + + wrapper.vm.handleSelectionChange = jest.fn(); + await wrapper.setData({ valueToEmit: "HELLO WORLD" }); + + // Act + wrapper.vm.handleClick({ myEvent: "Test" }); + + // Assert + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual("HELLO WORLD"); + }); + }); + + describe("handlePushClickEventToGACheck", () => { + test.todo(""); + }); + + describe("pushClickEventToGA", () => { + test.only("pushEventToGA is called correctly", () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + value: "Bello", + setLastValuePushedToGa: jest.fn(), + }, + route: { + query: { + fmgPage: "myPage", + }, + }, + }, + }); + + console.log(wrapper.vm.$route) + + wrapper.vm.pushEventToGA = jest.fn(); + wrapper.setData({ + GaActions: { + CLICKED: "Clicked", + }, + }); + + // Act + wrapper.vm.pushClickEventToGA(); + + // Assert + expect(wrapper.vm.pushEventToGA).toHaveBeenCalledWith( + "myPage", + "Clicked", + "Bello", + true, + undefined + ); + expect(wrapper.vm.setLastValuePushedToGa).toHaveBeenCalledWith("Bello"); + }); + + test.todo("set last value pushed to GA"); }); }); @@ -413,9 +895,7 @@ describe("baseInputButton.vue", () => { // Assert const inputElement = wrapper.find("input"); expect(wrapper.vm.buttonId).toBe("my-test-name-Aaa-BBB-CcC"); - expect(inputElement.attributes().id).toBe( - "my-test-name-Aaa-BBB-CcC" - ); + expect(inputElement.attributes().id).toBe("my-test-name-Aaa-BBB-CcC"); }); test("groupName and value combo yield correct id for input button with number value", () => { @@ -472,7 +952,9 @@ describe("baseInputButton.vue", () => { }); }); -// TODO KO look at how I tested groups of these in SFA (making sure selecting one radio changes the value, etc, that this acts like a regular input aside from a different emitted event) +// TODO KO look at how I tested groups of these in SFA +// (making sure selecting one radio changes the value, etc, +// that this acts like a regular input aside from a different emitted event) function setupMocks({ mockData = {}, shouldShallowMount = true }) { const baseInputButtonWrapper = { @@ -505,7 +987,7 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) { wrapper.vm.$route = { query: {}, }; - wrapper.vm.GaActions = {} + wrapper.vm.GaActions = {}; return { wrapper }; } diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 8cd50278e..b5899a3a8 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -4,7 +4,7 @@ :for="buttonId" @focusin="handleFocus" @focusout="handleBlur" - @mousedown.left="handleEventAction('click', $event)"> + @mousedown.left="handleEventAction(eventTypes.CLICK, $event)"> + @keypress.space="handleEventAction(eventTypes.SPACE, $event)" + @keypress.enter="handleEventAction(eventTypes.ENTER, $event)" + @change="handleEventAction(eventTypes.CHANGE, $event)" /> @@ -124,7 +124,7 @@ export default { } this.valueToEmit = newValue; - } else { + } else if (!this.isMultiSelect) { this.valueToEmit = this.value; } @@ -146,9 +146,10 @@ export default { }); }, handlePushClickEventToGACheck(source) { + // if from a click or click-like event if (source === this.eventTypes.CLICK) { this.pushClickEventToGA(); - } else { + } else { // if from tabbing around if ( !this.isValueSelectedOnClick && this.isChecked && @@ -167,7 +168,7 @@ export default { this.valueToLogType ); - this.setLastValuePushedToGa(this.value); + this.setLastValuePushedToGa(value ?? this.value); }, }, computed: {