chore: Review tests after refurbishing SV details page (#238) (#253)

frontend/src/components/__tests__/BookmarkListItem.spec.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+
+import BookmarkListItem from '@/components/BookmarkListItem.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+import { StoreState } from '@/stores/misc'
+
+describe.concurrent('BookmarkListItem.vue', () => {
+  it('renders information with StoreState Active', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: BookmarkListItem, template: false },
+      {
+        props: {
+          type: 'seqvar',
+          id: 'HGNC:1100'
+        },
+        initialStoreState: {
+          bookmarks: {
+            bookmarks: [
+              {
+                user: '2c0a153e-5e8c-11ee-8c99-0242ac120002',
+                obj_type: 'seqvar',
+                obj_id: 'HGNC:1100',
+                id: '2c0a153e-5e8c-11ee-8c99-0242ac120001'
+              }
+            ],
+            storeState: StoreState.Active
+          }
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('Bookmark')
+    expect(wrapper.text()).not.toContain('Bookmark available after login')
+  })
+
+  it('renders information with StoreState Error', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: BookmarkListItem, template: false },
+      {
+        props: {
+          type: 'seqvar',
+          id: 'HGNC:1100'
+        },
+        initialStoreState: {
+          bookmarks: {
+            bookmarks: [
+              {
+                user: '2c0a153e-5e8c-11ee-8c99-0242ac120002',
+                obj_type: 'seqvar',
+                obj_id: 'HGNC:1100',
+                id: '2c0a153e-5e8c-11ee-8c99-0242ac120001'
+              }
+            ],
+            storeState: StoreState.Error
+          }
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('Bookmarks available after login')
+  })
+})

frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts

@@ -13,8 +13,9 @@ describe.concurrent('VariationLandscape', async () => {
         props: {
           clinvar: BRCA1Clinvar['genes']['HGNC:1100'],
           genomeRelease: 'grch37',
-          geneSymbol: 'HGNC:1100',
-          transcripts: BRCA1Transcripts
+          hgnc: 'HGNC:1100',
+          transcripts: BRCA1Transcripts,
+          geneSymbol: 'BRCA1'
         }
       }
     )

frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard.spec.ts

@@ -90,7 +90,17 @@ const makeWrapper = () => {
 describe.concurrent('AcmgRating', async () => {
   it('renders the AcmgRating info', async () => {
     const { wrapper } = await makeWrapper()
+
     expect(wrapper.text()).toContain('Uncertain significance')
-    expect(wrapper.text()).toContain('Semi-Automated')
+    expect(wrapper.text()).toContain('Semi-Automated Pathogenicity Prediction')
+  })
+
+  it('shows swithces and buttons', async () => {
+    const { wrapper } = await makeWrapper()
+
+    const switches = wrapper.findAllComponents({ name: 'VSwitch' })
+    expect(switches.length).toBe(1)
+    expect(wrapper.text()).toContain('Reset')
+    expect(wrapper.text()).toContain('Documentation')
   })
 })

frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnGain.spec.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+
+import * as CurrentSV from '@/assets/__tests__/ExampleSV.json'
+import CnGain from '@/components/StrucvarDetails/AcmgRatingCard/CnGain.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+
+describe.concurrent('CnGain', async () => {
+  it('renders the CnGain info', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: CnGain, template: false },
+      {
+        props: {
+          showConflictingSections: false
+        },
+        initialStoreState: {
+          svAcmgRating: {
+            svRecord: JSON.parse(JSON.stringify(CurrentSV))
+          }
+        }
+      }
+    )
+
+    const table = wrapper.findComponent({ name: 'VTable' })
+    expect(table.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Evidence')
+    expect(wrapper.text()).toContain('Description')
+    expect(wrapper.text()).toContain('Suggested points')
+    expect(wrapper.text()).toContain('Max score')
+  })
+})

frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnLoss.spec.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+
+import * as CurrentSV from '@/assets/__tests__/ExampleSV.json'
+import CnLoss from '@/components/StrucvarDetails/AcmgRatingCard/CnLoss.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+
+describe.concurrent('CnLoss', async () => {
+  it('renders the CnLoss info', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: CnLoss, template: false },
+      {
+        props: {
+          showConflictingSections: false
+        },
+        initialStoreState: {
+          svAcmgRating: {
+            svRecord: JSON.parse(JSON.stringify(CurrentSV))
+          }
+        }
+      }
+    )
+
+    const table = wrapper.findComponent({ name: 'VTable' })
+    expect(table.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Evidence')
+    expect(wrapper.text()).toContain('Description')
+    expect(wrapper.text()).toContain('Suggested points')
+    expect(wrapper.text()).toContain('Max score')
+  })
+})

frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/SummarySheet.spec.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+
+import SummarySheet from '@/components/StrucvarDetails/AcmgRatingCard/SummarySheet.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+
+describe.concurrent('SummarySheet', async () => {
+  it('renders the SummarySheet info', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: SummarySheet, template: false },
+      {
+        props: {
+          calculatedAcmgClass: 'Pathogenic',
+          calculatedAcmgScore: 3
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('Semi-Automated ACMG Pathogenicity Prediction')
+    const sheet = wrapper.findComponent({ name: 'VSheet' })
+    expect(sheet.exists()).toBe(true)
+
+    // Buttons
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' })
+    expect(buttons.length).toBe(2)
+    expect(buttons[0].text()).toContain('Reset to Auto')
+    expect(buttons[1].text()).toContain('Documentation')
+  })
+})

frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts

@@ -1,14 +1,27 @@
 import { describe, expect, it } from 'vitest'
 
+import * as CurrentSV from '@/assets/__tests__/ExampleSV.json'
 import ClinvarCard from '@/components/StrucvarDetails/ClinvarCard.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 describe.concurrent('ClinvarCard', async () => {
   it('renders the ClinvarCard info', async () => {
     const { wrapper } = await setupMountedComponents(
       { component: ClinvarCard, template: false },
-      {}
+      {
+        props: {
+          genomeRelease: 'grch37'
+        },
+        initialStoreState: {
+          svInfo: {
+            currentSvRecord: JSON.parse(JSON.stringify(CurrentSV))
+          }
+        }
+      }
     )
-    expect(wrapper.exists()).toBe(true)
+
+    expect(wrapper.text()).toContain('ClinVar')
+    const dataTable = wrapper.findComponent({ name: 'VDataTable' })
+    expect(dataTable.exists()).toBe(true)
   })
 })

frontend/src/components/__tests__/StrucvarDetails/GeneListCard.spec.ts

@@ -2,33 +2,39 @@ import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 
 import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
+import * as CurrentSV from '@/assets/__tests__/ExampleSV.json'
 import GeneListCard from '@/components/StrucvarDetails/GeneListCard.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
+import { StoreState } from '@/stores/misc'
 
 describe.concurrent('GeneListCard', async () => {
-  it.skip('renders the GeneListCard table', async () => {
+  it('renders the GeneListCard table', async () => {
     const { wrapper } = await setupMountedComponents(
       { component: GeneListCard, template: false },
       {
         props: {
-          currentSvRecord: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
-          selectedGeneHgncId: 'HGNC:1100'
+          genesInfos: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
+          currentSvRecord: JSON.parse(JSON.stringify(CurrentSV)),
+          selectedGeneHgncId: 'HGNC:1100',
+          storeState: StoreState.Active
         }
       }
     )
 
     const table = wrapper.findComponent({ name: 'VDataIterator' })
     expect(table.exists()).toBe(true)
-    expect(wrapper.text()).toContain('Select gene in table above to see details.')
+    expect(wrapper.text()).toContain('Overlapping and Contained Genes')
   })
 
-  it.skip('shows the gene info on row click', async () => {
+  it('shows the gene info on row click', async () => {
     const { wrapper } = await setupMountedComponents(
       { component: GeneListCard, template: false },
       {
         props: {
-          currentSvRecord: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
-          selectedGeneHgncId: 'HGNC:1100'
+          genesInfos: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
+          currentSvRecord: JSON.parse(JSON.stringify(CurrentSV)),
+          selectedGeneHgncId: 'HGNC:1100',
+          storeState: StoreState.Active
         }
       }
     )

frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneDosage.spec.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+
+import GeneDosage from '@/components/StrucvarDetails/GeneListCard/GeneDosage.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+
+describe.concurrent('GeneDosage', async () => {
+  it('renders the GeneDosage info with CLINGEN_DOSAGE_SCORE_RECESSIVE', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneDosage, template: false },
+      {
+        props: {
+          geneSymbol: 'BRCA1',
+          dosage: 'CLINGEN_DOSAGE_SCORE_RECESSIVE'
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('AR')
+    const launchButton = wrapper.findComponent({ name: 'VIcon' })
+    expect(launchButton.exists()).toBe(true)
+  })
+
+  it('renders the GeneDosage info with CLINGEN_DOSAGE_SCORE_UNKNOWN', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneDosage, template: false },
+      {
+        props: {
+          geneSymbol: 'BRCA1',
+          dosage: 'CLINGEN_DOSAGE_SCORE_UNKNOWN'
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('N/A')
+  })
+
+  it('renders the GeneDosage info with CLINGEN_DOSAGE_SCORE_SUFFICIENT_EVIDENCE_AVAILABLE', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneDosage, template: false },
+      {
+        props: {
+          geneSymbol: 'BRCA1',
+          dosage: 'CLINGEN_DOSAGE_SCORE_SUFFICIENT_EVIDENCE_AVAILABLE'
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('3')
+    const launchButton = wrapper.findComponent({ name: 'VIcon' })
+    expect(launchButton.exists()).toBe(true)
+  })
+})

frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneListEntry.spec.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+
+import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
+import GeneListEntry from '@/components/StrucvarDetails/GeneListCard/GeneListEntry.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+
+describe.concurrent('GeneListEntry', async () => {
+  it('renders the GeneListEntry info', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneListEntry, template: false },
+      {
+        props: {
+          item: JSON.parse(JSON.stringify({ raw: BRCA1GeneInfo['genes']['HGNC:1100'] })),
+          isSelected: false
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('BRCA1')
+    const dosage = wrapper.findComponent({ name: 'GeneDosage' })
+    expect(dosage.exists()).toBe(true)
+    const scoreChip = wrapper.findComponent({ name: 'ScoreChip' })
+    expect(scoreChip.exists()).toBe(true)
+  })
+})

frontend/src/components/__tests__/StrucvarDetails/GeneListCard/ScoreChip.spec.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import ScoreChip from '@/components/StrucvarDetails/GeneListCard/ScoreChip.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+
+describe.concurrent('ScoreChip', async () => {
+  it('renders the ScoreChip info with specified link', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: ScoreChip, template: false },
+      {
+        props: {
+          value: 0,
+          hrefUrl: 'https://example.com'
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('0')
+  })
+
+  it('renders the ScoreChip info without link', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: ScoreChip, template: false },
+      {
+        props: {
+          value: 0,
+          hrefUrl: ''
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('0')
+  })
+})