Update NavBarMobile component and refactor tests

Author: davinotdavid

frontend/src/components/NavBarMobile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { inject, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUserStore } from '@/stores/user-store';
 import {
@@ -15,6 +15,7 @@ import {
   PhUserSquare,
 } from '@phosphor-icons/vue';
 import { PrimaryButton, UserAvatar } from '@thunderbirdops/services-ui';
+import { accountsTbProfileUrlKey } from '@/keys';
 
 // component constants
 const userStore = useUserStore();
@@ -27,6 +28,8 @@ const navItems = [
   { route: 'settings', i18nKey: 'settings', icon: PhGear },
 ];
 
+const accountsTbProfileUrl = inject(accountsTbProfileUrlKey);
+
 const menuOpen = ref(false);
 const myLinkTooltip = ref(t('navBar.shareMyLink'));
 
@@ -102,12 +105,12 @@ async function copyLink() {
           </summary>
 
           <ul @click="onMenuClose">
-            <router-link to="profile">
+            <a :href="accountsTbProfileUrl">
               <li>
                 <ph-user-square size="24" />
                 {{ t('label.userProfile') }}
               </li>
-            </router-link>
+            </a>
             <router-link to="report-bug">
               <li>
                 <ph-arrow-square-out size="24" />

frontend/test/components/NavBar.test.js

@@ -7,11 +7,13 @@ import withSetup from '../utils/with-setup';
 import { useUserStore } from '@/stores/user-store';
 import { RouterLink } from 'vue-router';
 import NavBar from '@/components/NavBar.vue';
+import { accountsTbProfileUrlKey } from '@/keys';
 
 
 describe('NavBar', () => {
   var app;
   var wrapper;
+  const testAccountsTbProfileUrl = 'https://accounts.tb.pro/dashboard';
 
   // list of route names that are also lang keys (format: label.<key>), used as nav items
   // these routes are added in addition to the routes already specified in NavBar.vue
@@ -23,6 +25,16 @@ describe('NavBar', () => {
     navItems: navItems,
   };
 
+  const getMountOptions = () => ({
+    propsData: ourProps,
+    global: {
+      plugins: [i18ninstance, router],
+      provide: {
+        [accountsTbProfileUrlKey]: testAccountsTbProfileUrl,
+      },
+    },
+  });
+
   beforeEach(() => {
     app = withSetup();
     app.use(createTestingPinia());
@@ -33,12 +45,7 @@ describe('NavBar', () => {
   });
 
   it('renders correctly when not logged in', () => {
-    wrapper = mount(NavBar, {
-      propsData: ourProps,
-      global: {
-        plugins: [i18ninstance, router],
-      },
-    });
+    wrapper = mount(NavBar, getMountOptions());
 
     // verify all expected router-link child components were rendered (only one when not signed in)
     const allRouterLinks = wrapper.findAllComponents(RouterLink);
@@ -56,26 +63,25 @@ describe('NavBar', () => {
     user.data.accessToken = 'abc';
     expect(user.authenticated).toBe(true);
 
-    wrapper = mount(NavBar, {
-      propsData: ourProps,
-      global: {
-        plugins: [i18ninstance, router],
-      },
-    });
+    wrapper = mount(NavBar, getMountOptions());
 
     // verify all expected router-link child components were rendered when signed in
     const allRouterLinks = wrapper.findAllComponents(RouterLink);
     var foundLinks = [];
     for (let link of allRouterLinks) {
       foundLinks.push(link.props().to.name);
     }
-    // we expect the routes we sent in above in ourProps navItems as well as the other routes in
-    // NavBar.vue that appear when the user is signed in
-    const expRoutes = navItems.concat(['dashboard', 'profile', 'report-bug', 'contact', 'logout']);
+    // we expect the routes we sent in above in ourProps navItems as well as the dashboard route
+    // from the logo link
+    const expRoutes = navItems.concat(['dashboard']);
     expect(foundLinks.length).toBe(expRoutes.length);
     for (let expRoute of expRoutes) {
       expect(foundLinks, 'expected link component to be rendered').toContain(expRoute);
     }
+
+    // verify the anchor tag to accountsTbProfileUrl exists and has the correct href
+    const profileAnchor = wrapper.find('a[href="' + testAccountsTbProfileUrl + '"]');
+    expect(profileAnchor.exists(), 'expected anchor tag to accountsTbProfileUrl to be rendered').toBe(true);
   });
 
   it('able to click the copy link button', async () => {
@@ -94,12 +100,7 @@ describe('NavBar', () => {
     user.myLink = 'https://stage.apt.mt/fakeuser/6e16a160/';
     expect(user.authenticated).toBe(true);
 
-    wrapper = mount(NavBar, {
-      propsData: ourProps,
-      global: {
-        plugins: [i18ninstance, router],
-      },
-    });
+    wrapper = mount(NavBar, getMountOptions());
 
     // now click the copy link button and verify the link was written to the clipboard
     const copyLinkBtn = wrapper.find('.nav-copy-link-button');

frontend/test/components/NavBarMobile.test.js

@@ -7,11 +7,22 @@ import withSetup from '../utils/with-setup';
 import { useUserStore } from '@/stores/user-store';
 import { RouterLink } from 'vue-router';
 import NavBarMobile from '@/components/NavBarMobile.vue';
+import { accountsTbProfileUrlKey } from '@/keys';
 
 
 describe('NavBarMobile', () => {
   var app;
   var wrapper;
+  const testAccountsTbProfileUrl = 'https://accounts.tb.pro/dashboard';
+
+  const getMountOptions = () => ({
+    global: {
+      plugins: [i18ninstance, router],
+      provide: {
+        [accountsTbProfileUrlKey]: testAccountsTbProfileUrl,
+      },
+    },
+  });
 
   beforeEach(() => {
     app = withSetup();
@@ -23,11 +34,7 @@ describe('NavBarMobile', () => {
   });
 
   it('renders correctly when not logged in', () => {
-    wrapper = mount(NavBarMobile, {
-      global: {
-        plugins: [i18ninstance, router],
-      },
-    });
+    wrapper = mount(NavBarMobile, getMountOptions());
 
     // verify all expected router-link child components were rendered (only one when not signed in)
     const allRouterLinks = wrapper.findAllComponents(RouterLink);
@@ -45,11 +52,7 @@ describe('NavBarMobile', () => {
     user.data.accessToken = 'abc';
     expect(user.authenticated).toBe(true);
 
-    wrapper = mount(NavBarMobile, {
-      global: {
-        plugins: [i18ninstance, router],
-      },
-    });
+    wrapper = mount(NavBarMobile, getMountOptions());
 
     // verify all expected router-link child components were rendered (only one when menu is closed)
     const allRouterLinks = wrapper.findAllComponents(RouterLink);
@@ -67,24 +70,19 @@ describe('NavBarMobile', () => {
     user.data.accessToken = 'abc';
     expect(user.authenticated).toBe(true);
 
-    wrapper = mount(NavBarMobile, {
-      global: {
-        plugins: [i18ninstance, router],
-      },
-    });
+    wrapper = mount(NavBarMobile, getMountOptions());
 
     // click to open/show the menu
     const menuButton = wrapper.find('button[aria-label="Open menu"]');
     await menuButton.trigger('click');
 
     // verify all expected router-link child components were rendered when signed in and menu is now shown
     const expectedLinks = [
-      'dashboard', // there are two dashboard rounter-link child components
+      'dashboard', // there are two dashboard router-link child components
       'dashboard',
       'bookings',
       'availability',
       'settings',
-      'profile',
       'report-bug',
       'contact',
       'logout'
@@ -103,6 +101,10 @@ describe('NavBarMobile', () => {
     for (let expLink of expectedLinks) {
       expect(foundLinks, 'expected link component to be rendered').toContain(expLink);
     }
+
+    // verify the anchor tag to accountsTbProfileUrl exists and has the correct href
+    const profileAnchor = wrapper.find('a[href="' + testAccountsTbProfileUrl + '"]');
+    expect(profileAnchor.exists(), 'expected anchor tag to accountsTbProfileUrl to be rendered').toBe(true);
   });
 
   it('able to click the copy link button', async () => {
@@ -121,11 +123,7 @@ describe('NavBarMobile', () => {
     user.myLink = 'https://stage.apt.mt/fakeuser/6e16a160/';
     expect(user.authenticated).toBe(true);
 
-    wrapper = mount(NavBarMobile, {
-      global: {
-        plugins: [i18ninstance, router],
-      },
-    });
+    wrapper = mount(NavBarMobile, getMountOptions());
 
     // need to open the menu in order to access the copy link option
     const menuButton = wrapper.find('button[aria-label="Open menu"]');