fix: menu links for details page and tests (#160)

Co-authored-by: gromdimon <[email protected]>

frontend/src/components/HeaderDefault.vue

@@ -20,22 +20,22 @@ import UserProfileButton from '@/components/UserProfileButton.vue'
     <v-spacer></v-spacer>
     <v-toolbar-items class="topbar-links">
       <UserProfileButton />
-      <v-menu>
+      <v-menu id="menu">
         <template v-slot:activator="{ props }">
           <v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
         </template>
 
         <v-list>
-          <v-list-item to="/about">
+          <v-list-item to="/about" id="about">
             <v-list-item-title> About </v-list-item-title>
           </v-list-item>
-          <v-list-item to="/contact">
+          <v-list-item to="/contact" id="contact">
             <v-list-item-title> Contact </v-list-item-title>
           </v-list-item>
-          <v-list-item to="/privacy">
+          <v-list-item to="/privacy" id="privacy">
             <v-list-item-title> Privacy Policy </v-list-item-title>
           </v-list-item>
-          <v-list-item to="/terms">
+          <v-list-item to="/terms" id="terms">
             <v-list-item-title> Terms of Use </v-list-item-title>
           </v-list-item>
         </v-list>

frontend/src/components/HeaderDetailPage.vue

@@ -64,9 +64,27 @@ watch(() => props.searchTerm, updateTerms)
     />
     <v-spacer></v-spacer>
     <v-toolbar-items class="topbar-links">
-      <v-btn id="about" to="/about"> About </v-btn>
-      <v-btn id="contact" to="/contact"> Contact </v-btn>
       <UserProfileButton />
+      <v-menu id="menu">
+        <template v-slot:activator="{ props }">
+          <v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
+        </template>
+
+        <v-list>
+          <v-list-item to="/about" id="about">
+            <v-list-item-title> About </v-list-item-title>
+          </v-list-item>
+          <v-list-item to="/contact" id="contact">
+            <v-list-item-title> Contact </v-list-item-title>
+          </v-list-item>
+          <v-list-item to="/privacy" id="privacy">
+            <v-list-item-title> Privacy Policy </v-list-item-title>
+          </v-list-item>
+          <v-list-item to="/terms" id="terms">
+            <v-list-item-title> Terms of Use </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </v-toolbar-items>
   </v-app-bar>
 </template>

frontend/src/components/__tests__/HeaderDefault.spec.ts

@@ -1,4 +1,6 @@
 import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import { VMenu } from 'vuetify/components'
 
 import { setupMountedComponents } from '@/lib/test-utils'
 
@@ -23,7 +25,7 @@ describe.concurrent('HeaderDefault.vue', () => {
     expect(title.text()).toBe('REEV: Explanation and Evaluation of Variants')
   })
 
-  it('renders the navigation links', () => {
+  it('renders the navigation links', async () => {
     const { wrapper } = setupMountedComponents(
       { component: HeaderDefault, template: true },
       {
@@ -35,9 +37,9 @@ describe.concurrent('HeaderDefault.vue', () => {
       }
     )
 
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    const menu = wrapper.findComponent(VMenu)
+    expect(menu.exists()).toBe(true)
+    await menu.trigger('click')
+    await nextTick()
   })
 })

frontend/src/components/__tests__/HeaderDetailPage.spec.ts

@@ -1,5 +1,6 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { VMenu } from 'vuetify/components'
 
 import { DottyClient } from '@/api/dotty'
 import SearchBar from '@/components/SearchBar.vue'
@@ -40,11 +41,9 @@ describe.concurrent('HeaderDetailPage', async () => {
     store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('renders the search bar', async () => {

frontend/src/views/__tests__/ACMGCriteriaDoc.spec.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { VMenu } from 'vuetify/components'
 
 import { setupMountedComponents } from '@/lib/test-utils'
 
@@ -18,11 +19,9 @@ describe.concurrent('ACMGCriteriaDocs', async () => {
     )
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('renders the main content', () => {

frontend/src/views/__tests__/ACMGSVDocs.spec.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { VMenu } from 'vuetify/components'
 
 import { setupMountedComponents } from '@/lib/test-utils'
 
@@ -18,11 +19,9 @@ describe.concurrent('ACMGSVDocs', async () => {
     )
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('renders the main content', () => {

frontend/src/views/__tests__/AboutView.spec.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { VMenu } from 'vuetify/components'
 
 import { setupMountedComponents } from '@/lib/test-utils'
 
@@ -18,11 +19,9 @@ describe.concurrent('AboutView', async () => {
     )
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('renders the main content', () => {

frontend/src/views/__tests__/ContactView.spec.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { VMenu } from 'vuetify/components'
 
 import { setupMountedComponents } from '@/lib/test-utils'
 
@@ -18,11 +19,9 @@ describe.concurrent('ContactView', async () => {
     )
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('renders the main content', () => {

frontend/src/views/__tests__/GeneDetailView.spec.ts

@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { VMenu } from 'vuetify/components'
 
 import * as BRCA1geneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
@@ -55,11 +56,9 @@ describe.concurrent('GeneDetailView', async () => {
     expect(searchBar.exists()).toBe(true)
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
 
     const launchImage = wrapper.findAll('.mdi-launch')
     expect(launchImage.length).toBe(14)
@@ -74,11 +73,9 @@ describe.concurrent('GeneDetailView', async () => {
     expect(searchBar.exists()).toBe(true)
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('renders info-cards and navigation drawer', () => {

frontend/src/views/__tests__/GenesListView.spec.ts

@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { VMenu } from 'vuetify/components'
 
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
 import SearchBar from '@/components/SearchBar.vue'
@@ -68,11 +69,9 @@ describe.concurrent('GenesListView', async () => {
     expect(searchBar.exists()).toBe(true)
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('renders the search results', async () => {

frontend/src/views/__tests__/HomeView.spec.ts

@@ -1,5 +1,6 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { VMenu } from 'vuetify/components'
 
 import { DottyClient } from '@/api/dotty'
 import FooterDefault from '@/components/FooterDefault.vue'
@@ -50,11 +51,9 @@ describe.concurrent('HomeView with mocked router', async () => {
     expect(footer.exists()).toBe(true)
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('renders the search bar', () => {

frontend/src/views/__tests__/VariantDetailView.spec.ts

@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { VMenu } from 'vuetify/components'
 
 import * as BRCA1ClinVar from '@/assets/__tests__/BRCA1ClinVar.json'
 import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
@@ -105,11 +106,9 @@ describe('VariantDetailView', async () => {
     expect(searchBar.exists()).toBe(true)
 
     const logo = wrapper.find('#logo')
-    const aboutLink = wrapper.find('#about')
-    const contactLink = wrapper.find('#contact')
+    const menu = wrapper.findComponent(VMenu)
     expect(logo.exists()).toBe(true)
-    expect(aboutLink.exists()).toBe(true)
-    expect(contactLink.exists()).toBe(true)
+    expect(menu.exists()).toBe(true)
   })
 
   it('emits update in header', async () => {