Create separate modules for unit tests

tests/setup.js

@@ -1,10 +1,13 @@
 import Vue from "vue";
 import Buefy from "buefy";
 import VueObserveVisibility from "vue-observe-visibility";
+import { init as initStore } from "./utils/store";
 
 Vue.use(VueObserveVisibility);
 Vue.use(Buefy);
 
+initStore();
+
 // Mock IntersectionObserver
 global.IntersectionObserver = class IntersectionObserver {
   constructor() {}

tests/unit/DocumentTopBar.spec.js

@@ -1,94 +1,43 @@
-import { mount, shallowMount } from "@vue/test-utils";
+import { render } from "../utils/render";
+import { dispatch, getData } from "../utils/store";
+import { DocumentCategory } from "../../src/components";
 import {
-  DocumentTopBar,
   DocumentName,
+  DocumentTopBar,
 } from "../../src/components/DocumentTopBar";
-import { DocumentCategory } from "../../src/components";
-import store from "../../src/store";
-
-// mock i18n so we don't need to load the library
-const $t = () => {};
 
 describe("Document Top Bar", () => {
-  // Set file name
-  const documentData = require("../mock/document.json");
-  const pages = [
-    require("../mock/page_1.json"),
-    require("../mock/page_2.json"),
-  ];
-  documentData.pages = pages;
-
-  beforeEach(() => {
-    Promise.resolve(
-      store.dispatch("document/setSelectedDocument", documentData),
-      store.dispatch(
-        "document/setAnnotationSets",
-        require("../mock/document.json").annotation_sets
-      ),
-      store.dispatch("document/setPublicView", false),
-      store.dispatch("document/endRecalculatingAnnotations"),
-      store.dispatch("document/endLoading")
-    );
-  });
-
   it("Document Top Bar should be rendered", async () => {
-    const wrapper = shallowMount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, true);
 
     expect(await wrapper.getComponent(".document-top-bar-component"));
   });
 
   it("File name should be visible", () => {
-    const wrapper = shallowMount(DocumentName, {
-      store,
-      propsData: {
-        dataFileName: store.state.document.selectedDocument.data_file_name,
-      },
-      mocks: {
-        $t,
-      },
+    const fileName = getData("document").selectedDocument.data_file_name;
+    const wrapper = render(DocumentName, true, {
+      dataFileName: fileName,
     });
 
-    expect(wrapper.getComponent(".document-name").text()).toBe(
-      documentData.data_file_name
-    );
+    expect(wrapper.getComponent(".document-name").text()).toBe(fileName);
   });
 
   it("Edit button should be visible when rendering the component", async () => {
-    const wrapper = shallowMount(DocumentName, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentName, true);
 
     expect(await wrapper.findComponent(".edit-btn").exists()).toBe(true);
   });
 
   it("Clicking on the edit button should make it not visible and make the save one visible", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     await wrapper.getComponent(".edit-btn").trigger("click");
     expect(await wrapper.findComponent(".edit-btn").exists()).toBe(false);
     expect(await wrapper.findComponent(".save-btn").exists()).toBe(true);
   });
 
   it("No buttons should be visible while saving", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     await wrapper.getComponent(".edit-btn").trigger("click");
     expect(await wrapper.findComponent(".edit-btn").exists()).toBe(false);
@@ -98,12 +47,7 @@ describe("Document Top Bar", () => {
   });
 
   it("The file name should become a content editable when clicking on the Edit button", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     await wrapper.getComponent(".edit-btn").trigger("click");
     expect(wrapper.getComponent(".document-name").classes()).toContain(
@@ -112,12 +56,7 @@ describe("Document Top Bar", () => {
   });
 
   it("The file name should not be content editable after clicking the Save button", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     await wrapper.getComponent(".edit-btn").trigger("click");
     await wrapper.getComponent(".save-btn").trigger("click");
@@ -127,12 +66,7 @@ describe("Document Top Bar", () => {
   });
 
   it("Clicking the save button should show the autosaving message to the user", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     await wrapper.getComponent(".edit-btn").trigger("click");
     await wrapper.getComponent(".save-btn").trigger("click");
@@ -142,12 +76,7 @@ describe("Document Top Bar", () => {
   });
 
   it("Check if save function is called after clicking save button", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     const mockFn = jest.fn().mockName("saveFunction");
 
@@ -159,23 +88,13 @@ describe("Document Top Bar", () => {
   });
 
   it("Keyboard icon is visible", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     expect(await wrapper.find(".keyboard-actions-info").exists()).toBe(true);
   });
 
   it("Tooltip is visible on hover", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     await wrapper
       .findComponent(".keyboard-actions-info .tooltip-trigger")
@@ -189,12 +108,7 @@ describe("Document Top Bar", () => {
   });
 
   it("Finish review button should be visible if not in edit mode, public view or review finished", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     expect(
       await wrapper
@@ -204,12 +118,7 @@ describe("Document Top Bar", () => {
   });
 
   it("Finish review button should be disabled if review is not done", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
     expect(
       await wrapper
@@ -221,14 +130,9 @@ describe("Document Top Bar", () => {
   });
 
   it("If document is in edit mode, button should not be visible", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
-    await store.dispatch("edit/enableEditMode", true);
+    await dispatch("edit/enableEditMode", true);
 
     expect(
       await wrapper
@@ -240,14 +144,9 @@ describe("Document Top Bar", () => {
   });
 
   it("Should not show Category dropdown, option to edit file name, keyboard actions information or other buttons", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-    });
+    const wrapper = render(DocumentTopBar, false);
 
-    store.dispatch("document/setPublicView", true);
+    dispatch("document/setPublicView", true);
 
     const categoryDropdown = await wrapper.find(
       ".left-bar-components .dropdown"
@@ -272,25 +171,22 @@ describe("Document Top Bar", () => {
   });
 
   it("Category dropdown is disabled if the Document belongs to a dataset, or if there are Annotations that are correct", async () => {
-    const annotationSet = store.state.document.annotationSets[0];
+    const annotationSet = getData("document").annotationSets[0];
     const labels = annotationSet.labels;
     const annotations = labels.flatMap((label) => {
       return label.annotations;
     });
     const correctAnnotations = annotations.filter((ann) => ann.is_correct);
 
-    const wrapper = mount(DocumentCategory, {
-      store,
-      mocks: {
-        $t,
-      },
-      data() {
-        return {
-          dropdownIsDisabled: false,
-          tooltipIsShown: false,
-        };
-      },
-    });
+    const wrapper = render(
+      DocumentCategory,
+      false,
+      {},
+      {
+        dropdownIsDisabled: false,
+        tooltipIsShown: false,
+      }
+    );
 
     if (correctAnnotations.length > 0) {
       await wrapper.setData({ dropdownIsDisabled: true, tooltipIsShown: true });
@@ -312,17 +208,9 @@ describe("Document Top Bar", () => {
   });
 
   it("Shows arrows to navigate between documents", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-      data() {
-        return {
-          previousDocument: {},
-          nextDocument: {},
-        };
-      },
+    const wrapper = render(DocumentTopBar, false, null, {
+      previousDocument: { id: 1 },
+      nextDocument: { id: 3 },
     });
 
     expect(
@@ -333,18 +221,15 @@ describe("Document Top Bar", () => {
   });
 
   it("Arrows are disabled if there are no documents to navigate to", async () => {
-    const wrapper = mount(DocumentTopBar, {
-      store,
-      mocks: {
-        $t,
-      },
-      data() {
-        return {
-          previousDocument: null,
-          nextDocument: null,
-        };
-      },
-    });
+    const wrapper = render(
+      DocumentTopBar,
+      false,
+      {},
+      {
+        previousDocument: null,
+        nextDocument: null,
+      }
+    );
 
     expect(
       await wrapper

tests/utils/i18n.js

@@ -0,0 +1,2 @@
+// mock i18n so we don't need to load the library
+export const $t = () => {};

tests/utils/render.js

@@ -0,0 +1,22 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import { $t } from "./i18n";
+import store from "../../src/store";
+
+export const render = (component, shallow, propsData = {}, data = {}) => {
+  const values = {
+    store,
+    propsData,
+    mocks: {
+      $t,
+    },
+    data() {
+      return data;
+    },
+  };
+
+  if (shallow) {
+    return shallowMount(component, values);
+  } else {
+    return mount(component, values);
+  }
+};