From 638d361bd4f117131948c4379f93099b125ccb73 Mon Sep 17 00:00:00 2001 From: guerler Date: Thu, 23 May 2024 09:40:25 +0300 Subject: [PATCH] Adjust jest tests --- .../src/components/Masthead/Masthead.test.js | 86 ++----------------- client/src/components/Masthead/Masthead.vue | 26 ++---- .../components/Masthead/MastheadItem.test.js | 40 --------- client/src/utils/navigation/navigation.yml | 2 +- 4 files changed, 13 insertions(+), 141 deletions(-) delete mode 100644 client/src/components/Masthead/MastheadItem.test.js diff --git a/client/src/components/Masthead/Masthead.test.js b/client/src/components/Masthead/Masthead.test.js index 58a7a88137fa..aa3923de8ccd 100644 --- a/client/src/components/Masthead/Masthead.test.js +++ b/client/src/components/Masthead/Masthead.test.js @@ -1,21 +1,20 @@ import { createTestingPinia } from "@pinia/testing"; import { mount } from "@vue/test-utils"; import { WindowManager } from "layout/window-manager"; -import { PiniaVuePlugin, setActivePinia } from "pinia"; -import { useEntryPointStore } from "stores/entryPointStore"; +import { PiniaVuePlugin } from "pinia"; import { getLocalVue } from "tests/jest/helpers"; import { mockFetcher } from "@/api/schema/__mocks__"; import { loadWebhookMenuItems } from "./_webhooks"; -import { getActiveTab } from "./utilities"; -import { default as Masthead } from "./Masthead.vue"; +import Masthead from "./Masthead.vue"; jest.mock("app"); jest.mock("./_webhooks"); jest.mock("vue-router/composables", () => ({ useRoute: jest.fn(() => ({ name: "Home" })), + useRouter: jest.fn(), })); jest.mock("@/api/schema"); @@ -23,14 +22,12 @@ describe("Masthead.vue", () => { let wrapper; let localVue; let windowManager; - let tabs; let testPinia; function stubLoadWebhooks(items) { items.push({ id: "extension", title: "Extension Point", - menu: false, url: "extension_url", }); } @@ -43,75 +40,22 @@ describe("Masthead.vue", () => { testPinia = createTestingPinia(); mockFetcher.path("/api/configuration").method("get").mock({ data: {} }); - tabs = [ - // Main Analysis Tab.. - { - id: "analysis", - title: "Analyze", - menu: false, - url: "root", - }, - { - id: "shared", - title: "Shared Items", - menu: [{ title: "_menu_title", url: "_menu_url", target: "_menu_target" }], - }, - // Hidden tab (pre-Vue framework supported this, not sure it is used - // anywhere?) - { - id: "hiddentab", - title: "Hidden Title", - menu: false, - hidden: true, - }, - ]; - - const initialActiveTab = "shared"; windowManager = new WindowManager({}); const windowTab = windowManager.getTab(); wrapper = mount(Masthead, { propsData: { - tabs, windowTab, - initialActiveTab, }, localVue, pinia: testPinia, }); }); - it("test basic active tab matching", () => { - expect(getActiveTab("root", tabs)).toBe("analysis"); - expect(getActiveTab("_menu_url", tabs)).toBe("shared"); - }); - it("should render simple tab item links", () => { expect(wrapper.findAll("li.nav-item").length).toBe(6); // Ensure specified link title respected. - expect(wrapper.find("#analysis a").text()).toBe("Analyze"); - expect(wrapper.find("#analysis a").attributes("href")).toBe("root"); - }); - - it("should render tab items with menus", () => { - // Ensure specified link title respected. - expect(wrapper.find("#shared a").text()).toBe("Shared Items"); - expect(wrapper.find("#shared").classes("dropdown")).toBe(true); - - expect(wrapper.findAll("#shared .dropdown-menu li").length).toBe(1); - expect(wrapper.find("#shared .dropdown-menu li a").attributes().href).toBe("_menu_url"); - expect(wrapper.find("#shared .dropdown-menu li a").attributes().target).toBe("_menu_target"); - expect(wrapper.find("#shared .dropdown-menu li a").text()).toBe("_menu_title"); - }); - - it("should make hidden tabs hidden", () => { - expect(wrapper.find("#analysis").attributes().style).not.toEqual(expect.stringContaining("display: none")); - expect(wrapper.find("#hiddentab").attributes().style).toEqual(expect.stringContaining("display: none")); - expect(wrapper.get("#interactive").isVisible()).toBeFalsy(); - }); - - it("should highlight the active tab", () => { - expect(wrapper.find("#analysis").classes("active")).toBe(false); - expect(wrapper.find("#shared").classes("active")).toBe(true); + expect(wrapper.find("#analysis a").text()).toBe("Tools, Workflows and Histories"); + expect(wrapper.find("#analysis a").attributes("href")).toBe("#"); }); it("should display window manager button", async () => { @@ -124,24 +68,4 @@ describe("Masthead.vue", () => { it("should load webhooks on creation", async () => { expect(wrapper.find("#extension a").text()).toBe("Extension Point"); }); - - it("shows link to interactive tools if any is active", async () => { - setActivePinia(testPinia); - const entryPointStore = useEntryPointStore(); - entryPointStore.entryPoints = [ - { - model_class: "InteractiveToolEntryPoint", - id: "52e496b945151ee8", - job_id: "52e496b945151ee8", - name: "Jupyter Interactive Tool", - active: true, - created_time: "2020-02-24T15:59:18.122103", - modified_time: "2020-02-24T15:59:20.428594", - target: "http://52e496b945151ee8-be8a5bee5d5849a5b4e035b51305256e.interactivetoolentrypoint.interactivetool.localhost:8080/ipython/lab", - }, - ]; - // avoid race condition with store's reactivity - await new Promise((_) => setTimeout(_, 10)); - expect(wrapper.get("#interactive").isVisible()).toBeTruthy(); - }); }); diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue index 667bebfb6c55..7980e8904c88 100644 --- a/client/src/components/Masthead/Masthead.vue +++ b/client/src/components/Masthead/Masthead.vue @@ -3,8 +3,8 @@ import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue"; import { storeToRefs } from "pinia"; import { userLogout } from "utils/logout"; import { withPrefix } from "utils/redirect"; -import { onMounted, ref, watch } from "vue"; -import { useRoute, useRouter } from "vue-router/composables"; +import { onMounted, ref } from "vue"; +import { useRouter } from "vue-router/composables"; import { useConfig } from "@/composables/config"; import { useUserStore } from "@/stores/userStore"; @@ -12,11 +12,9 @@ import { useUserStore } from "@/stores/userStore"; import { loadWebhookMenuItems } from "./_webhooks"; import MastheadItem from "./MastheadItem"; import QuotaMeter from "./QuotaMeter"; -import { getActiveTab } from "./utilities"; const { isAnonymous } = storeToRefs(useUserStore()); -const route = useRoute(); const router = useRouter(); const { config, isConfigLoaded } = useConfig(); @@ -43,15 +41,9 @@ const props = defineProps({ }, }); -const activeTab = ref(props.initialActiveTab); const extensionTabs = ref([]); const windowToggle = ref(false); -function setActiveTab() { - const currentRoute = route.path; - activeTab.value = getActiveTab(currentRoute, props.tabs) || activeTab.value; -} - function openUrl(url, target = null) { if (!target) { router.push(url); @@ -70,16 +62,8 @@ function onWindowToggle() { props.windowTab.onclick(); } -watch( - () => route.path, - () => { - setActiveTab(); - } -); - onMounted(() => { loadWebhookMenuItems(extensionTabs.value); - setActiveTab(); }); @@ -101,6 +85,7 @@ onMounted(() => { + { :url="tab.url" :tooltip="tab.tooltip" :target="tab.target" - @click="tab.onclick" /> + @click="tab.onclick ? tab.onclick : undefined" /> { { - let wrapper; - let localVue; - - beforeEach(() => { - localVue = getLocalVue(); - }); - - function m(active, menu) { - const tab = { - id: "mytab", - menu: menu, - }; - - return mount(MastheadItem, { - propsData: { - tab, - activeTab: active, - }, - localVue, - }); - } - - it("should render active tab with menus", async () => { - wrapper = m("mytab", true); - expect(wrapper.classes("active")).toBe(true); - expect(wrapper.classes("b-nav-dropdown")).toBe(true); - }); - - it("should render inactive tabs without menus", async () => { - wrapper = m("othertab", false); - expect(wrapper.classes("active")).toBe(false); - expect(wrapper.classes("b-nav-dropdown")).toBe(false); - }); -}); diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml index 7ff2b7b344e7..ecf3047a9c01 100644 --- a/client/src/utils/navigation/navigation.yml +++ b/client/src/utils/navigation/navigation.yml @@ -39,7 +39,7 @@ masthead: _: '#masthead' # bootstrap-vue a tag doesn't work as link target, need to hit span inside - user: '#user.loggedin-only > a.nav-link.dropdown-toggle > span' + user: '#user.loggedin-only > a.nav-link > span' register_or_login: '#user.loggedout-only > .nav-link' user_menu: '#user .dropdown-menu a'