From 7ee1d759ab4f0157c0bf430c7c82f7484f24806d Mon Sep 17 00:00:00 2001
From: Riley Grant <grantrileyh@gmail.com>
Date: Wed, 23 Oct 2024 13:27:18 -0500
Subject: [PATCH] test(browser): add TissueExpressionTrack tests

---
 .../GenePage/TissueExpressionTrack.spec.tsx   |  64 ++++
 .../TissueExpressionTrack.spec.tsx.snap       | 284 ++++++++++++++++++
 browser/src/__factories__/Gene.ts             |   4 +
 .../src/__factories__/TissueExpression.tsx    |  57 ++++
 4 files changed, 409 insertions(+)
 create mode 100644 browser/src/GenePage/TissueExpressionTrack.spec.tsx
 create mode 100644 browser/src/GenePage/__snapshots__/TissueExpressionTrack.spec.tsx.snap

diff --git a/browser/src/GenePage/TissueExpressionTrack.spec.tsx b/browser/src/GenePage/TissueExpressionTrack.spec.tsx
new file mode 100644
index 000000000..c80507c2a
--- /dev/null
+++ b/browser/src/GenePage/TissueExpressionTrack.spec.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { describe, expect, test } from '@jest/globals'
+
+import TissueExpressionTrack, { TranscriptWithTissueExpression } from './TissueExpressionTrack'
+
+// @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module '@gno... Remove this comment to see the full error message
+import { RegionViewerContext } from '@gnomad/region-viewer'
+
+import geneFactory from '../__factories__/Gene'
+
+describe('TissueExpressionTrack', () => {
+  test('snapshot has no unexpected changes', () => {
+    const regionViewerProps = {
+      centerPanelWidth: 500,
+      isPositionDefined: true,
+      leftPanelWidth: 100,
+      regions: [
+        {
+          start: 0,
+          stop: 100,
+        },
+      ],
+      rightPanelWidth: 100,
+      scalePosition: (i: number) => i,
+    }
+
+    const testTranscriptId = 'transcript-1337'
+    const gene = geneFactory.build({ canonical_transcript_id: testTranscriptId })
+
+    const testExons = [
+      {
+        feature_type: 'CDS',
+        start: 10,
+        stop: 20,
+      },
+      {
+        feature_type: 'CDS',
+        start: 20,
+        stop: 30,
+      },
+      {
+        feature_type: 'CDS',
+        start: 40,
+        stop: 60,
+      },
+    ]
+
+    const tree = renderer.create(
+      <RegionViewerContext.Provider value={regionViewerProps}>
+        <TissueExpressionTrack
+          exons={testExons}
+          expressionRegions={gene.pext!.regions}
+          flags={gene.pext!.flags}
+          transcripts={gene.transcripts as TranscriptWithTissueExpression[]}
+          preferredTranscriptId={testTranscriptId}
+          preferredTranscriptDescription="test-canonical-transcript"
+        />
+      </RegionViewerContext.Provider>
+    )
+
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/browser/src/GenePage/__snapshots__/TissueExpressionTrack.spec.tsx.snap b/browser/src/GenePage/__snapshots__/TissueExpressionTrack.spec.tsx.snap
new file mode 100644
index 000000000..ac482e4af
--- /dev/null
+++ b/browser/src/GenePage/__snapshots__/TissueExpressionTrack.spec.tsx.snap
@@ -0,0 +1,284 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TissueExpressionTrack snapshot has no unexpected changes 1`] = `
+<div
+  className="TissueExpressionTrack__Wrapper-sc-1t85ku0-3 iexARk"
+>
+  <div
+    className="TissueExpressionTrack__InnerWrapper-sc-1t85ku0-4 jdaBoy"
+  >
+    <div
+      className="Track__OuterWrapper-sc-1sdyh2h-0 bBMGlf"
+    >
+      <div
+        className="Track__InnerWrapper-sc-1sdyh2h-1 cEOGGC"
+      >
+        <div
+          className="Track__SidePanel-sc-1sdyh2h-3 iSYzDq"
+          style={
+            {
+              "width": 100,
+            }
+          }
+        >
+          <div
+            className="TissueExpressionTrack__TissueName-sc-1t85ku0-5 duaCFM"
+            style={
+              {
+                "fontSize": "12px",
+                "justifyContent": "space-between",
+                "marginRight": 0,
+              }
+            }
+          >
+            <button
+              className="Button__BaseButton-sc-1eobygi-0 Button-sc-1eobygi-1 indcWT"
+              disabled={false}
+              onClick={[Function]}
+              style={
+                {
+                  "height": "auto",
+                  "paddingLeft": "0.25em",
+                  "paddingRight": "0.25em",
+                  "width": "70px",
+                }
+              }
+              type="button"
+            >
+              Show
+               tissues
+            </button>
+            <span
+              style={
+                {
+                  "marginRight": "0.25em",
+                  "textAlign": "right",
+                }
+              }
+            >
+              Mean pext
+            </span>
+            <button
+              className="InfoButton__Button-sc-13t5e82-0 gxsoyZ"
+              onClick={[Function]}
+              style={
+                {
+                  "display": "inline",
+                }
+              }
+              type="button"
+            >
+              <img
+                alt=""
+                aria-hidden="true"
+                src="test-file-stub"
+              />
+              <span
+                style={
+                  {
+                    "border": "0",
+                    "clip": "rect(0 0 0 0)",
+                    "height": "1px",
+                    "margin": "-1px",
+                    "overflow": "hidden",
+                    "padding": "0",
+                    "position": "absolute",
+                    "whiteSpace": "nowrap",
+                    "width": "1px",
+                  }
+                }
+              >
+                More information
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          className="Track__CenterPanel-sc-1sdyh2h-4 iAyrrk"
+          style={
+            {
+              "width": 500,
+            }
+          }
+        >
+          <div
+            className="TissueExpressionTrack__PlotWrapper-sc-1t85ku0-6 jiFpkp"
+          >
+            <svg
+              height={20}
+              width={500}
+            >
+              <g
+                className="TissueExpressionTrack__RegionHoverTarget-sc-1t85ku0-2 fjPGDI"
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                <rect
+                  className="TissueExpressionTrack__RegionBackground-sc-1t85ku0-0 laWhbX"
+                  height={20}
+                  width={10}
+                  x={10}
+                  y={0}
+                />
+                <rect
+                  className="TissueExpressionTrack__Region-sc-1t85ku0-1 cckHbF"
+                  fill="#428bca"
+                  height={0}
+                  stroke="#428bca"
+                  width={10}
+                  x={10}
+                  y={20}
+                />
+              </g>
+              <g
+                className="TissueExpressionTrack__RegionHoverTarget-sc-1t85ku0-2 fjPGDI"
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                <rect
+                  className="TissueExpressionTrack__RegionBackground-sc-1t85ku0-0 laWhbX"
+                  height={20}
+                  width={10}
+                  x={20}
+                  y={0}
+                />
+                <rect
+                  className="TissueExpressionTrack__Region-sc-1t85ku0-1 cckHbF"
+                  fill="#428bca"
+                  height={6}
+                  stroke="#428bca"
+                  width={10}
+                  x={20}
+                  y={14}
+                />
+              </g>
+              <g
+                className="TissueExpressionTrack__RegionHoverTarget-sc-1t85ku0-2 fjPGDI"
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                <rect
+                  className="TissueExpressionTrack__RegionBackground-sc-1t85ku0-0 laWhbX"
+                  height={20}
+                  width={20}
+                  x={40}
+                  y={0}
+                />
+                <rect
+                  className="TissueExpressionTrack__Region-sc-1t85ku0-1 cckHbF"
+                  fill="#428bca"
+                  height={14}
+                  stroke="#428bca"
+                  width={20}
+                  x={40}
+                  y={6}
+                />
+              </g>
+            </svg>
+            <svg
+              height={1}
+              width={500}
+            >
+              <line
+                stroke="rgba(0,0,0,0)"
+                strokeWidth={1}
+                x1={0}
+                x2={500}
+                y1={0.5}
+                y2={0.5}
+              />
+              <rect
+                fill="#000"
+                height={1}
+                stroke="none"
+                width={10}
+                x={10}
+                y={0}
+              />
+              <rect
+                fill="#000"
+                height={1}
+                stroke="none"
+                width={10}
+                x={20}
+                y={0}
+              />
+              <rect
+                fill="#000"
+                height={1}
+                stroke="none"
+                width={20}
+                x={40}
+                y={0}
+              />
+            </svg>
+          </div>
+        </div>
+        <div
+          className="Track__SidePanel-sc-1sdyh2h-3 iSYzDq"
+          style={
+            {
+              "width": 100,
+            }
+          }
+        >
+          <svg
+            height={31}
+            width={100}
+          >
+            <line
+              stroke="#333"
+              x1={0}
+              x2={0}
+              y1={6}
+              y2={25}
+            />
+            <g
+              transform="translate(0, 6)"
+            >
+              <line
+                stroke="#333"
+                x1={0}
+                x2={3}
+                y1={0}
+                y2={0}
+              />
+              <text
+                dy="0.45em"
+                fill="#000"
+                fontSize={10}
+                textAnchor="start"
+                x={5}
+                y={0}
+              >
+                1
+              </text>
+            </g>
+            <g
+              transform="translate(0, 24)"
+            >
+              <line
+                stroke="#333"
+                x1={0}
+                x2={3}
+                y1={0}
+                y2={0}
+              />
+              <text
+                dy="0.1em"
+                fill="#000"
+                fontSize={10}
+                textAnchor="start"
+                x={5}
+                y={0}
+              >
+                0
+              </text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/browser/src/__factories__/Gene.ts b/browser/src/__factories__/Gene.ts
index 857ec6a49..5dc208164 100644
--- a/browser/src/__factories__/Gene.ts
+++ b/browser/src/__factories__/Gene.ts
@@ -6,6 +6,7 @@ import {
   HeterozygousVariantCooccurrenceCountsPerSeverityAndAfFactory,
   HomozygousVariantCooccurrenceCountsPerSeverityAndAfFactory,
 } from './VariantCooccurrenceCountsPerSeverityAndAf'
+import { pextFactory } from './TissueExpression'
 
 const geneFactory = Factory.define<Gene>(({ params, associations }) => {
   const {
@@ -50,6 +51,8 @@ const geneFactory = Factory.define<Gene>(({ params, associations }) => {
         ]
       : []
 
+  const pext = pextFactory.build()
+
   return {
     gene_id,
     gene_version,
@@ -69,6 +72,7 @@ const geneFactory = Factory.define<Gene>(({ params, associations }) => {
     structural_variants,
     clinvar_variants,
     copy_number_variants,
+    pext,
   }
 })
 
diff --git a/browser/src/__factories__/TissueExpression.tsx b/browser/src/__factories__/TissueExpression.tsx
index ea6eecaa0..69d5a66c3 100644
--- a/browser/src/__factories__/TissueExpression.tsx
+++ b/browser/src/__factories__/TissueExpression.tsx
@@ -1,5 +1,62 @@
 import { Factory } from 'fishery'
 import { GtexTissueExpression } from '../GenePage/TranscriptsTissueExpression'
+import { Pext } from '../GenePage/GenePage'
+
+type PextParams = {
+  tissues?: string[]
+  regions?: {
+    start: number
+    stop: number
+  }[]
+}
+
+export const pextFactory = Factory.define<Pext>(({ params }) => {
+  const defaultTissues = ['adipose_subcutaneous', 'adipose_visceral_omentum', 'adrenal_gland']
+
+  const { tissues: paramTissues, regions: paramRegions } = params as PextParams
+
+  const tissues = [...defaultTissues, ...(paramTissues ?? [])]
+
+  const defaultRegions = [
+    {
+      start: 10,
+      stop: 20,
+    },
+    {
+      start: 20,
+      stop: 30,
+    },
+    {
+      start: 40,
+      stop: 60,
+    },
+  ]
+
+  const regions = [...defaultRegions, ...(paramRegions ?? [])]
+
+  const pextObject: Pext = {
+    regions: regions.map((region, i) => {
+      const dummyValue = i / Object.keys(tissues).length
+
+      const tissueObjects = tissues.map((tissue) => {
+        return {
+          tissue,
+          value: dummyValue,
+        }
+      })
+
+      return {
+        start: region.start,
+        stop: region.stop,
+        mean: dummyValue,
+        tissues: tissueObjects,
+      }
+    }),
+    flags: [],
+  }
+
+  return pextObject
+})
 
 export const gtexTissueExpressionFactory = Factory.define<GtexTissueExpression>(({ params }) => {
   const defaultTissues = {