test(app): add basic e2e tests for app

tests/e2e/GenePage.playwright.spec.ts

@@ -0,0 +1,48 @@
+import { test, expect, type Page } from '@playwright/test'
+
+let page: Page
+
+test.afterAll(async () => {
+  await page.close()
+})
+
+test.describe('Gene page', () => {
+  test.describe('v4', () => {
+    // Make one API call on the gene page and share that result with other tests
+    test.beforeAll(async ({ browser }) => {
+      page = await browser.newPage()
+      await page.goto('/')
+      await page.getByRole('link', { name: 'PCSK9' }).click()
+    })
+
+    test('gene query', async () => {
+      await expect(page.getByText('Loading gene')).toHaveCount(0)
+
+      await expect(
+        page.getByText('PCSK9 proprotein convertase subtilisin/kexin type 9DatasetgnomAD v4.0.')
+      ).toBeVisible({ timeout: 10_000 })
+    })
+
+    test('coverage query', async () => {
+      await expect(page.getByText('Loading coverage')).toHaveCount(0)
+
+      await expect(
+        page.getByText(
+          'Fraction of individuals with coverage over 200.10.20.30.40.50.60.70.80.91.0'
+        )
+      ).toBeVisible({ timeout: 20_000 })
+    })
+
+    test('variants query', async () => {
+      await expect(page.getByText('Loading variants'))
+        .toHaveCount(0, { timeout: 30_000 })
+        .catch(() => {
+          throw new Error('gene page variants query timed out after 30s')
+        })
+
+      await expect(page.getByRole('columnheader', { name: 'Variant ID' })).toBeVisible({
+        timeout: 20_000,
+      })
+    })
+  })
+})

tests/e2e/RegionPage.playwright.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect, type Page } from '@playwright/test'
+
+let page: Page
+test.afterAll(async () => {
+  await page.close()
+})
+test.describe('Region page', () => {
+  test.describe('v4', () => {
+    test.beforeAll(async ({ browser }) => {
+      page = await browser.newPage()
+      await page.goto('/region/1-55050934-55053465')
+    })
+
+    test('region query', async () => {
+      await expect(page.getByText('Loading region')).toHaveCount(0)
+      await expect(
+        page.getByText('1-55050934-55053465ChangeDatasetgnomAD v4.0.0GRCh38gnomAD v4.0.0807,162')
+      ).toBeVisible({ timeout: 20_000 })
+    })
+
+    test('coverage query', async () => {
+      await expect(page.getByText('Loading coverage')).toHaveCount(0)
+      await expect(
+        page.getByText(
+          'Fraction of individuals with coverage over 200.10.20.30.40.50.60.70.80.91.0'
+        )
+      ).toBeVisible({ timeout: 30_000 })
+    })
+
+    test('variants query', async () => {
+      await expect(page.getByText('Loading variants')).toHaveCount(0)
+      await expect(page.getByRole('columnheader', { name: 'Variant ID' })).toBeVisible({
+        timeout: 30_000,
+      })
+    })
+  })
+})

tests/e2e/StructuralVariantRegionPage.playwright.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect, type Page } from '@playwright/test'
+
+let page: Page
+
+test.afterAll(async () => {
+  await page.close()
+})
+
+test.describe('Structural variant region page', () => {
+  test.describe('v4', () => {
+    test.beforeAll(async ({ browser }) => {
+      page = await browser.newPage()
+      await page.goto('region/19-11110640-11112638?dataset=gnomad_sv_r4')
+    })
+    test('region query', async () => {
+      await expect(page.getByText('Loading region')).toHaveCount(0)
+      await expect(page.getByRole('heading', { name: '19-11110640-' })).toBeVisible({
+        timeout: 20_000,
+      })
+    })
+
+    test('coverage query', async () => {
+      await expect(page.getByText('Loading coverage')).toHaveCount(0)
+      await expect(
+        page.getByText(
+          'genomeMetric: MeanMedianOver 1Over 5Over 10Over 15Over 20Over 25Over 30Over 50Over 100Save plotFraction of individuals with coverage over'
+        )
+      ).toBeVisible({ timeout: 20_000 })
+    })
+
+    test('variants query', async () => {
+      await expect(page.getByText('Loading variants')).toHaveCount(0)
+
+      await expect(
+        page.getByText(
+          'Color variants byConsequenceClass11,110,64011,110,83911,111,03911,111,23911,111'
+        )
+      ).toBeVisible({ timeout: 20_000 })
+    })
+  })
+})

tests/e2e/TranscriptPage.playwright.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect, type Page } from '@playwright/test'
+
+let page: Page
+test.afterAll(async () => {
+  await page.close()
+})
+
+test.describe('Transcript page', () => {
+  test.describe('v4', () => {
+    test.beforeAll(async ({ browser }) => {
+      page = await browser.newPage()
+      await page.goto('/')
+      await page.getByRole('link', { name: 'ENST00000302118' }).click()
+    })
+
+    test('transcript query', async () => {
+      await expect(page.getByText('Loading transcript')).toHaveCount(0)
+
+      await expect(page.getByText('Transcript: ENST00000302118.5DatasetgnomAD v4.0.')).toBeVisible({
+        timeout: 10_000,
+      })
+    })
+
+    test('coverage query', async () => {
+      await expect(page.getByText('Loading coverage')).toHaveCount(0)
+
+      await expect(
+        page.getByText(
+          'Fraction of individuals with coverage over 200.10.20.30.40.50.60.70.80.91.0'
+        )
+      ).toBeVisible({ timeout: 20_000 })
+    })
+
+    test('variants query', async () => {
+      await expect(page.getByText('Loading variants'))
+        .toHaveCount(0, { timeout: 30_000 })
+        .catch(() => {
+          throw new Error('gene page variants query timed out after 30s')
+        })
+
+      await expect(page.getByRole('columnheader', { name: 'Variant ID' })).toBeVisible({
+        timeout: 20_000,
+      })
+    })
+  })
+})

tests/e2e/VariantPage.playwright.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Variant page', () => {
+  test('v4 renders without crashes', async ({ page }) => {
+    await page.goto('/')
+    await page.getByRole('link', { name: '-55051215-G-GA' }).click()
+
+    // expect variant query to finish loading, and to render
+    await expect(
+      page.getByText('Insertion (1 base):1-55051215-G-GA (GRCh38)Copy variant IDGene page')
+    ).toBeVisible()
+
+    await expect(
+      page.locator('table').filter({ hasText: 'ExomesGenomesTotalFilters' })
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('Genetic Ancestry Group Frequencies More informationgnomADHGDP1KGLocal')
+    ).toBeVisible()
+
+    await expect(page.getByText('Variant Effect PredictorThis')).toBeVisible()
+
+    await page
+      .getByText('Age Distribution More informationExomeGenomeVariant carriersAll individuals<')
+      .click()
+  })
+})