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 1573380ce..3269c9b5a 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
@@ -1,8 +1,10 @@
import { shallowMount, mount } from "@vue/test-utils";
+import { EXPECTATION_FAILED } from "http-status-codes";
+import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin";
import baseInputButton from "./base-input-button";
// TODO KO
-describe.skip("baseInputButton.vue", () => {
+describe("baseInputButton.vue", () => {
describe("general", () => {
describe("checkbox", () => {
test("isMultiSelect => baseInputButton is a checkbox", () => {
@@ -73,11 +75,11 @@ describe.skip("baseInputButton.vue", () => {
});
// Act
- await wrapper.trigger("mousedown.left");
+ // await wrapper.trigger("mousedown.left");
await wrapper.trigger("click");
// Assert
- expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([
+ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"X",
]);
});
@@ -100,7 +102,7 @@ describe.skip("baseInputButton.vue", () => {
await wrapper.trigger("click");
// Assert
- expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(
+ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"X"
);
});
@@ -134,7 +136,7 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("change");
// Assert
- expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([
+ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"Hi",
]);
});
@@ -157,7 +159,7 @@ describe.skip("baseInputButton.vue", () => {
// Assert
expect(wrapper.emitted()).not.toHaveProperty(
- "inputButtonClicked"
+ "update:modelValue"
);
});
@@ -178,7 +180,7 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("keypress", { key: "enter" });
// Assert
- expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([
+ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual([
"Hi",
]);
});
@@ -210,8 +212,8 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("keypress", { key: "space" });
// Assert
- expect(wrapper.emitted()).toHaveProperty("inputButtonClicked");
- expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(
+ expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"Hi"
);
});
@@ -233,8 +235,8 @@ describe.skip("baseInputButton.vue", () => {
await input.trigger("keypress", { key: "enter" });
// Assert
- expect(wrapper.emitted()).toHaveProperty("inputButtonClicked");
- expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual(
+ expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+ expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(
"Hi"
);
});
@@ -474,21 +476,171 @@ describe.skip("baseInputButton.vue", () => {
describe("integration testing", () => {
describe("checkbox", () => {
- test.only("click on both => both are selected", async () => {
+ test("click on both => both are selected", async () => {
// Arrange
const { wrapper } = setupBaseInputButtonWrapper({
- isMultiSelect: true
- })
- // console.log(wrapper.html())
+ mockData: {
+ isMultiSelect: true,
+ },
+ });
// Act
- const buttonWrappers = wrapper.findAllComponents({name: "baseInputButtonWrapper"})
- console.log(buttonWrappers[0].find("input"))
- await buttonWrappers[0].find("input").trigger("mousedown.left")
+ const buttonWrappers = wrapper.findAllComponents({
+ name: "baseInputButtonWrapper",
+ });
+ const inputButtonOne = buttonWrappers.at(0);
+ const inputButtonTwo = buttonWrappers.at(1);
+ expect(inputButtonOne.vm.isMultiSelect).toBe(true);
+ expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
+ expect(wrapper.vm.value).toEqual([]);
+
+ await inputButtonOne.find("input").trigger("click");
+ await inputButtonTwo.find("input").trigger("click");
// Assert
- expect(wrapper.vm.value).toEqual(["value1"])
- })
+ expect(wrapper.vm.value).toEqual(["value1", "value2"]);
+ });
+
+ test("click input 1, 2, 1 => only input 2 selected", async () => {
+ // Arrange
+ const { wrapper } = setupBaseInputButtonWrapper({
+ mockData: {
+ isMultiSelect: true,
+ },
+ });
+
+ // Act
+ const buttonWrappers = wrapper.findAllComponents({
+ name: "baseInputButtonWrapper",
+ });
+ const inputButtonOne = buttonWrappers.at(0);
+ const inputButtonTwo = buttonWrappers.at(1);
+ expect(inputButtonOne.vm.isMultiSelect).toBe(true);
+ expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
+ expect(wrapper.vm.value).toEqual([]);
+
+ await inputButtonOne.find("input").trigger("click");
+ await inputButtonTwo.find("input").trigger("click");
+ await inputButtonOne.find("input").trigger("click");
+
+ // Assert
+ expect(wrapper.vm.value).toEqual(["value2"]);
+ });
+
+ const defaultCheckedCases = [
+ [["value2"], false, true],
+ [["value1", "value2"], true, true],
+ [["value1"], true, false],
+ [[], false, false]
+ ]
+ test.each(defaultCheckedCases)("initial value is %s => correct input buttons are selected", async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
+ // Arrange
+ const { wrapper } = setupBaseInputButtonWrapper({
+ mockData: {
+ isMultiSelect: true,
+ initialValue: modelValue
+ },
+ });
+
+ // Act
+ const buttonWrappers = wrapper.findAllComponents({
+ name: "baseInputButtonWrapper",
+ });
+ const inputs = wrapper.findAll("input");
+ const inputButtonOne = buttonWrappers.at(0);
+ const inputButtonTwo = buttonWrappers.at(1);
+
+ // Assert
+ expect(inputButtonOne.vm.isMultiSelect).toBe(true);
+ expect(inputButtonTwo.vm.isMultiSelect).toBe(true);
+ expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
+ expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
+ expect(wrapper.vm.value).toEqual(modelValue);
+ });
+ });
+
+ describe("radio", () => {
+ test("click on both => last clicked is selected", async () => {
+ // Arrange
+ const { wrapper } = setupBaseInputButtonWrapper({
+ mockData: {
+ isMultiSelect: false,
+ },
+ });
+
+ // Act
+ const buttonWrappers = wrapper.findAllComponents({
+ name: "baseInputButtonWrapper",
+ });
+ const inputButtonOne = buttonWrappers.at(0);
+ const inputButtonTwo = buttonWrappers.at(1);
+ expect(inputButtonOne.vm.isMultiSelect).toBe(false);
+ expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
+ expect(wrapper.vm.value).toEqual("");
+
+ await inputButtonOne.find("input").trigger("click");
+ await inputButtonTwo.find("input").trigger("click");
+
+ // Assert
+ expect(wrapper.vm.value).toEqual("value2");
+ });
+
+ test("click input 1, 2, 1 => input 1 is selected", async () => {
+ // Arrange
+ const { wrapper } = setupBaseInputButtonWrapper({
+ mockData: {
+ isMultiSelect: false,
+ },
+ });
+
+ // Act
+ const buttonWrappers = wrapper.findAllComponents({
+ name: "baseInputButtonWrapper",
+ });
+ const inputButtonOne = buttonWrappers.at(0);
+ const inputButtonTwo = buttonWrappers.at(1);
+ expect(inputButtonOne.vm.isMultiSelect).toBe(false);
+ expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
+ expect(wrapper.vm.value).toEqual("");
+
+ await inputButtonOne.find("input").trigger("click");
+ await inputButtonTwo.find("input").trigger("click");
+ await inputButtonOne.find("input").trigger("click");
+
+ // Assert
+ expect(wrapper.vm.value).toEqual("value1");
+ });
+
+ const defaultCheckedCases = [
+ ["", false, false],
+ ["value1", true, false],
+ ["value2", false, true],
+ [[], false, false]
+ ]
+ test.each(defaultCheckedCases)("initial value is %s => correct input buttons are selected", async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => {
+ // Arrange
+ const { wrapper } = setupBaseInputButtonWrapper({
+ mockData: {
+ isMultiSelect: false,
+ initialValue: modelValue
+ },
+ });
+
+ // Act
+ const buttonWrappers = wrapper.findAllComponents({
+ name: "baseInputButtonWrapper",
+ });
+ const inputs = wrapper.findAll("input");
+ const inputButtonOne = buttonWrappers.at(0);
+ const inputButtonTwo = buttonWrappers.at(1);
+
+ // Assert
+ expect(inputButtonOne.vm.isMultiSelect).toBe(false);
+ expect(inputButtonTwo.vm.isMultiSelect).toBe(false);
+ expect(inputs[0].element.checked).toBe(isInputButtonOneChecked);
+ expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked);
+ expect(wrapper.vm.value).toEqual(modelValue);
+ });
})
});
});
@@ -503,6 +655,7 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
};
},
};
+
const mountMockData = {
...mockData,
propsData: {
@@ -524,7 +677,7 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
wrapper.vm.$route = {
query: {},
};
- wrapper.vm.GaActions = {}
+ wrapper.vm.GaActions = {};
return { wrapper };
}
@@ -534,38 +687,50 @@ function setupBaseInputButtonWrapper({ mockData = {} }) {
baseInputButton.data = () => {
return {
...originalData,
- $route: {
- query: {
- fmgPage: "myPage"
- }
- }
- }
- }
+ // $route: {
+ // query: {
+ // fmgPage: "myPage",
+ // },
+ // },
+ };
+ };
+
+ // console.log({
+ // test: baseInputButton.vm.$route
+ // })
baseInputButton.methods.pushClickEventToGA = jest.fn();
const baseInputButtonWrapper = {
+ name: "baseInputButtonWrapper",
components: { baseInputButton },
template:
- '
',
- data() {
- return {
- myValue: "",
- isMultiSelect: mockData.isMultiSelect,
- };
- },
-
- // const parentComponent = mount({
- // data() {
- // return {
- // value: "value1",
- // }
- // },
- // template: '
',
- // components: { baseInputButton }
- // })
+ '
',
+ mixins: [inputButtonWrapperMixin],
};
-
- const wrapper = mount(baseInputButtonWrapper, {});
+
+ let parentComponentTemplate = ``;
+ parentComponentTemplate += ``;
+ parentComponentTemplate += ``;
+ parentComponentTemplate += `
`;
+ const wrapper = mount(
+ {
+ data() {
+ return {
+ value:
+ mockData.initialValue ??
+ (mockData.isMultiSelect ? [] : ""),
+ $route: {
+ query: {
+ fmgPage: "myPage",
+ },
+ },
+ };
+ },
+ template: parentComponentTemplate,
+ components: { baseInputButtonWrapper },
+ },
+ {}
+ );
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 ab491a069..9928f7217 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -48,7 +48,10 @@ export default {
},
methods: {
handleEventAction(eventType, e) {
- console.log("AHHHHHH")
+ // console.log({
+ // eventType,
+ // e
+ // })
if (this.isMultiSelect) {
switch (eventType) {
case this.eventTypes.ENTER:
@@ -126,6 +129,8 @@ export default {
}
},
pushClickEventToGA(value) {
+ console.log("PUSHHH")
+ console.log(this.$route)
this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js
index 1d7a0afda..1d0a0d103 100644
--- a/src/mixins/input-button-wrapper-mixin.js
+++ b/src/mixins/input-button-wrapper-mixin.js
@@ -18,7 +18,6 @@ export default {
screenReaderOnlyText: String,
isWide: Boolean,
},
-<<<<<<< Updated upstream
computed: {
selectedValue: {
get() {
@@ -28,14 +27,6 @@ export default {
if (this.preHandleAnswerChange) {
this.preHandleAnswerChange(e);
}
-=======
- methods: {
- handleAnswerChange(e) {
- console.log("HANDLING IT")
- if (this.preHandleAnswerChange) {
- this.preHandleAnswerChange(e);
- }
->>>>>>> Stashed changes
this.$emit("update:modelValue", e);
},