fix: controlled tag added a default selected prop and tests carbon-design-system#19228

Author: sojinantony01

packages/react/src/components/Tag/SelectableTag.tsx

@@ -61,6 +61,11 @@ export interface SelectableTagBaseProps {
    */
   selected?: boolean;
 
+  /**
+   * Specify the default state of the selectable tag.
+   */
+  defaultSelected?: boolean;
+
   /**
    * Specify the size of the Tag. Currently supports either `sm`,
    * `md` (default) or `lg` sizes.
@@ -90,6 +95,7 @@ const SelectableTag = forwardRef(
       selected,
       size,
       text,
+      defaultSelected = false,
       ...other
     }: SelectableTagProps<T>,
     forwardRef: ForwardedRef<HTMLButtonElement>
@@ -100,7 +106,7 @@ const SelectableTag = forwardRef(
     const [selectedTag, setSelectedTag] = useControllableState({
       value: selected,
       onChange: onChange,
-      defaultValue: false,
+      defaultValue: defaultSelected,
     });
     const tagClasses = classNames(`${prefix}--tag--selectable`, className, {
       [`${prefix}--tag--selectable-selected`]: selectedTag,
@@ -206,6 +212,11 @@ SelectableTag.propTypes = {
    */
   selected: PropTypes.bool,
 
+  /**
+   * Specify the default state of the selectable tag.
+   */
+  defaultSelected: PropTypes.bool,
+
   /**
    * Specify the size of the Tag. Currently supports either `sm`,
    * `md` (default) or `lg` sizes.

packages/react/src/components/Tag/Tag-test.js

@@ -310,32 +310,64 @@ describe('Tag', () => {
   });
   it('Controlled selectable tag', () => {
     const ref = React.createRef();
-    const { rerender, container } = render(
+    const { rerender } = render(
       <SelectableTag type="red" text="Test Tag" ref={ref} selected={true} />
     );
 
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-    expect(container.firstChild).toHaveClass(
-      `${prefix}--tag--selectable-selected`
+    expect(screen.getByRole('button', { name: 'Test Tag' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
     );
 
     rerender(
       <SelectableTag type="red" text="Test Tag" ref={ref} selected={false} />
     );
-    expect(container.firstChild).not.toHaveClass(
-      `${prefix}--tag--selectable-selected`
+    expect(screen.getByRole('button', { name: 'Test Tag' })).toHaveAttribute(
+      'aria-pressed',
+      'false'
     );
   });
   it('Controlled selectable tag, should call onChange', async () => {
     const onChange = jest.fn();
 
-    const { container } = render(
+    render(
       <SelectableTag text="Tag content" onChange={onChange} selected={true} />
     );
 
-    const selectableTag = container.firstChild;
+    const selectableTag = screen.getByRole('button', { name: 'Tag content' });
 
     await userEvent.click(selectableTag);
     expect(onChange).toHaveBeenCalledWith(false);
   });
+  it('Controlled selectable tag should be selected by default if defaultSelected is true', () => {
+    const onChange = jest.fn();
+
+    render(
+      <SelectableTag
+        text="Tag content"
+        onChange={onChange}
+        defaultSelected={true}
+      />
+    );
+
+    const selectableTag = screen.getByRole('button', { name: 'Tag content' });
+
+    expect(selectableTag).toHaveAttribute('aria-pressed', 'true');
+  });
+  it('Controlled selectable tag should not be be selected by default if defaultSelected is false', () => {
+    const onChange = jest.fn();
+
+    render(
+      <SelectableTag
+        text="Tag content"
+        onChange={onChange}
+        defaultSelected={false}
+      />
+    );
+
+    const selectableTag = screen.getByRole('button', { name: 'Tag content' });
+
+    expect(selectableTag).toHaveAttribute('aria-pressed', 'false');
+  });
 });