Fix flaky test in plugins/linear-genome-view (#3242)

* Fix flaky test

* Remove some ts-ignore

plugins/data-management/src/AddTrackWidget/components/AddTrackWidget.test.tsx

@@ -2,110 +2,101 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 import AddTrackWidget from './AddTrackWidget'
-import { AddTrackModel } from '../model'
-import { AbstractSessionModel } from '@jbrowse/core/util'
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
-describe('<AddTrackWidget />', () => {
-  let session: AbstractSessionModel
-  let model: AddTrackModel
-
-  beforeAll(() => {
-    // @ts-ignore
-    session = createTestSession()
-    // @ts-ignore
-    session.addAssemblyConf({
-      name: 'volMyt1',
-      sequence: {
-        trackId: 'ref0',
-        type: 'ReferenceSequenceTrack',
-        adapter: {
-          type: 'FromConfigSequenceAdapter',
-          features: [
-            {
-              refName: 'ctgA',
-              uniqueId: 'firstId',
-              start: 0,
-              end: 1000,
-              seq: 'cattgttgcggagttgaacaACGGCATTAGGAACACTTCCGTCTCtcacttttatacgattatgattggttctttagccttggtttagattggtagtagtagcggcgctaatgctacctgaattgagaactcgagcgggggctaggcaaattctgattcagcctgacttctcttggaaccctgcccataaatcaaagggttagtgcggccaaaacgttggacaacggtattagaagaccaacctgaccaccaaaccgtcaattaaccggtatcttctcggaaacggcggttctctcctagatagcgatctgtggtctcaccatgcaatttaaacaggtgagtaaagattgctacaaatacgagactagctgtcaccagatgctgttcatctgttggctccttggtcgctccgttgtacccaggctactttgaaagagcgcagaatacttagacggtatcgatcatggtagcatagcattctgataacatgtatggagttcgaacatccgtctggggccggacggtccgtttgaggttggttgatctgggtgatagtcagcaagatagacgttagataacaaattaaaggattttaccttagattgcgactagtacaacggtacatcggtgattcgcgctctactagatcacgctatgggtaccataaacaaacggtggaccttctcaagctggttgacgcctcagcaacataggcttcctcctccacgcatctcagcataaaaggcttataaactgcttctttgtgccagagcaactcaattaagcccttggtaccgtgggcacgcattctgtcacggtgaccaactgttcatcctgaatcgccgaatgggactatttggtacaggaatcaagcggatggcactactgcagcttatttacgacggtattcttaaagtttttaagacaatgtatttcatgggtagttcggtttgttttattgctacacaggctcttgtagacgacctacttagcactacgg',
-            },
-          ],
-        },
-      },
-    })
-    // @ts-ignore
-    session.addTrackConf({
-      trackId: 'i3jUPmrgMOS',
-      type: 'FeatureTrack',
-      name: 'Filter Test',
-      assemblyNames: ['volMyt1'],
+function getSession() {
+  const session = createTestSession()
+  session.addAssemblyConf({
+    name: 'volMyt1',
+    sequence: {
+      trackId: 'ref0',
+      type: 'ReferenceSequenceTrack',
       adapter: {
-        type: 'FromConfigAdapter',
+        type: 'FromConfigSequenceAdapter',
         features: [
           {
-            uniqueId: 'one',
             refName: 'ctgA',
-            start: 100,
-            end: 101,
-            type: 'foo',
-            name: 'Boris',
-            note: 'note for boris',
-          },
-          {
-            uniqueId: 'two',
-            refName: 'ctgA',
-            start: 110,
-            end: 111,
-            type: 'bar',
-            name: 'Theresa',
-            note: 'note for theresa',
-          },
-          {
-            uniqueId: 'three',
-            refName: 'ctgA',
-            start: 120,
-            end: 121,
-            type: 'baz',
-            name: 'Nigel',
-            note: 'note for nigel',
-          },
-          {
-            uniqueId: 'four',
-            refName: 'ctgA',
-            start: 130,
-            end: 131,
-            type: 'quux',
-            name: 'Geoffray',
-            note: 'note for geoffray',
+            uniqueId: 'firstId',
+            start: 0,
+            end: 1000,
+            seq: 'cattgttgcggagttgaacaACGGCATTAGGAACACTTCCGTCTCtcacttttatacgattatgattggttctttagccttggtttagattggtagtagtagcggcgctaatgctacctgaattgagaactcgagcgggggctaggcaaattctgattcagcctgacttctcttggaaccctgcccataaatcaaagggttagtgcggccaaaacgttggacaacggtattagaagaccaacctgaccaccaaaccgtcaattaaccggtatcttctcggaaacggcggttctctcctagatagcgatctgtggtctcaccatgcaatttaaacaggtgagtaaagattgctacaaatacgagactagctgtcaccagatgctgttcatctgttggctccttggtcgctccgttgtacccaggctactttgaaagagcgcagaatacttagacggtatcgatcatggtagcatagcattctgataacatgtatggagttcgaacatccgtctggggccggacggtccgtttgaggttggttgatctgggtgatagtcagcaagatagacgttagataacaaattaaaggattttaccttagattgcgactagtacaacggtacatcggtgattcgcgctctactagatcacgctatgggtaccataaacaaacggtggaccttctcaagctggttgacgcctcagcaacataggcttcctcctccacgcatctcagcataaaaggcttataaactgcttctttgtgccagagcaactcaattaagcccttggtaccgtgggcacgcattctgtcacggtgaccaactgttcatcctgaatcgccgaatgggactatttggtacaggaatcaagcggatggcactactgcagcttatttacgacggtattcttaaagtttttaagacaatgtatttcatgggtagttcggtttgttttattgctacacaggctcttgtagacgacctacttagcactacgg',
           },
         ],
       },
-      filterAttributes: ['type', 'start', 'end'],
-    })
-
-    // @ts-ignore
-    const view = session.addView('LinearGenomeView', {
-      displayedRegions: [
+    },
+  })
+  session.addTrackConf({
+    trackId: 'i3jUPmrgMOS',
+    type: 'FeatureTrack',
+    name: 'Filter Test',
+    assemblyNames: ['volMyt1'],
+    adapter: {
+      type: 'FromConfigAdapter',
+      features: [
         {
-          assemblyName: 'volMyt1',
+          uniqueId: 'one',
           refName: 'ctgA',
-          start: 0,
-          end: 1000,
+          start: 100,
+          end: 101,
+          type: 'foo',
+          name: 'Boris',
+          note: 'note for boris',
+        },
+        {
+          uniqueId: 'two',
+          refName: 'ctgA',
+          start: 110,
+          end: 111,
+          type: 'bar',
+          name: 'Theresa',
+          note: 'note for theresa',
+        },
+        {
+          uniqueId: 'three',
+          refName: 'ctgA',
+          start: 120,
+          end: 121,
+          type: 'baz',
+          name: 'Nigel',
+          note: 'note for nigel',
+        },
+        {
+          uniqueId: 'four',
+          refName: 'ctgA',
+          start: 130,
+          end: 131,
+          type: 'quux',
+          name: 'Geoffray',
+          note: 'note for geoffray',
         },
       ],
-    })
+    },
+    filterAttributes: ['type', 'start', 'end'],
+  })
 
-    // @ts-ignore
-    model = session.addWidget('AddTrackWidget', 'addTrackWidget', {
-      view: view.id,
-    })
+  const view = session.addView('LinearGenomeView', {
+    displayedRegions: [
+      {
+        assemblyName: 'volMyt1',
+        refName: 'ctgA',
+        start: 0,
+        end: 1000,
+      },
+    ],
+  })
+
+  const model = session.addWidget('AddTrackWidget', 'addTrackWidget', {
+    view: view.id,
   })
+  return { session, model }
+}
 
+describe('<AddTrackWidget />', () => {
   it('adds a track', async () => {
+    const { session, model } = getSession()
     const { getByTestId, getAllByTestId, findByText, findAllByText } = render(
       <AddTrackWidget model={model} />,
     )
-    // @ts-ignore
     expect(session.sessionTracks.length).toBe(1)
     fireEvent.change(getAllByTestId('urlInput')[0], {
       target: { value: 'test.txt' },
@@ -123,7 +114,6 @@ describe('<AddTrackWidget />', () => {
     const volMyt1 = await findAllByText('volMyt1')
     fireEvent.click(volMyt1[1])
     fireEvent.click(getAllByTestId('addTrackNextButton')[0])
-    // @ts-ignore
     expect(session.sessionTracks.length).toBe(2)
   })
 })

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.test.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-
 import React from 'react'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
@@ -20,7 +18,7 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders nothing with no assembly', () => {
     const session = createTestSession()
-    const firstView = session!.addView('LinearGenomeView')
+    const firstView = session.addView('LinearGenomeView')
     const model = firstView.activateTrackSelector()
 
     const { container } = render(
@@ -34,7 +32,6 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders with a couple of uncategorized tracks', async () => {
     const session = createTestSession()
-    // @ts-ignore
     session.addAssemblyConf({
       name: 'volMyt1',
       sequence: {
@@ -54,21 +51,19 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       },
     })
-    // @ts-ignore
     session.addTrackConf({
       trackId: 'fooC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    // @ts-ignore
     session.addTrackConf({
       trackId: 'barC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    const firstView = session!.addView('LinearGenomeView', {
+    const firstView = session.addView('LinearGenomeView', {
       displayedRegions: [
         {
           assemblyName: 'volMyt1',
@@ -78,8 +73,8 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       ],
     })
-    firstView.showTrack(session!.sessionTracks[0].trackId)
-    firstView.showTrack(session!.sessionTracks[1].trackId)
+    firstView.showTrack(session.sessionTracks[0].trackId)
+    firstView.showTrack(session.sessionTracks[1].trackId)
     const model = firstView.activateTrackSelector()
 
     const { container, findByTestId } = render(
@@ -94,7 +89,6 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders with a couple of categorized tracks', async () => {
     const session = createTestSession()
-    // @ts-ignore
     session.addAssemblyConf({
       name: 'volMyt1',
       sequence: {
@@ -115,21 +109,19 @@ describe('HierarchicalTrackSelector widget', () => {
       },
     })
 
-    // @ts-ignore
     session.addTrackConf({
       trackId: 'fooC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    // @ts-ignore
     session.addTrackConf({
       trackId: 'barC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    const firstView = session!.addView('LinearGenomeView', {
+    const firstView = session.addView('LinearGenomeView', {
       displayedRegions: [
         {
           assemblyName: 'volMyt1',
@@ -139,8 +131,8 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       ],
     })
-    firstView.showTrack(session!.sessionTracks[0].trackId)
-    firstView.showTrack(session!.sessionTracks[1].trackId)
+    firstView.showTrack(session.sessionTracks[0].trackId)
+    firstView.showTrack(session.sessionTracks[1].trackId)
     firstView.tracks[0].configuration.category.set(['Foo Category'])
     firstView.tracks[1].configuration.category.set([
       'Foo Category',

plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js → plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
+import '@testing-library/jest-dom/extend-expect'
 import 'requestidlecallback-polyfill'
+
+// locals
 import LinearGenomeView from './LinearGenomeView'
+
+// mock
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 const assemblyConf = {
@@ -38,7 +42,9 @@ describe('<LinearGenomeView />', () => {
     const elt = await findByText('Open')
     await waitFor(() => expect(elt.getAttribute('disabled')).toBe(null))
     fireEvent.click(elt)
-    await waitFor(() => expect(model.displayedRegions.length).toEqual(1), 15000)
+    await waitFor(() => expect(model.displayedRegions.length).toEqual(1), {
+      timeout: 15000,
+    })
   }, 15000)
 
   it('renders one track, one region', async () => {
@@ -76,7 +82,7 @@ describe('<LinearGenomeView />', () => {
     })
     const model = session.views[0]
     model.setWidth(800)
-    const { container, getByPlaceholderText, findByText } = render(
+    const { container, queryByText, getByPlaceholderText, findByText } = render(
       <LinearGenomeView model={model} />,
     )
     await findByText('Foo Track')
@@ -85,10 +91,11 @@ describe('<LinearGenomeView />', () => {
     await findByText('100bp')
 
     await waitFor(() => {
-      expect(getByPlaceholderText('Search for location').value).toEqual(
-        'ctgA:1..100',
-      )
+      expect(
+        (getByPlaceholderText('Search for location') as HTMLInputElement).value,
+      ).toEqual('ctgA:1..100')
     })
+    await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument())
     expect(container.firstChild).toMatchSnapshot()
   })
 
@@ -102,6 +109,7 @@ describe('<LinearGenomeView />', () => {
       type: 'BasicTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
+
     session.addTrackConf({
       trackId: 'testConfig2',
       name: 'Bar Track',
@@ -151,12 +159,13 @@ describe('<LinearGenomeView />', () => {
     })
     const model = session.views[0]
     model.setWidth(800)
-    const { container, findByText, findAllByTestId } = render(
+    const { container, findByText, queryByText, findAllByTestId } = render(
       <LinearGenomeView model={model} />,
     )
     await findByText('Foo Track')
     await findByText('798bp')
     await findAllByTestId('svgfeatures')
+    await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument())
 
     expect(container.firstChild).toMatchSnapshot()
   })

products/jbrowse-web/src/rootModel.ts

@@ -733,10 +733,11 @@ export function createTestSession(snapshot = {}, adminMode = false) {
     name: 'testSession',
     ...snapshot,
   })
-  // @ts-ignore
-  root.session.views.map(view => view.setWidth(800))
-  pluginManager.setRootModel(root)
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const session = root.session!
+  session.views.map(view => view.setWidth(800))
+  pluginManager.setRootModel(root)
   pluginManager.configure()
-  return root.session
+  return session
 }