Merge branch 'main' into chore/wc-deprecate-side-panel-tearsheet

packages/react/src/components/AILabel/__tests__/AILabel-test.js

@@ -6,8 +6,10 @@
  */
 
 import React from 'react';
-import { AILabel } from '../';
+import { AILabel, AILabelContent, AILabelActions } from '../';
+import { Button } from '../../Button';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 const prefix = 'cds';
 
@@ -114,4 +116,45 @@ describe('AILabel', () => {
       );
     });
   });
+
+  it('should handle revert click', async () => {
+    render(
+      <AILabel
+        revertActive
+        revertLabel="Test revert label"
+        onRevertClick={() => {}}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('button'));
+  });
+});
+
+describe('AILabelContent', () => {
+  it('should render with content', () => {
+    render(
+      <AILabel>
+        <AILabelContent>Children test</AILabelContent>
+      </AILabel>
+    );
+
+    expect(screen.getByText('Children test')).toBeInTheDocument();
+  });
+});
+
+describe('AILabelActions', () => {
+  it('should render with actions', () => {
+    render(
+      <AILabel>
+        <AILabelContent>
+          Children test
+          <AILabelActions>
+            <Button>View details</Button>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+    );
+
+    expect(screen.getByText('View details')).toBeInTheDocument();
+  });
 });

packages/react/src/components/Pagination/Pagination-test.js → packages/react/src/components/Pagination/__tests__/Pagination-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Pagination from './Pagination';
+import Pagination from '../Pagination';
 import userEvent from '@testing-library/user-event';
 import { getAllByRole, render, screen } from '@testing-library/react';
 

packages/react/src/components/Pagination/__tests__/PaginationSkeleton-test.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2016, 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';
+import { PaginationSkeleton } from '../Pagination.Skeleton';
+import { render } from '@testing-library/react';
+
+describe('PaginationSkeleton', () => {
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <PaginationSkeleton aria-label="test" className="test" />
+    );
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should spread additional props on the outermost element', () => {
+    const { container } = render(
+      <PaginationSkeleton aria-label="test" data-testid="test" />
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+  });
+});

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

@@ -5,14 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Add } from '@carbon/icons-react';
-import { render, screen } from '@testing-library/react';
 import React from 'react';
-import Tag, { OperationalTag, TagSkeleton } from './';
-import DismissibleTag from './DismissibleTag';
+import { render, screen } from '@testing-library/react';
+import Tag, {
+  OperationalTag,
+  SelectableTag,
+  DismissibleTag,
+  TagSkeleton,
+} from './';
 import { AILabel } from '../AILabel';
-import { Asleep } from '@carbon/icons-react';
 import userEvent from '@testing-library/user-event';
+import { Asleep, Add } from '@carbon/icons-react';
 
 const prefix = 'cds';
 
@@ -95,6 +98,26 @@ describe('Tag', () => {
     ).toBeInTheDocument();
   });
 
+  describe('Selectable Tag', () => {
+    it('should render a selectable tag', () => {
+      const { container } = render(<SelectableTag text="Tag content" />);
+
+      expect(container.firstChild).toHaveClass(`${prefix}--tag--selectable`);
+    });
+
+    it('should select the selectable tag', async () => {
+      const { container } = render(<SelectableTag text="Tag content" />);
+
+      const selectableTag = container.querySelector(
+        `.${prefix}--tag--selectable`
+      );
+
+      await userEvent.click(selectableTag);
+      expect(selectableTag).toHaveAttribute('aria-pressed', 'true');
+      expect(selectableTag).toHaveClass(`${prefix}--tag--selectable-selected`);
+    });
+  });
+
   describe('Skeleton Tag', () => {
     it('should render a skeleton state', () => {
       const { container } = render(<TagSkeleton />);