Add test block and change testid for buttons

mongodb · Feb 27, 2024 · 1f0a150 · 1f0a150
1 parent 93deee5
commit 1f0a150
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/packages/number-input/src/Arrows/Arrow.tsx b/packages/number-input/src/Arrows/Arrow.tsx
@@ -34,7 +34,7 @@ export const Arrow = ({
       type="button"
       tabIndex={-1} // Mimicking native behavior; you cannot focus on an arrow.
       disabled={disabled}
-      data-testid={`lg-number_input-${direction}-button`}
+      data-testid={`lg-number_input-${direction}_button`}
     >
       <Icon
         className={cx({

diff --git a/packages/number-input/src/NumberInput/NumberInput.spec.tsx b/packages/number-input/src/NumberInput/NumberInput.spec.tsx
@@ -10,8 +10,8 @@ const label = 'This is the label text';
 const description = 'This is the description text';
 const errorMessage = 'error message';
 const arrowTestId = {
-  up: 'lg-number_input-increment-button',
-  down: 'lg-number_input-decrement-button',
+  up: 'lg-number_input-increment_button',
+  down: 'lg-number_input-decrement_button',
 };
 
 const defaultProps = {
@@ -214,7 +214,7 @@ describe('packages/number-input', () => {
 
       const upArrow = getByTestId(arrowTestId.up);
 
-      userEvent.click(upArrow as HTMLButtonElement);
+      userEvent.click(upArrow);
       expect((numberInput as HTMLInputElement).value).toBe('1');
     });
 
@@ -226,7 +226,7 @@ describe('packages/number-input', () => {
 
       const downArrow = getByTestId(arrowTestId.down);
 
-      userEvent.click(downArrow as HTMLButtonElement);
+      userEvent.click(downArrow);
       expect((numberInput as HTMLInputElement).value).toBe('-1');
     });
 
@@ -256,12 +256,36 @@ describe('packages/number-input', () => {
 
         const upArrow = getByTestId(arrowTestId.up);
 
-        userEvent.click(upArrow as HTMLButtonElement); // focus
+        userEvent.click(upArrow); // focus
         expect(upArrow).toHaveFocus();
 
         userEvent.tab(); // blur
         expect(onBlur).toHaveBeenCalledTimes(1);
       });
+
+      test('callback does not trigger when focus changes to adjacent elements within number input', () => {
+        const onBlur = jest.fn();
+        const { getByTestId, numberInput } = renderNumberInput({
+          label,
+          onBlur,
+          ...defaultProps,
+        });
+
+        const upArrow = getByTestId(arrowTestId.up);
+        const downArrow = getByTestId(arrowTestId.down);
+
+        userEvent.tab(); // focus
+        expect(numberInput).toHaveFocus();
+
+        userEvent.click(upArrow); // focus on up arrow
+        expect(upArrow).toHaveFocus();
+
+        userEvent.click(downArrow); // focus on down arrow
+        expect(downArrow).toHaveFocus();
+
+        userEvent.tab(); //blur
+        expect(onBlur).toHaveBeenCalledTimes(1);
+      });
     });
 
     test(`is disabled when disabled is passed`, () => {