@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/src/components/Compass/__tests__/CompassMainFooter.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainFooter } from '../CompassMainFooter';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-main-footer">
+      <CompassMainFooter />
+    </div>
+  );
+  expect(screen.getByTestId('test-main-footer').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassMainFooter>Custom content</CompassMainFooter>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainFooter className="custom-class">Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassMainFooter} class`, () => {
+  render(<CompassMainFooter>Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassMainFooter);
+});
+
+test(`Renders with pf-m-expanded class by default`, () => {
+  render(<CompassMainFooter>Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-expanded');
+});
+
+test(`Renders with pf-m-expanded class when isExpanded is true`, () => {
+  render(<CompassMainFooter isExpanded>Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-expanded');
+});
+
+test(`Renders without pf-m-expanded class when isExpanded is false`, () => {
+  render(<CompassMainFooter isExpanded={false}>Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-expanded');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainFooter aria-label="Test label">Test</CompassMainFooter>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainFooter>Custom children content</CompassMainFooter>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassMainHeader.test.tsx

@@ -74,9 +74,52 @@ test('Renders children when neither title nor toolbar are provided', () => {
   expect(screen.getByText('Custom children content')).toBeVisible();
 });
 
+test('Renders CompassPanel when title is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" title="Title text" />);
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass(styles.compassPanel);
+});
+
+test('Renders CompassPanel when toolbar is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" toolbar="Toolbar text" />);
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass(styles.compassPanel);
+});
+
+test('Does not render CompassPanel when children are passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id">
+      <div>Children content</div>
+    </CompassMainHeader>
+  );
+
+  const content = screen.getByTestId('test-id').firstChild;
+  expect(content).not.toHaveClass(styles.compassPanel);
+});
+
+test('Passes props to CompassPanel when title and compassPanelProps is passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} title="Title text" />
+  );
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass('panel-class');
+});
+
+test('Passes props to CompassPanel when toolbar and compassPanelProps is passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />
+  );
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass('panel-class');
+});
+
 test('Renders with additional props spread to the component', () => {
-  render(<CompassMainHeader aria-label="Test label">Test</CompassMainHeader>);
-  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+  render(<CompassMainHeader id="custom-id">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
 });
 
 test('Matches the snapshot with both title and toolbar', () => {

package/src/components/Compass/__tests__/CompassMainHeaderContent.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderContent } from '../CompassMainHeaderContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderContent>Custom content</CompassMainHeaderContent>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-content class`, () => {
+  render(<CompassMainHeaderContent>Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-content`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderContent className="custom-class">Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderContent id="custom-id">Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderContent>Content</CompassMainHeaderContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassMainHeaderTitle.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderTitle } from '../CompassMainHeaderTitle';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderTitle>Custom content</CompassMainHeaderTitle>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-title class`, () => {
+  render(<CompassMainHeaderTitle>Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-title`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderTitle className="custom-class">Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderTitle id="custom-id">Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderTitle>Content</CompassMainHeaderTitle>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassMainHeaderToolbar.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderToolbar } from '../CompassMainHeaderToolbar';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderToolbar>Custom content</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-toolbar class`, () => {
+  render(<CompassMainHeaderToolbar>Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-toolbar`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderToolbar className="custom-class">Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderToolbar id="custom-id">Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderToolbar>Content</CompassMainHeaderToolbar>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassNavContent.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { CompassNavContent } from '../CompassNavContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassNavContent>Test content</CompassNavContent>);
+
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassNavContent className="custom-class">Test</CompassNavContent>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassNavContent} class`, () => {
+  render(<CompassNavContent>Test</CompassNavContent>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.compassNavContent, { exact: true });
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassNavContent aria-label="Test label">Test</CompassNavContent>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassNavContent>
+      <div>Nav content wrapper</div>
+    </CompassNavContent>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassNavHome.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CompassNavHome } from '../CompassNavHome';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with default aria-label', () => {
+  render(<CompassNavHome />);
+
+  expect(screen.getByRole('button', { name: 'Home' })).toBeVisible();
+});
+
+test('Renders with custom aria-label when provided', () => {
+  render(<CompassNavHome aria-label="Custom home" />);
+
+  expect(screen.getByRole('button', { name: 'Custom home' })).toBeVisible();
+});
+
+test('Renders with default tooltip content', async () => {
+  const user = userEvent.setup();
+
+  render(<CompassNavHome />);
+
+  const button = screen.getByRole('button');
+
+  await user.hover(button);
+
+  await screen.findByRole('tooltip');
+
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Home');
+});
+
+test('Renders with custom tooltip content when provided', async () => {
+  const user = userEvent.setup();
+
+  render(<CompassNavHome tooltipContent="Custom tooltip" />);
+
+  const button = screen.getByRole('button');
+
+  await user.hover(button);
+
+  await screen.findByRole('tooltip');
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Custom tooltip');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  const { container } = render(<CompassNavHome className="custom-class" />);
+
+  expect(container.firstChild).toHaveClass('custom-class');
+});
+
+test(`Renders with default class`, () => {
+  const { container } = render(<CompassNavHome />);
+
+  expect(container.firstChild).toHaveClass(styles.compassNav + '-home', { exact: true });
+});
+
+test('Calls onClick handler when button is clicked', async () => {
+  const user = userEvent.setup();
+  const onClick = jest.fn();
+
+  render(<CompassNavHome onClick={onClick} />);
+
+  await user.click(screen.getByRole('button', { name: 'Home' }));
+
+  expect(onClick).toHaveBeenCalledTimes(1);
+});
+
+test('Renders button with plain variant and circle shape', () => {
+  render(<CompassNavHome />);
+
+  const button = screen.getByRole('button', { name: 'Home' });
+
+  expect(button).toHaveClass('pf-m-plain');
+  expect(button).toHaveClass('pf-m-circle');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassNavHome />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with custom props', () => {
+  const { asFragment } = render(
+    <CompassNavHome aria-label="Custom home" tooltipContent="Go home" className="custom-class" />
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassNavMain.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { CompassNavMain } from '../CompassNavMain';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassNavMain>Test content</CompassNavMain>);
+
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassNavMain className="custom-class">Test</CompassNavMain>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassNavMain} class`, () => {
+  render(<CompassNavMain>Test</CompassNavMain>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.compassNavMain, { exact: true });
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassNavMain aria-label="Test label">Test</CompassNavMain>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassNavMain>
+      <div>Main tabs content</div>
+    </CompassNavMain>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassNavSearch.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CompassNavSearch } from '../CompassNavSearch';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with default aria-label', () => {
+  render(<CompassNavSearch />);
+  expect(screen.getByRole('button', { name: 'Search' })).toBeVisible();
+});
+
+test('Renders with custom aria-label when provided', () => {
+  render(<CompassNavSearch aria-label="Custom search" />);
+  expect(screen.getByRole('button', { name: 'Custom search' })).toBeVisible();
+});
+
+test('Renders with default tooltip content', async () => {
+  const user = userEvent.setup();
+
+  render(<CompassNavSearch />);
+
+  const button = screen.getByRole('button');
+
+  await user.hover(button);
+
+  await screen.findByRole('tooltip');
+
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Search');
+});
+
+test('Renders with custom tooltip content when provided', async () => {
+  const user = userEvent.setup();
+
+  render(<CompassNavSearch tooltipContent="Custom tooltip" />);
+
+  const button = screen.getByRole('button');
+
+  await user.hover(button);
+
+  await screen.findByRole('tooltip');
+
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Custom tooltip');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  const { container } = render(<CompassNavSearch className="custom-class" />);
+
+  expect(container.firstChild).toHaveClass('custom-class');
+});
+
+test(`Renders with default class`, () => {
+  const { container } = render(<CompassNavSearch />);
+
+  expect(container.firstChild).toHaveClass(styles.compassNav + '-search', { exact: true });
+});
+
+test('Calls onClick handler when button is clicked', async () => {
+  const user = userEvent.setup();
+  const onClick = jest.fn();
+
+  render(<CompassNavSearch onClick={onClick} />);
+
+  await user.click(screen.getByRole('button', { name: 'Search' }));
+
+  expect(onClick).toHaveBeenCalledTimes(1);
+});
+
+test('Renders button with plain variant and circle shape', () => {
+  render(<CompassNavSearch />);
+
+  const button = screen.getByRole('button', { name: 'Search' });
+
+  expect(button).toHaveClass('pf-m-plain');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassNavSearch />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with custom props', () => {
+  const { asFragment } = render(
+    <CompassNavSearch aria-label="Custom search" tooltipContent="Search content" className="custom-class" />
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap

@@ -47,7 +47,7 @@ exports[`Matches the snapshot with basic layout 1`] = `
 exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -56,41 +56,45 @@ exports[`Matches the snapshot with drawer 1`] = `
         class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v6-c-compass"
+          class="pf-v6-c-drawer__body"
         >
           <div
-            class="pf-v6-c-compass__header pf-m-expanded"
+            class="pf-v6-c-compass"
           >
-            <div>
-              Header
+            <div
+              class="pf-v6-c-compass__header pf-m-expanded"
+            >
+              <div>
+                Header
+              </div>
             </div>
-          </div>
-          <div
-            class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
-          >
-            <div>
-              Sidebar start
+            <div
+              class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+            >
+              <div>
+                Sidebar start
+              </div>
             </div>
-          </div>
-          <div
-            class="pf-v6-c-compass__main"
-          >
-            <div>
-              Main content
+            <div
+              class="pf-v6-c-compass__main"
+            >
+              <div>
+                Main content
+              </div>
             </div>
-          </div>
-          <div
-            class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
-          >
-            <div>
-              Sidebar end
+            <div
+              class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+            >
+              <div>
+                Sidebar end
+              </div>
             </div>
-          </div>
-          <div
-            class="pf-v6-c-compass__footer pf-m-expanded"
-          >
-            <div>
-              Footer
+            <div
+              class="pf-v6-c-compass__footer pf-m-expanded"
+            >
+              <div>
+                Footer
+              </div>
             </div>
           </div>
         </div>

package/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
   >
     <div
       class="pf-v6-c-drawer__main"

package/src/components/Compass/__tests__/__snapshots__/CompassHero.test.tsx.snap

@@ -3,16 +3,9 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-compass__panel pf-v6-c-compass__hero"
-    style="--pf-v6-c-compass__hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-compass__hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-compass__hero--gradient--stop-1--light: #ff0000; --pf-v6-c-compass__hero--gradient--stop-2--light: #00ff00; --pf-v6-c-compass__hero--gradient--stop-3--light: #0000ff; --pf-v6-c-compass__hero--gradient--stop-1--dark: #000000; --pf-v6-c-compass__hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-compass__hero--gradient--stop-3--dark: #808080;"
+    class="pf-v6-c-compass__hero"
   >
-    <div
-      class="pf-v6-c-compass__hero-body"
-    >
-      <div>
-        Hero content
-      </div>
-    </div>
+    Hero content
   </div>
 </DocumentFragment>
 `;

package/src/components/Compass/__tests__/__snapshots__/CompassMainFooter.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-footer pf-m-expanded"
+  >
+    Custom children content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap

@@ -9,17 +9,17 @@ exports[`Matches the snapshot with both title and toolbar 1`] = `
       class="pf-v6-c-compass__panel"
     >
       <div
-        class="pf-v6-l-flex pf-m-align-items-center"
+        class="pf-v6-c-compass__main-header-content"
       >
         <div
-          class="pf-m-grow"
+          class="pf-v6-c-compass__main-header-title"
         >
           <div>
             Title
           </div>
         </div>
         <div
-          class=""
+          class="pf-v6-c-compass__main-header-toolbar"
         >
           <div>
             Toolbar

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderContent.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-content"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderTitle.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-title"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderToolbar.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-toolbar"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassNavContent.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-content"
+  >
+    <div>
+      Nav content wrapper
+    </div>
+  </div>
+</DocumentFragment>
+`;