diff --git a/frontend/src/components/__tests__/AcmgRating.spec.ts b/frontend/src/components/__tests__/AcmgRating.spec.ts
index 703c8334..f41cc8dc 100644
--- 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
index 699d0311..db98e727 100644
--- 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
index 9a92d3ca..13c8ba50 100644
--- 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: ''
- },
- {
- 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
index 7048d10e..b93bbbb6 100644
--- 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: ''
- },
- {
- 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
index 3b73383c..c5fae054 100644
--- 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: ''
- },
- {
- 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')
diff --git a/frontend/src/views/__tests__/GeneDetailView.spec.ts b/frontend/src/views/__tests__/GeneDetailView.spec.ts
index ea30e2ed..1217212a 100644
--- a/frontend/src/views/__tests__/GeneDetailView.spec.ts
+++ b/frontend/src/views/__tests__/GeneDetailView.spec.ts
@@ -1,32 +1,14 @@
import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
import { describe, expect, it, vi } from 'vitest'
import { nextTick } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
import * as BRCA1geneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
import SearchBar from '@/components/SearchBar.vue'
-import { routes } from '@/router'
+import { setupMountedComponents } from '@/lib/test-utils'
import { useGeneInfoStore } from '@/stores/geneInfo'
import { StoreState } from '@/stores/misc'
-
-import GeneDetailView from '../GeneDetailView.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()
+import GeneDetailView from '@/views/GeneDetailView.vue'
const geneData = {
storeState: 'active',
@@ -48,27 +30,23 @@ const makeWrapper = (geneDataExample: Object) => {
store.geneSymbol = geneData.geneSymbol
store.geneInfo = JSON.parse(JSON.stringify(geneDataExample))
- return mount(
+ return setupMountedComponents(
{
- template: ''
+ component: GeneDetailView,
+ template: true
},
{
props: {
searchTerm: 'BRCA1'
},
- global: {
- plugins: [vuetify, router, pinia],
- components: {
- GeneDetailView
- }
- }
+ pinia: pinia
}
)
}
describe.concurrent('GeneDetailView', async () => {
it('renders the page with invalid data', async () => {
- const wrapper = makeWrapper(geneData)
+ const { wrapper } = makeWrapper(geneData)
const header = wrapper.findComponent(HeaderDetailPage)
const searchBar = wrapper.findComponent(SearchBar)
@@ -87,7 +65,7 @@ describe.concurrent('GeneDetailView', async () => {
})
it('renders the header', async () => {
- const wrapper = makeWrapper(geneData.geneInfo)
+ const { wrapper } = makeWrapper(geneData.geneInfo)
const header = wrapper.findComponent(HeaderDetailPage)
const searchBar = wrapper.findComponent(SearchBar)
@@ -103,7 +81,7 @@ describe.concurrent('GeneDetailView', async () => {
})
it('renders info-cards and navigation drawer', () => {
- const wrapper = makeWrapper(geneData.geneInfo)
+ const { wrapper } = makeWrapper(geneData.geneInfo)
const navigationDrawer = wrapper.find('.v-navigation-drawer')
expect(navigationDrawer.exists()).toBe(true)
@@ -132,7 +110,7 @@ describe.concurrent('GeneDetailView', async () => {
})
it('emits update in header', async () => {
- const wrapper = makeWrapper(geneData.geneInfo)
+ const { wrapper } = makeWrapper(geneData.geneInfo)
const header = wrapper.findComponent(HeaderDetailPage)
expect(header.exists()).toBe(true)
@@ -152,7 +130,7 @@ describe.concurrent('GeneDetailView', async () => {
})
it('emits scroll to section', async () => {
- const wrapper = makeWrapper(geneData.geneInfo)
+ const { wrapper, router } = makeWrapper(geneData.geneInfo)
const hgncLink = wrapper.find('#hgnc-nav')
expect(hgncLink.exists()).toBe(true)
@@ -190,23 +168,21 @@ describe.concurrent('GeneDetailView', async () => {
store.geneSymbol = geneData.geneSymbol
store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
- mount(
+ const { router } = setupMountedComponents(
{
- template: ''
+ component: GeneDetailView,
+ template: true
},
{
props: {
searchTerm: 'BRCA1'
},
- global: {
- plugins: [vuetify, router, pinia],
- components: {
- GeneDetailView
- }
- }
+ pinia: pinia
}
)
+
await nextTick()
+ expect(router.push).toHaveBeenCalledOnce()
expect(router.push).toHaveBeenCalledWith({ name: 'home' })
})
})
diff --git a/frontend/src/views/__tests__/GenesListView.spec.ts b/frontend/src/views/__tests__/GenesListView.spec.ts
index 185c696f..16b9b6f5 100644
--- a/frontend/src/views/__tests__/GenesListView.spec.ts
+++ b/frontend/src/views/__tests__/GenesListView.spec.ts
@@ -1,31 +1,13 @@
import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
import { describe, expect, it, vi } from 'vitest'
import { nextTick } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
import SearchBar from '@/components/SearchBar.vue'
-import { routes } from '@/router'
+import { setupMountedComponents } from '@/lib/test-utils'
import { useGenesListStore } from '@/stores/genesList'
import { StoreState } from '@/stores/misc'
-
-import GenesListView from '../GenesListView.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()
+import GenesListView from '@/views/GenesListView.vue'
const exampleGenesList = {
genes: [
@@ -60,23 +42,19 @@ const makeWrapper = () => {
store.query = 'q=EMP&fields=hgnc_id,ensembl_gene_id,ncbi_gene_id,symbol'
store.genesList = JSON.parse(JSON.stringify(exampleGenesList.genes))
- return mount(
+ return setupMountedComponents(
{
- template: ''
+ component: GenesListView,
+ template: true
},
{
query: {
q: 'EMP',
fields: 'hgnc_id,ensembl_gene_id,ncbi_gene_id,symbol'
},
- global: {
- plugins: [vuetify, router, pinia],
- components: {
- GenesListView
- }
- }
+ pinia: pinia
}
- )
+ ).wrapper
}
describe.concurrent('GenesListView', async () => {
@@ -148,24 +126,19 @@ describe.concurrent('GenesListView', async () => {
store.clearData = mockClearData
store.storeState = StoreState.Error
- const wrapper = mount(
+ const { wrapper } = setupMountedComponents(
{
- template: ''
+ component: GenesListView,
+ template: true
},
{
- props: {
- q: 'EMP',
+ query: {
+ q: 'EMP1',
fields: 'hgnc_id,ensembl_gene_id,ncbi_gene_id,symbol'
},
- global: {
- plugins: [vuetify, router, pinia],
- components: {
- GenesListView
- }
- }
+ pinia: pinia
}
)
- await nextTick()
const exampleTerm = wrapper.find('.example')
expect(exampleTerm.exists()).toBe(true)
@@ -196,29 +169,24 @@ describe.concurrent('GenesListView', async () => {
store.storeState = StoreState.Loading
store.query = 'q=EMP&fields=hgnc_id,ensembl_gene_id,ncbi_gene_id,symbol'
store.redirectHgncId = 'HGNC:3333'
- const wrapper = mount(
+ const { wrapper } = setupMountedComponents(
{
- template: ''
+ component: GenesListView,
+ template: true
},
{
query: {
- q: 'EMP1',
+ q: 'EMP',
fields: 'hgnc_id,ensembl_gene_id,ncbi_gene_id,symbol'
},
- global: {
- plugins: [vuetify, router, pinia],
- components: {
- GenesListView
- }
- }
+ pinia: pinia
}
)
- await nextTick()
expect(wrapper.html()).toContain('Searching for genes')
})
- it.skip('redirects to gene info page if storeState is Redirect', async () => {
+ it('redirects to gene info page if storeState is Redirect', async () => {
const pinia = createTestingPinia({ createSpy: vi.fn })
const store = useGenesListStore(pinia)
const mockLoadData = vi.fn().mockImplementation(async () => {
@@ -227,35 +195,32 @@ describe.concurrent('GenesListView', async () => {
store.redirectHgncId = 'HGNC:3333'
})
const mockClearData = vi.fn().mockImplementation(() => {
- store.storeState = StoreState.Redirect
+ store.storeState = StoreState.Initial
store.query = null
store.redirectHgncId = null
})
store.loadData = mockLoadData
store.clearData = mockClearData
- store.storeState = StoreState.Redirect
+ store.storeState = StoreState.Active
store.query = 'q=EMP1&fields=hgnc_id,ensembl_gene_id,ncbi_gene_id,symbol'
- store.redirectHgncId = 'HGNC:3333'
- mount(
+ store.redirectHgncId = null
+ const { router } = setupMountedComponents(
{
- template: ''
+ component: GenesListView,
+ template: true
},
{
query: {
q: 'EMP1',
fields: 'hgnc_id,ensembl_gene_id,ncbi_gene_id,symbol'
},
- global: {
- plugins: [vuetify, router, pinia],
- components: {
- GenesListView
- }
- }
+ pinia: pinia
}
)
- await nextTick()
+ await nextTick()
+ expect(router.push).toHaveBeenCalledOnce()
expect(router.push).toHaveBeenCalledWith({
name: 'gene',
params: { searchTerm: 'HGNC:3333', genomeRelease: 'grch37' }
diff --git a/frontend/src/views/__tests__/HomeView.spec.ts b/frontend/src/views/__tests__/HomeView.spec.ts
index ac1a27da..91effe0b 100644
--- a/frontend/src/views/__tests__/HomeView.spec.ts
+++ b/frontend/src/views/__tests__/HomeView.spec.ts
@@ -1,26 +1,15 @@
-import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it } from 'vitest'
import { nextTick } from 'vue'
-import { type Router, createRouter, createWebHistory } from 'vue-router'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
import FooterDefault from '@/components/FooterDefault.vue'
import HeaderDefault from '@/components/HeaderDefault.vue'
-import { routes } from '@/router'
+import { setupMountedComponents } from '@/lib/test-utils'
import { useGeneInfoStore } from '@/stores/geneInfo'
import { StoreState } from '@/stores/misc'
import SearchBar from '../../components/SearchBar.vue'
import HomeView from '../HomeView.vue'
-const vuetify = createVuetify({
- components,
- directives
-})
-
const geneData = {
storeState: 'active',
geneSymbol: 'BRCA1',
@@ -33,48 +22,23 @@ const geneData = {
}
}
-const makeWrapper = (router: Router) => {
- return mount(
- {
- template: ''
- },
- {
- global: {
- plugins: [
- vuetify,
- router,
- createTestingPinia({
- createSpy: vi.fn,
- initialState: {
- geneInfo: {
- storeState: StoreState.Active,
- geneSymbol: geneData.geneSymbol,
- geneInfo: JSON.parse(JSON.stringify(geneData.geneInfo))
- },
- misc: {
- appVersion: 'v0.0.0'
- }
- }
- })
- ],
- components: {
- HomeView
- }
- }
- }
- )
-}
-
-const router = createRouter({
- history: createWebHistory(import.meta.env.BASE_URL),
- routes: routes
-})
-// Mock router push
-router.push = vi.fn()
-
describe.concurrent('HomeView with mocked router', async () => {
it('renders the header and the footer', () => {
- const wrapper = makeWrapper(router)
+ const { wrapper } = setupMountedComponents(
+ { component: HomeView, template: true },
+ {
+ initialStoreState: {
+ geneInfo: {
+ storeState: StoreState.Active,
+ geneSymbol: geneData.geneSymbol,
+ geneInfo: JSON.parse(JSON.stringify(geneData.geneInfo))
+ },
+ misc: {
+ appVersion: 'v0.0.0'
+ }
+ }
+ }
+ )
const header = wrapper.findComponent(HeaderDefault)
const footer = wrapper.findComponent(FooterDefault)
expect(header.exists()).toBe(true)
@@ -89,7 +53,21 @@ describe.concurrent('HomeView with mocked router', async () => {
})
it('renders the search bar', () => {
- const wrapper = makeWrapper(router)
+ const { wrapper } = setupMountedComponents(
+ { component: HomeView, template: true },
+ {
+ initialStoreState: {
+ geneInfo: {
+ storeState: StoreState.Active,
+ geneSymbol: geneData.geneSymbol,
+ geneInfo: JSON.parse(JSON.stringify(geneData.geneInfo))
+ },
+ misc: {
+ appVersion: 'v0.0.0'
+ }
+ }
+ }
+ )
const textField = wrapper.find('.v-text-field')
const select = wrapper.find('.v-select')
@@ -100,7 +78,21 @@ describe.concurrent('HomeView with mocked router', async () => {
})
it('renders example search terms', () => {
- const wrapper = makeWrapper(router)
+ const { wrapper } = setupMountedComponents(
+ { component: HomeView, template: true },
+ {
+ initialStoreState: {
+ geneInfo: {
+ storeState: StoreState.Active,
+ geneSymbol: geneData.geneSymbol,
+ geneInfo: JSON.parse(JSON.stringify(geneData.geneInfo))
+ },
+ misc: {
+ appVersion: 'v0.0.0'
+ }
+ }
+ }
+ )
const subtitle = wrapper.find('h2')
const exampleTerms = wrapper.findAll('.example')
@@ -109,7 +101,21 @@ describe.concurrent('HomeView with mocked router', async () => {
})
it('uses example by click', async () => {
- const wrapper = makeWrapper(router)
+ const { wrapper } = setupMountedComponents(
+ { component: HomeView, template: true },
+ {
+ initialStoreState: {
+ geneInfo: {
+ storeState: StoreState.Active,
+ geneSymbol: geneData.geneSymbol,
+ geneInfo: JSON.parse(JSON.stringify(geneData.geneInfo))
+ },
+ misc: {
+ appVersion: 'v0.0.0'
+ }
+ }
+ }
+ )
const store = useGeneInfoStore()
const exampleTerm = wrapper.find('.example')
@@ -121,7 +127,21 @@ describe.concurrent('HomeView with mocked router', async () => {
})
it('correctly uses the router', async () => {
- const wrapper = makeWrapper(router)
+ const { wrapper, router } = setupMountedComponents(
+ { component: HomeView, template: true },
+ {
+ initialStoreState: {
+ geneInfo: {
+ storeState: StoreState.Active,
+ geneSymbol: geneData.geneSymbol,
+ geneInfo: JSON.parse(JSON.stringify(geneData.geneInfo))
+ },
+ misc: {
+ appVersion: 'v0.0.0'
+ }
+ }
+ }
+ )
const store = useGeneInfoStore()
store.storeState = StoreState.Active
store.geneSymbol = geneData.geneSymbol
diff --git a/frontend/src/views/__tests__/PathNotFound.spec.ts b/frontend/src/views/__tests__/PathNotFound.spec.ts
index ab8d9381..cc5eb406 100644
--- a/frontend/src/views/__tests__/PathNotFound.spec.ts
+++ b/frontend/src/views/__tests__/PathNotFound.spec.ts
@@ -1,44 +1,12 @@
-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 PathNotFound from '../PathNotFound.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: ''
- },
- {
- global: {
- plugins: [vuetify, router],
- components: {
- PathNotFound
- }
- }
- }
- )
-}
describe.concurrent('PathNotFound', async () => {
it('renders the main content', () => {
- const wrapper = makeWrapper()
+ const { wrapper } = setupMountedComponents({ component: PathNotFound, template: false }, {})
const mainContent = wrapper.find('.not-found')
expect(mainContent.exists()).toBe(true)
diff --git a/frontend/src/views/__tests__/VariantDetailView.spec.ts b/frontend/src/views/__tests__/VariantDetailView.spec.ts
index fd94c5c1..492856e8 100644
--- a/frontend/src/views/__tests__/VariantDetailView.spec.ts
+++ b/frontend/src/views/__tests__/VariantDetailView.spec.ts
@@ -1,11 +1,6 @@
import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
import { describe, expect, it, vi } from 'vitest'
import { nextTick } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
import * as BRCA1TxInfo from '@/assets/__tests__/BRCA1TxInfo.json'
@@ -21,24 +16,11 @@ import VariantGene from '@/components/VariantDetails/VariantGene.vue'
import VariantTools from '@/components/VariantDetails/VariantTools.vue'
import VariantValidator from '@/components/VariantDetails/VariantValidator.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'
import { useVariantInfoStore } from '@/stores/variantInfo'
-
-import VariantDetailView from '../VariantDetailView.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()
+import VariantDetailView from '@/views/VariantDetailView.vue'
const smallVariantInfo = {
release: 'grch37',
@@ -96,28 +78,21 @@ const makeWrapper = () => {
variantAcmgStore.smallVariant = JSON.parse(JSON.stringify(smallVariantInfo))
variantAcmgStore.acmgRating = new MultiSourceAcmgCriteriaState()
- return mount(
- {
- template: ''
- },
+ return setupMountedComponents(
+ { component: VariantDetailView, template: true },
{
props: {
searchTerm: 'chr17:43044295:G:A',
genomeRelease: 'grch37'
},
- global: {
- plugins: [vuetify, router, pinia],
- components: {
- VariantDetailView
- }
- }
+ pinia: pinia
}
)
}
describe.concurrent('VariantDetailView', async () => {
it('renders the header', async () => {
- const wrapper = makeWrapper()
+ const { wrapper } = makeWrapper()
const header = wrapper.findComponent(HeaderDetailPage)
const searchBar = wrapper.findComponent(SearchBar)
@@ -133,7 +108,7 @@ describe.concurrent('VariantDetailView', async () => {
})
it('emits update in header', async () => {
- const wrapper = makeWrapper()
+ const { wrapper } = makeWrapper()
const header = wrapper.findComponent(HeaderDetailPage)
expect(header.exists()).toBe(true)
@@ -153,7 +128,7 @@ describe.concurrent('VariantDetailView', async () => {
})
it('renders VariantDatails components', () => {
- const wrapper = makeWrapper()
+ const { wrapper } = makeWrapper()
const variantInfo = wrapper.findComponent(VariantGene)
const beaconNetwork = wrapper.findComponent(BeaconNetwork)
@@ -174,7 +149,7 @@ describe.concurrent('VariantDetailView', async () => {
})
it('emits scroll to section', async () => {
- const wrapper = makeWrapper()
+ const { wrapper, router } = makeWrapper()
const geneLink = wrapper.find('#gene-nav')
expect(geneLink.exists()).toBe(true)
@@ -234,21 +209,17 @@ describe.concurrent('VariantDetailView', async () => {
variantAcmgStore.smallVariant = JSON.parse(JSON.stringify(smallVariantInfo))
variantAcmgStore.acmgRating = new MultiSourceAcmgCriteriaState()
- mount(
+ const { router } = setupMountedComponents(
{
- template: ''
+ component: VariantDetailView,
+ template: true
},
{
props: {
searchTerm: 'chr17:43044295:G:A',
genomeRelease: 'grch37'
},
- global: {
- plugins: [vuetify, router, pinia],
- components: {
- VariantDetailView
- }
- }
+ pinia: pinia
}
)
await nextTick()