feat: using links for home view examples (#349) (#353)

frontend/src/lib/utils.ts

@@ -107,6 +107,23 @@ export const scrollToSection = async (route: RouteLocationNormalizedLoaded) => {
   }
 }
 
+/**
+ * Helper that returns the `RouteLocationRaw` for the given search term.
+ *
+ * @param searchTerm The search term to use.
+ * @param genomeBuild The genome build to use.
+ * @returns The `RouteLocationRaw` to use with a vue-router `Router`.
+ */
+export const searchTo = (searchTerm: string, genomeBuild: GenomeBuild): RouteLocationRaw => {
+  return {
+    name: 'query',
+    query: {
+      q: searchTerm,
+      genomeBuild: genomeBuild
+    }
+  }
+}
+
 /** Helper that launches a search through the router.
  *
  * @param router The {Router} to use.
@@ -118,13 +135,7 @@ export const performSearch = async (
   searchTerm: string,
   genomeBuild: GenomeBuild
 ) => {
-  router.push({
-    name: 'query',
-    query: {
-      q: searchTerm,
-      genomeBuild: genomeBuild
-    }
-  })
+  router.push(searchTo(searchTerm, genomeBuild))
 }
 
 /**

frontend/src/views/HomeView.vue

@@ -6,14 +6,14 @@ Implements the search bar for variants and genes.
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { type RouteLocationRaw, useRouter } from 'vue-router'
 import { useTheme } from 'vuetify'
 
 import FooterDefault from '@/components/FooterDefault.vue'
 import PageHeader from '@/components/PageHeader.vue'
 import SearchBar from '@/components/SearchBar.vue'
 import { type GenomeBuild } from '@/lib/genomeBuilds'
-import { performSearch } from '@/lib/utils'
+import { performSearch, searchTo } from '@/lib/utils'
 import { EXAMPLES, type Example } from '@/views/HomeView.c'
 
 /** The current router. */
@@ -28,10 +28,8 @@ const searchTerm = ref<string>('')
 const genomeBuild = ref<GenomeBuild>('grch37')
 
 /** Launches a search for one of the examples. */
-const performExampleSearch = (example: Example) => {
-  searchTerm.value = example.query
-  genomeBuild.value = example.genomeBuild ?? 'grch37'
-  performSearch(router, searchTerm.value, genomeBuild.value)
+const exampleSearchTo = (example: Example): RouteLocationRaw => {
+  return searchTo(example.query, example.genomeBuild ?? genomeBuild.value)
 }
 
 /** Return backgorund color for v-main based on current theme. */
@@ -110,13 +108,13 @@ const mainBackgroundColor = computed(() => {
                   </div>
                   <div class="mt-2">
                     <v-btn
-                      v-for="example in section.examples"
-                      :key="example.query"
+                      v-for="(example, idx) in section.examples"
+                      :key="idx"
                       class="mx-1 mb-1 example text-none px-2"
                       variant="text"
                       :rounded="false"
                       prepend-icon="mdi-arrow-right-circle-outline"
-                      @click="performExampleSearch(example)"
+                      :to="exampleSearchTo(example)"
                     >
                       {{ example.query }}
                       <template v-if="example.hint">({{ example.hint }})</template>

frontend/src/views/__tests__/HomeView.spec.ts

@@ -103,7 +103,7 @@ describe.concurrent('HomeView with mocked router', async () => {
     expect(exampleTerms.length).toBe(13)
   })
 
-  it('searches for example by click', async () => {
+  it('examples have correct href', async () => {
     global.fetch = vi.fn((): any =>
       Promise.resolve({ ok: true, json: () => Promise.resolve({ success: false, value: null }) })
     )
@@ -127,7 +127,7 @@ describe.concurrent('HomeView with mocked router', async () => {
     const exampleTermsCard = wrapper.find('#examples')
     expect(exampleTermsCard.exists()).toBe(true)
     const exampleTerm = exampleTermsCard.find('.example')
-    await exampleTerm.trigger('click')
+    expect(exampleTerm.attributes().href).toEqual('/query?q=BRCA1&genomeBuild=grch37')
   })
 
   it.skip('correctly uses the router', async () => {