diff --git a/frontend/src/components/__tests__/BookmarkListItem.spec.ts b/frontend/src/components/__tests__/BookmarkListItem.spec.ts
new file mode 100644
index 00000000..60ffa49d
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts
index 85fdb343..ad10c843 100644
--- a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts
+++ b/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'
         }
       }
     )
diff --git a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard.spec.ts
index 38e1da55..471352d7 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard.spec.ts
+++ b/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')
   })
 })
diff --git a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnGain.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnGain.spec.ts
new file mode 100644
index 00000000..8d141b8a
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnLoss.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnLoss.spec.ts
new file mode 100644
index 00000000..c58b1351
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/SummarySheet.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/SummarySheet.spec.ts
new file mode 100644
index 00000000..0fb4c124
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts
index a331db72..0ab239dc 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts
@@ -1,5 +1,6 @@
 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'
 
@@ -7,8 +8,20 @@ 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)
   })
 })
diff --git a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard.spec.ts
index 0e0ca0c6..0af99356 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard.spec.ts
+++ b/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
         }
       }
     )
diff --git a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneDosage.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneDosage.spec.ts
new file mode 100644
index 00000000..83964de4
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneListEntry.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneListEntry.spec.ts
new file mode 100644
index 00000000..5052080d
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/ScoreChip.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/ScoreChip.spec.ts
new file mode 100644
index 00000000..45c30cae
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/frontend/src/views/StrucvarDetailsView.vue b/frontend/src/views/StrucvarDetailsView.vue
index 435b5eb5..2d412038 100644
--- a/frontend/src/views/StrucvarDetailsView.vue
+++ b/frontend/src/views/StrucvarDetailsView.vue
@@ -216,7 +216,7 @@ const selectedGeneInfo = computed<any | null>(() => {
 
           <v-list-group value="gene">
             <template #activator="{ props: vProps }">
-              <v-list-item :value="vProps" prepend-icon="mdi-dna">
+              <v-list-item :value="vProps" prepend-icon="mdi-dna" v-bind="vProps">
                 Gene
                 <span class="font-italic">
                   {{ selectedGeneInfo?.hgnc?.symbol || selectedGeneInfo?.hgnc?.agr }}
@@ -242,6 +242,7 @@ const selectedGeneInfo = computed<any | null>(() => {
               <v-list-item
                 :value="vProps"
                 prepend-icon="mdi-magnify-expand"
+                v-bind="vProps"
                 title="Variant Details"
               />
             </template>
@@ -273,7 +274,6 @@ const selectedGeneInfo = computed<any | null>(() => {
       </div>
 
       <template v-if="selectedGeneInfo">
-        <div class="text-h4 mt-6 mb-3 ml-1">Gene Details</div>
         <div id="gene-overview" class="mt-3">
           <OverviewCard :gene-info="selectedGeneInfo" />
         </div>
diff --git a/frontend/src/views/__tests__/StrucvarDetailsView.spec.ts b/frontend/src/views/__tests__/StrucvarDetailsView.spec.ts
index fde4830c..eb7ff408 100644
--- a/frontend/src/views/__tests__/StrucvarDetailsView.spec.ts
+++ b/frontend/src/views/__tests__/StrucvarDetailsView.spec.ts
@@ -1,20 +1,28 @@
 import { createTestingPinia } from '@pinia/testing'
+import { flushPromises } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { VMenu } from 'vuetify/components'
 
 import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
 import * as CurrentSV from '@/assets/__tests__/ExampleSV.json'
+import ClinvarCard from '@/components/GeneDetails/ClinvarCard.vue'
+import ConditionsCard from '@/components/GeneDetails/ConditionsCard.vue'
+import ExpressionCard from '@/components/GeneDetails/ExpressionCard.vue'
+import OverviewCard from '@/components/GeneDetails/OverviewCard.vue'
+import PathogenicityCard from '@/components/GeneDetails/PathogenicityCard.vue'
 import GenomeBrowser from '@/components/GenomeBrowser.vue'
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
+import SearchBar from '@/components/SearchBar.vue'
 import AcmgRatingCard from '@/components/StrucvarDetails/AcmgRatingCard.vue'
-import SvDetailsClinvar from '@/components/StrucvarDetails/ClinvarCard.vue'
-import SvGenes from '@/components/StrucvarDetails/GeneListCard.vue'
+import StrucvarClinvarCard from '@/components/StrucvarDetails/ClinvarCard.vue'
+import GeneListCard from '@/components/StrucvarDetails/GeneListCard.vue'
 import VariantToolsCard from '@/components/StrucvarDetails/VariantToolsCard.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 import { StoreState } from '@/stores/misc'
 import { useSvInfoStore } from '@/stores/svInfo'
 
-import VariantDetailView from '../VariantDetailView.vue'
+import StrucvarDetailsView from '../StrucvarDetailsView.vue'
 
 const makeWrapper = () => {
   const pinia = createTestingPinia({ createSpy: vi.fn })
@@ -34,7 +42,7 @@ const makeWrapper = () => {
   svInfoStore.genesInfos = JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']]))
 
   return setupMountedComponents(
-    { component: VariantDetailView, template: true },
+    { component: StrucvarDetailsView, template: true },
     {
       props: {
         searchTerm: 'DEL:chr17:41176312:41277500',
@@ -45,12 +53,19 @@ const makeWrapper = () => {
   )
 }
 
-describe.concurrent('VariantDetailView', async () => {
+describe.concurrent('StrucvarDetailsView', async () => {
   it('renders the header', async () => {
     const { wrapper } = await makeWrapper()
 
     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)
   })
 
   it('renders the loading state', async () => {
@@ -63,18 +78,105 @@ describe.concurrent('VariantDetailView', async () => {
     expect(loading.exists()).toBe(true)
   })
 
-  it.skip('renders SvDetails info', async () => {
+  it('renders SvDetails info-cards and navigation drawer', async () => {
+    const { wrapper } = await makeWrapper()
+    await flushPromises()
+
+    const navigationDrawer = wrapper.find('.v-navigation-drawer')
+    expect(navigationDrawer.exists()).toBe(true)
+
+    // Renders the anchors
+    const geneList = wrapper.find('#gene-list')
+    const geneOverview = wrapper.find('#gene-overview')
+    const genePathogencity = wrapper.find('#gene-pathogenicity')
+    const geneConditions = wrapper.find('#gene-conditions')
+    const geneExpression = wrapper.find('#gene-expression')
+    const geneClinvar = wrapper.find('#gene-clinvar')
+    const strucvarClinvar = wrapper.find('#strucvar-clinvar')
+    const strucvarTools = wrapper.find('#strucvar-tools')
+    const strucvarAcmg = wrapper.find('#strucvar-acmg')
+    const strucvarGenomeBrowser = wrapper.find('#strucvar-genomebrowser')
+    expect(geneList.exists()).toBe(true)
+    expect(geneOverview.exists()).toBe(true)
+    expect(genePathogencity.exists()).toBe(true)
+    expect(geneConditions.exists()).toBe(true)
+    expect(geneExpression.exists()).toBe(true)
+    expect(geneClinvar.exists()).toBe(true)
+    expect(strucvarClinvar.exists()).toBe(true)
+    expect(strucvarTools.exists()).toBe(true)
+    expect(strucvarAcmg.exists()).toBe(true)
+    expect(strucvarGenomeBrowser.exists()).toBe(true)
+
+    // Renders the cards
+    const geneListCard = wrapper.findComponent(GeneListCard)
+    const overviewCard = wrapper.findComponent(OverviewCard)
+    const pathogencityCard = wrapper.findComponent(PathogenicityCard)
+    const conditionsCard = wrapper.findComponent(ConditionsCard)
+    const expressionCard = wrapper.findComponent(ExpressionCard)
+    const clinvarCard = wrapper.findComponent(ClinvarCard)
+    const strucvarClinvarCard = wrapper.findComponent(StrucvarClinvarCard)
+    const strucvarToolsCard = wrapper.findComponent(VariantToolsCard)
+    const strucvarAcmgCard = wrapper.findComponent(AcmgRatingCard)
+    const strucvarGenomeBrowserCard = wrapper.findComponent(GenomeBrowser)
+    expect(geneListCard.exists()).toBe(true)
+    expect(overviewCard.exists()).toBe(true)
+    expect(pathogencityCard.exists()).toBe(true)
+    expect(conditionsCard.exists()).toBe(true)
+    expect(expressionCard.exists()).toBe(true)
+    expect(clinvarCard.exists()).toBe(true)
+    expect(strucvarClinvarCard.exists()).toBe(true)
+    expect(strucvarToolsCard.exists()).toBe(true)
+    expect(strucvarAcmgCard.exists()).toBe(true)
+    expect(strucvarGenomeBrowserCard.exists()).toBe(true)
+  })
+
+  it.skip('emits update in header', async () => {
+    const { wrapper } = await makeWrapper()
+
+    const header = wrapper.findComponent(HeaderDetailPage)
+    expect(header.exists()).toBe(true)
+    await header.setValue('DEL:chr17:41176312:41277500', 'searchTermRef')
+    await header.setValue('grch37', 'genomeReleaseRef')
+    expect(header.emitted()).toHaveProperty('update:searchTermRef')
+    expect(header.emitted()).toHaveProperty('update:genomeReleaseRef')
+    expect(header.vm.$props).toContain({ searchTerm: '', genomeRelease: 'grch37' })
+
+    const searchBar = wrapper.findComponent(SearchBar)
+    expect(searchBar.exists()).toBe(true)
+    await searchBar.setValue('DEL:chr17:41176312:41277500', 'searchTermRef')
+    await searchBar.setValue('grch37', 'genomeReleaseRef')
+    expect(searchBar.emitted()).toHaveProperty('update:searchTermRef')
+    expect(searchBar.emitted()).toHaveProperty('update:genomeReleaseRef')
+    expect(searchBar.vm.$props).toContain({ searchTerm: '', genomeRelease: 'grch37' })
+  })
+
+  it.skip('emits update in gene list', async () => {
+    const { wrapper } = await makeWrapper()
+
+    const geneList = wrapper.findComponent(GeneListCard)
+    expect(geneList.exists()).toBe(true)
+
+    await geneList.setValue('HGNC:1100', 'selectedGeneHgncId')
+    expect(wrapper.emitted()).toHaveProperty('update:selectedGeneHgncId')
+    expect(wrapper.vm.$props).toContain({ selectedGeneHgncId: 'HGNC:1100' })
+  })
+
+  it.skip('emits update in genome browser', async () => {
     const { wrapper } = await makeWrapper()
 
-    const svGenes = wrapper.findComponent(SvGenes)
-    const svTools = wrapper.findComponent(VariantToolsCard)
-    const svDetailsClinvar = wrapper.findComponent(SvDetailsClinvar)
-    const acmgRating = wrapper.findComponent(AcmgRatingCard)
     const genomeBrowser = wrapper.findComponent(GenomeBrowser)
-    expect(svGenes.exists()).toBe(true)
-    expect(svTools.exists()).toBe(true)
-    expect(svDetailsClinvar.exists()).toBe(true)
-    expect(acmgRating.exists()).toBe(true)
     expect(genomeBrowser.exists()).toBe(true)
+
+    await genomeBrowser.setValue('chr17', 'selectedChromosome')
+    await genomeBrowser.setValue(41176312, 'selectedStart')
+    await genomeBrowser.setValue(41277500, 'selectedEnd')
+    expect(wrapper.emitted()).toHaveProperty('update:selectedChromosome')
+    expect(wrapper.emitted()).toHaveProperty('update:selectedStart')
+    expect(wrapper.emitted()).toHaveProperty('update:selectedEnd')
+    expect(wrapper.vm.$props).toContain({
+      selectedChromosome: 'chr17',
+      selectedStart: 41176312,
+      selectedEnd: 41277500
+    })
   })
 })