Skip to content

Commit

Permalink
add jest for ToolPanel to test changing views
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmedhamidawan committed Nov 14, 2023
1 parent c7670e8 commit 4e24d56
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 1 deletion.
100 changes: 100 additions & 0 deletions client/src/components/Panels/ToolPanel.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import "jest-location-mock";

import { mount } from "@vue/test-utils";
import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import toolsList from "components/ToolsView/testData/toolsList";
import toolsListInPanel from "components/ToolsView/testData/toolsListInPanel";
import flushPromises from "flush-promises";
import { createPinia } from "pinia";
import { getLocalVue } from "tests/jest/helpers";

import { useConfig } from "@/composables/config";

import viewsList from "./testData/viewsList";
import ToolPanel from "./ToolPanel";
import { types_to_icons } from "./utilities";

const localVue = getLocalVue();

const TEST_PANELS_URI = "/api/tool_panels";

jest.mock("composables/config");
useConfig.mockReturnValue({
config: {},
isConfigLoaded: true,
});

describe("ToolPanel", () => {
it("test navigation of tool panel views menu", async () => {
const axiosMock = new MockAdapter(axios);
axiosMock
.onGet(/\/api\/tool_panels\/.*/)
.reply(200, toolsListInPanel)
.onGet(`/api/tools?in_panel=False`)
.replyOnce(200, toolsList)
.onGet(TEST_PANELS_URI)
.reply(200, { default_panel_view: "default", views: viewsList });

const pinia = createPinia();
const wrapper = mount(ToolPanel, {
propsData: {
workflow: false,
editorWorkflows: null,
dataManagers: null,
moduleSections: null,
},
localVue,
stubs: {
icon: { template: "<div></div>" },
ToolBox: true,
},
pinia,
});

await flushPromises();

// there is a panel view selector initially collapsed
expect(wrapper.find(".panel-view-selector").exists()).toBe(true);
expect(wrapper.find(".dropdown-menu.show").exists()).toBe(false);

// Test: starts up with a default panel view, click to open menu
expect(wrapper.find("#toolbox-heading").text()).toBe("Tools");
await wrapper.find("#toolbox-heading").trigger("click");
await flushPromises();

const dropdownMenu = wrapper.find(".dropdown-menu.show");
expect(dropdownMenu.exists()).toBe(true);

// Test: check if the dropdown menu has all the panel views
const dropdownItems = dropdownMenu.findAll(".dropdown-item");
expect(dropdownItems.length).toEqual(Object.keys(viewsList).length);

// Test: click on each panel view, and check if the panel view is changed
for (const [key, value] of Object.entries(viewsList)) {
// find dropdown item
const currItem = dropdownMenu.find(`[data-panel-id='${key}']`);
if (key !== "default") {
// Test: check if the panel view has appropriate description
const description = currItem.attributes().title || null;
expect(description).toBe(value.description);

// set current panel view
await currItem.trigger("click");
await flushPromises();

// Test: check if the current panel view is selected now
expect(currItem.find(".fa-check").exists()).toBe(true);

// Test: check if the panel header now has an icon and a changed name
const panelViewIcon = wrapper.find("[data-description='panel view header icon']");
expect(panelViewIcon.classes()).toContain(`fa-${types_to_icons[value.view_type]}`);
expect(wrapper.find("#toolbox-heading").text()).toBe(value.name);
} else {
// Test: check if the default panel view is already selected, and no icon
expect(currItem.find(".fa-check").exists()).toBe(true);
expect(wrapper.find("[data-description='panel view header icon']").exists()).toBe(false);
}
}
});
});
5 changes: 4 additions & 1 deletion client/src/components/Panels/ToolPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,10 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
<template v-slot:panel-view-selector>
<div class="d-flex justify-content-between panel-view-selector">
<div>
<span v-if="viewIcon" :class="['fas', `fa-${viewIcon}`, 'mr-1']" />
<span
v-if="viewIcon"
:class="['fas', `fa-${viewIcon}`, 'mr-1']"
data-description="panel view header icon" />
<Heading
id="toolbox-heading"
:class="!showAdvanced && toolPanelHeader !== 'Tools' && 'font-italic'"
Expand Down
74 changes: 74 additions & 0 deletions client/src/components/Panels/testData/viewsList.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
{
"default": {
"id": "default",
"model_class": "type",
"name": "Full Tool Panel",
"description": "Galaxy's fully configured toolbox panel with all sections, tools, and configured workflows loaded.",
"view_type": "default",
"searchable": true
},
"ontology:edam_operations": {
"id": "ontology:edam_operations",
"model_class": "EdamToolPanelView",
"name": "EDAM Operations",
"description": "Tools are grouped using annotated EDAM operation information (if available).",
"view_type": "ontology",
"searchable": true
},
"ontology:edam_topics": {
"id": "ontology:edam_topics",
"model_class": "EdamToolPanelView",
"name": "EDAM Topics",
"description": "Tools are grouped using annotated EDAM topic information (if available).",
"view_type": "ontology",
"searchable": true
},
"activity_1": {
"id": "activity_1",
"model_class": "StaticToolPanelView",
"name": "Globally Applied Filters",
"description": null,
"view_type": "activity",
"searchable": true
},
"generic_1": {
"id": "generic_1",
"model_class": "StaticToolPanelView",
"name": "Custom Panel in a New Section",
"description": null,
"view_type": "generic",
"searchable": true
},
"activity_2": {
"id": "activity_2",
"model_class": "StaticToolPanelView",
"name": "Filtering Tools",
"description": null,
"view_type": "activity",
"searchable": true
},
"publication_1": {
"id": "publication_1",
"model_class": "StaticToolPanelView",
"name": "Merged Section Example",
"description": null,
"view_type": "publication",
"searchable": true
},
"training_1": {
"id": "training_1",
"model_class": "StaticToolPanelView",
"name": "Filtered Test Section",
"description": null,
"view_type": "training",
"searchable": true
},
"generic_2": {
"id": "generic_2",
"model_class": "StaticToolPanelView",
"name": "Merged Section Example",
"description": null,
"view_type": "generic",
"searchable": true
}
}

0 comments on commit 4e24d56

Please sign in to comment.