chore: views tests

bihealth · Sep 29, 2023 · 63676f8 · 63676f8
1 parent 0789c4e
commit 63676f8
Show file tree

Hide file tree

Showing 10 changed files with 227 additions and 412 deletions.
diff --git a/frontend/src/components/__tests__/AcmgRating.spec.ts b/frontend/src/components/__tests__/AcmgRating.spec.ts
@@ -1,29 +1,12 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
 
 import AcmgRating from '@/components/VariantDetails/AcmgRating.vue'
 import { AcmgCriteria, MultiSourceAcmgCriteriaState, Presence, StateSource } from '@/lib/acmgSeqVar'
-import { routes } from '@/router'
+import { setupMountedComponents } from '@/lib/test-utils'
 import { StoreState } from '@/stores/misc'
 import { useVariantAcmgRatingStore } from '@/stores/variantAcmgRating'
 
-const vuetify = createVuetify({
-  components,
-  directives
-})
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: routes
-})
-// Mock router push
-router.push = vi.fn()
-
 const smallVariantInfo = {
   release: 'grch37',
   chromosome: 'chr17',
@@ -51,17 +34,18 @@ const makeWrapper = () => {
   store.acmgRating = new MultiSourceAcmgCriteriaState()
   store.acmgRating.setPresence(StateSource.InterVar, AcmgCriteria.Pvs1, Presence.Present)
 
-  return mount(AcmgRating, {
-    props: {
-      smallVariant: smallVariantInfo
+  return setupMountedComponents(
+    {
+      component: AcmgRating,
+      template: true
     },
-    global: {
-      plugins: [vuetify, router, pinia],
-      components: {
-        AcmgRating
-      }
+    {
+      props: {
+        smallVariant: smallVariantInfo
+      },
+      pinia: pinia
     }
-  })
+  ).wrapper
 }
 
 describe.concurrent('AcmgRating', async () => {

diff --git a/frontend/src/lib/test-utils.ts b/frontend/src/lib/test-utils.ts
@@ -35,12 +35,22 @@ export interface MountedComponents {
  */
 export const setupMountedComponents = (
   componentOptions: {
+    /** The component itself */
     component: any
+    /** Mode of mounting */
     template: boolean
   },
   options?: {
+    /** Initial Store instances */
     initialStoreState?: any
+    /** Props to pass to the component */
     props?: any
+    /** Query to pass to the router */
+    query?: any
+    /** A custom pinia instance to use. Use this option only if you need to mock a store getter
+     * or action.
+     */
+    pinia?: TestingPinia
   }
 ): MountedComponents => {
   // Create new vuetify instance.
@@ -72,9 +82,10 @@ export const setupMountedComponents = (
     : componentOptions.component
 
   const wrapper = mount(componentMount, {
+    query: options?.query,
     props: options?.props,
     global: {
-      plugins: [vuetify, router, pinia],
+      plugins: [vuetify, router, options?.pinia ?? pinia],
       components: knownComponents
     }
   })

diff --git a/frontend/src/views/__tests__/ACMGCriteriaDoc.spec.ts b/frontend/src/views/__tests__/ACMGCriteriaDoc.spec.ts
@@ -1,57 +1,21 @@
-import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
+import { describe, expect, it } from 'vitest'
 
-import { routes } from '@/router'
+import { setupMountedComponents } from '@/lib/test-utils'
 
 import ACMGCriteriaDocs from '../ACMGCriteriaDocs.vue'
 
-const vuetify = createVuetify({
-  components,
-  directives
-})
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: routes
-})
-// Mock router push
-router.push = vi.fn()
-
-const makeWrapper = () => {
-  return mount(
-    {
-      template: '<v-app><ACMGCriteriaDocs /></v-app>'
-    },
-    {
-      global: {
-        plugins: [
-          vuetify,
-          router,
-          createTestingPinia({
-            createSpy: vi.fn,
-            initialState: {
-              misc: {
-                appVersion: 'v0.0.0'
-              }
-            }
-          })
-        ],
-        components: {
-          ACMGCriteriaDocs
-        }
-      }
-    }
-  )
-}
-
 describe.concurrent('ACMGCriteriaDocs', async () => {
   it('renders the header', () => {
-    const wrapper = makeWrapper()
+    const { wrapper } = setupMountedComponents(
+      { component: ACMGCriteriaDocs, template: true },
+      {
+        initialStoreState: {
+          misc: {
+            appVersion: 'v0.0.0'
+          }
+        }
+      }
+    )
 
     const logo = wrapper.find('#logo')
     const aboutLink = wrapper.find('#about')
@@ -62,7 +26,16 @@ describe.concurrent('ACMGCriteriaDocs', async () => {
   })
 
   it('renders the main content', () => {
-    const wrapper = makeWrapper()
+    const { wrapper } = setupMountedComponents(
+      { component: ACMGCriteriaDocs, template: true },
+      {
+        initialStoreState: {
+          misc: {
+            appVersion: 'v0.0.0'
+          }
+        }
+      }
+    )
 
     const mainContent = wrapper.find('.docs-view')
     expect(mainContent.exists()).toBe(true)

diff --git a/frontend/src/views/__tests__/AboutView.spec.ts b/frontend/src/views/__tests__/AboutView.spec.ts
@@ -1,56 +1,21 @@
-import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
+import { describe, expect, it } from 'vitest'
 
-import { routes } from '@/router'
+import { setupMountedComponents } from '@/lib/test-utils'
 
 import AboutView from '../AboutView.vue'
 
-const vuetify = createVuetify({
-  components,
-  directives
-})
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: routes
-})
-// Mock router push
-router.push = vi.fn()
-
-const makeWrapper = () => {
-  return mount(
-    {
-      template: '<v-app><AboutView /></v-app>'
-    },
-    {
-      global: {
-        plugins: [
-          vuetify,
-          router,
-          createTestingPinia({
-            createSpy: vi.fn,
-            initialState: {
-              misc: {
-                appVersion: 'v0.0.0'
-              }
-            }
-          })
-        ],
-        components: {
-          AboutView
-        }
-      }
-    }
-  )
-}
 describe.concurrent('AboutView', async () => {
   it('renders the header', () => {
-    const wrapper = makeWrapper()
+    const { wrapper } = setupMountedComponents(
+      { component: AboutView, template: true },
+      {
+        initialStoreState: {
+          misc: {
+            appVersion: 'v0.0.0'
+          }
+        }
+      }
+    )
 
     const logo = wrapper.find('#logo')
     const aboutLink = wrapper.find('#about')
@@ -61,7 +26,16 @@ describe.concurrent('AboutView', async () => {
   })
 
   it('renders the main content', () => {
-    const wrapper = makeWrapper()
+    const { wrapper } = setupMountedComponents(
+      { component: AboutView, template: true },
+      {
+        initialStoreState: {
+          misc: {
+            appVersion: 'v0.0.0'
+          }
+        }
+      }
+    )
 
     const mainContent = wrapper.find('.about-view')
     expect(mainContent.exists()).toBe(true)

diff --git a/frontend/src/views/__tests__/ContactView.spec.ts b/frontend/src/views/__tests__/ContactView.spec.ts
@@ -1,57 +1,21 @@
-import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
+import { describe, expect, it } from 'vitest'
 
-import { routes } from '@/router'
+import { setupMountedComponents } from '@/lib/test-utils'
 
 import ContactView from '../ContactView.vue'
 
-const vuetify = createVuetify({
-  components,
-  directives
-})
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: routes
-})
-// Mock router push
-router.push = vi.fn()
-
-const makeWrapper = () => {
-  return mount(
-    {
-      template: '<v-app><ContactView /></v-app>'
-    },
-    {
-      global: {
-        plugins: [
-          vuetify,
-          router,
-          createTestingPinia({
-            createSpy: vi.fn,
-            initialState: {
-              misc: {
-                appVersion: 'v0.0.0'
-              }
-            }
-          })
-        ],
-        components: {
-          ContactView
-        }
-      }
-    }
-  )
-}
-
 describe.concurrent('ContactView', async () => {
   it('renders the header', () => {
-    const wrapper = makeWrapper()
+    const { wrapper } = setupMountedComponents(
+      { component: ContactView, template: true },
+      {
+        initialStoreState: {
+          misc: {
+            appVersion: 'v0.0.0'
+          }
+        }
+      }
+    )
 
     const logo = wrapper.find('#logo')
     const aboutLink = wrapper.find('#about')
@@ -62,7 +26,16 @@ describe.concurrent('ContactView', async () => {
   })
 
   it('renders the main content', () => {
-    const wrapper = makeWrapper()
+    const { wrapper } = setupMountedComponents(
+      { component: ContactView, template: true },
+      {
+        initialStoreState: {
+          misc: {
+            appVersion: 'v0.0.0'
+          }
+        }
+      }
+    )
 
     const mainContent = wrapper.find('.contact-view')
     const githubLink = wrapper.find('.mdi-github')