test: increase coverage containedlist, layout and textinputskeleton (#…

…17755)

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(<TestComponent list={{ kind: 'on-page' }} />);
+    expect(wrapper.container.firstChild).toHaveClass(
+      `${prefix}--contained-list--on-page`
+    );
+  });
+
+  it('should apply correct class for kind="disclosed"', () => {
+    wrapper.rerender(<TestComponent list={{ kind: 'disclosed' }} />);
+    expect(wrapper.container.firstChild).toHaveClass(
+      `${prefix}--contained-list--disclosed`
+    );
+  });
+
+  it('should apply  inset class when isInset is true', () => {
+    wrapper.rerender(<TestComponent list={{ isInset: true }} />);
+    expect(wrapper.container.firstChild).toHaveClass(
+      `${prefix}--contained-list--inset-rulers`
+    );
+  });
+
+  it('should apply not apply inset class when isInset is false', () => {
+    wrapper.rerender(<TestComponent list={{ isInset: false }} />);
+    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(
+      <ContainedList label="label">
+        <Search labelText="Search" data-testid="search-child" />
+        <ContainedListItem>Item 1</ContainedListItem>
+        <ContainedListItem>Item 2</ContainedListItem>
+      </ContainedList>
+    );
+
+    // 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 = <button data-testid="action-button">Click me</button>;
+
+    render(
+      <ContainedList label="label" action={action}>
+        <ContainedListItem>Item 1</ContainedListItem>
+        <ContainedListItem>Item 2</ContainedListItem>
+      </ContainedList>
+    );
+
+    const actionButton = screen.getByTestId('action-button');
+    expect(actionButton).toBeInTheDocument();
+    expect(actionButton.tagName).toBe('BUTTON');
+  });
 });
 
 describe('ContainedListItem', () => {

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(<Layout as="section">Content inside section</Layout>);
+    const sectionElement = screen.getByText('Content inside section');
+    expect(sectionElement.tagName).toBe('SECTION');
+  });
+
+  it('should apply the correct size class for Layout', () => {
+    const { container } = render(<Layout size="lg">Content</Layout>);
+    expect(container.firstChild).toHaveClass(`${prefix}--layout--size-lg`);
+  });
+
+  it('should apply the correct density class for Layout', () => {
+    const { container } = render(<Layout density="condensed">Content</Layout>);
+    expect(container.firstChild).toHaveClass(
+      `${prefix}--layout--density-condensed`
+    );
+  });
+
+  it('should apply custom class name to Layout', () => {
+    const { container } = render(
+      <Layout className="custom-class">Content</Layout>
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should render children inside Layout', () => {
+    render(<Layout>Child Content</Layout>);
+    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(
+      <LayoutConstraint as="article">Content inside article</LayoutConstraint>
+    );
+    const articleElement = screen.getByText('Content inside article');
+    expect(articleElement.tagName).toBe('ARTICLE');
+  });
+
+  it('should apply correct size constraints for LayoutConstraint', () => {
+    const { container } = render(
+      <LayoutConstraint size={{ min: 'sm', default: 'md', max: 'xl' }}>
+        Content
+      </LayoutConstraint>
+    );
+    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(
+      <LayoutConstraint
+        density={{ min: 'normal', default: 'condensed', max: 'normal' }}>
+        Content
+      </LayoutConstraint>
+    );
+    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(
+      <LayoutConstraint className="custom-class">Content</LayoutConstraint>
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should render children inside LayoutConstraint', () => {
+    render(<LayoutConstraint>Constraint Child Content</LayoutConstraint>);
+    const child = screen.getByText('Constraint Child Content');
+    expect(child).toBeInTheDocument();
+  });
+});

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(<TextInputSkeleton />);
+    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(<TextInputSkeleton />);
+    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(<TextInputSkeleton hideLabel />);
+    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(
+      <TextInputSkeleton className="custom-class" />
+    );
+    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(
+      <TextInputSkeleton data-testid="skeleton-input" />
+    );
+    const formItem = container.firstChild;
+
+    expect(formItem).toHaveAttribute('data-testid', 'skeleton-input');
+  });
+});