chore: Review tests after refurbishing gene detail view (#231) (#251)

bihealth · Dec 4, 2023 · 1d8ae68 · 1d8ae68
1 parent ae73ca7
commit 1d8ae68
Show file tree

Hide file tree

Showing 10 changed files with 171 additions and 2 deletions.
diff --git a/frontend/src/components/GeneDetails/ConditionsCard.vue b/frontend/src/components/GeneDetails/ConditionsCard.vue
@@ -215,6 +215,7 @@ const hpoTermsToShow = computed<HpoTerm[]>(() => {
 
       <v-card-actions>
         <v-switch
+          id="conditions-card-show-term-ids"
           v-model="showTermIds"
           color="primary"
           :value="true"
@@ -266,6 +267,7 @@ const hpoTermsToShow = computed<HpoTerm[]>(() => {
           Orphanet Diseases ({{ geneInfo?.orpha?.orphaDiseases?.length ?? 0 }})
         </div>
         <v-btn
+          id="conditions-card-expand-button"
           :append-icon="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
           @click="isExpanded = !isExpanded"
         >

diff --git a/frontend/src/components/GeneDetails/ExpressionCard.vue b/frontend/src/components/GeneDetails/ExpressionCard.vue
@@ -174,6 +174,7 @@ const vegaLayer = [
       </v-card-text>
       <v-card-actions>
         <v-btn
+          id="expression-card-gtex-portal"
           :href="`https://gtexportal.org/home/gene/${ensemblGeneId ?? ''}`"
           target="_blank"
           prepend-icon="mdi-launch"

diff --git a/frontend/src/components/GeneDetails/OverviewCard.vue b/frontend/src/components/GeneDetails/OverviewCard.vue
@@ -172,6 +172,7 @@ const summaryText = computed<string>(() => {
           </template>
         </div>
         <v-btn
+          id="overview-card-expand-button"
           :append-icon="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
           @click="isExpanded = !isExpanded"
         >

diff --git a/...s__/GeneDetails/SupplementaryList.spec.ts → ...s/BasicInfoCard/SupplementaryList.spec.ts b/...s__/GeneDetails/SupplementaryList.spec.ts → ...s/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)
   })
 })