jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-762 Edit prettier file

Browse source
This commit is contained in:
Katie 2022-10-12 13:46:18 -04:00
parent afa94625f7
commit d695ab2c64
3 changed files with 547 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.prettierrc
View file

@ -1,4 +1,5 @@
{
"tabWidth": 4,
"bracketSameLine": true
"bracketSameLine": true,
"printWidth": 100
}

592
src/common-components/base-input-button/base-input-button.spec.js
View file

@ -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 };
}

15
src/common-components/base-input-button/base-input-button.vue
View file

@ -4,7 +4,7 @@
:for="buttonId"
@focusin="handleFocus"
@focusout="handleBlur"
@mousedown.left="handleEventAction('click', $event)">
@mousedown.left="handleEventAction(eventTypes.CLICK, $event)">
<input
:type="inputType"
:id="buttonId"
@ -14,9 +14,9 @@
:aria-required="isRequired"
:value="value"
:checked="isChecked"
@keypress.space="handleEventAction('space', $event)"
@keypress.enter="handleEventAction('enter', $event)"
@change="handleEventAction('change', $event)" />
@keypress.space="handleEventAction(eventTypes.SPACE, $event)"
@keypress.enter="handleEventAction(eventTypes.ENTER, $event)"
@change="handleEventAction(eventTypes.CHANGE, $event)" />
<slot></slot>
</label>
@ -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: {