@patternfly/react-core 6.5.0-prerelease.2 → 6.5.0-prerelease.21

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');
+
+  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');
+
+  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');
+
+  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');
+
+  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

@@ -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__/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>
+`;

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

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-home"
+  >
+    <button
+      aria-label="Home"
+      class="pf-v6-c-button pf-m-plain pf-m-circle"
+      data-ouia-component-id="OUIA-Generated-Button-plain-9"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="none"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.33268 13.334H11.666"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with custom props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-home custom-class"
+  >
+    <button
+      aria-label="Custom home"
+      class="pf-v6-c-button pf-m-plain pf-m-circle"
+      data-ouia-component-id="OUIA-Generated-Button-plain-10"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="none"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.33268 13.334H11.666"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassNavMain.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-main"
+  >
+    <div>
+      Main tabs content
+    </div>
+  </div>
+</DocumentFragment>
+`;