From 65a60d0bab90b5d7b5dcbd598de7113e64d71e30 Mon Sep 17 00:00:00 2001 From: Mason Date: Wed, 16 Dec 2020 20:54:07 -0800 Subject: [PATCH] removed babel rewire, removed global Vue in jest tests, removed jest helper which accessed document --- client/.babelrc | 2 +- client/README.md | 3 +- client/package.json | 1 - .../components/DataDialog/DataDialog.test.js | 4 +- .../components/Dataset/DatasetName.test.js | 4 -- .../InteractiveTools/InteractiveTools.test.js | 2 - .../Markdown/MarkdownVisualization.test.js | 5 +- .../src/components/Masthead/Masthead.test.js | 16 +++-- .../components/Masthead/MastheadItem.test.js | 8 +-- .../src/components/Panels/Common/Tool.test.js | 4 -- .../Panels/Common/ToolSection.test.js | 23 +++---- .../RuleBuilder/SavedRulesSelector.test.js | 9 +-- .../src/components/Tags/StatelessTags.test.js | 3 +- .../ToolsSchemaJson/ToolsJson.test.js | 5 +- .../components/ToolsView/ToolsView.test.js | 2 + .../Toolshed/InstalledList/Details.test.js | 42 +++++++------ .../Toolshed/InstalledList/Index.test.js | 62 +++++++++--------- .../Toolshed/InstalledList/Monitor.test.js | 63 ++++++++++--------- .../Toolshed/RepositoryDetails/Index.test.js | 59 ++++++++--------- .../InstallationSettings.test.js | 11 +--- .../RepositoryDetails/RepositoryTools.test.js | 5 +- .../Toolshed/SearchList/Categories.test.js | 51 ++++++++------- .../Toolshed/SearchList/Repositories.test.js | 59 ++++++++--------- .../User/CloudAuth/CloudAuth.test.js | 4 +- .../Workflow/Editor/Attributes.test.js | 31 ++++----- .../components/Workflow/Editor/Node.test.js | 2 - .../Workflow/Editor/ZoomControl.test.js | 14 ++--- client/src/components/admin/BaseList.test.js | 3 +- client/tests/karma/webpack.config.unittest.js | 10 +-- client/yarn.lock | 5 -- 30 files changed, 247 insertions(+), 265 deletions(-) diff --git a/client/.babelrc b/client/.babelrc index d92643a9ca4..9297a9920f7 100644 --- a/client/.babelrc +++ b/client/.babelrc @@ -2,7 +2,7 @@ "presets": ["@babel/preset-env"], "env": { "test": { - "plugins": ["@babel/plugin-transform-runtime", "rewire"] + "plugins": ["@babel/plugin-transform-runtime"] } } } diff --git a/client/README.md b/client/README.md index bde2b380c2d..e5bee828d32 100644 --- a/client/README.md +++ b/client/README.md @@ -115,8 +115,7 @@ framework. For testing Vue components, we use the [Vue testing utils](https://vue-test-utils.vuejs.org/) to mount individual components in a test bed and check them for rendered features. Please use jest-based mocking -for isolating test functionality. Some tests exist using Rewire, but those -should be updated over time. +for isolating test functionality. A set of older qUnit tests also exist which will be phased-out as the code they support is replaced with modern component-based implementations. In the diff --git a/client/package.json b/client/package.json index 6b615eec7c8..c3c94aa8e15 100644 --- a/client/package.json +++ b/client/package.json @@ -120,7 +120,6 @@ "babel-eslint": "^10.1.0", "babel-jest": "^26.3.0", "babel-loader": "^8.1.0", - "babel-plugin-rewire": "^1.2.0", "babel-plugin-transform-inline-environment-variables": "^0.4.3", "babel-plugin-transform-vue-template": "^0.4.2", "chai": "^4.2.0", diff --git a/client/src/components/DataDialog/DataDialog.test.js b/client/src/components/DataDialog/DataDialog.test.js index fde6c42cfcc..3e5c151486c 100644 --- a/client/src/components/DataDialog/DataDialog.test.js +++ b/client/src/components/DataDialog/DataDialog.test.js @@ -4,7 +4,6 @@ import { Model } from "./model"; import { UrlTracker } from "./utilities"; import { Services } from "./services"; import { shallowMount, createLocalVue } from "@vue/test-utils"; -import { getNewAttachNode } from "jest/helpers"; jest.mock("app"); @@ -132,7 +131,6 @@ describe("DataDialog.vue", () => { const localVue = createLocalVue(); wrapper = shallowMount(DataDialog, { propsData: mockOptions, - attachTo: getNewAttachNode(), localVue, }); expect(wrapper.findComponent(SelectionDialog).exists()).toBe(true); @@ -145,7 +143,7 @@ describe("DataDialog.vue", () => { // expect(wrapper.find(".fa-spinner").text()).to.equals(""); // expect(wrapper.contains(".fa-spinner")).to.equals(true); - // await Vue.nextTick(); + // await wrapper.vm.$nextTick(); // expect(wrapper.findAll(".fa-folder").length).to.equals(2); // expect(wrapper.findAll(".fa-file-o").length).to.equals(2); diff --git a/client/src/components/Dataset/DatasetName.test.js b/client/src/components/Dataset/DatasetName.test.js index bae0f144311..e42311d5206 100644 --- a/client/src/components/Dataset/DatasetName.test.js +++ b/client/src/components/Dataset/DatasetName.test.js @@ -1,12 +1,10 @@ import { mount } from "@vue/test-utils"; import DatasetName from "./DatasetName"; -import { getNewAttachNode } from "jest/helpers"; describe("Dataset Name", () => { it("test dataset default", async () => { const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "success" } }, - attachTo: getNewAttachNode(), }); const state = wrapper.findAll(".name"); expect(state.length).toBe(1); @@ -21,7 +19,6 @@ describe("Dataset Name", () => { it("test dataset error", async () => { const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "error" } }, - attachTo: getNewAttachNode(), }); const state = wrapper.findAll(".name"); expect(state.length).toBe(1); @@ -33,7 +30,6 @@ describe("Dataset Name", () => { it("test dataset paused", async () => { const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "paused" } }, - attachTo: getNewAttachNode(), }); const state = wrapper.findAll(".name"); expect(state.length).toBe(1); diff --git a/client/src/components/InteractiveTools/InteractiveTools.test.js b/client/src/components/InteractiveTools/InteractiveTools.test.js index 82aaf7ff2db..64df3fb284f 100644 --- a/client/src/components/InteractiveTools/InteractiveTools.test.js +++ b/client/src/components/InteractiveTools/InteractiveTools.test.js @@ -6,7 +6,6 @@ import testInteractiveToolsResponse from "./testData/testInteractiveToolsRespons import MockAdapter from "axios-mock-adapter"; import axios from "axios"; -import { getNewAttachNode } from "jest/helpers"; describe("InteractiveTools/InteractiveTools.vue", () => { const localVue = createLocalVue(); @@ -24,7 +23,6 @@ describe("InteractiveTools/InteractiveTools.vue", () => { }; }, }, - attachTo: getNewAttachNode(), }); axiosMock.onGet("/api/entry_points?running=true").reply(200, testInteractiveToolsResponse); axiosMock.onPost("/interactivetool/list").reply(200, { status: "ok", message: "ok" }); diff --git a/client/src/components/Markdown/MarkdownVisualization.test.js b/client/src/components/Markdown/MarkdownVisualization.test.js index 76d583688df..a337c70bedc 100644 --- a/client/src/components/Markdown/MarkdownVisualization.test.js +++ b/client/src/components/Markdown/MarkdownVisualization.test.js @@ -1,6 +1,5 @@ import MarkdownVisualization from "./MarkdownVisualization"; import { shallowMount } from "@vue/test-utils"; -import Vue from "vue"; describe("Markdown/MarkdownVisualization", () => { it("test wizard", async () => { @@ -16,7 +15,7 @@ describe("Markdown/MarkdownVisualization", () => { useLabels: false, }, }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.labelShow).toBe(false); expect(Object.keys(wrapper.vm.formInputs).length).toBe(3); wrapper.vm.onData("history_dataset_id"); @@ -35,7 +34,7 @@ describe("Markdown/MarkdownVisualization", () => { useLabels: true, }, }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.labelShow).toBe(true); expect(wrapper.vm.formInputs).toBe(null); }); diff --git a/client/src/components/Masthead/Masthead.test.js b/client/src/components/Masthead/Masthead.test.js index dc96ca0b60b..6e30338adf0 100644 --- a/client/src/components/Masthead/Masthead.test.js +++ b/client/src/components/Masthead/Masthead.test.js @@ -1,7 +1,12 @@ -import { default as Masthead, __RewireAPI__ as rewire } from "./Masthead.vue"; +import { default as Masthead } from "./Masthead.vue"; import { mount, createLocalVue } from "@vue/test-utils"; import Scratchbook from "layout/scratchbook"; -import { getNewAttachNode } from "jest/helpers"; +import { fetchMenu } from "layout/menu"; +import { loadWebhookMenuItems } from "./_webhooks"; + +jest.mock("app"); +jest.mock("layout/menu"); +jest.mock("./_webhooks"); describe("Masthead.vue", () => { let wrapper; @@ -24,10 +29,10 @@ describe("Masthead.vue", () => { }); } - beforeEach(() => { - rewire.__Rewire__("fetchMenu", stubFetchMenu); - rewire.__Rewire__("loadWebhookMenuItems", stubLoadWebhooks); + fetchMenu.mockImplementation(stubFetchMenu); + loadWebhookMenuItems.mockImplementation(stubLoadWebhooks); + beforeEach(() => { localVue = createLocalVue(); quotaRendered = false; quotaEl = null; @@ -83,7 +88,6 @@ describe("Masthead.vue", () => { appRoot: "prefix/", }, localVue, - attachTo: getNewAttachNode(), }); }); diff --git a/client/src/components/Masthead/MastheadItem.test.js b/client/src/components/Masthead/MastheadItem.test.js index 464fe8e76c8..ccbe0f791aa 100644 --- a/client/src/components/Masthead/MastheadItem.test.js +++ b/client/src/components/Masthead/MastheadItem.test.js @@ -1,8 +1,7 @@ +import { shallowMount, createLocalVue } from "@vue/test-utils"; import MastheadItem from "./MastheadItem.vue"; -import { mount, createLocalVue } from "@vue/test-utils"; -import { getNewAttachNode } from "jest/helpers"; -describe("Masthead.vue", () => { +describe("MastheadItem.vue", () => { let wrapper; let localVue; let active; @@ -18,13 +17,12 @@ describe("Masthead.vue", () => { menu: menu, }; - return mount(MastheadItem, { + return shallowMount(MastheadItem, { propsData: { tab, activeTab: active, }, localVue, - attachTo: getNewAttachNode(), }); } diff --git a/client/src/components/Panels/Common/Tool.test.js b/client/src/components/Panels/Common/Tool.test.js index 5b63f77ed2a..ebc464d42e0 100644 --- a/client/src/components/Panels/Common/Tool.test.js +++ b/client/src/components/Panels/Common/Tool.test.js @@ -1,6 +1,5 @@ import { mount } from "@vue/test-utils"; import Tool from "./Tool"; -import { getNewAttachNode } from "jest/helpers"; describe("Tool", () => { test("test tool", () => { @@ -8,7 +7,6 @@ describe("Tool", () => { propsData: { tool: {}, }, - attachTo: getNewAttachNode(), }); const nameElement = wrapper.findAll(".name"); expect(nameElement.at(0).text()).toBe(""); @@ -30,7 +28,6 @@ describe("Tool", () => { operationIcon: "operationIconClass", operationTitle: "operationTitle", }, - attachTo: getNewAttachNode(), }); const nameElement = wrapper.findAll(".name"); expect(nameElement.at(0).text()).toBe("name"); @@ -48,7 +45,6 @@ describe("Tool", () => { }, hideName: true, }, - attachTo: getNewAttachNode(), }); const nameElement = wrapper.findAll(".name"); expect(nameElement.length).toBe(0); diff --git a/client/src/components/Panels/Common/ToolSection.test.js b/client/src/components/Panels/Common/ToolSection.test.js index ae74bc403fe..aadcd347587 100644 --- a/client/src/components/Panels/Common/ToolSection.test.js +++ b/client/src/components/Panels/Common/ToolSection.test.js @@ -1,7 +1,5 @@ -import Vue from "vue"; import { mount } from "@vue/test-utils"; import ToolSection from "./ToolSection"; -import { getNewAttachNode } from "jest/helpers"; describe("ToolSection", () => { test("test tool section", () => { @@ -11,7 +9,6 @@ describe("ToolSection", () => { name: "name", }, }, - attachTo: getNewAttachNode(), }); const nameElement = wrapper.findAll(".name"); expect(nameElement.at(0).text()).toBe("name"); @@ -34,19 +31,18 @@ describe("ToolSection", () => { ], }, }, - attachTo: getNewAttachNode(), }); expect(wrapper.vm.opened).toBe(false); const $sectionName = wrapper.find(".name"); expect($sectionName.text()).toBe("tool_section"); $sectionName.trigger("click"); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); const $names = wrapper.findAll(".name"); expect($names.at(1).text()).toBe("name"); const $label = wrapper.find(".tool-panel-label"); expect($label.text()).toBe("text"); $sectionName.trigger("click"); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.findAll(".name").length).toBe(1); }); @@ -66,30 +62,29 @@ describe("ToolSection", () => { }, queryFilter: "test", }, - attachTo: getNewAttachNode(), }); expect(wrapper.vm.opened).toBe(true); const $sectionName = wrapper.find(".name"); $sectionName.trigger("click"); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.opened).toBe(false); wrapper.setProps({ queryFilter: "" }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.opened).toBe(false); wrapper.setProps({ queryFilter: "test" }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.opened).toBe(true); wrapper.setProps({ disableFilter: true }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.opened).toBe(true); wrapper.setProps({ queryFilter: "" }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.opened).toBe(false); $sectionName.trigger("click"); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.opened).toBe(true); wrapper.setProps({ queryFilter: "test" }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.opened).toBe(false); }); }); diff --git a/client/src/components/RuleBuilder/SavedRulesSelector.test.js b/client/src/components/RuleBuilder/SavedRulesSelector.test.js index 483398804de..e55bd4e372b 100644 --- a/client/src/components/RuleBuilder/SavedRulesSelector.test.js +++ b/client/src/components/RuleBuilder/SavedRulesSelector.test.js @@ -1,7 +1,5 @@ -import Vue from "vue"; import { mount } from "@vue/test-utils"; import SavedRulesSelector from "components/RuleBuilder/SavedRulesSelector"; -import { getNewAttachNode } from "jest/helpers"; describe("SavedRulesSelector", () => { let wrapper; @@ -14,13 +12,12 @@ describe("SavedRulesSelector", () => { prefix: "test_prefix_" + new Date().toISOString() + "_", savedRules: [], }, - attachTo: getNewAttachNode(), }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); }); afterEach(async () => { - await Vue.nextTick(); + await wrapper.vm.$nextTick(); }); it("disables history icon if there is no history", async () => { @@ -49,7 +46,7 @@ describe("SavedRulesSelector", () => { user: "test_user", savedRules: [testRules], }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); const sessions = wrapper.findAll("div.dropdown-menu > a.saved-rule-item"); expect(sessions.length > 0).toBeTruthy(); sessions.wrappers[0].trigger("click"); diff --git a/client/src/components/Tags/StatelessTags.test.js b/client/src/components/Tags/StatelessTags.test.js index 35d66d4f4b3..1497b78ebc3 100644 --- a/client/src/components/Tags/StatelessTags.test.js +++ b/client/src/components/Tags/StatelessTags.test.js @@ -1,7 +1,6 @@ import { mount, createLocalVue } from "@vue/test-utils"; import StatelessTags from "./StatelessTags"; import _l from "utils/localization"; -import Vue from "vue"; describe("Tags/StatelessTags.vue", () => { const localVue = createLocalVue(); @@ -17,7 +16,7 @@ describe("Tags/StatelessTags.vue", () => { value: testTags, }); emitted = wrapper.emitted(); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); }); it("should render a div for each tag", () => { diff --git a/client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.test.js b/client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.test.js index a2cc4ed1de3..a04f76e3769 100644 --- a/client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.test.js +++ b/client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.test.js @@ -3,7 +3,6 @@ import ToolsJson from "./ToolsJson"; import testToolsListResponse from "../testData/toolsList"; import MockAdapter from "axios-mock-adapter"; import axios from "axios"; -import Vue from "vue"; import { mount } from "@vue/test-utils"; describe("ToolsView/ToolsView.vue", () => { @@ -15,11 +14,11 @@ describe("ToolsView/ToolsView.vue", () => { axiosMock = new MockAdapter(axios); wrapper = mount(ToolsJson); axiosMock.onGet("/api/tools?tool_help=True").reply(200, testToolsListResponse); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); }); it("schema.org script element is created", async () => { - await Vue.nextTick(); + await wrapper.vm.$nextTick(); const tools = wrapper.vm.createToolsJson(testToolsListResponse); const schemaElement = document.getElementById("schema-json"); const schemaText = JSON.parse(schemaElement.text); diff --git a/client/src/components/ToolsView/ToolsView.test.js b/client/src/components/ToolsView/ToolsView.test.js index fd294f7b7d2..288027a01fd 100644 --- a/client/src/components/ToolsView/ToolsView.test.js +++ b/client/src/components/ToolsView/ToolsView.test.js @@ -9,6 +9,8 @@ import testCitation from "./testData/citation"; import MockAdapter from "axios-mock-adapter"; import axios from "axios"; +jest.mock("app"); + describe("ToolsView/ToolsView.vue", () => { const localVue = createLocalVue(); localVue.filter("localize", (value) => _l(value)); diff --git a/client/src/components/Toolshed/InstalledList/Details.test.js b/client/src/components/Toolshed/InstalledList/Details.test.js index 7cdb8b9b098..f10bc7ce51b 100644 --- a/client/src/components/Toolshed/InstalledList/Details.test.js +++ b/client/src/components/Toolshed/InstalledList/Details.test.js @@ -1,23 +1,28 @@ -import { shallowMount } from "@vue/test-utils"; +import { shallowMount, createLocalVue } from "@vue/test-utils"; import Details from "./Details"; -import { __RewireAPI__ as rewire } from "./Details"; -import Vue from "vue"; + +jest.mock("app"); + +import { getAppRoot } from "onload/loadConfig"; +jest.mock("onload/loadConfig"); +getAppRoot.mockImplementation(() => "/"); + +import { Services } from "../services"; +jest.mock("../services"); + +Services.mockImplementation(() => { + return { + async getRepositoryByName(url, name, owner) { + expect(url).toBe("tool_shed_url"); + expect(name).toBe("name"); + expect(owner).toBe("owner"); + return {}; + }, + }; +}); describe("Details", () => { - beforeEach(() => { - rewire.__Rewire__( - "Services", - class { - async getRepositoryByName(url, name, owner) { - expect(url).toBe("tool_shed_url"); - expect(name).toBe("name"); - expect(owner).toBe("owner"); - return {}; - } - } - ); - }); - + const localVue = createLocalVue(); it("test repository details loading", async () => { const wrapper = shallowMount(Details, { propsData: { @@ -27,11 +32,12 @@ describe("Details", () => { owner: "owner", }, }, + localVue, }); expect(wrapper.findAll("loading-span-stub").length).toBe(1); expect(wrapper.find("loading-span-stub").attributes("message")).toBe("Loading installed repository details"); expect(wrapper.findAll("repositorydetails-stub").length).toBe(0); - await Vue.nextTick(); + await localVue.nextTick(); expect(wrapper.findAll("loading-span-stub").length).toBe(0); expect(wrapper.findAll(".alert").length).toBe(0); expect(wrapper.findAll("repositorydetails-stub").length).toBe(1); diff --git a/client/src/components/Toolshed/InstalledList/Index.test.js b/client/src/components/Toolshed/InstalledList/Index.test.js index cac755f38a2..85f5285a68d 100644 --- a/client/src/components/Toolshed/InstalledList/Index.test.js +++ b/client/src/components/Toolshed/InstalledList/Index.test.js @@ -1,35 +1,39 @@ import { mount } from "@vue/test-utils"; import Index from "./Index"; -import { __RewireAPI__ as rewire } from "./Index"; -import Vue from "vue"; + +jest.mock("app"); + +import { getAppRoot } from "onload/loadConfig"; +jest.mock("onload/loadConfig"); +getAppRoot.mockImplementation(() => "/"); + +import { Services } from "../services"; +jest.mock("../services"); + +Services.mockImplementation(() => { + return { + async getInstalledRepositories() { + return [ + { + name: "name_0", + description: "description_0", + tool_shed_status: { + latest_installable_revision: false, + }, + }, + { + name: "name_1", + description: "description_1", + tool_shed_status: { + latest_installable_revision: true, + }, + }, + ]; + }, + }; +}); describe("InstalledList", () => { - beforeEach(() => { - rewire.__Rewire__( - "Services", - class { - async getInstalledRepositories() { - return [ - { - name: "name_0", - description: "description_0", - tool_shed_status: { - latest_installable_revision: false, - }, - }, - { - name: "name_1", - description: "description_1", - tool_shed_status: { - latest_installable_revision: true, - }, - }, - ]; - } - } - ); - }); - it("test installed list", async () => { const wrapper = mount(Index, { propsData: { @@ -40,7 +44,7 @@ describe("InstalledList", () => { }, }); expect(wrapper.find(".loading-message").text()).toBe("Loading installed repositories..."); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.find(".installed-message").text()).toBe("2 repositories installed on this instance."); const names = wrapper.findAll(".name"); expect(names.length).toBe(2); diff --git a/client/src/components/Toolshed/InstalledList/Monitor.test.js b/client/src/components/Toolshed/InstalledList/Monitor.test.js index 718e91ed44a..df957fe9907 100644 --- a/client/src/components/Toolshed/InstalledList/Monitor.test.js +++ b/client/src/components/Toolshed/InstalledList/Monitor.test.js @@ -1,36 +1,41 @@ -import { mount } from "@vue/test-utils"; +import { createLocalVue, mount } from "@vue/test-utils"; import Monitor from "./Monitor"; -import { __RewireAPI__ as rewire } from "./Monitor"; -import Vue from "vue"; + +jest.mock("app"); + +import { getAppRoot } from "onload/loadConfig"; +jest.mock("onload/loadConfig"); +getAppRoot.mockImplementation(() => "/"); + +import { Services } from "../services"; +jest.mock("../services"); + +Services.mockImplementation(() => { + return { + async getInstalledRepositories() { + return [ + { + name: "name_0", + owner: "owner_0", + status: "status_0_0", + description: "description_0_0", + }, + { + name: "name_1", + owner: "owner_1", + status: "status_1", + description: "description_1", + }, + ]; + }, + }; +}); describe("Monitor", () => { - beforeEach(() => { - rewire.__Rewire__( - "Services", - class { - async getInstalledRepositories() { - return [ - { - name: "name_0", - owner: "owner_0", - status: "status_0_0", - description: "description_0_0", - }, - { - name: "name_1", - owner: "owner_1", - status: "status_1", - description: "description_1", - }, - ]; - } - } - ); - }); - it("test monitor", async () => { - const wrapper = mount(Monitor, {}); - await Vue.nextTick(); + const localVue = createLocalVue(); + const wrapper = mount(Monitor, localVue); + await localVue.nextTick(); const headers = wrapper.findAll("th"); expect(headers.length).toBe(2); expect(headers.at(0).text()).toBe("Name"); diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.test.js b/client/src/components/Toolshed/RepositoryDetails/Index.test.js index 90d466561bf..3c3a7c529b8 100644 --- a/client/src/components/Toolshed/RepositoryDetails/Index.test.js +++ b/client/src/components/Toolshed/RepositoryDetails/Index.test.js @@ -1,29 +1,34 @@ -import { mount } from "@vue/test-utils"; +import { shallowMount, createLocalVue } from "@vue/test-utils"; import Index from "./Index"; -import { __RewireAPI__ as rewire } from "./Index"; -import Vue from "vue"; + +jest.mock("app"); + +import { getAppRoot } from "onload/loadConfig"; +jest.mock("onload/loadConfig"); +getAppRoot.mockImplementation(() => "/"); + +import { Services } from "../services"; +jest.mock("../services"); + +Services.mockImplementation(() => { + return { + async getRepository(toolshedUrl, repositoryId) { + expect(toolshedUrl).toBe("toolshedUrl"); + expect(repositoryId).toBe("id"); + return []; + }, + async getInstalledRepositoriesByName(name, owner) { + expect(name).toBe("name"); + expect(owner).toBe("owner"); + return []; + }, + }; +}); describe("RepositoryDetails", () => { - beforeEach(() => { - rewire.__Rewire__( - "Services", - class { - async getRepository(toolshedUrl, repositoryId) { - expect(toolshedUrl).toBe("toolshedUrl"); - expect(repositoryId).toBe("id"); - return []; - } - async getInstalledRepositoriesByName(name, owner) { - expect(name).toBe("name"); - expect(owner).toBe("owner"); - return []; - } - } - ); - }); - it("test repository details index", async () => { - const wrapper = mount(Index, { + const localVue = createLocalVue(); + const wrapper = shallowMount(Index, { propsData: { repo: { id: "id", @@ -33,16 +38,12 @@ describe("RepositoryDetails", () => { }, toolshedUrl: "toolshedUrl", }, - stubs: { - RepositoryDetails: true, - InstallationSettings: true, - RepositoryTools: true, - }, + localVue, }); expect(wrapper.find(".loading-message").text()).toBe("Loading repository details..."); - await Vue.nextTick(); + await localVue.nextTick(); expect(wrapper.findAll(".alert").length).toBe(0); - await Vue.nextTick(); + await localVue.nextTick(); expect(wrapper.findAll(".alert").length).toBe(0); }); }); diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.test.js b/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.test.js index 33431f5e604..fc19ab1aad0 100644 --- a/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.test.js +++ b/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.test.js @@ -1,16 +1,9 @@ import { mount } from "@vue/test-utils"; import InstallationSettings from "./InstallationSettings"; -import { __RewireAPI__ as rewire } from "./InstallationSettings"; + +jest.mock("app"); describe("InstallationSettings", () => { - beforeEach(() => { - rewire.__Rewire__("getGalaxyInstance", () => { - return { - config: {}, - }; - }); - }); - it("test tool repository installer interface", () => { const wrapper = mount(InstallationSettings, { propsData: { diff --git a/client/src/components/Toolshed/RepositoryDetails/RepositoryTools.test.js b/client/src/components/Toolshed/RepositoryDetails/RepositoryTools.test.js index 5ec0c95c0ec..09b7c9aad4d 100644 --- a/client/src/components/Toolshed/RepositoryDetails/RepositoryTools.test.js +++ b/client/src/components/Toolshed/RepositoryDetails/RepositoryTools.test.js @@ -1,4 +1,3 @@ -import Vue from "vue"; import { mount } from "@vue/test-utils"; import RepositoryTools from "./RepositoryTools"; @@ -57,7 +56,7 @@ describe("RepositoryTools", () => { expect($third.find("td:last-child").text()).toBe(""); const $link = wrapper.find("a"); $link.trigger("click"); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); const $elExpanded = wrapper.findAll("tr"); expect($elExpanded.length).toBe(4); @@ -69,7 +68,7 @@ describe("RepositoryTools", () => { expect($forthExpanded.find("td:last-child").text()).toBe(""); const $linkExpanded = wrapper.find("a"); $linkExpanded.trigger("click"); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); const $elCollapsed = wrapper.findAll("tr"); expect($elCollapsed.length).toBe(3); diff --git a/client/src/components/Toolshed/SearchList/Categories.test.js b/client/src/components/Toolshed/SearchList/Categories.test.js index 5d814a95c49..bf799c7269e 100644 --- a/client/src/components/Toolshed/SearchList/Categories.test.js +++ b/client/src/components/Toolshed/SearchList/Categories.test.js @@ -1,29 +1,32 @@ -import { mount } from "@vue/test-utils"; +import { mount, createLocalVue } from "@vue/test-utils"; import Categories from "./Categories"; -import { __RewireAPI__ as rewire } from "./Categories"; -import Vue from "vue"; + +import { Services } from "../services"; +jest.mock("../services"); + +Services.mockImplementation(() => { + return { + async getCategories() { + return [ + { + name: "name_0", + description: "description_0", + repositories: "repositories_0", + }, + { + name: "name_1", + description: "description_1", + repositories: "repositories_1", + }, + ]; + }, + }; +}); describe("Categories", () => { + let localVue; beforeEach(() => { - rewire.__Rewire__( - "Services", - class { - async getCategories() { - return [ - { - name: "name_0", - description: "description_0", - repositories: "repositories_0", - }, - { - name: "name_1", - description: "description_1", - repositories: "repositories_1", - }, - ]; - } - } - ); + localVue = createLocalVue(); }); it("test categories loading", () => { @@ -32,6 +35,7 @@ describe("Categories", () => { loading: true, toolshedUrl: "toolshedUrl", }, + localVue, }); expect(wrapper.find(".loading-message").text()).toBe("Loading categories..."); }); @@ -42,8 +46,9 @@ describe("Categories", () => { loading: false, toolshedUrl: "toolshedUrl", }, + localVue, }); - await Vue.nextTick(); + await localVue.nextTick(); const links = wrapper.findAll("a"); expect(links.length).toBe(2); expect(links.at(0).text()).toBe("name_0"); diff --git a/client/src/components/Toolshed/SearchList/Repositories.test.js b/client/src/components/Toolshed/SearchList/Repositories.test.js index 7e6c300946c..ea3c1fb7d08 100644 --- a/client/src/components/Toolshed/SearchList/Repositories.test.js +++ b/client/src/components/Toolshed/SearchList/Repositories.test.js @@ -1,32 +1,34 @@ -import { mount } from "@vue/test-utils"; +import { mount, createLocalVue } from "@vue/test-utils"; import Repositories from "./Repositories"; -import { __RewireAPI__ as rewire } from "./Repositories"; -import Vue from "vue"; + +jest.mock("app"); + +import { Services } from "../services"; +jest.mock("../services"); + +Services.mockImplementation(() => { + return { + async getRepositories() { + return [ + { + name: "name_0", + owner: "owner_0", + last_updated: "last_updated_0", + times_downloaded: "times_downloaded_0", + }, + { + name: "name_1", + owner: "owner_1", + last_updated: "last_updated_1", + times_downloaded: "times_downloaded_1", + }, + ]; + }, + }; +}); describe("Repositories", () => { - beforeEach(() => { - rewire.__Rewire__( - "Services", - class { - async getRepositories() { - return [ - { - name: "name_0", - owner: "owner_0", - last_updated: "last_updated_0", - times_downloaded: "times_downloaded_0", - }, - { - name: "name_1", - owner: "owner_1", - last_updated: "last_updated_1", - times_downloaded: "times_downloaded_1", - }, - ]; - } - } - ); - }); + const localVue = createLocalVue(); it("test repository details loading", async () => { const wrapper = mount(Repositories, { @@ -35,10 +37,11 @@ describe("Repositories", () => { scrolled: false, toolshedUrl: "toolshedUrl", }, + localVue, }); // Test initial state prior to the data fetch tick -- should be loading. expect(wrapper.find(".loading-message").text()).toBe("Loading repositories..."); - await Vue.nextTick(); + await localVue.nextTick(); const links = wrapper.findAll("a"); expect(links.length).toBe(2); expect(links.at(0).text()).toBe("name_0"); @@ -46,7 +49,7 @@ describe("Repositories", () => { // Reset repositories and state to test empty. wrapper.vm.repositories = []; wrapper.vm.pageState = 2; // COMPLETE is '2' - await Vue.nextTick(); + await localVue.nextTick(); expect(wrapper.find(".unavailable-message").text()).toBe("No matching repositories found."); }); }); diff --git a/client/src/components/User/CloudAuth/CloudAuth.test.js b/client/src/components/User/CloudAuth/CloudAuth.test.js index a4230fa476e..85753d43875 100644 --- a/client/src/components/User/CloudAuth/CloudAuth.test.js +++ b/client/src/components/User/CloudAuth/CloudAuth.test.js @@ -7,8 +7,6 @@ import CloudAuthItem from "./CloudAuthItem"; import _l from "utils/localization"; import BootstrapVue from "bootstrap-vue"; -import { getNewAttachNode } from "jest/helpers"; - jest.mock("./model/service", () => ({ listCredentials: async () => { const listCredentials = require("./testdata/listCredentials.json"); @@ -25,7 +23,7 @@ describe("CloudAuth component", () => { let wrapper; beforeEach(async () => { - wrapper = shallowMount(CloudAuth, { localVue, attachTo: getNewAttachNode() }); + wrapper = shallowMount(CloudAuth, { localVue }); await flushPromises(); }); diff --git a/client/src/components/Workflow/Editor/Attributes.test.js b/client/src/components/Workflow/Editor/Attributes.test.js index 6f5cca2f5d5..c7f989c50e0 100644 --- a/client/src/components/Workflow/Editor/Attributes.test.js +++ b/client/src/components/Workflow/Editor/Attributes.test.js @@ -1,20 +1,22 @@ -import Vue from "vue"; -import { mount } from "@vue/test-utils"; +import { mount, createLocalVue } from "@vue/test-utils"; import Attributes from "./Attributes"; -import { __RewireAPI__ as rewire } from "./Attributes"; + +jest.mock("app"); + +import { Services } from "../services"; +jest.mock("../services"); + +Services.mockImplementation(() => { + return { + async updateWorkflow() { + return {}; + }, + }; +}); describe("Attributes", () => { - beforeEach(() => { - rewire.__Rewire__( - "Services", - class { - async updateWorkflow() { - return {}; - } - } - ); - }); it("test attributes", async () => { + const localVue = createLocalVue(); const wrapper = mount(Attributes, { propsData: { id: "workflow_id", @@ -26,11 +28,12 @@ describe("Attributes", () => { stubs: { LicenseSelector: true, }, + localVue, }); const name = wrapper.find("#workflow-name"); expect(name.element.value).toBe("workflow_name"); wrapper.setProps({ name: "new_workflow_name" }); - await Vue.nextTick(); + await localVue.nextTick(); expect(name.element.value).toBe("new_workflow_name"); const parameters = wrapper.findAll(".list-group-item"); expect(parameters.length).toBe(2); diff --git a/client/src/components/Workflow/Editor/Node.test.js b/client/src/components/Workflow/Editor/Node.test.js index ad0bfb637ee..18edb90e32c 100644 --- a/client/src/components/Workflow/Editor/Node.test.js +++ b/client/src/components/Workflow/Editor/Node.test.js @@ -1,6 +1,5 @@ import { mount } from "@vue/test-utils"; import Node from "./Node"; -import { getNewAttachNode } from "jest/helpers"; import flushPromises from "flush-promises"; jest.mock("app"); @@ -16,7 +15,6 @@ describe("Node", () => { getManager: () => {}, getCanvasManager: () => {}, }, - attachTo: getNewAttachNode(), }); await flushPromises(); const icon = wrapper.findAll("i"); diff --git a/client/src/components/Workflow/Editor/ZoomControl.test.js b/client/src/components/Workflow/Editor/ZoomControl.test.js index 9ba6e18af5e..bbd52df00ad 100644 --- a/client/src/components/Workflow/Editor/ZoomControl.test.js +++ b/client/src/components/Workflow/Editor/ZoomControl.test.js @@ -1,26 +1,26 @@ -import Vue from "vue"; -import { mount } from "@vue/test-utils"; +import { mount, createLocalVue } from "@vue/test-utils"; import ZoomControl from "./ZoomControl"; -import { getNewAttachNode } from "jest/helpers"; + +jest.mock("app"); describe("ZoomControl", () => { it("test zoom control", async () => { + const localVue = createLocalVue(); const wrapper = mount(ZoomControl, { propsData: { zoomLevel: 10, }, - attachTo: getNewAttachNode(), }); const buttons = wrapper.findAll("button"); expect(buttons.length).toBe(3); buttons.at(0).trigger("click"); - await Vue.nextTick(); + await localVue.nextTick(); expect(wrapper.emitted().onZoom[0][0]).toBe(9); buttons.at(1).trigger("click"); - await Vue.nextTick(); + await localVue.nextTick(); expect(wrapper.emitted().onZoom[1][0]).toBe(10); buttons.at(2).trigger("click"); - await Vue.nextTick(); + await localVue.nextTick(); expect(wrapper.emitted().onZoom[2][0]).toBe(11); }); }); diff --git a/client/src/components/admin/BaseList.test.js b/client/src/components/admin/BaseList.test.js index 843258d2eed..bf1a7344e01 100644 --- a/client/src/components/admin/BaseList.test.js +++ b/client/src/components/admin/BaseList.test.js @@ -1,6 +1,5 @@ import { mount } from "@vue/test-utils"; import BaseList from "./BaseList"; -import Vue from "vue"; describe("Categories", () => { const getter = async () => { @@ -32,7 +31,7 @@ describe("Categories", () => { setter: setter, }, }); - await Vue.nextTick(); + await wrapper.vm.$nextTick(); expect(wrapper.find(".card-header").text()).toContain("There are 2"); const th = wrapper.findAll("th"); expect(th.length).toBe(3); diff --git a/client/tests/karma/webpack.config.unittest.js b/client/tests/karma/webpack.config.unittest.js index aadbeaf0ed3..52754d262bc 100644 --- a/client/tests/karma/webpack.config.unittest.js +++ b/client/tests/karma/webpack.config.unittest.js @@ -31,18 +31,12 @@ module.exports = (env, argv) => { wpConfig.module = merge.smart(wpConfig.module, ignoreAssetLoaders); - // Using babel-plugin-rewire to handle dependency mocking since webpack 4 - // exports immutable bindings for ES modules but we still need a way to - // overwrite dependencies during unit-testing. - // - // Additionally, set exclude for babel-loader to completely ignore *all* - // node-modules, without our exceptions to support IE as in parent webpack - // config. + // Set exclude for babel-loader to completely ignore *all* node-modules, + // without our exceptions to support IE as in parent webpack config. wpConfig.module.rules = wpConfig.module.rules.map((rule) => { if (rule.loader == "babel-loader") { rule.exclude = [/(node_modules\/)/]; - rule.options.plugins.push("rewire"); } return rule; }); diff --git a/client/yarn.lock b/client/yarn.lock index da62986c06d..3f4cee02ebd 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -3041,11 +3041,6 @@ babel-plugin-jest-hoist@^26.2.0: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-rewire@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/babel-plugin-rewire/-/babel-plugin-rewire-1.2.0.tgz#822562d72ed2c84e47c0f95ee232c920853e9d89" - integrity sha512-JBZxczHw3tScS+djy6JPLMjblchGhLI89ep15H3SyjujIzlxo5nr6Yjo7AXotdeVczeBmWs0tF8PgJWDdgzAkQ== - babel-plugin-transform-es2015-modules-commonjs@^6.26.0: version "6.26.2" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"