Typescriptify some integration tests

plugins/linear-genome-view/src/LinearGenomeView/components/TracksContainer.tsx

@@ -162,7 +162,7 @@ function TracksContainer({
   return (
     <div
       ref={ref}
-      role="presentation"
+      data-testid="trackContainer"
       className={classes.tracksContainer}
       onMouseDown={mouseDown}
       onMouseUp={mouseUp}

plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap

@@ -328,7 +328,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
   </div>
   <div
     class="tss-75rarj-tracksContainer"
-    role="presentation"
+    data-testid="trackContainer"
   >
     <div
       class="tss-1rfvwmf-verticalGuidesZoomContainer"
@@ -896,7 +896,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
   </div>
   <div
     class="tss-75rarj-tracksContainer"
-    role="presentation"
+    data-testid="trackContainer"
   >
     <div
       class="tss-1rfvwmf-verticalGuidesZoomContainer"

products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap

@@ -412,7 +412,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
           </div>
           <div
             class="tss-75rarj-tracksContainer"
-            role="presentation"
+            data-testid="trackContainer"
           >
             <div
               class="tss-1rfvwmf-verticalGuidesZoomContainer"

products/jbrowse-web/src/tests/Alignments.test.js → products/jbrowse-web/src/tests/Alignments.test.tsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { fireEvent, render, within } from '@testing-library/react'
+import { fireEvent, within } from '@testing-library/react'
 import { LocalFile } from 'generic-filehandle'
 
 // locals
 import { clearCache } from '@jbrowse/core/util/io/RemoteFileWithRangeCache'
 import { clearAdapterCache } from '@jbrowse/core/data_adapters/dataAdapterCache'
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
 import {
-  JBrowse,
   setup,
   expectCanvasMatch,
   generateReadBuffer,
-  getPluginManager,
+  createView,
+  hts,
+  pc,
 } from './util'
 
 expect.extend({ toMatchImageSnapshot })
@@ -20,7 +20,9 @@ setup()
 beforeEach(() => {
   clearCache()
   clearAdapterCache()
+  // @ts-ignore
   fetch.resetMocks()
+  // @ts-ignore
   fetch.mockResponse(
     generateReadBuffer(
       url => new LocalFile(require.resolve(`../../test_data/volvox/${url}`)),
@@ -31,41 +33,25 @@ beforeEach(() => {
 const delay = { timeout: 20000 }
 
 test('opens an alignments track', async () => {
-  const pm = getPluginManager()
-  const state = pm.rootModel
-  const { findByTestId, findByText, findAllByTestId } = render(
-    <JBrowse pluginManager={pm} />,
-  )
+  const { view, findByTestId, findByText, findAllByTestId } = createView()
   await findByText('Help')
-  state.session.views[0].setNewView(5, 100)
+  view.setNewView(5, 100)
   fireEvent.click(
-    await findByTestId(
-      'htsTrackEntry-volvox_alignments_pileup_coverage',
-      {},
-      delay,
-    ),
+    await findByTestId(hts('volvox_alignments_pileup_coverage'), {}, delay),
   )
 
   const { findByTestId: findByTestId1 } = within(
     await findByTestId('Blockset-pileup', {}, delay),
   )
   expectCanvasMatch(
-    await findByTestId1(
-      'prerendered_canvas_{volvox}ctgA:1..4,000-0_done',
-      {},
-      delay,
-    ),
+    await findByTestId1(pc('{volvox}ctgA:1..4,000-0'), {}, delay),
   )
 
   const { findByTestId: findByTestId2 } = within(
     await findByTestId('Blockset-snpcoverage', {}, delay),
   )
   expectCanvasMatch(
-    await findByTestId2(
-      'prerendered_canvas_{volvox}ctgA:1..4,000-0_done',
-      {},
-      delay,
-    ),
+    await findByTestId2(pc('{volvox}ctgA:1..4,000-0'), {}, delay),
   )
 
   const track = await findAllByTestId('pileup_overlay_canvas')
@@ -81,43 +67,32 @@ test('opens an alignments track', async () => {
 }, 20000)
 
 test('test that bam with small max height displays message', async () => {
-  const pm = getPluginManager()
-  const { findByTestId, findAllByText } = render(<JBrowse pluginManager={pm} />)
+  const { findByTestId, findAllByText } = createView()
   fireEvent.click(
-    await findByTestId('htsTrackEntry-volvox_bam_small_max_height', {}, delay),
+    await findByTestId(hts('volvox_bam_small_max_height'), {}, delay),
   )
 
   await findAllByText('Max height reached', {}, delay)
 }, 30000)
 
 test('test snpcoverage doesnt count snpcoverage', async () => {
-  const pm = getPluginManager()
-  const state = pm.rootModel
-  const { findByText, findByTestId } = render(<JBrowse pluginManager={pm} />)
+  const { view, findByTestId, findByText } = createView()
   await findByText('Help')
-  state.session.views[0].setNewView(0.03932, 67884.16536402702)
+  view.setNewView(0.03932, 67884.16536402702)
 
   // load track
   fireEvent.click(
-    await findByTestId('htsTrackEntry-volvox-long-reads-sv-cram', {}, delay),
+    await findByTestId(hts('volvox-long-reads-sv-cram'), {}, delay),
   )
 
   const { findByTestId: findByTestId1 } = within(
     await findByTestId('Blockset-snpcoverage', {}, delay),
   )
 
   expectCanvasMatch(
-    await findByTestId1(
-      'prerendered_canvas_{volvox}ctgA:2,657..2,688-0_done',
-      {},
-      delay,
-    ),
+    await findByTestId1(pc('{volvox}ctgA:2,657..2,688-0'), {}, delay),
   )
   expectCanvasMatch(
-    await findByTestId1(
-      'prerendered_canvas_{volvox}ctgA:2,689..2,720-0_done',
-      {},
-      delay,
-    ),
+    await findByTestId1(pc('{volvox}ctgA:2,689..2,720-0'), {}, delay),
   )
 }, 30000)

products/jbrowse-web/src/tests/AlignmentsFeatures.test.js → products/jbrowse-web/src/tests/AlignmentsFeatures.test.tsx

@@ -1,18 +1,17 @@
-import React from 'react'
-import { fireEvent, render, within } from '@testing-library/react'
-import { act } from 'react-dom/test-utils'
+import { fireEvent, within } from '@testing-library/react'
 import { LocalFile } from 'generic-filehandle'
 
 // locals
 import { clearCache } from '@jbrowse/core/util/io/RemoteFileWithRangeCache'
 import { clearAdapterCache } from '@jbrowse/core/data_adapters/dataAdapterCache'
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
 import {
-  JBrowse,
   setup,
   expectCanvasMatch,
   generateReadBuffer,
-  getPluginManager,
+  createView,
+  pc,
+  hts,
 } from './util'
 
 expect.extend({ toMatchImageSnapshot })
@@ -21,7 +20,9 @@ setup()
 beforeEach(() => {
   clearCache()
   clearAdapterCache()
+  // @ts-ignore
   fetch.resetMocks()
+  // @ts-ignore
   fetch.mockResponse(
     generateReadBuffer(
       url => new LocalFile(require.resolve(`../../test_data/volvox/${url}`)),
@@ -33,22 +34,20 @@ const delay = { timeout: 20000 }
 
 test('opens the track menu and enables soft clipping', async () => {
   console.error = jest.fn()
-  const pm = getPluginManager()
-  const { session } = pm.rootModel
-  const { findByTestId, findByText } = render(<JBrowse pluginManager={pm} />)
+  const { view, findByTestId, findByText } = createView()
   await findByText('Help')
-  act(() => session.views[0].setNewView(0.02, 142956))
+  view.setNewView(0.02, 142956)
 
   // load track
   fireEvent.click(
-    await findByTestId('htsTrackEntry-volvox-long-reads-sv-bam', {}, delay),
+    await findByTestId(hts('volvox-long-reads-sv-bam'), {}, delay),
   )
   await findByTestId(
     'display-volvox-long-reads-sv-bam-LinearAlignmentsDisplay',
     {},
     delay,
   )
-  expect(session.views[0].tracks[0]).toBeTruthy()
+  expect(view.tracks[0]).toBeTruthy()
 
   // opens the track menu
   fireEvent.click(await findByTestId('track_menu_icon'))
@@ -61,7 +60,7 @@ test('opens the track menu and enables soft clipping', async () => {
 
   expectCanvasMatch(
     await findByTestId1(
-      'prerendered_canvas_softclipped_{volvox}ctgA:2,849..2,864-0_done',
+      pc('softclipped_{volvox}ctgA:2,849..2,864-0'),
       {},
       delay,
     ),
@@ -70,24 +69,18 @@ test('opens the track menu and enables soft clipping', async () => {
 
 test('selects a sort, sort by strand', async () => {
   console.error = jest.fn()
-  const pm = getPluginManager()
-  const { session } = pm.rootModel
-  const { findByTestId, findByText, findAllByTestId } = render(
-    <JBrowse pluginManager={pm} />,
-  )
+  const { view, findByTestId, findByText, findAllByTestId } = createView()
   await findByText('Help')
-  act(() => session.views[0].setNewView(0.02, 2086500))
+  view.setNewView(0.02, 2086500)
 
   // load track
-  fireEvent.click(
-    await findByTestId('htsTrackEntry-volvox-long-reads-cram', {}, delay),
-  )
+  fireEvent.click(await findByTestId(hts('volvox-long-reads-cram'), {}, delay))
   await findByTestId(
     'display-volvox-long-reads-cram-LinearAlignmentsDisplay',
     {},
     delay,
   )
-  expect(session.views[0].tracks[0]).toBeTruthy()
+  expect(view.tracks[0]).toBeTruthy()
 
   fireEvent.click(await findByTestId('track_menu_icon'))
   fireEvent.click(await findByText('Sort by'))
@@ -101,28 +94,18 @@ test('selects a sort, sort by strand', async () => {
   )
 
   expectCanvasMatch(
-    await findByTestId1(
-      'prerendered_canvas_{volvox}ctgA:41,729..41,744-0_done',
-      {},
-      delay,
-    ),
+    await findByTestId1(pc('{volvox}ctgA:41,729..41,744-0'), {}, delay),
   )
 }, 35000)
 
 test('color by strand', async () => {
   console.error = jest.fn()
-  const pm = getPluginManager()
-  const { session } = pm.rootModel
-  const { findByTestId, findByText, findAllByTestId } = render(
-    <JBrowse pluginManager={pm} />,
-  )
+  const { view, findByTestId, findByText, findAllByTestId } = createView()
   await findByText('Help')
-  act(() => session.views[0].setNewView(0.02, 2086500))
+  view.setNewView(0.02, 2086500)
 
   // load track
-  fireEvent.click(
-    await findByTestId('htsTrackEntry-volvox-long-reads-cram', {}, delay),
-  )
+  fireEvent.click(await findByTestId(hts('volvox-long-reads-cram'), {}, delay))
   await findByTestId(
     'display-volvox-long-reads-cram-LinearAlignmentsDisplay',
     {},
@@ -141,28 +124,20 @@ test('color by strand', async () => {
     await findByTestId('Blockset-pileup'),
   )
   expectCanvasMatch(
-    await findByTestId1(
-      'prerendered_canvas_{volvox}ctgA:41,729..41,744-0_done',
-      {},
-      delay,
-    ),
+    await findByTestId1(pc('{volvox}ctgA:41,729..41,744-0'), {}, delay),
   )
 }, 30000)
 
 test('color by tag', async () => {
   console.error = jest.fn()
-  const pm = getPluginManager()
-  const { session } = pm.rootModel
-  const { findByTestId, findByText, findAllByTestId } = render(
-    <JBrowse pluginManager={pm} />,
-  )
+  const { view, findByTestId, findByText, findAllByTestId } = createView()
   await findByText('Help')
-  act(() => session.views[0].setNewView(0.465, 85055))
+  view.setNewView(0.465, 85055)
 
   // load track
   fireEvent.click(await findByTestId('htsTrackEntry-volvox_cram', {}, delay))
   await findByTestId('display-volvox_cram-LinearAlignmentsDisplay', {}, delay)
-  expect(session.views[0].tracks[0]).toBeTruthy()
+  expect(view.tracks[0]).toBeTruthy()
 
   // colors by HP tag
   fireEvent.click(await findByTestId('track_menu_icon'))
@@ -181,10 +156,6 @@ test('color by tag', async () => {
   )
 
   expectCanvasMatch(
-    await findByTestId1(
-      'prerendered_canvas_{volvox}ctgA:39,805..40,176-0_done',
-      {},
-      delay,
-    ),
+    await findByTestId1(pc('{volvox}ctgA:39,805..40,176-0'), {}, delay),
   )
 }, 30000)