test: Fix unit tests. #1601

h2oai · Nov 18, 2022 · a586065 · a586065
1 parent 430d009
commit a586065
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/ui/src/audio_annotator.test.tsx b/ui/src/audio_annotator.test.tsx
@@ -80,10 +80,10 @@ describe('AudioAnnotator.tsx', () => {
   })
 
   it('Removes all shapes after clicking reset', async () => {
-    const { getByTitle } = render(<XAudioAnnotator model={model} />)
+    const { getByText } = render(<XAudioAnnotator model={model} />)
     await waitForComponentLoad()
     expect(wave.args[name]).toMatchObject(items)
-    fireEvent.click(getByTitle('reset audio annotator'))
+    fireEvent.click(getByText('Remove all'))
     expect(wave.args[name]).toMatchObject([])
   })
 
@@ -138,14 +138,15 @@ describe('AudioAnnotator.tsx', () => {
     })
 
     it('Removes annotation after clicking remove btn', async () => {
-      const { container, getByTitle } = render(<XAudioAnnotator model={model} />)
+      const { container, getByText } = render(<XAudioAnnotator model={model} />)
       await waitForComponentLoad()
       const canvasEl = container.querySelector('canvas')!
       expect(wave.args[name]).toMatchObject(items)
 
-      const removeBtn = getByTitle('remove audio annotation')!
+      const removeBtn = getByText('Remove selected').parentElement?.parentElement?.parentElement!
       expect(removeBtn).toHaveAttribute('aria-disabled', 'true')
       fireEvent.click(canvasEl, { clientX: 3, clientY: 3 })
+      await waitForComponentLoad()
       expect(removeBtn).not.toHaveAttribute('aria-disabled')
       fireEvent.click(removeBtn)
 
@@ -449,23 +450,21 @@ describe('AudioAnnotator.tsx', () => {
     })
 
     it('Calls push after removing all annotations', async () => {
-      const { getByTitle } = render(<XAudioAnnotator model={{ ...model, trigger: true }} />)
+      const { getByText } = render(<XAudioAnnotator model={{ ...model, trigger: true }} />)
       await waitForComponentLoad()
       expect(wave.args[name]).toMatchObject(items)
-      fireEvent.click(getByTitle('reset audio annotator'))
+      fireEvent.click(getByText('Remove all'))
       expect(pushMock).toHaveBeenCalledTimes(1)
     })
 
     it('Calls push after removing annotation', async () => {
-      const { container, getByTitle } = render(<XAudioAnnotator model={{ ...model, trigger: true }} />)
+      const { container, getByText } = render(<XAudioAnnotator model={{ ...model, trigger: true }} />)
       await waitForComponentLoad()
       const canvasEl = container.querySelector('canvas')!
       expect(wave.args[name]).toMatchObject(items)
 
-      const removeBtn = getByTitle('remove audio annotation')!
-      expect(removeBtn).toHaveAttribute('aria-disabled', 'true')
+      const removeBtn = getByText('Remove selected')!
       fireEvent.click(canvasEl, { clientX: 3, clientY: 3 })
-      expect(removeBtn).not.toHaveAttribute('aria-disabled')
       fireEvent.click(removeBtn)
 
       expect(pushMock).toHaveBeenCalledTimes(1)

diff --git a/ui/src/audio_annotator.tsx b/ui/src/audio_annotator.tsx
@@ -180,9 +180,9 @@ const
       [tooltipProps, setTooltipProps] = React.useState<TooltipProps | null>(null),
       theme = Fluent.useTheme(),
       colorsMap = React.useMemo(() => new Map<S, TagColor>(tags.map(tag => {
-        const { r, g, b } = Fluent.getColorFromString(cssVarValue(tag.color))!
+        const color = Fluent.getColorFromString(cssVarValue(tag.color))
         return [tag.name, {
-          transparent: `rgba(${r}, ${g}, ${b}, 0.5)`,
+          transparent: color ? `rgba(${color.r}, ${color.g}, ${color.b}, 0.5)` : cssVarValue(tag.color),
           color: cssVarValue(tag.color),
           label: tag.label
         }]

diff --git a/ui/src/image_annotator.tsx b/ui/src/image_annotator.tsx
@@ -157,8 +157,8 @@ export const XImageAnnotator = ({ model }: { model: ImageAnnotator }) => {
   const
     theme = Fluent.useTheme(),
     colorsMap = React.useMemo(() => new Map<S, S>(model.tags.map(tag => {
-      const { r, g, b } = Fluent.getColorFromString(cssVarValue(tag.color))!
-      return [tag.name, `rgba(${r}, ${g}, ${b}, 1)`]
+      const color = Fluent.getColorFromString(cssVarValue(tag.color))
+      return [tag.name, `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, 1)`]
       // eslint-disable-next-line react-hooks/exhaustive-deps
     })), [model.tags, theme]),
     [activeTag, setActiveTag] = React.useState<S>(model.tags[0]?.name || ''),