Adjust jest tests

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();
-    });
 });

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();
 });
 </script>
 
@@ -101,6 +85,7 @@ onMounted(() => {
         </BNavbarNav>
         <BNavbarNav v-if="isConfigLoaded" class="mr-1">
             <MastheadItem id="analysis" tooltip="Tools, Workflows and Histories" icon="fa-home" @click="openUrl('/')" />
+            <MastheadItem id="library" icon="fa-database" tooltip="Data Libraries" @click="openUrl('/libraries')" />
             <MastheadItem
                 v-if="windowTab"
                 :id="windowTab.id"
@@ -118,7 +103,7 @@ onMounted(() => {
                 :url="tab.url"
                 :tooltip="tab.tooltip"
                 :target="tab.target"
-                @click="tab.onclick" />
+                @click="tab.onclick ? tab.onclick : undefined" />
             <MastheadItem
                 id="help"
                 icon="fa-question"
@@ -127,16 +112,19 @@ onMounted(() => {
             <QuotaMeter />
             <MastheadItem
                 v-if="isAnonymous && config.allow_user_creation"
+                class="loggedout-only"
                 id="user"
                 title="Login or Register"
                 @click="openUrl('/login/start')" />
             <MastheadItem
                 v-if="isAnonymous && !config.allow_user_creation"
+                class="loggedout-only"
                 id="user"
                 title="Login"
                 @click="openUrl('/login/start')" />
             <MastheadItem
                 v-if="!isAnonymous && !config.single_user"
+                class="loggedin-only"
                 id="user"
                 icon="fa-sign-out-alt"
                 tooltip="Logout"

client/src/components/Masthead/MastheadItem.test.js

@@ -1,40 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-
-import MastheadItem from "./MastheadItem.vue";
-
-describe("MastheadItem.vue", () => {
-    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);
-    });
-});

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'