From a50bf57d5249b06ddfa32b778f91af9536ffc364 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 15 Oct 2024 14:24:05 -0500 Subject: [PATCH] test: increase coverage containedlist, layout and textinputskeleton --- .../__tests__/ContainedList-test.js | 57 ++++++++++ .../Layout/__tests__/Layout-test.js | 103 ++++++++++++++++++ .../__tests__/TextInput.Skeleton-test.js | 62 +++++++++++ 3 files changed, 222 insertions(+) create mode 100644 packages/react/src/components/Layout/__tests__/Layout-test.js create mode 100644 packages/react/src/components/TextInput/__tests__/TextInput.Skeleton-test.js 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'); + }); +});