diff --git a/packages/react/src/components/ContainedList/__tests__/ContainedList-test.js b/packages/react/src/components/ContainedList/__tests__/ContainedList-test.js
index 8b7b0de6c0b0..b1bcee821664 100644
--- a/packages/react/src/components/ContainedList/__tests__/ContainedList-test.js
+++ b/packages/react/src/components/ContainedList/__tests__/ContainedList-test.js
@@ -49,6 +49,34 @@ beforeEach(() => {
});
describe('ContainedList', () => {
+ it('should apply correct class for kind="on-page"', () => {
+ wrapper.rerender();
+ expect(wrapper.container.firstChild).toHaveClass(
+ `${prefix}--contained-list--on-page`
+ );
+ });
+
+ it('should apply correct class for kind="disclosed"', () => {
+ wrapper.rerender();
+ expect(wrapper.container.firstChild).toHaveClass(
+ `${prefix}--contained-list--disclosed`
+ );
+ });
+
+ it('should apply inset class when isInset is true', () => {
+ wrapper.rerender();
+ expect(wrapper.container.firstChild).toHaveClass(
+ `${prefix}--contained-list--inset-rulers`
+ );
+ });
+
+ it('should apply not apply inset class when isInset is false', () => {
+ wrapper.rerender();
+ expect(wrapper.container.firstChild).not.toHaveClass(
+ `${prefix}--contained-list--inset-rulers`
+ );
+ });
+
it('list and label ids match', () => {
// eslint-disable-next-line testing-library/prefer-screen-queries
const list = wrapper.getByRole('list');
@@ -123,6 +151,35 @@ describe('ContainedList', () => {
expect(screen.getByTestId('test-expandable-search-id')).toBeInTheDocument();
expect(screen.queryByTestId('test-search-id')).not.toBeInTheDocument();
});
+
+ it('should render Search as the first child', () => {
+ const { container } = render(
+
+
+ Item 1
+ Item 2
+
+ );
+
+ // Verify the first child is Search
+ const listItems = container.querySelectorAll('ul');
+ expect(listItems[0]).toContainElement(screen.getByTestId('search-child'));
+ });
+
+ it('should handle action', () => {
+ const action = ;
+
+ render(
+
+ Item 1
+ Item 2
+
+ );
+
+ const actionButton = screen.getByTestId('action-button');
+ expect(actionButton).toBeInTheDocument();
+ expect(actionButton.tagName).toBe('BUTTON');
+ });
});
describe('ContainedListItem', () => {
diff --git a/packages/react/src/components/Layout/__tests__/Layout-test.js b/packages/react/src/components/Layout/__tests__/Layout-test.js
new file mode 100644
index 000000000000..31d7410cf29f
--- /dev/null
+++ b/packages/react/src/components/Layout/__tests__/Layout-test.js
@@ -0,0 +1,103 @@
+/**
+ * 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 { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Layout, LayoutConstraint } from '../';
+
+const prefix = 'cds';
+
+describe('Layout', () => {
+ it('should render a custom element when "as" prop is provided', () => {
+ render(Content inside section);
+ const sectionElement = screen.getByText('Content inside section');
+ expect(sectionElement.tagName).toBe('SECTION');
+ });
+
+ it('should apply the correct size class for Layout', () => {
+ const { container } = render(Content);
+ expect(container.firstChild).toHaveClass(`${prefix}--layout--size-lg`);
+ });
+
+ it('should apply the correct density class for Layout', () => {
+ const { container } = render(Content);
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--layout--density-condensed`
+ );
+ });
+
+ it('should apply custom class name to Layout', () => {
+ const { container } = render(
+ Content
+ );
+ expect(container.firstChild).toHaveClass('custom-class');
+ });
+
+ it('should render children inside Layout', () => {
+ render(Child Content);
+ const child = screen.getByText('Child Content');
+ expect(child).toBeInTheDocument();
+ });
+});
+
+describe('LayoutConstraint', () => {
+ it('should render a custom element when "as" prop is provided for LayoutConstraint', () => {
+ render(
+ Content inside article
+ );
+ const articleElement = screen.getByText('Content inside article');
+ expect(articleElement.tagName).toBe('ARTICLE');
+ });
+
+ it('should apply correct size constraints for LayoutConstraint', () => {
+ const { container } = render(
+
+ Content
+
+ );
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--layout-constraint--size__default-md`
+ );
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--layout-constraint--size__min-sm`
+ );
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--layout-constraint--size__max-xl`
+ );
+ });
+
+ it('should apply correct density constraints for LayoutConstraint', () => {
+ const { container } = render(
+
+ Content
+
+ );
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--layout-constraint--density__default-condensed`
+ );
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--layout-constraint--density__min-normal`
+ );
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--layout-constraint--density__max-normal`
+ );
+ });
+
+ it('should apply custom class name to LayoutConstraint', () => {
+ const { container } = render(
+ Content
+ );
+ expect(container.firstChild).toHaveClass('custom-class');
+ });
+
+ it('should render children inside LayoutConstraint', () => {
+ render(Constraint Child Content);
+ const child = screen.getByText('Constraint Child Content');
+ expect(child).toBeInTheDocument();
+ });
+});
diff --git a/packages/react/src/components/TextInput/__tests__/TextInput.Skeleton-test.js b/packages/react/src/components/TextInput/__tests__/TextInput.Skeleton-test.js
new file mode 100644
index 000000000000..aa8378e408ac
--- /dev/null
+++ b/packages/react/src/components/TextInput/__tests__/TextInput.Skeleton-test.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 TextInputSkeleton from '../TextInput.Skeleton';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+
+const prefix = 'cds';
+
+describe('TextInputSkeleton', () => {
+ it('should render the skeleton input with the default classes', () => {
+ const { container } = render();
+ const formItem = container.firstChild;
+
+ expect(formItem).toHaveClass(`${prefix}--form-item`);
+ expect(
+ formItem.querySelector(`.${prefix}--skeleton.${prefix}--text-input`)
+ ).toBeInTheDocument();
+ });
+
+ it('should render the label skeleton by default', () => {
+ const { container } = render();
+ const labelSkeleton = container.querySelector(
+ `.${prefix}--label.${prefix}--skeleton`
+ );
+
+ expect(labelSkeleton).toBeInTheDocument();
+ });
+
+ it('should not render the label skeleton if hideLabel is true', () => {
+ const { container } = render();
+ const labelSkeleton = container.querySelector(
+ `.${prefix}--label.${prefix}--skeleton`
+ );
+
+ expect(labelSkeleton).not.toBeInTheDocument();
+ });
+
+ it('should apply custom class names to the form item wrapper', () => {
+ const { container } = render(
+
+ );
+ const formItem = container.firstChild;
+
+ expect(formItem).toHaveClass('custom-class');
+ expect(formItem).toHaveClass(`${prefix}--form-item`);
+ });
+
+ it('should spread additional props onto the root element', () => {
+ const { container } = render(
+
+ );
+ const formItem = container.firstChild;
+
+ expect(formItem).toHaveAttribute('data-testid', 'skeleton-input');
+ });
+});