CSR-762 tests WIP

src/common-components/base-input-button/base-input-button.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount, mount } from "@vue/test-utils";
 import baseInputButton from "./base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"
 
 describe("baseInputButton.vue", () => {
     describe("general", () => {
@@ -713,7 +714,7 @@ describe("baseInputButton.vue", () => {
         });
 
         describe("pushClickEventToGA", () => {
-            test.only("pushEventToGA is called correctly", () => {
+            test("pushEventToGA is called correctly", () => {
                 // Arrange
                 const { wrapper } = setupMocks({
                     mockData: {
@@ -721,17 +722,11 @@ describe("baseInputButton.vue", () => {
                             value: "Bello",
                             setLastValuePushedToGa: jest.fn(),
                         },
-                        route: {
-                            query: {
-                                fmgPage: "myPage",
-                            },
-                        },
                     },
                 });
 
-                console.log(wrapper.vm.$route)
+                console.log(wrapper.vm.$route);
 
-                wrapper.vm.pushEventToGA = jest.fn();
                 wrapper.setData({
                     GaActions: {
                         CLICKED: "Clicked",
@@ -950,6 +945,25 @@ describe("baseInputButton.vue", () => {
             });
         });
     });
+
+    describe("integration testing", () => {
+        describe("checkbox", () => {
+            test.only("click on both => both are selected", async () => {
+                // Arrange
+                const { wrapper } = setupBaseInputButtonWrapper({
+                    isMultiSelect: true
+                })
+                console.log(wrapper.html())
+
+                // Act
+                const buttonWrappers = wrapper.findAllComponents({name: "baseInputButtonWrapper"})
+                await buttonWrappers[0].trigger("click")
+
+                // Assert
+                expect(wrapper.vm.value).toEqual(["value1"])
+            })
+        })
+    });
 });
 
 // TODO KO look at how I tested groups of these in SFA
@@ -957,15 +971,6 @@ describe("baseInputButton.vue", () => {
 // that this acts like a regular input aside from a different emitted event)
 
 function setupMocks({ mockData = {}, shouldShallowMount = true }) {
-    const baseInputButtonWrapper = {
-        components: { baseInputButton },
-        template: '<baseInputButton v-model="myValue" />',
-        data() {
-            return {
-                myValue: "",
-            };
-        },
-    };
     const mountMockData = {
         ...mockData,
         propsData: {
@@ -985,7 +990,9 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
 
     wrapper.vm.pushEventToGA = jest.fn();
     wrapper.vm.$route = {
-        query: {},
+        query: {
+            fmgPage: "myPage",
+        },
     };
     wrapper.vm.GaActions = {};
 
@@ -994,28 +1001,31 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) {
 
 function setupBaseInputButtonWrapper({ mockData = {} }) {
     const baseInputButtonWrapper = {
+        name: "baseInputButtonWrapper",
         components: { baseInputButton },
         template:
-            '<div><baseInputButton v-model="myValue" groupName="myGroupName" value="X" :isMultiSelect="isMultiSelect" /></div>',
+            '<div><baseInputButton v-bind="$props" @inputButtonClicked="handleAnswerChange" />Test</div>',
         data() {
             return {
-                myValue: "",
                 isMultiSelect: mockData.isMultiSelect,
             };
         },
-
+        mixins: [inputButtonWrapperMixin]
-        // const parentComponent = mount({
-        //     data() {
-        //         return {
-        //             value: "value1",
-        //         }
-        //     },
-        //     template: '<div><baseInputButton v-model="value" value="value1" /><baseInputButton v-model="value" value="value2" /></div>',
-        //     components: { baseInputButton }
-        // })
     };
 
-    const wrapper = mount(baseInputButtonWrapper, {});
+    let parentComponentTemplate = "<div>"
+    parentComponentTemplate += `<baseInputButtonWrapper v-model="value" :isMultiSelect="isMultiSelect" groupName="myGroupName" value="value1" />`
+    parentComponentTemplate += `<baseInputButtonWrapper v-model="value" :isMultiSelect="isMultiSelect" groupName="myGroupName" value="value2" />`
+    parentComponentTemplate += `</div>`
+    const wrapper = mount({
+        data() {
+            return {
+                value: mockData.initialValue,
+            }
+        },
+        template: parentComponentTemplate,
+        components: { baseInputButtonWrapper }
+    })
 
     return { wrapper };
 }