feat: adding GenePathogenicityCard with storybook and tests

.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
   ],
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
     'vue/multi-word-component-names': 'off'
   },
   overrides: [

.storybook/StoryWrapper.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app :theme="themeName" :full-height="false">
-    <v-main>
+    <v-main class="pa-3">
       <slot name="story"></slot>
     </v-main>
   </v-app>

Makefile

@@ -75,7 +75,7 @@ proto-fetch:
 .PHONY: proto-ts
 proto-ts:
 	mkdir -p src/pbs
-	npx protoc --ts_out src/pbs --proto_path protos protos/annonars/genes/base.proto
+	npx protoc --ts_opt keep_enum_prefix --ts_out src/pbs --proto_path protos protos/annonars/genes/base.proto
 
 .PHONY: proto
 proto: proto-fetch proto-ts format lint

package.json

@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "@protobuf-ts/runtime": "^2.9.3",
     "vite-plugin-css-injected-by-js": "^3.3.1",
     "vite-plugin-static-copy": "^1.0.1",
     "vue": "^3.3.11",

src/components/GenePathogenicityCard/GenePathogenicityCard.spec.ts

@@ -0,0 +1,101 @@
+import fs from 'fs'
+import path from 'path'
+import { describe, expect, it } from 'vitest'
+
+import { setupMountedComponents } from '../../lib/testUtils'
+import { Record as GeneInfoRecord } from '../../pbs/annonars/genes/base'
+import GenePathogenicityCard from './GenePathogenicityCard.vue'
+
+// Load fixture data for gene TGDS (little data) and BRCA1 (lots of data).
+const geneInfoTgds = GeneInfoRecord.fromJsonString(
+  fs.readFileSync(path.resolve(__dirname, './fixture.geneInfo.TGDS.json'), 'utf8')
+)
+const geneInfoBrca1 = GeneInfoRecord.fromJsonString(
+  fs.readFileSync(path.resolve(__dirname, './fixture.geneInfo.BRCA1.json'), 'utf8')
+)
+
+describe.concurrent('GenePathogenicityCard.vue', async () => {
+  it('renders correctly with TGDS for certain key aspects', async () => {
+    // arrange:
+    const { wrapper } = await setupMountedComponents(
+      { component: GenePathogenicityCard },
+      {
+        props: {
+          geneInfo: geneInfoTgds
+        }
+      }
+    )
+
+    // act: nothing, only test rendering
+
+    // assert:
+    // Check string contents for title and essential metrics
+    expect(wrapper.text()).toContain('Gene Pathogenicity')
+    expect(wrapper.text()).toContain('Intolerance Constraints and Annotations')
+    expect(wrapper.text()).toContain('pLI 0.00')
+    expect(wrapper.text()).toContain('LOEUF 1.19')
+    expect(wrapper.text()).toContain('Missense o/e (upper) 0.96')
+    expect(wrapper.text()).toContain('o/e Z-score 0.82')
+    expect(wrapper.text()).toContain('DECIPHER  %HI  N/A')
+    expect(wrapper.text()).toContain('sHet0.00pHaplo0.76pTriplo0.33')
+    // Count VSheet components
+    const vSheets = wrapper.findAllComponents({ name: 'VSheet' })
+    expect(vSheets.length).toBe(3)
+  })
+
+  it('renders correctly with BRCA1 for certain key aspects', async () => {
+    // arrange:
+    const { wrapper } = await setupMountedComponents(
+      { component: GenePathogenicityCard },
+      {
+        props: {
+          geneInfo: geneInfoBrca1
+        }
+      }
+    )
+
+    // act: nothing, only test rendering
+
+    // assert:
+    // Check string contents for title and essential metrics
+    expect(wrapper.text()).toContain('Gene Pathogenicity')
+    expect(wrapper.text()).toContain('Intolerance Constraints and Annotations')
+    expect(wrapper.text()).toContain('pLI 0.00')
+    expect(wrapper.text()).toContain('LOEUF 0.89')
+    expect(wrapper.text()).toContain('Missense o/e (upper) 0.90')
+    expect(wrapper.text()).toContain('o/e Z-score 2.32')
+    expect(wrapper.text()).toContain('DECIPHER  %HI  N/A')
+    expect(wrapper.text()).toContain('sHet0.01pHaplo0.28pTriplo0.62')
+    // Count VSheet components
+    const vSheets = wrapper.findAllComponents({ name: 'VSheet' })
+    expect(vSheets.length).toBe(3)
+  })
+
+  it('renders correctly with undefined geneInfo', async () => {
+    // arrange:
+    const { wrapper } = await setupMountedComponents(
+      { component: GenePathogenicityCard },
+      {
+        props: {
+          geneInfo: undefined
+        }
+      }
+    )
+
+    // act: nothing, only test rendering
+
+    // assert:
+    // Check string contents for title and essential metrics
+    expect(wrapper.text()).toContain('Gene Pathogenicity')
+    expect(wrapper.text()).toContain('Intolerance Constraints and Annotations')
+    expect(wrapper.text()).not.toContain('pLI')
+    expect(wrapper.text()).not.toContain('LOEUF')
+    expect(wrapper.text()).not.toContain('Missense o/e (upper)')
+    expect(wrapper.text()).not.toContain('o/e Z-score')
+    expect(wrapper.text()).not.toContain('DECIPHER')
+    expect(wrapper.text()).not.toContain('sHet')
+    // Count VSkeletonLoader components
+    const vLoader = wrapper.findAllComponents({ name: 'VSkeletonLoader' })
+    expect(vLoader.length).toBe(1)
+  })
+})

src/components/GenePathogenicityCard/GenePathogenicityCard.stories.ts

@@ -0,0 +1,46 @@
+import { JsonValue } from '@protobuf-ts/runtime'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { Record as GeneInfoRecord } from '../../pbs/annonars/genes/base'
+import GenePathogenicityCard from './GenePathogenicityCard.vue'
+import geneInfoBrca1Json from './fixture.geneInfo.BRCA1.json'
+import geneInfoTgdsJson from './fixture.geneInfo.TGDS.json'
+
+// Here, fixture data is loaded via `import` from JSON file.  Reading the file
+// as in the tests fails with "process is not defined" error in the browser.
+
+// @ts-ignore
+const geneInfoTgds = GeneInfoRecord.fromJson(geneInfoTgdsJson as JsonValue)
+// @ts-ignore
+const geneInfoBrca1 = GeneInfoRecord.fromJson(geneInfoBrca1Json as JsonValue)
+
+const meta = {
+  title: 'Gene/GenePathogenicityCard',
+  component: GenePathogenicityCard,
+  tags: ['autodocs'],
+  argTypes: {
+    geneInfo: { control: { type: 'object' } }
+  },
+  args: { geneInfo: geneInfoTgds }
+} satisfies Meta<typeof GenePathogenicityCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TGDS: Story = {
+  args: {
+    geneInfo: geneInfoTgds
+  }
+}
+
+export const BRCA1: Story = {
+  args: {
+    geneInfo: geneInfoBrca1
+  }
+}
+
+export const UndefinedGeneInfo: Story = {
+  args: {
+    geneInfo: undefined
+  }
+}