test: seqvars e2e for preset values (#1888)

varfish-org · Aug 8, 2024 · feed0d9 · feed0d9
1 parent 9d18422
commit feed0d9
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 11 deletions.
diff --git a/frontend/end-to-end-tests/seqvar-filtration.spec.ts b/frontend/end-to-end-tests/seqvar-filtration.spec.ts
@@ -6,6 +6,82 @@ test.beforeEach(async ({ page }) => {
   )
 })
 
+test('preset values are set correctly,', async ({ page }) => {
+  await page.getByLabel('Create query based on de novo').click()
+
+  // genotype
+  await expect(
+    page.locator(
+      '[aria-label="Genotype presets"] [aria-selected="true"]:has-text("de novo")',
+    ),
+  ).toBeVisible()
+  await expect(
+    page.locator(
+      '.v-select:has(label:has-text("recessive")):has-text("disabled")',
+    ),
+  ).toBeVisible()
+
+  await expect(page.locator('#index')).toBeChecked()
+  await expect(
+    page.locator(
+      'fieldset:has(legend:has-text("index")) [aria-checked="true"]',
+    ),
+  ).toContainText(['1/0', '1/1'])
+
+  await expect(page.locator('#father')).toBeChecked()
+  await expect(
+    page.locator(
+      'fieldset:has(legend:has-text("father")) [aria-checked="true"]',
+    ),
+  ).toContainText('0/0')
+
+  await expect(page.locator('#mother')).toBeChecked()
+  await expect(
+    page.locator(
+      'fieldset:has(legend:has-text("mother")) [aria-checked="true"]',
+    ),
+  ).toContainText('0/0')
+
+  // frequency
+  await expect(
+    page.locator(
+      '[aria-label="Frequency presets"] [aria-selected="true"]:has-text("dominant strict")',
+    ),
+  ).toBeVisible()
+  await expect(page.locator("[id='gnomAd exomes']")).toBeChecked()
+  await expect(page.locator("[id='gnomAd genomes']")).toBeChecked()
+  await expect(page.locator("[id='gnomAd mitochondrial']")).toBeChecked({
+    checked: false,
+  })
+  await expect(page.locator("[id='in-house DB']")).toBeChecked()
+  await expect(page.locator('#HelixMTdb')).toBeChecked({ checked: false })
+
+  // effects
+  await expect(
+    page.locator(
+      '[aria-label="Effects presets"] [aria-selected="true"]:has-text("AA change + splicing")',
+    ),
+  ).toBeVisible()
+  await expect(page.locator('input[aria-label="non-coding"]')).toBeChecked({
+    checked: false,
+  })
+  await expect(page.locator('input[aria-label="missense"]')).toBeChecked()
+
+  // quality
+  await expect(
+    page.locator(
+      '[aria-label="Quality presets"] [aria-selected="true"]:has-text("super strict")',
+    ),
+  ).toBeVisible()
+  const section = await page.locator('[aria-label="Quality"]')
+  for (const loc of await section.locator('[aria-label="min DP het"]').all()) {
+    await expect(loc).toHaveValue('10')
+  }
+  for (const loc of await section.locator('[aria-label="max DP hom"]').all()) {
+    await expect(loc).toHaveValue('5')
+  }
+})
+
 test('modified genotype preset is marked', async ({ page }) => {
   page.locator('button[aria-label="Create query based on dominant"]').click()
 

diff --git a/frontend/src/seqvars/components/QualityControls.vue b/frontend/src/seqvars/components/QualityControls.vue
@@ -45,12 +45,27 @@ const model = defineModel<Query>({ required: true })
         >{{ item.sample }}</label
       >
 
-      <Input v-model="item.min_dp_het" style="grid-column: 2; width: 32px" />
-      <Input v-model="item.min_dp_hom" style="width: 32px" />
-      <Input v-model="item.min_ab_het" style="width: 32px" />
-      <Input v-model="item.min_gq" style="width: 32px" />
-      <Input v-model="item.min_ad" style="width: 32px" />
-      <Input v-model="item.max_ad" style="width: 32px" />
+      <fieldset style="display: contents">
+        <legend style="display: none">{{ item.sample }}</legend>
+        <Input
+          v-model="item.min_dp_het"
+          aria-label="min DP het"
+          style="grid-column: 2; width: 32px"
+        />
+        <Input
+          v-model="item.min_dp_hom"
+          aria-label="max DP hom"
+          style="width: 32px"
+        />
+        <Input
+          v-model="item.min_ab_het"
+          aria-label="min AB"
+          style="width: 32px"
+        />
+        <Input v-model="item.min_gq" aria-label="min GQ" style="width: 32px" />
+        <Input v-model="item.min_ad" aria-label="min AD" style="width: 32px" />
+        <Input v-model="item.max_ad" aria-label="max AD" style="width: 32px" />
+      </fieldset>
     </template>
   </div>
 </template>
diff --git a/frontend/src/seqvars/components/genotype/GenotypeControls.vue b/frontend/src/seqvars/components/genotype/GenotypeControls.vue
@@ -74,6 +74,7 @@ const recessiveMode = computed<RecessiveModeEnum>({
         <InheritanceModeControls
           v-if="recessiveMode == 'disabled'"
           v-model="model.genotype.sample_genotype_choices![index]"
+          :legend="choice.sample"
         />
         <RecessiveControls
           v-else-if="model.genotype.sample_genotype_choices"

diff --git a/frontend/src/seqvars/components/genotype/InheritanceModeControls.vue b/frontend/src/seqvars/components/genotype/InheritanceModeControls.vue
@@ -20,6 +20,8 @@ const model = defineModel<SeqvarsSampleGenotypePydanticList[number]>({
   required: true,
 })
 
+const props = defineProps<{ legend: string }>()
+
 const { WILD_TYPE, HET_ALT, HOM_ALT } = InheritanceMode
 
 type GenotypeKey = Exclude<
@@ -73,7 +75,8 @@ const ANY_ITEMS_WITH_LABELS = [
 </script>
 
 <template>
-  <div style="display: flex; gap: 8px">
+  <fieldset style="display: flex; gap: 8px">
+    <legend style="display: none">{{ props.legend }}</legend>
     <div style="display: flex; gap: 4px">
       <CheckButton
         :model-value="model.genotype == 'any'"
@@ -86,18 +89,20 @@ const ANY_ITEMS_WITH_LABELS = [
               : [...modes, ...ANY_ITEMS_WITH_LABELS.map(([item]) => item)],
           )
         "
-        >any</CheckButton
       >
+        any
+      </CheckButton>
 
       <CheckButton
         v-for="[key, label] in ANY_ITEMS_WITH_LABELS"
         :key="key"
         :model-value="modes.has(key)"
         @update:model-value="toggleModes(key)"
-        >{{ label }}</CheckButton
       >
+        {{ label }}
+      </CheckButton>
     </div>
 
     <CheckButton v-model="model.include_no_call">no call</CheckButton>
-  </div>
+  </fieldset>
 </template>
diff --git a/frontend/src/seqvars/components/ui/CollapsibleGroup.vue b/frontend/src/seqvars/components/ui/CollapsibleGroup.vue
@@ -27,7 +27,7 @@ const isOpen = ref(true)
         <div v-if="!isOpen">{{ summary }}</div>
       </div>
     </summary>
-    <div style="display: flex">
+    <div style="display: flex" :aria-label="props.title">
       <button type="button" class="side-toggle" @click="isOpen = !isOpen">
         <div class="indicator"></div>
       </button>

diff --git a/frontend/src/seqvars/views/SeqvarsFiltration.vue b/frontend/src/seqvars/views/SeqvarsFiltration.vue
@@ -196,6 +196,7 @@ const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
           >
             <div
               role="listbox"
+              aria-label="Genotype presets"
               style="width: 100%; display: flex; flex-direction: column"
             >
               <Item
@@ -233,6 +234,7 @@ const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
           >
             <div
               role="listbox"
+              :aria-label="`${group.title} presets`"
               style="width: 100%; display: flex; flex-direction: column"
             >
               <Item