refactor(ts): better typing on avatar, tag input, verification code (#…

…3874)
scaleway · Jun 14, 2024 · ce4dfdd · ce4dfdd
1 parent 1c13e23
commit ce4dfdd
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 52 deletions.
diff --git a/.changeset/yellow-panthers-sort.md b/.changeset/yellow-panthers-sort.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Refactoring: better typing on Avatar, TagInput and VerificationCode
diff --git a/packages/ui/src/components/Avatar/index.tsx b/packages/ui/src/components/Avatar/index.tsx
@@ -15,7 +15,7 @@ const formatTextToAvatar = (text?: string): string => {
   if (textCleaned.split(' ').length > 1) {
     const [a, b] = textCleaned.split(' ')
 
-    return `${a[0]}${b[0]}`.toUpperCase()
+    return `${a?.[0]}${b?.[0]}`.toUpperCase()
   }
 
   return textCleaned.substring(0, 2).toUpperCase()

diff --git a/packages/ui/src/components/List/__tests__/index.test.tsx b/packages/ui/src/components/List/__tests__/index.test.tsx
@@ -294,15 +294,17 @@ describe('List', () => {
     expect(listHeaderCells).toHaveLength(columns.length)
 
     expect(listHeaderCells).toHaveLength(columns.length)
-    expect(listHeaderCells[0].getAttribute('aria-sort')).toBe(null)
-    await userEvent.click(listHeaderCells[0])
-    expect(listHeaderCells[0].getAttribute('aria-sort')).toBe('ascending')
-    fireEvent.keyDown(listHeaderCells[0], { key: 'Enter' })
-    expect(listHeaderCells[0].getAttribute('aria-sort')).toBe('descending')
-    fireEvent.keyDown(listHeaderCells[0], { key: 'Space' })
-    await userEvent.click(listHeaderCells[1])
-    expect(listHeaderCells[0].getAttribute('aria-sort')).toBe(null)
-    expect(listHeaderCells[1].getAttribute('aria-sort')).toBe('ascending')
+    if (listHeaderCells[0] && listHeaderCells[1]) {
+      expect(listHeaderCells[0].getAttribute('aria-sort')).toBe(null)
+      await userEvent.click(listHeaderCells[0])
+      expect(listHeaderCells[0].getAttribute('aria-sort')).toBe('ascending')
+      fireEvent.keyDown(listHeaderCells[0], { key: 'Enter' })
+      expect(listHeaderCells[0].getAttribute('aria-sort')).toBe('descending')
+      fireEvent.keyDown(listHeaderCells[0], { key: 'Space' })
+      await userEvent.click(listHeaderCells[1])
+      expect(listHeaderCells[0].getAttribute('aria-sort')).toBe(null)
+      expect(listHeaderCells[1].getAttribute('aria-sort')).toBe('ascending')
+    }
     expect(asFragment()).toMatchSnapshot()
   })
 
@@ -380,8 +382,12 @@ describe('List', () => {
         )}
       </List>,
     )
-    await userEvent.click(screen.getAllByRole('button')[0])
-    await userEvent.click(screen.getAllByRole('button')[0])
+    const button = screen.getAllByRole('button')[0]
+
+    if (button) {
+      await userEvent.click(button)
+      await userEvent.click(button)
+    }
     expect(asFragment()).toMatchSnapshot()
   })
 
@@ -399,8 +405,12 @@ describe('List', () => {
         ))}
       </List>,
     )
-    const cell = screen.getByText(data[0].columnE)
-    await userEvent.click(cell)
+
+    if (data[0]) {
+      const cell = screen.getByText(data[0].columnE)
+      await userEvent.click(cell)
+    }
+
     expect(asFragment()).toMatchSnapshot()
   })
 
@@ -421,10 +431,13 @@ describe('List', () => {
       </List>,
     )
     const buttons = screen.getAllByRole('button')
-    await userEvent.click(buttons[0])
-    await userEvent.click(buttons[0])
-    await userEvent.click(buttons[0])
-    await userEvent.click(buttons[1])
+
+    if (buttons?.[0] && buttons[1]) {
+      await userEvent.click(buttons[0])
+      await userEvent.click(buttons[0])
+      await userEvent.click(buttons[0])
+      await userEvent.click(buttons[1])
+    }
     expect(asFragment()).toMatchSnapshot()
   })
 
@@ -561,17 +574,19 @@ describe('List', () => {
     )
     const rows = screen.getAllByRole('button')
     const firstRow = rows[0]
-    expect(firstRow).toHaveAttribute('tabIndex', '0')
-    // Testing expanding by pressing space key
-    expect(firstRow).toHaveAttribute('aria-expanded', 'false')
-    fireEvent.keyDown(firstRow, { charCode: 32, code: 'Space', key: ' ' })
-    expect(firstRow).toHaveAttribute('aria-expanded', 'true')
-    // Testing collapsing by pressing space key
-    fireEvent.keyDown(firstRow, { charCode: 32, code: 'Space', key: ' ' })
-    expect(firstRow).toHaveAttribute('aria-expanded', 'false')
-    // Testing another key
-    fireEvent.keyDown(firstRow, { charCode: 65, code: 'KeyA', key: 'a' })
-    expect(firstRow).toHaveAttribute('aria-expanded', 'false')
+    if (firstRow) {
+      expect(firstRow).toHaveAttribute('tabIndex', '0')
+      // Testing expanding by pressing space key
+      expect(firstRow).toHaveAttribute('aria-expanded', 'false')
+      fireEvent.keyDown(firstRow, { charCode: 32, code: 'Space', key: ' ' })
+      expect(firstRow).toHaveAttribute('aria-expanded', 'true')
+      // Testing collapsing by pressing space key
+      fireEvent.keyDown(firstRow, { charCode: 32, code: 'Space', key: ' ' })
+      expect(firstRow).toHaveAttribute('aria-expanded', 'false')
+      // Testing another key
+      fireEvent.keyDown(firstRow, { charCode: 65, code: 'KeyA', key: 'a' })
+      expect(firstRow).toHaveAttribute('aria-expanded', 'false')
+    }
     expect(asFragment()).toMatchSnapshot()
   })
 
@@ -594,13 +609,16 @@ describe('List', () => {
     const rows = screen.getAllByRole('button')
     const firstRow = rows[0]
     expect(firstRow).toHaveAttribute('aria-expanded', 'false')
-    fireEvent.click(firstRow)
-    expect(firstRow).toHaveAttribute('aria-expanded', 'true')
-    const expandableContent = await within(firstRow).findByText(
-      'Row 1 expandable content',
-    )
-    fireEvent.click(expandableContent)
-    expect(firstRow).toHaveAttribute('aria-expanded', 'true')
+
+    if (firstRow) {
+      fireEvent.click(firstRow)
+      expect(firstRow).toHaveAttribute('aria-expanded', 'true')
+      const expandableContent = await within(firstRow).findByText(
+        'Row 1 expandable content',
+      )
+      fireEvent.click(expandableContent)
+      expect(firstRow).toHaveAttribute('aria-expanded', 'true')
+    }
     expect(asFragment()).toMatchSnapshot()
   })
 

diff --git a/packages/ui/src/components/Table/__tests__/index.test.tsx b/packages/ui/src/components/Table/__tests__/index.test.tsx
@@ -219,16 +219,20 @@ describe('Table', () => {
       },
     )
     expect(tableHeaderCells).toHaveLength(columns.length)
-    expect(tableHeaderCells[0].getAttribute('aria-sort')).toBe(null)
-    await userEvent.click(tableHeaderCells[0])
-    expect(tableHeaderCells[0].getAttribute('aria-sort')).toBe('ascending')
-    fireEvent.keyDown(tableHeaderCells[0], { key: 'Enter' })
-    expect(tableHeaderCells[0].getAttribute('aria-sort')).toBe('descending')
-    fireEvent.keyDown(tableHeaderCells[0], { key: 'Space' })
-    await userEvent.click(tableHeaderCells[1])
-    expect(tableHeaderCells[0].getAttribute('aria-sort')).toBe(null)
-    expect(tableHeaderCells[1].getAttribute('aria-sort')).toBe('ascending')
-    expect(asFragment()).toMatchSnapshot()
+    if (tableHeaderCells[0] && tableHeaderCells[1]) {
+      expect(tableHeaderCells[0]?.getAttribute('aria-sort')).toBe(null)
+      await userEvent.click(tableHeaderCells[0])
+      expect(tableHeaderCells[0]?.getAttribute('aria-sort')).toBe('ascending')
+      if (tableHeaderCells[0]) {
+        fireEvent.keyDown(tableHeaderCells[0], { key: 'Enter' })
+      }
+      expect(tableHeaderCells[0]?.getAttribute('aria-sort')).toBe('descending')
+      fireEvent.keyDown(tableHeaderCells[0], { key: 'Space' })
+      await userEvent.click(tableHeaderCells[1])
+      expect(tableHeaderCells[0]?.getAttribute('aria-sort')).toBe(null)
+      expect(tableHeaderCells[1]?.getAttribute('aria-sort')).toBe('ascending')
+      expect(asFragment()).toMatchSnapshot()
+    }
   })
 
   test('Should render correctly with bad sort value', () => {

diff --git a/packages/ui/src/components/TagInput/index.tsx b/packages/ui/src/components/TagInput/index.tsx
@@ -113,7 +113,7 @@ const StyledInput = styled.input<{ 'data-size': TagInputSize }>`
 `
 
 const convertTagArrayToTagStateArray = (tags?: TagInputProp) =>
-  (tags || [])?.map((tag, index) =>
+  (tags ?? [])?.map((tag, index) =>
     typeof tag === 'object'
       ? { ...tag, index: getUUID(`tag-${index}`) }
       : { index: getUUID(`tag-${index}`), label: tag },
@@ -191,7 +191,7 @@ export const TagInput = ({
   const tagsProp = value ?? tags
 
   const [tagInputState, setTagInput] = useState(
-    convertTagArrayToTagStateArray(tagsProp ?? []),
+    convertTagArrayToTagStateArray(tagsProp),
   )
   const [input, setInput] = useState<string>('')
   const [status, setStatus] = useState<{ [key: string]: StatusValue }>({})
@@ -228,14 +228,16 @@ export const TagInput = ({
       : tagInputState
     setInput('')
     setTagInput(newTagInput)
-    if (newTagInput.length !== tagInputState.length) {
+    if (newTagInput.length !== tagInputState.length && newTagInput) {
       setStatus({
         [newTagInput[newTagInput.length - 1].index]: STATUS.LOADING,
       })
     }
     try {
       dispatchOnChange(newTagInput)
-      setStatus({ [newTagInput[newTagInput.length - 1].index]: STATUS.IDLE })
+      if (newTagInput) {
+        setStatus({ [newTagInput[newTagInput.length - 1].index]: STATUS.IDLE })
+      }
     } catch (e) {
       setTagInput(tagInputState)
     }
@@ -266,7 +268,9 @@ export const TagInput = ({
       tagInputState.length
     ) {
       event.preventDefault()
-      deleteTag(tagInputState[tagInputState.length - 1].index)
+      if (tagInputState) {
+        deleteTag(tagInputState[tagInputState.length - 1].index)
+      }
     }
   }
 

diff --git a/packages/ui/src/components/VerificationCode/index.tsx b/packages/ui/src/components/VerificationCode/index.tsx
@@ -188,7 +188,7 @@ export const VerificationCode = ({
       }
 
       const sanitizedValue = value[0] // in case more than 1 char, we just take the first one
-      newValues[index] = sanitizedValue
+      newValues[index] = sanitizedValue ?? ''
       setValues(newValues)
       const nextIndex = Math.min(index + 1, fields - 1)
       const next = inputRefs[nextIndex]