unit tests

mrc-ide · Nov 9, 2023 · 6bbadd6 · 6bbadd6
1 parent 31ac756
commit 6bbadd6
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 9 deletions.
diff --git a/app/static/src/app/components/plot/WodinPlotDownloadImageModal.vue b/app/static/src/app/components/plot/WodinPlotDownloadImageModal.vue
@@ -10,35 +10,35 @@
           <div class="modal-body">
             <div class="row">
               <div class="col-4">
-                <label class="col-form-label">Title</label>
+                <label for="download-img-title" class="col-form-label">Title</label>
               </div>
               <div class="col-8 pe-0">
-                <input type="text" class="form-control" v-model="editProps.title">
+                <input id="download-img-title" type="text" class="form-control" v-model="editProps.title">
               </div>
             </div>
             <div class="row mt-2">
               <div class="col-4">
-                <label class="col-form-label">X axis label</label>
+                <label for="download-img-x-label" class="col-form-label">X axis label</label>
               </div>
               <div class="col-8 pe-0">
-                <input type="text" class="form-control" v-model="editProps.xLabel">
+                <input id="download-img-x-label" type="text" class="form-control" v-model="editProps.xLabel">
               </div>
             </div>
             <div class="row mt-2">
               <div class="col-4">
-                <label class="col-form-label">Y axis label</label>
+                <label for="download-img-y-label" class="col-form-label">Y axis label</label>
               </div>
               <div class="col-8 pe-0">
-                <input type="text" class="form-control" v-model="editProps.yLabel">
+                <input id="download-img-y-label" type="text" class="form-control" v-model="editProps.yLabel">
               </div>
             </div>
           </div>
           <div class="modal-footer">
             <button class="btn btn-primary"
-                    id="confirm-download-plot-image"
+                    id="confirm-download-img"
                     @click="confirm">Download</button>
             <button class="btn btn-outline"
-                    id="cancel-download-plot-image"
+                    id="cancel-download-img"
                     @click="close">Cancel</button>
           </div>
         </div>

diff --git a/app/static/tests/testUtils.ts b/app/static/tests/testUtils.ts
@@ -1,5 +1,7 @@
 import { VueWrapper } from "@vue/test-utils";
 import WodinPanels from "../src/app/components/WodinPanels.vue";
+import {ref} from "vue";
+import * as downloadPlot from "../src/app/components/mixins/downloadPlot";
 
 export const fileTimeout = 20;
 
@@ -29,3 +31,13 @@ export const expectRightWodinTabs = (wrapper: VueWrapper<any>, expectedTabNames:
 export const expectLeftWodinTabs = (wrapper: VueWrapper<any>, expectedTabNames: string[]) => {
     expectWodinTabs(wrapper, expectedTabNames, "left");
 };
+
+export const mockDownloadImageResult = {
+    showDownloadImageModal: ref(true),
+    downloadImageProps: { title: "test title", xLabel: "test x", yLabel: "test y" },
+    closeModal: jest.fn(),
+    downloadImage: jest.fn()
+} as any;
+
+export const mockDownloadPlotMixin = jest.spyOn(downloadPlot, "default").mockImplementation(() => mockDownloadImageResult);
+
diff --git a/app/static/tests/unit/components/plot/wodinPlot.test.ts b/app/static/tests/unit/components/plot/wodinPlot.test.ts
@@ -1,4 +1,6 @@
 // Mock the import of plotly so we can mock Plotly methods
+import {mockDownloadImageResult, mockDownloadPlotMixin} from "../../../testUtils";
+
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
     react: jest.fn(),
@@ -7,15 +9,21 @@ jest.mock("plotly.js-basic-dist-min", () => ({
     }
 }));
 
+jest.mock("../../../../src/app/components/mixins/downloadPlot", () => ({
+    __esModule: true,
+    default: jest.fn()
+}));
+
 /* eslint-disable import/first */
 import { shallowMount, VueWrapper } from "@vue/test-utils";
-import { nextTick } from "vue";
+import {nextTick, ref} from "vue";
 import * as plotly from "plotly.js-basic-dist-min";
 import Vuex, { Store } from "vuex";
 import WodinPlot from "../../../../src/app/components/plot/WodinPlot.vue";
 import WodinPlotDataSummary from "../../../../src/app/components/plot/WodinPlotDataSummary.vue";
 import { BasicState } from "../../../../src/app/store/basic/state";
 import { GraphSettingsMutation } from "../../../../src/app/store/graphSettings/mutations";
+import WodinPlotDownloadImageModal from "../../../../src/app/components/plot/WodinPlotDownloadImageModal.vue";
 
 describe("WodinPlot", () => {
     const mockPlotlyNewPlot = jest.spyOn(plotly, "newPlot");
@@ -464,4 +472,29 @@ describe("WodinPlot", () => {
         expect(mockPlotlyNewPlot).toBeCalledTimes(1);
         expect(mockOn).toBeCalledTimes(1);
     });
+
+    it("shows modal if showDownloadImageModal from mixin is true", async () => {
+        const wrapper = getWrapper();
+        expect(mockDownloadPlotMixin).toHaveBeenCalled();
+
+        expect(wrapper.findComponent(WodinPlotDownloadImageModal).props("title")).toBe("test title");
+        expect(wrapper.findComponent(WodinPlotDownloadImageModal).props("xLabel")).toBe("test x");
+        expect(wrapper.findComponent(WodinPlotDownloadImageModal).props("yLabel")).toBe("test y");
+
+        mockDownloadImageResult.showDownloadImageModal.value = false;
+        await nextTick();
+        expect(wrapper.findComponent(WodinPlotDownloadImageModal).exists()).toBe(false);
+    });
+
+    it("closes modal on emit", () => {
+        const wrapper = getWrapper();
+        wrapper.findComponent(WodinPlotDownloadImageModal).vm.$emit("close");
+        expect(mockDownloadImageResult.closeModal).toHaveBeenCalled();
+    });
+
+    it("downloads image on emit confirm", () => {
+        const wrapper = getWrapper();
+        wrapper.findComponent(WodinPlotDownloadImageModal).vm.$emit("confirm", "new title", "new x", "new y");
+        expect(mockDownloadImageResult.downloadImage).toHaveBeenCalledWith("new title", "new x", "new y");
+    });
 });
diff --git a/app/static/tests/unit/components/plot/wodinPlotDownloadImageModal.test.ts b/app/static/tests/unit/components/plot/wodinPlotDownloadImageModal.test.ts
@@ -0,0 +1,39 @@
+import {shallowMount} from "@vue/test-utils";
+import WodinPlotDownloadImageModal from "../../../../src/app/components/plot/WodinPlotDownloadImageModal.vue";
+
+describe("WodinPlotDownloadImageModal", () => {
+    const getWrapper = () => {
+        return shallowMount(WodinPlotDownloadImageModal, {
+            props: {
+                title: "Test Title",
+                xLabel: "test x",
+                yLabel: "test y"
+            }
+        });
+    };
+
+    it("renders as expected", () => {
+        const wrapper = getWrapper();
+        expect(wrapper.find("label[for='download-img-title']").text()).toBe("Title");
+        expect((wrapper.find("input#download-img-title").element as HTMLInputElement).value).toBe("Test Title");
+        expect(wrapper.find("label[for='download-img-x-label']").text()).toBe("X axis label");
+        expect((wrapper.find("input#download-img-x-label").element as HTMLInputElement).value).toBe("test x");
+        expect(wrapper.find("label[for='download-img-y-label']").text()).toBe("Y axis label");
+        expect((wrapper.find("input#download-img-y-label").element as HTMLInputElement).value).toBe("test y");
+    });
+
+    it("emits close", async () => {
+        const wrapper = getWrapper();
+        await wrapper.find("button#cancel-download-img").trigger("click");
+        expect(wrapper.emitted("close")!.length).toBe(1);
+    });
+
+    it("emits confirm with edited values", async () => {
+        const wrapper = getWrapper();
+        await wrapper.find("#download-img-title").setValue("new title");
+        await wrapper.find("#download-img-x-label").setValue("new x");
+        await wrapper.find("#download-img-y-label").setValue("new y");
+        await wrapper.find("#confirm-download-img").trigger("click");
+        expect(wrapper.emitted("confirm")).toStrictEqual([["new title", "new x", "new y"]]);
+    });
+});
diff --git a/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts b/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
@@ -16,6 +16,8 @@ import { SensitivityMutation } from "../../../../src/app/store/sensitivity/mutat
 import SensitivitySummaryPlot from "../../../../src/app/components/sensitivity/SensitivitySummaryPlot.vue";
 import { RunGetter } from "../../../../src/app/store/run/getters";
 import WodinPlotDataSummary from "../../../../src/app/components/plot/WodinPlotDataSummary.vue";
+import {mockDownloadImageResult, mockDownloadPlotMixin} from "../../../testUtils";
+import WodinPlotDownloadImageModal from "../../../../src/app/components/plot/WodinPlotDownloadImageModal.vue";
 
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
@@ -24,6 +26,11 @@ jest.mock("plotly.js-basic-dist-min", () => ({
     }
 }));
 
+jest.mock("../../../../src/app/components/mixins/downloadPlot", () => ({
+    __esModule: true,
+    default: jest.fn()
+}));
+
 describe("SensitivitySummaryPlot", () => {
     const mockPlotlyNewPlot = jest.spyOn(plotly, "newPlot");
 
@@ -541,4 +548,29 @@ describe("SensitivitySummaryPlot", () => {
         store!.state.sensitivity.plotSettings.time = 50;
         expect(mockSetLoading).not.toHaveBeenCalled();
     });
+
+    it("shows modal if showDownloadImageModal from mixin is true", async () => {
+        const wrapper = getWrapper();
+        expect(mockDownloadPlotMixin).toHaveBeenCalled();
+
+        expect(wrapper.findComponent(WodinPlotDownloadImageModal).props("title")).toBe("test title");
+        expect(wrapper.findComponent(WodinPlotDownloadImageModal).props("xLabel")).toBe("test x");
+        expect(wrapper.findComponent(WodinPlotDownloadImageModal).props("yLabel")).toBe("test y");
+
+        mockDownloadImageResult.showDownloadImageModal.value = false;
+        await nextTick();
+        expect(wrapper.findComponent(WodinPlotDownloadImageModal).exists()).toBe(false);
+    });
+
+    it("closes modal on emit", () => {
+        const wrapper = getWrapper();
+        wrapper.findComponent(WodinPlotDownloadImageModal).vm.$emit("close");
+        expect(mockDownloadImageResult.closeModal).toHaveBeenCalled();
+    });
+
+    it("downloads image on emit confirm", () => {
+        const wrapper = getWrapper();
+        wrapper.findComponent(WodinPlotDownloadImageModal).vm.$emit("confirm", "new title", "new x", "new y");
+        expect(mockDownloadImageResult.downloadImage).toHaveBeenCalledWith("new title", "new x", "new y");
+    });
 });