diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 827100d7e65..4b5fff93db0 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.8.1" }, "devDependencies": { - "@patternfly/patternfly": "6.3.0-prerelease.29", + "@patternfly/patternfly": "6.3.0-prerelease.33", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.0" diff --git a/packages/react-core/src/components/Button/hamburgerIcon.tsx b/packages/react-core/src/components/Button/hamburgerIcon.tsx index b500109bfef..70770e054b8 100644 --- a/packages/react-core/src/components/Button/hamburgerIcon.tsx +++ b/packages/react-core/src/components/Button/hamburgerIcon.tsx @@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles'; // Because this is such a specific icon that requires being wrapped in a pf-v[current version]-c-button element, // we don't want to export this to consumers nor include it in the react-icons package as a custom icon. export const hamburgerIcon = ( - + diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx index 4f6155939fa..82c09ca1d39 100644 --- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx +++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx @@ -32,7 +32,7 @@ export interface ExpandableSectionProps extends Omit { if (!element || lines < 1) { return; @@ -198,6 +207,7 @@ class ExpandableSection extends Component void; + /** Flag indicating that the expandable section and expandable toggle are detached from one another. */ + isDetached?: boolean; } export const ExpandableSectionToggle: React.FunctionComponent = ({ @@ -39,6 +41,7 @@ export const ExpandableSectionToggle: React.FunctionComponent (
diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx index 833107ee2b5..b4e77de49d9 100644 --- a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx +++ b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx @@ -1,9 +1,8 @@ -import { Fragment } from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection'; -import { ExpandableSectionToggle } from '../ExpandableSectionToggle'; +import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section'; const props = { contentId: 'content-id', toggleId: 'toggle-id' }; @@ -22,7 +21,7 @@ test('Renders ExpandableSection expanded', () => { expect(asFragment()).toMatchSnapshot(); }); -test('ExpandableSection onToggle called', async () => { +test('Calls onToggle when clicked', async () => { const mockfn = jest.fn(); const user = userEvent.setup(); @@ -32,6 +31,21 @@ test('ExpandableSection onToggle called', async () => { expect(mockfn.mock.calls).toHaveLength(1); }); +test('Does not call onToggle when not clicked', async () => { + const mockfn = jest.fn(); + const user = userEvent.setup(); + + render( + <> + test + + + ); + + await user.click(screen.getByRole('button', { name: 'Test clicker' })); + expect(mockfn).not.toHaveBeenCalled(); +}); + test('Renders Uncontrolled ExpandableSection', () => { const { asFragment } = render( @@ -42,20 +56,6 @@ test('Renders Uncontrolled ExpandableSection', () => { expect(asFragment()).toMatchSnapshot(); }); -test('Detached ExpandableSection renders successfully', () => { - const { asFragment } = render( - - - test - - - Toggle text - - - ); - expect(asFragment()).toMatchSnapshot(); -}); - test('Disclosure ExpandableSection', () => { const { asFragment } = render( @@ -75,22 +75,22 @@ test('Renders ExpandableSection indented', () => { expect(asFragment()).toMatchSnapshot(); }); -test('Does not render with pf-m-truncate class when variant is not passed', () => { +test(`Does not render with ${styles.modifiers.truncate} class when variant is not passed`, () => { render(test); - expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate'); + expect(screen.getByText('test').parentElement).not.toHaveClass(styles.modifiers.truncate); }); -test('Does not render with pf-m-truncate class when variant is not truncate', () => { +test(`Does not render with ${styles.modifiers.truncate} class when variant is not truncate`, () => { render(test); - expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate'); + expect(screen.getByText('test').parentElement).not.toHaveClass(styles.modifiers.truncate); }); -test('Renders with pf-m-truncate class when variant is truncate', () => { +test(`Renders with ${styles.modifiers.truncate} class when variant is truncate`, () => { render(test); - expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate'); + expect(screen.getByText('test').parentElement).toHaveClass(styles.modifiers.truncate); }); test('Renders with value passed to contentId', () => { @@ -129,3 +129,65 @@ test('Renders with ARIA attributes when contentId and toggleId are passed', () = expect(wrapper).toContainHTML('aria-labelledby="toggle-id"'); expect(wrapper).toContainHTML('aria-controls="content-id"'); }); + +test(`Does not render with classes ${styles.modifiers.expandTop} nor ${styles.modifiers.expandBottom} by default`, () => { + render(Test content); + + expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-top'); + expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-bottom'); +}); + +test(`Does not render with classes ${styles.modifiers.expandTop} nor ${styles.modifiers.expandBottom} when only isDetached is true`, () => { + render(Test content); + + expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-top'); + expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-bottom'); +}); + +test(`Does not render with class ${styles.modifiers.expandTop} when direction="up" and isDetached is false`, () => { + render(Test content); + + expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-top'); +}); + +test(`Does not render with class ${styles.modifiers.expandBottom} when direction="down" and isDetached is false`, () => { + render(Test content); + + expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-bottom'); +}); + +test(`Renders with class ${styles.modifiers.expandTop} when isDetached is true and direction="up"`, () => { + render( + + Test content + + ); + + expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-expand-top'); +}); + +test(`Renders with class ${styles.modifiers.expandBottom} when isDetached is true and direction="down"`, () => { + render( + + Test content + + ); + + expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-expand-bottom'); +}); + +test('Does not render with class pf-m-detached when isDetached is true and direction is not passed', () => { + render(Test content); + + expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-detached'); +}); + +test('Renders with class pf-m-detached when isDetached is true and direction is passed', () => { + render( + + Test content + + ); + + expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached'); +}); diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx new file mode 100644 index 00000000000..8a088eef393 --- /dev/null +++ b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx @@ -0,0 +1,32 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { ExpandableSectionToggle } from '../ExpandableSectionToggle'; +import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section'; + +test('Renders without children', () => { + render(); + + expect(screen.getByRole('button')).toBeInTheDocument(); +}); + +test('Renders with children', () => { + render(Toggle test); + + expect(screen.getByRole('button')).toHaveTextContent('Toggle test'); +}); + +test('Does not render with class pf-m-detached by default', () => { + render(Toggle test); + + expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-detached'); +}); + +test('Renders with class pf-m-detached when isDetached is true', () => { + render( + + Toggle test + + ); + + expect(screen.getByTestId('test-id')).toHaveClass('pf-m-detached'); +}); diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap index 4dd34a77783..8b9918bb6d2 100644 --- a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap +++ b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap @@ -1,67 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Detached ExpandableSection renders successfully 1`] = ` - -
-
- test -
-
-
-
- -
-
- -`; - exports[`Disclosure ExpandableSection 1`] = `