chore: Updates unit tests

Author: Katie George

src/button-group/__tests__/button-group-dev.test.tsx

@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { fireEvent } from '@testing-library/react';
+
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { ButtonGroupProps } from '../../../lib/components/button-group';
@@ -135,3 +137,22 @@ test('handles menu click', () => {
   wrapper.findMenuById('misc')!.findItemById('compact-mode')!.click();
   expect(onItemClick).toHaveBeenCalledWith(expect.objectContaining({ detail: { id: 'compact-mode', checked: false } }));
 });
+
+test('handles file upload', () => {
+  const file = new File([new Blob(['Test content'], { type: 'text/plain' })], 'test-file.txt', {
+    type: 'text/plain',
+    lastModified: 1590962400000,
+  });
+  const onFilesChange = jest.fn();
+
+  const { wrapper } = renderButtonGroup({
+    items: [{ type: 'file-input', id: 'file', text: 'Choose files' }],
+    onFilesChange,
+  });
+
+  const input = wrapper.findFileInputById('file')!.findNativeInput().getElement();
+  Object.defineProperty(input, 'files', { value: [file] });
+  fireEvent(input, new CustomEvent('change', { bubbles: true }));
+
+  expect(onFilesChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { id: 'file', files: [file] } }));
+});

src/button-group/__tests__/button-group-focus.test.tsx

@@ -32,9 +32,15 @@ const menuButton: ButtonGroupProps.MenuDropdown = {
   items: [{ id: 'search', text: 'Search' }],
 };
 
+const fileInputButton: ButtonGroupProps.FileInput = {
+  type: 'file-input',
+  id: 'file',
+  text: 'Choose files',
+};
+
 test('focuses on all item types', () => {
   const ref: { current: ButtonGroupProps.Ref | null } = { current: null };
-  const { wrapper } = renderButtonGroup({ items: [likeButton, copyButton, menuButton] }, ref);
+  const { wrapper } = renderButtonGroup({ items: [likeButton, copyButton, menuButton, fileInputButton] }, ref);
 
   ref.current!.focus('copy');
   expect(wrapper.findButtonById('copy')!.getElement()).toHaveFocus();
@@ -44,6 +50,9 @@ test('focuses on all item types', () => {
 
   ref.current!.focus('menu');
   expect(wrapper.findMenuById('menu')!.findTriggerButton()!.getElement()).toHaveFocus();
+
+  ref.current!.focus('file');
+  expect(wrapper.findFileInputById('file')!.findNativeInput().getElement()).toHaveFocus();
 });
 
 test('moves focus to menu trigger after menu is dismissed', () => {

src/button-group/__tests__/button-group-keyboard.test.tsx

@@ -35,6 +35,7 @@ const items: ButtonGroupProps.ItemOrGroup[] = [
     ],
   },
   { type: 'icon-button', id: 'copy', iconName: 'copy', text: 'Copy', popoverFeedback: 'Copied' },
+  { type: 'file-input', id: 'file', text: 'Choose files' },
   {
     type: 'menu-dropdown',
     id: 'misc',
@@ -60,6 +61,11 @@ test('navigates button dropdown with keyboard', () => {
   expect(wrapper.findToggleButtonById('like')!.getElement()).toHaveFocus();
   expect(wrapper.findTooltip()!.getElement()).toHaveTextContent('Like');
 
+  fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.right });
+  fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.right });
+  expect(wrapper.findFileInputById('file')!.findNativeInput().getElement()).toHaveFocus();
+  expect(wrapper.findTooltip()!.getElement()).toHaveTextContent('Choose files');
+
   fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.end });
   expect(wrapper.findMenuById('misc')!.findTriggerButton()!.getElement()).toHaveFocus();
   expect(wrapper.findTooltip()!.getElement()).toHaveTextContent('Misc');

src/button-group/__tests__/button-group-states.test.tsx

@@ -29,7 +29,6 @@ const fileButton: ButtonGroupProps.FileInput = {
   type: 'file-input',
   id: 'file',
   text: 'Choose files',
-  value: [],
 };
 
 const menuButton: ButtonGroupProps.MenuDropdown = {

src/button-group/__tests__/button-group-tooltips.test.tsx

@@ -32,17 +32,23 @@ const menuButton: ButtonGroupProps.MenuDropdown = {
   items: [{ id: 'search', text: 'Search' }],
 };
 
+const fileInputButton: ButtonGroupProps.FileInput = {
+  type: 'file-input',
+  id: 'file',
+  text: 'Choose files',
+};
+
 test('tooltip not shown by default', () => {
-  const { wrapper } = renderButtonGroup({ items: [likeButton, copyButton, menuButton] });
+  const { wrapper } = renderButtonGroup({ items: [likeButton, copyButton, menuButton, fileInputButton] });
 
   expect(wrapper.findTooltip()).toBeNull();
 });
 
-test.each([copyButton, likeButton, menuButton])(
+test.each([copyButton, likeButton, menuButton, fileInputButton])(
   'shows the tooltip on pointer enter and hides on pointer leave, item id=$id',
   item => {
-    const { wrapper } = renderButtonGroup({ items: [likeButton, copyButton, menuButton] });
-    const button = wrapper.findButtonById(item.id)!;
+    const { wrapper } = renderButtonGroup({ items: [likeButton, copyButton, menuButton, fileInputButton] });
+    const button = item.id === 'file' ? wrapper.findFileInputById(item.id)! : wrapper.findButtonById(item.id)!;
 
     fireEvent.pointerEnter(button.getElement());
     expect(wrapper.findTooltip()!.getElement()).toHaveTextContent(item.text);