fix(SelectInputV2): change data-testid place for easier unit tests (#…

…3876) * fix(SelectInputV2): change data-testid place for easier unit tests * fix: tests * fix: snaps
scaleway · Jun 18, 2024 · 31c2ac6 · 31c2ac6
1 parent 885c605
commit 31c2ac6
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 79 deletions.
diff --git a/.changeset/cyan-fireants-do.md b/.changeset/cyan-fireants-do.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Change where the data-testid is placed on the `SelectInputV2` to target it more easily in unit tests
diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -563,7 +563,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
               data-readonly="false"
               data-size="large"
               data-state="neutral"
-              data-testid="select-bar"
+              data-testid="select-input-test"
               id=":rc:"
               role="combobox"
               tabindex="0"
@@ -1127,7 +1127,7 @@ exports[`SelectInputField > should render correctly 1`] = `
               data-readonly="false"
               data-size="large"
               data-state="neutral"
-              data-testid="select-bar"
+              data-testid="select-input-test"
               id=":r0:"
               role="combobox"
               tabindex="0"
@@ -1369,7 +1369,7 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
               data-readonly="false"
               data-size="large"
               data-state="neutral"
-              data-testid="select-bar"
+              data-testid="select-input-test"
               id=":r3:"
               role="combobox"
               tabindex="0"
@@ -1611,7 +1611,7 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
               data-readonly="false"
               data-size="large"
               data-state="neutral"
-              data-testid="select-bar"
+              data-testid="select-input-test"
               id=":r9:"
               role="combobox"
               tabindex="0"
@@ -1853,7 +1853,7 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
               data-readonly="false"
               data-size="large"
               data-state="neutral"
-              data-testid="select-bar"
+              data-testid="select-input-test"
               id=":r6:"
               role="combobox"
               tabindex="0"
@@ -2162,7 +2162,7 @@ exports[`SelectInputField > should trigger events 1`] = `
               data-readonly="false"
               data-size="large"
               data-state="neutral"
-              data-testid="select-bar"
+              data-testid="select-input-test"
               id=":r18:"
               role="combobox"
               tabindex="0"

diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx b/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx
@@ -38,7 +38,7 @@ describe('SelectInputField', () => {
     const { asFragment } = renderWithForm(
       <SelectInputFieldV2 name="test" options={planets} searchable={false} />,
     )
-    const select = screen.getByTestId('select-bar')
+    const select = screen.getByTestId('select-input-test')
     act(() => select.click())
     fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 })
     const mercury = screen.getByTestId(`option-stack-mercury`)
@@ -61,7 +61,7 @@ describe('SelectInputField', () => {
         onChange={onChange}
       />,
     )
-    const select = screen.getByTestId('select-bar')
+    const select = screen.getByTestId('select-input-test')
     await userEvent.click(select)
     const option = screen.getByTestId('option-stack-mercury')
 

diff --git a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
@@ -572,7 +572,7 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
                   data-readonly="false"
                   data-size="large"
                   data-state="neutral"
-                  data-testid="select-bar"
+                  data-testid="select-input-test-unit"
                   id="unit"
                   role="combobox"
                   tabindex="0"
@@ -1109,7 +1109,7 @@ exports[`UnitInputField > should render correctly 1`] = `
                   data-readonly="false"
                   data-size="large"
                   data-state="neutral"
-                  data-testid="select-bar"
+                  data-testid="select-input-test-unit"
                   id="unit"
                   role="combobox"
                   tabindex="0"

diff --git a/packages/form/src/components/UnitInputField/__tests__/index.test.tsx b/packages/form/src/components/UnitInputField/__tests__/index.test.tsx
@@ -60,7 +60,7 @@ describe('UnitInputField', () => {
       </Form>,
     )
 
-    const selectBar = screen.getByTestId('select-bar')
+    const selectBar = screen.getByTestId('select-input-test-unit')
     const numberInput = screen.getByTestId('unit-input')
     const submit = screen.getByText('Submit')
     await userEvent.click(selectBar)

diff --git a/packages/ui/src/components/SelectInputV2/SelectBar.tsx b/packages/ui/src/components/SelectInputV2/SelectBar.tsx
@@ -22,6 +22,7 @@ type SelectBarProps = {
   autoFocus?: boolean
   innerRef: RefObject<HTMLDivElement>
   id?: string
+  'data-testid': string
 }
 
 type DisplayValuesProps = {
@@ -195,6 +196,7 @@ export const SelectBar = ({
   autoFocus,
   innerRef,
   id,
+  'data-testid': dataTestId,
 }: SelectBarProps) => {
   const {
     isDropdownVisible,
@@ -296,7 +298,7 @@ export const SelectBar = ({
       onClick={
         openable ? () => setIsDropdownVisible(!isDropdownVisible) : undefined
       }
-      data-testid="select-bar"
+      data-testid={dataTestId}
       autoFocus={autoFocus}
       onKeyDown={event => {
         if (event.key === 'ArrowDown') {

diff --git a/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -249,7 +249,7 @@ exports[`SelectInputV2 > renders correctly 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r0:"
             role="combobox"
             tabindex="0"
@@ -487,7 +487,7 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":ra2:"
             role="combobox"
             tabindex="0"
@@ -1206,7 +1206,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r18:"
             role="combobox"
             tabindex="0"
@@ -1799,7 +1799,7 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r9q:"
             role="combobox"
             tabindex="0"
@@ -2257,7 +2257,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r1rg:"
             role="combobox"
             tabindex="0"
@@ -2801,7 +2801,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r1rj:"
             role="combobox"
             tabindex="0"
@@ -4061,7 +4061,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r44:"
             role="combobox"
             tabindex="0"
@@ -5209,7 +5209,7 @@ exports[`SelectInputV2 > renders correctly not clearable 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":rc:"
             role="combobox"
             tabindex="0"
@@ -5447,7 +5447,7 @@ exports[`SelectInputV2 > renders correctly readOnly 1`] = `
             data-readonly="true"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":rau:"
             role="combobox"
             tabindex="0"
@@ -5752,7 +5752,7 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r8:"
             role="combobox"
             tabindex="0"
@@ -6413,7 +6413,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":ra5:"
             role="combobox"
             tabindex="0"
@@ -6979,7 +6979,7 @@ exports[`SelectInputV2 > renders correctly small 1`] = `
             data-readonly="false"
             data-size="small"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r4:"
             role="combobox"
             tabindex="0"
@@ -7334,7 +7334,7 @@ exports[`SelectInputV2 > renders correctly unclosable tags when readonly 1`] = `
             data-readonly="true"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":rj4:"
             role="combobox"
             tabindex="0"
@@ -8021,7 +8021,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":rf:"
             role="combobox"
             tabindex="0"
@@ -9080,7 +9080,7 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r26:"
             role="combobox"
             tabindex="0"
@@ -9950,7 +9950,7 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-emptystate"
             id=":r9t:"
             role="combobox"
             tabindex="0"
@@ -10696,7 +10696,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="danger"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":rb1:"
             role="combobox"
             tabindex="0"
@@ -11777,7 +11777,7 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r35:"
             role="combobox"
             tabindex="0"
@@ -12896,7 +12896,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r7o:"
             role="combobox"
             tabindex="0"
@@ -13991,7 +13991,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r8p:"
             role="combobox"
             tabindex="0"
@@ -15125,7 +15125,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r5m:"
             role="combobox"
             tabindex="0"
@@ -16259,7 +16259,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":r6n:"
             role="combobox"
             tabindex="0"
@@ -17160,7 +17160,7 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="neutral"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":rcl:"
             role="combobox"
             tabindex="0"
@@ -18092,7 +18092,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
             data-readonly="false"
             data-size="large"
             data-state="success"
-            data-testid="select-bar"
+            data-testid="select-input-test"
             id=":rbr:"
             role="combobox"
             tabindex="0"