Fixup tests

packages/core/BaseFeatureWidget/BaseFeatureDetail.tsx

@@ -674,21 +674,25 @@ export const BaseFeatureDetails = observer((props: BaseInputProps) => {
   return <FeatureDetails model={model} feature={feature} />
 })
 
-const FeatureDetails = (props: {
+export const FeatureDetails = (props: {
   model: any
   feature: any
   depth?: number
 }) => {
   const { model, feature, depth = 0 } = props
   const { name, id, type, subfeatures } = feature
   const displayName = name || id
+  const ellipsedDisplayName =
+    displayName && displayName.length > 20 ? '' : displayName
   const session = getSession(model)
   const defSeqTypes = ['mRNA', 'transcript']
   const sequenceTypes =
     getConf(session, ['featureDetails', 'sequenceTypes']) || defSeqTypes
 
   return (
-    <BaseCard title={displayName ? `${displayName} - ${type}` : type}>
+    <BaseCard
+      title={ellipsedDisplayName ? `${ellipsedDisplayName} - ${type}` : type}
+    >
       <div>Core details</div>
       <CoreDetails {...props} />
       <Divider />

packages/core/BaseFeatureWidget/index.test.js

@@ -1,17 +1,27 @@
 import { render } from '@testing-library/react'
 import React from 'react'
+import { types } from 'mobx-state-tree'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import PluginManager from '../PluginManager'
 import { stateModelFactory } from '.'
 import { BaseFeatureDetails as ReactComponent } from './BaseFeatureDetail'
 
 test('open up a widget', () => {
   console.warn = jest.fn()
   const pluginManager = new PluginManager([])
-  const model = stateModelFactory(pluginManager).create({
-    type: 'BaseFeatureWidget',
+
+  const Session = types.model({
+    pluginManager: types.optional(types.frozen(), {}),
+    configuration: ConfigurationSchema('test', {}),
+    widget: stateModelFactory(pluginManager),
+  })
+  const model = Session.create({
+    widget: { type: 'BaseFeatureWidget' },
   })
-  const { container, getByText } = render(<ReactComponent model={model} />)
-  model.setFeatureData({
+  const { container, getByText } = render(
+    <ReactComponent model={model.widget} />,
+  )
+  model.widget.setFeatureData({
     start: 2,
     end: 102,
     strand: 1,

plugins/alignments/src/AlignmentsFeatureDetail/AlignmentsFeatureDetail.tsx

@@ -4,7 +4,7 @@ import { getSession } from '@jbrowse/core/util'
 import React, { useState } from 'react'
 import copy from 'copy-to-clipboard'
 import {
-  BaseFeatureDetails,
+  FeatureDetails,
   BaseCard,
   useStyles,
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
@@ -162,9 +162,10 @@ function AlignmentFeatureDetails(props: { model: any }) {
   const SA = (feat.tags && feat.tags.SA) || feat.SA
   return (
     <Paper data-testid="alignment-side-drawer">
-      <BaseFeatureDetails
+      <FeatureDetails
         {...props}
         omit={omit}
+        feature={feat}
         formatter={(value: unknown, key: string) => {
           return key === 'next_segment_position' ? (
             <PairLink model={model} locString={value as string} />