Merge branch 'main' into ProgressIndicator-Skeleton-testcase

.all-contributorsrc

@@ -1662,6 +1662,15 @@
         "code"
       ]
     },
+    {
+      "login": "irfadkp",
+      "name": "IRFAD KP",
+      "avatar_url": "https://avatars.githubusercontent.com/u/54243898?v=4",
+      "profile": "https://irfadkp.github.io/",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "mariat189",
       "name": "Mariat",

README.md

@@ -310,7 +310,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/divya-281"><img src="https://avatars.githubusercontent.com/u/72991264?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Divya G</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=divya-281" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/soumyaraju"><img src="https://avatars.githubusercontent.com/u/41182657?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Soumya Raju</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=soumyaraju" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ziyadzulfikar"><img src="https://avatars.githubusercontent.com/u/56788667?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ziyadzulfikar</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ziyadzulfikar" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/mariat189"><img src="https://avatars.githubusercontent.com/u/74430463?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mariat</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mariat189" title="Code">💻</a></td>
+    <td align="center"><a href="https://irfadkp.github.io/"><img src="https://avatars.githubusercontent.com/u/54243898?v=4?s=100" width="100px;" alt=""/><br /><sub><b>IRFAD KP</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=irfadkp" title="Code">💻</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/mariat189"><img src="https://avatars.githubusercontent.com/u/74430463?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mariat</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mariat189" title="Code">💻</a></td>

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -220,7 +220,7 @@ export interface DropdownProps<ItemType>
    * Provide the title text that will be read by a screen reader when
    * visiting this control
    */
-  titleText?: ReactNode;
+  titleText: ReactNode;
 
   /**
    * The dropdown type, `default` or `inline`

packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getByText } from '@carbon/test-utils/dom';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { FileUploaderDropContainer } from '../';
 import React from 'react';
 import { Simulate } from 'react-dom/test-utils';
-import { FileUploaderDropContainer } from '../';
+import { getByText } from '@carbon/test-utils/dom';
 import { uploadFiles } from '../test-helpers';
 
 const requiredProps = { labelText: 'Add file' };
@@ -237,4 +238,267 @@ describe('FileUploaderDropContainer', () => {
       }
     );
   });
+  it('should not allow file selection when disabled', () => {
+    const onAddFiles = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer
+        onAddFiles={onAddFiles}
+        disabled
+        {...requiredProps}
+      />
+    );
+
+    const dropArea = container.querySelector('button');
+    Simulate.click(dropArea);
+
+    expect(onAddFiles).not.toHaveBeenCalled();
+  });
+
+  it('should filter files based on the accept prop', () => {
+    const onAddFiles = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer
+        accept={['.png']}
+        onAddFiles={onAddFiles}
+        {...requiredProps}
+      />
+    );
+    const input = container.querySelector('input');
+
+    const files = [
+      new File(['foo'], 'foo.txt', { type: 'text/plain' }),
+      new File(['bar'], 'bar.png', { type: 'image/png' }),
+    ];
+
+    uploadFiles(input, files);
+
+    expect(onAddFiles).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: {
+          files,
+        },
+      }),
+      {
+        addedFiles: expect.arrayContaining([
+          expect.objectContaining({ invalidFileType: true }), // foo.txt
+          expect.not.objectContaining({ invalidFileType: true }), // bar.png
+        ]),
+      }
+    );
+  });
+
+  it('should call onClick when drop area is clicked', () => {
+    const onClick = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer onClick={onClick} {...requiredProps} />
+    );
+
+    const dropArea = container.querySelector('button');
+    Simulate.click(dropArea);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should reset input value when clicked after selecting files', () => {
+    const { container } = render(
+      <FileUploaderDropContainer labelText="test" />
+    );
+    const input = container.querySelector('input');
+
+    uploadFiles(input, [
+      new File(['content'], 'test.png', { type: 'image/png' }),
+    ]);
+
+    expect(input.files.length).toBe(1);
+
+    Simulate.click(container.querySelector('button'));
+    expect(input.files.length).toBe(0);
+  });
+
+  it('should call the onClick handler when the drop area is clicked', () => {
+    const onClick = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer onClick={onClick} {...requiredProps} />
+    );
+    const dropArea = container.querySelector('button');
+    Simulate.click(dropArea);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should handle the case when no files are added', () => {
+    const onAddFiles = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer onAddFiles={onAddFiles} {...requiredProps} />
+    );
+    const input = container.querySelector('input');
+
+    expect(onAddFiles).not.toHaveBeenCalled();
+  });
+
+  it('should have a properly associated label for accessibility', () => {
+    const { container } = render(
+      <FileUploaderDropContainer
+        labelText="Upload your files"
+        {...requiredProps}
+      />
+    );
+    const label = container.querySelector('label');
+    const input = container.querySelector('input');
+    expect(label).toHaveAttribute('for', input.id);
+  });
+  it('should not set active state on drag over when disabled', () => {
+    const { container } = render(
+      <FileUploaderDropContainer disabled {...requiredProps} />
+    );
+
+    const dropArea = container.firstChild;
+
+    const dragOverEvent = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+
+    Simulate.dragOver(dropArea, dragOverEvent);
+    expect(dropArea).not.toHaveClass('test');
+  });
+  it('should not call onAddFiles when disabled', () => {
+    const onAddFiles = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer
+        onAddFiles={onAddFiles}
+        disabled
+        labelText="Add file"
+      />
+    );
+
+    const dropArea = container.querySelector('button');
+    Simulate.click(dropArea);
+
+    expect(onAddFiles).not.toHaveBeenCalled();
+  });
+  it('should initialize with default props', () => {
+    const { container } = render(
+      <FileUploaderDropContainer labelText="Upload" />
+    );
+    const input = container.querySelector('input');
+    expect(input).not.toBeNull();
+    expect(input.multiple).toBe(false);
+  });
+
+  it('should reset input value after files are selected and clicked again', () => {
+    const { container } = render(
+      <FileUploaderDropContainer labelText="Upload" />
+    );
+    const input = container.querySelector('input');
+
+    uploadFiles(input, [
+      new File(['content'], 'test.txt', { type: 'text/plain' }),
+    ]);
+
+    expect(input.files.length).toBe(1);
+
+    const dropArea = container.querySelector('button');
+    Simulate.click(dropArea);
+
+    expect(input.files.length).toBe(0);
+  });
+
+  it('should not set active state when disabled on drag over', () => {
+    const { container } = render(
+      <FileUploaderDropContainer disabled {...requiredProps} />
+    );
+    const dropArea = container.firstChild;
+
+    const dragOverEvent = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+
+    Simulate.dragOver(dropArea, dragOverEvent);
+    expect(dragOverEvent.preventDefault).toHaveBeenCalled();
+    expect(dragOverEvent.stopPropagation).toHaveBeenCalled();
+    expect(dropArea).not.toHaveClass('some-active-class');
+  });
+  it('should return array of files marked as invalid if they dont match accepted types', () => {
+    const onAddFilesMock = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer
+        accept={['image/png']}
+        onAddFiles={onAddFilesMock}
+        {...requiredProps}
+      />
+    );
+    const event = {
+      dataTransfer: {
+        files: [
+          new File(['sample text'], 'example.txt', { type: 'text/plain' }),
+        ],
+      },
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+    fireEvent.drop(container.firstChild, event);
+    expect(onAddFilesMock).toHaveBeenCalledWith(expect.anything(), {
+      addedFiles: [
+        expect.objectContaining({
+          invalidFileType: true,
+        }),
+      ],
+    });
+  });
+
+  it('should render a label with custom labelText for screen readers', () => {
+    const { getByLabelText } = render(
+      <FileUploaderDropContainer labelText="Upload your file" />
+    );
+    const hiddenLabel = getByLabelText('Upload your file');
+    expect(hiddenLabel).toBeInTheDocument();
+  });
+  it('should prevent default action on Space key press', () => {
+    const { container } = render(
+      <FileUploaderDropContainer {...requiredProps} />
+    );
+    const dropArea = container.querySelector('button');
+    const preventDefault = jest.fn();
+    const event = new KeyboardEvent('keydown', {
+      key: ' ',
+      code: 'Space',
+      bubbles: true,
+    });
+    Object.defineProperty(event, 'preventDefault', { value: preventDefault });
+    dropArea.dispatchEvent(event);
+    expect(preventDefault).toHaveBeenCalled();
+  });
+
+  it('should trigger input click on Enter key press', () => {
+    const { container } = render(
+      <FileUploaderDropContainer {...requiredProps} />
+    );
+    const dropArea = container.querySelector('button');
+    const input = container.querySelector('input');
+    const clickMock = jest.spyOn(input, 'click').mockImplementation(() => {});
+    dropArea.focus();
+    fireEvent.keyDown(dropArea, { key: 'Enter', code: 'Enter', charCode: 13 });
+    expect(clickMock).toHaveBeenCalled();
+    clickMock.mockRestore();
+  });
+
+  it('should return early when disabled', () => {
+    const handleDrop = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer
+        onDrop={handleDrop}
+        disabled
+        {...requiredProps}
+      />
+    );
+    const dropArea = container.firstChild;
+    const dropEvent = new Event('drop', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    dropArea.dispatchEvent(dropEvent);
+    expect(handleDrop).not.toHaveBeenCalled();
+  });
 });

packages/react/src/components/FluidDatePicker/__tests__/FluidDatePickerSkeleton-test.js

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+
+import FluidDatePickerSkeleton from '../FluidDatePicker.Skeleton';
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+
+describe('FluidDatePickerSkeleton', () => {
+  it('renders the single variant by default', () => {
+    render(<FluidDatePickerSkeleton />);
+    const skeletonIcon = screen.getByRole('img', { hidden: true });
+    expect(skeletonIcon).toBeInTheDocument();
+    expect(skeletonIcon).toHaveClass('cds--date-picker__icon');
+  });
+
+  it('renders the range variant when specified', () => {
+    render(<FluidDatePickerSkeleton datePickerType="range" />);
+    const skeletonIcons = screen.getAllByRole('img', { hidden: true });
+    expect(skeletonIcons.length).toBe(2);
+  });
+
+  it('does not render the calendar icon for simple variant', () => {
+    render(<FluidDatePickerSkeleton datePickerType="simple" />);
+    const skeletonIcon = screen.queryByRole('img');
+    expect(skeletonIcon).toBeNull();
+  });
+});