diff --git a/frontend/src/components/GeneDetails/ConditionsCard.vue b/frontend/src/components/GeneDetails/ConditionsCard.vue index c6213463..0fb4a3dc 100644 --- a/frontend/src/components/GeneDetails/ConditionsCard.vue +++ b/frontend/src/components/GeneDetails/ConditionsCard.vue @@ -215,6 +215,7 @@ const hpoTermsToShow = computed(() => { (() => { Orphanet Diseases ({{ geneInfo?.orpha?.orphaDiseases?.length ?? 0 }}) diff --git a/frontend/src/components/GeneDetails/ExpressionCard.vue b/frontend/src/components/GeneDetails/ExpressionCard.vue index e8dbb4e8..9e76efae 100644 --- a/frontend/src/components/GeneDetails/ExpressionCard.vue +++ b/frontend/src/components/GeneDetails/ExpressionCard.vue @@ -174,6 +174,7 @@ const vegaLayer = [ (() => { diff --git a/frontend/src/components/__tests__/GeneDetails/SupplementaryList.spec.ts b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/SupplementaryList.spec.ts similarity index 100% rename from frontend/src/components/__tests__/GeneDetails/SupplementaryList.spec.ts rename to frontend/src/components/__tests__/GeneDetails/BasicInfoCard/SupplementaryList.spec.ts diff --git a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts index 3af90e6b..85fdb343 100644 --- a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts +++ b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts @@ -13,7 +13,7 @@ describe.concurrent('VariationLandscape', async () => { props: { clinvar: BRCA1Clinvar['genes']['HGNC:1100'], genomeRelease: 'grch37', - hgnc: 'HGNC:1100', + geneSymbol: 'HGNC:1100', transcripts: BRCA1Transcripts } } diff --git a/frontend/src/components/__tests__/GeneDetails/ConditionsCard.spec.ts b/frontend/src/components/__tests__/GeneDetails/ConditionsCard.spec.ts index ac394cda..f421ba38 100644 --- a/frontend/src/components/__tests__/GeneDetails/ConditionsCard.spec.ts +++ b/frontend/src/components/__tests__/GeneDetails/ConditionsCard.spec.ts @@ -1,4 +1,5 @@ import { describe, expect, it } from 'vitest' +import { VSwitch } from 'vuetify/components' import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json' import ConditionsCard from '@/components/GeneDetails/ConditionsCard.vue' @@ -20,4 +21,91 @@ describe.concurrent('ConditionsCard', async () => { expect(wrapper.text()).toContain('OMIM Diseases') expect(wrapper.text()).toContain('Orphanet Diseases (6)') }) + + it('expands the Orphanet Disorders information.', async () => { + const { wrapper } = await setupMountedComponents( + { component: ConditionsCard, template: false }, + { + props: { + geneInfo: BRCA1GeneInfo['genes']['HGNC:1100'], + hpoTerms: [] + } + } + ) + expect(wrapper.text()).not.toContain('Orphanet Disorders') + const expandButton = wrapper.find('#conditions-card-expand-button') + expect(expandButton.exists()).toBe(true) + await expandButton.trigger('click') + expect(wrapper.text()).toContain('Orphanet Disorders') + }) + + it.skip('shows numerical values for HPO terms.', async () => { + const { wrapper } = await setupMountedComponents( + { component: ConditionsCard, template: false }, + { + props: { + geneInfo: BRCA1GeneInfo['genes']['HGNC:1100'], + hpoTerms: [ + { + term_id: 'HP:0000001', + name: 'Example HPO Term' + }, + { + term_id: 'HP:0000002', + name: 'Example HPO Term 2' + } + ] + } + } + ) + expect(wrapper.text()).toContain('Example HPO Term') + expect(wrapper.text()).toContain('Example HPO Term 2') + expect(wrapper.text()).not.toContain('HP:0000001') + expect(wrapper.text()).not.toContain('HP:0000002') + + const vSwitches = wrapper.findAllComponents(VSwitch) + expect(vSwitches.length).toBe(2) + const showTermsIdSwitch = vSwitches.find((vSwitch) => vSwitch.text() === 'numeric terms') + expect(showTermsIdSwitch?.exists()).toBe(true) + + await showTermsIdSwitch?.vm.$emit('change', true) + await showTermsIdSwitch?.vm.$emit('click') + expect(showTermsIdSwitch?.vm.$props.value).toBe(true) + expect(wrapper.text()).toContain('HP:0000001') + expect(wrapper.text()).toContain('HP:0000002') + }) + + it.skip('shows links for HPO terms.', async () => { + const { wrapper } = await setupMountedComponents( + { component: ConditionsCard, template: false }, + { + props: { + geneInfo: BRCA1GeneInfo['genes']['HGNC:1100'], + hpoTerms: [ + { + term_id: 'HP:0000001', + name: 'Example HPO Term' + }, + { + term_id: 'HP:0000002', + name: 'Example HPO Term 2' + } + ] + } + } + ) + expect(wrapper.text()).toContain('Example HPO Term') + expect(wrapper.text()).toContain('Example HPO Term 2') + expect(wrapper.html()).toContain('https://hpo.jax.org/app/browse/term/HP:0000001') + + const vSwitches = wrapper.findAllComponents(VSwitch) + expect(vSwitches.length).toBe(2) + const showTermsIdSwitch = vSwitches.find((vSwitch) => vSwitch.text() === 'show links') + expect(showTermsIdSwitch?.exists()).toBe(true) + + await showTermsIdSwitch?.vm.$emit('change', false) + await showTermsIdSwitch?.vm.$emit('click') + expect(showTermsIdSwitch?.vm.$props.value).toBe(false) + expect(wrapper.html()).not.toContain('https://hpo.jax.org/app/browse/term/HP:0000001') + }) }) diff --git a/frontend/src/components/__tests__/GeneDetails/ConditionsCard/CadaRanking.spec.ts b/frontend/src/components/__tests__/GeneDetails/ConditionsCard/CadaRanking.spec.ts new file mode 100644 index 00000000..10a41a74 --- /dev/null +++ b/frontend/src/components/__tests__/GeneDetails/ConditionsCard/CadaRanking.spec.ts @@ -0,0 +1,47 @@ +import { describe, expect, it } from 'vitest' + +import CadaRanking from '@/components/GeneDetails/ConditionsCard/CadaRanking.vue' +import { setupMountedComponents } from '@/lib/test-utils' + +describe.concurrent('CadaRanking', async () => { + it('renders the CadaRanking info', async () => { + const { wrapper } = await setupMountedComponents( + { component: CadaRanking, template: false }, + { + props: { + hgncId: 'HGNC:1100' + }, + initialStoreState: { + case: { + caseInfo: { + hpoTerms: [ + { + term_id: 'HP:0000001', + name: 'Example HPO Term' + }, + { + term_id: 'HP:0000002', + name: 'Example HPO Term 2' + } + ] + } + }, + cadaPrio: { + geneRanking: [ + { + gene_symbol: 'BRCA1', + ncbi_gene_id: '672', + hgnc_id: 'HGNC:1100', + rank: 1, + score: 0.5 + } + ] + } + } + } + ) + expect(wrapper.text()).toContain('Gene-to-Phenotype Rank') + expect(wrapper.text()).toContain('1') + expect(wrapper.text()).toContain('0.5') + }) +}) diff --git a/frontend/src/components/__tests__/GeneDetails/ExpressionCard.spec.ts b/frontend/src/components/__tests__/GeneDetails/ExpressionCard.spec.ts index e3ce2329..d8b0eb60 100644 --- a/frontend/src/components/__tests__/GeneDetails/ExpressionCard.spec.ts +++ b/frontend/src/components/__tests__/GeneDetails/ExpressionCard.spec.ts @@ -25,5 +25,10 @@ describe.concurrent('GtexGenePlotVue', async () => { expect(wrapper.text()).toContain('Tissue-Specific Gene Expression from GTeX') const vegaPlot = wrapper.findComponent(VegaPlot) expect(vegaPlot.exists()).toBe(true) + + // Find gtex linkout + const gtexLink = wrapper.find('#expression-card-gtex-portal') + expect(gtexLink.exists()).toBe(true) + expect(gtexLink.attributes('href')).toBe('https://gtexportal.org/home/gene/ENSG00000012048') }) }) diff --git a/frontend/src/components/__tests__/GeneDetails/OverviewCard.spec.ts b/frontend/src/components/__tests__/GeneDetails/OverviewCard.spec.ts index 4a123e89..3b279cf4 100644 --- a/frontend/src/components/__tests__/GeneDetails/OverviewCard.spec.ts +++ b/frontend/src/components/__tests__/GeneDetails/OverviewCard.spec.ts @@ -4,7 +4,7 @@ import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json' import OverviewCard from '@/components/GeneDetails/OverviewCard.vue' import { setupMountedComponents } from '@/lib/test-utils' -describe.concurrent('v', async () => { +describe.concurrent('OverviewCard', async () => { it('renders the OverviewCard information.', async () => { const { wrapper } = await setupMountedComponents( { component: OverviewCard, template: false }, @@ -18,4 +18,23 @@ describe.concurrent('v', async () => { expect(wrapper.text()).toContain('This gene encodes a 190') expect(wrapper.text()).toContain('BRCA1 DNA repair') }) + + it('expands the OverviewCard information.', async () => { + const { wrapper } = await setupMountedComponents( + { component: OverviewCard, template: false }, + { + props: { + geneInfo: BRCA1GeneInfo['genes']['HGNC:1100'] + } + } + ) + expect(wrapper.text()).not.toContain('Alternative Identifiers') + const expandButton = wrapper.find('#overview-card-expand-button') + expect(expandButton.exists()).toBe(true) + await expandButton.trigger('click') + expect(wrapper.text()).toContain('Alternative Identifiers') + expect(wrapper.text()).toContain('External Resources') + expect(wrapper.text()).toContain('Locus-Specific Databases') + expect(wrapper.text()).toContain('NCBI References Into Function') + }) }) diff --git a/frontend/src/components/__tests__/GeneDetails/PathogenicityCard.spec.ts b/frontend/src/components/__tests__/GeneDetails/PathogenicityCard.spec.ts index 6c25e339..d142534c 100644 --- a/frontend/src/components/__tests__/GeneDetails/PathogenicityCard.spec.ts +++ b/frontend/src/components/__tests__/GeneDetails/PathogenicityCard.spec.ts @@ -1,4 +1,5 @@ import { describe, expect, it } from 'vitest' +import { VSheet } from 'vuetify/components' import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json' import PathogenicityCard from '@/components/GeneDetails/PathogenicityCard.vue' @@ -15,5 +16,10 @@ describe.concurrent('PathogenicityCard', async () => { } ) expect(wrapper.text()).toContain('Gene Pathogenicity') + expect(wrapper.text()).toContain('Intolerance Constraints and Annotations') + + // Find v-sheet components + const vSheets = wrapper.findAllComponents(VSheet) + expect(vSheets.length).toBe(3) }) })