-
Population Frequencies
-
+
{
-
Variant Tools
-
{
-
Consequences
-
-
Consequences
- No consequence information available
+
+ Consequence
+ No consequence information available.
+
{
id="conservation"
class="variant-item"
>
-
Conservation
-
-
Conservation
- No conservation information available
+
+ Conservation
+ No conservation information available.
+
-
Variant Validator
-
@@ -215,8 +209,8 @@ const performSearch = async (geneSymbol: string) => {
.variant-item {
margin-bottom: 20px;
- border: 2px solid rgb(229, 85, 64);
- border-radius: 10px;
+ /* border: 2px solid rgb(229, 85, 64);
+ border-radius: 10px; */
padding: 5px 10px;
}
diff --git a/frontend/src/views/__tests__/GeneDetailView.spec.ts b/frontend/src/views/__tests__/GeneDetailView.spec.ts
index 3bb92d05..cd17d974 100644
--- a/frontend/src/views/__tests__/GeneDetailView.spec.ts
+++ b/frontend/src/views/__tests__/GeneDetailView.spec.ts
@@ -3,7 +3,19 @@ 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'
+import * as BRCA1Transcripts from '@/assets/__tests__/BRCA1Transcripts.json'
+import AlternativeIdentifiers from '@/components/GeneDetails/AlternativeIdentifiers.vue'
+import ClinVarFreqPlot from '@/components/GeneDetails/ClinVarFreqPlot.vue'
+import ClinvarImpact from '@/components/GeneDetails/ClinvarImpact.vue'
+import DiseaseAnnotation from '@/components/GeneDetails/DiseaseAnnotation.vue'
+import ExternalResources from '@/components/GeneDetails/ExternalResources.vue'
+import GeneRifs from '@/components/GeneDetails/GeneRifs.vue'
+import LocusDatabases from '@/components/GeneDetails/LocusDatabases.vue'
+import NcbiSummary from '@/components/GeneDetails/NcbiSummary.vue'
+import SupplementaryList from '@/components/GeneDetails/SupplementaryList.vue'
+import VariationLandscape from '@/components/GeneDetails/VariationLandscape.vue'
import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
import SearchBar from '@/components/SearchBar.vue'
import { setupMountedComponents } from '@/lib/test-utils'
@@ -13,24 +25,30 @@ import { StoreState } from '@/stores/misc'
import GeneDetailView from '../GeneDetailView.vue'
const geneData = {
- storeState: 'active',
- geneSymbol: 'BRCA1',
- geneInfo: BRCA1geneInfo.genes['HGNC:1100']
+ storeState: StoreState.Active,
+ geneSymbol: 'HGNC:1100',
+ geneInfo: JSON.parse(JSON.stringify(BRCA1geneInfo)).genes['HGNC:1100'],
+ geneClinvar: JSON.parse(JSON.stringify(BRCA1ClinVar)).genes['HGNC:1100'],
+ transcripts: JSON.parse(JSON.stringify(BRCA1Transcripts))
}
-const makeWrapper = (geneDataExample: Object) => {
+const makeWrapper = () => {
const pinia = createTestingPinia({ createSpy: vi.fn })
- const store = useGeneInfoStore(pinia)
+ const geneInfoStore = useGeneInfoStore(pinia)
const mockLoadData = vi.fn().mockImplementation(async (geneSymbol: string) => {
- store.storeState = StoreState.Active
- store.geneSymbol = geneSymbol
- store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
+ geneInfoStore.storeState = StoreState.Active
+ geneInfoStore.geneSymbol = geneSymbol
+ geneInfoStore.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
+ geneInfoStore.geneClinvar = JSON.parse(JSON.stringify(geneData.geneClinvar))
+ geneInfoStore.transcripts = JSON.parse(JSON.stringify(geneData.transcripts))
})
- store.loadData = mockLoadData
+ geneInfoStore.loadData = mockLoadData
- store.storeState = StoreState.Active
- store.geneSymbol = geneData.geneSymbol
- store.geneInfo = JSON.parse(JSON.stringify(geneDataExample))
+ geneInfoStore.storeState = StoreState.Active
+ geneInfoStore.geneSymbol = geneData.geneSymbol
+ geneInfoStore.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
+ geneInfoStore.geneClinvar = JSON.parse(JSON.stringify(geneData.geneClinvar))
+ geneInfoStore.transcripts = JSON.parse(JSON.stringify(geneData.transcripts))
return setupMountedComponents(
{
@@ -39,33 +57,17 @@ const makeWrapper = (geneDataExample: Object) => {
},
{
props: {
- searchTerm: 'BRCA1'
+ searchTerm: 'HGNC:1100',
+ genomeRelease: 'grch37'
},
pinia: pinia
}
)
}
-describe.concurrent('GeneDetailView', async () => {
- it('renders the page with invalid data', async () => {
- const { wrapper } = makeWrapper(geneData)
-
- const header = wrapper.findComponent(HeaderDetailPage)
- const searchBar = wrapper.findComponent(SearchBar)
- expect(header.exists()).toBe(true)
- expect(searchBar.exists()).toBe(true)
-
- const logo = wrapper.find('#logo')
- const menu = wrapper.findComponent(VMenu)
- expect(logo.exists()).toBe(true)
- expect(menu.exists()).toBe(true)
-
- const launchImage = wrapper.findAll('.mdi-launch')
- expect(launchImage.length).toBe(14)
- })
-
+describe('GeneDetailView', async () => {
it('renders the header', async () => {
- const { wrapper } = makeWrapper(geneData.geneInfo)
+ const { wrapper } = makeWrapper()
const header = wrapper.findComponent(HeaderDetailPage)
const searchBar = wrapper.findComponent(SearchBar)
@@ -79,7 +81,7 @@ describe.concurrent('GeneDetailView', async () => {
})
it('renders info-cards and navigation drawer', () => {
- const { wrapper } = makeWrapper(geneData.geneInfo)
+ const { wrapper } = makeWrapper()
const navigationDrawer = wrapper.find('.v-navigation-drawer')
expect(navigationDrawer.exists()).toBe(true)
@@ -103,12 +105,31 @@ describe.concurrent('GeneDetailView', async () => {
expect(geneRifs.exists()).toBe(true)
expect(locusSpecificDatabases.exists()).toBe(true)
- const launchImage = wrapper.findAll('.mdi-launch')
- expect(launchImage.length).toBe(2573)
+ // Renders the main content
+ const alternativeIdentifiersCard = wrapper.findComponent(AlternativeIdentifiers)
+ const externalResourcesCard = wrapper.findComponent(ExternalResources)
+ const clinVarFreqPlotCard = wrapper.findComponent(ClinVarFreqPlot)
+ const clinVarImpactCard = wrapper.findComponent(ClinvarImpact)
+ const diseaseAnnotationCard = wrapper.findComponent(DiseaseAnnotation)
+ const geneRifsCard = wrapper.findComponent(GeneRifs)
+ const locusDatabasesCard = wrapper.findComponent(LocusDatabases)
+ const ncbiSummaryCard = wrapper.findComponent(NcbiSummary)
+ const supplementaryListCard = wrapper.findComponent(SupplementaryList)
+ const variationLandscapeCard = wrapper.findComponent(VariationLandscape)
+ expect(alternativeIdentifiersCard.exists()).toBe(true)
+ expect(externalResourcesCard.exists()).toBe(true)
+ expect(clinVarFreqPlotCard.exists()).toBe(true)
+ expect(clinVarImpactCard.exists()).toBe(true)
+ expect(diseaseAnnotationCard.exists()).toBe(true)
+ expect(geneRifsCard.exists()).toBe(true)
+ expect(locusDatabasesCard.exists()).toBe(true)
+ expect(ncbiSummaryCard.exists()).toBe(true)
+ expect(supplementaryListCard.exists()).toBe(true)
+ expect(variationLandscapeCard.exists()).toBe(true)
})
it('emits update in header', async () => {
- const { wrapper } = makeWrapper(geneData.geneInfo)
+ const { wrapper } = makeWrapper()
const header = wrapper.findComponent(HeaderDetailPage)
expect(header.exists()).toBe(true)
@@ -128,7 +149,7 @@ describe.concurrent('GeneDetailView', async () => {
})
it('emits scroll to section', async () => {
- const { wrapper, router } = makeWrapper(geneData.geneInfo)
+ const { wrapper, router } = makeWrapper()
const hgncLink = wrapper.find('#hgnc-nav')
expect(hgncLink.exists()).toBe(true)
@@ -153,11 +174,15 @@ describe.concurrent('GeneDetailView', async () => {
store.storeState = StoreState.Error
store.geneSymbol = geneSymbol
store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
+ store.geneClinvar = JSON.parse(JSON.stringify(geneData.geneClinvar))
+ store.transcripts = JSON.parse(JSON.stringify(geneData.transcripts))
})
const mockClearData = vi.fn().mockImplementation(() => {
store.storeState = StoreState.Initial
store.geneSymbol = ''
store.geneInfo = {}
+ store.geneClinvar = {}
+ store.transcripts = {}
})
store.loadData = mockLoadData
store.clearData = mockClearData
@@ -165,6 +190,8 @@ describe.concurrent('GeneDetailView', async () => {
store.storeState = StoreState.Active
store.geneSymbol = geneData.geneSymbol
store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
+ store.geneClinvar = JSON.parse(JSON.stringify(geneData.geneClinvar))
+ store.transcripts = JSON.parse(JSON.stringify(geneData.transcripts))
const { router } = setupMountedComponents(
{
@@ -173,7 +200,8 @@ describe.concurrent('GeneDetailView', async () => {
},
{
props: {
- searchTerm: 'BRCA1'
+ searchTerm: 'HGNC:1100',
+ genomeRelease: 'grch37'
},
pinia: pinia
}
diff --git a/frontend/src/views/__tests__/HomeView.spec.ts b/frontend/src/views/__tests__/HomeView.spec.ts
index d2f123e3..1b44449f 100644
--- a/frontend/src/views/__tests__/HomeView.spec.ts
+++ b/frontend/src/views/__tests__/HomeView.spec.ts
@@ -98,13 +98,13 @@ describe.concurrent('HomeView with mocked router', async () => {
}
)
- const subtitle = wrapper.find('h2')
const exampleTerms = wrapper.findAll('.example')
- expect(subtitle.exists()).toBe(true)
expect(exampleTerms.length).toBe(8)
})
- it('uses example by click', async () => {
+ it('searches for example by click', async () => {
+ vi.spyOn(DottyClient.prototype, 'toSpdi').mockResolvedValue(null)
+
const { wrapper } = setupMountedComponents(
{ component: HomeView, template: true },
{