From a586065b39254390a9fbabc1c18982f3ac19624f Mon Sep 17 00:00:00 2001
From: Martin Turoci <martin.turoci@h2o.ai>
Date: Fri, 18 Nov 2022 08:50:50 +0100
Subject: [PATCH] test: Fix unit tests. #1601

---
 ui/src/audio_annotator.test.tsx | 19 +++++++++----------
 ui/src/audio_annotator.tsx      |  4 ++--
 ui/src/image_annotator.tsx      |  4 ++--
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/ui/src/audio_annotator.test.tsx b/ui/src/audio_annotator.test.tsx
index fe2719d13e..16527169f4 100644
--- 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
index d9843443fd..06e5b744eb 100644
--- 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
index 0ceafe0c08..6b7feaecd5 100644
--- 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 || ''),