@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.30

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

@@ -170,3 +170,13 @@ test('Matches the snapshot with drawer', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test(`Renders with ${styles.modifiers.dock} class when dock is passed`, () => {
+  render(<Compass dock={<div>Dock content</div>} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass(styles.modifiers.dock);
+});
+
+test(`Does not render with ${styles.modifiers.dock} class when dock is not passed`, () => {
+  render(<Compass data-testid="compass" />);
+  expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.dock);
+});

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

@@ -16,135 +16,23 @@ test('Renders with children', () => {
   expect(screen.getByText('Test content')).toBeVisible();
 });
 
-test('Renders with custom class name when className prop is provided', () => {
-  render(<CompassHero className="custom-class">Test</CompassHero>);
-  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
-});
-
-test(`Renders with default ${styles.compassPanel} and ${styles.compassHero} classes on the hero and ${styles.compassHeroBody} class on the hero body`, () => {
+test(`Renders with ${styles.compass}__hero class by defaulty`, () => {
   render(<CompassHero>Test</CompassHero>);
-  const heroBodyElement = screen.getByText('Test');
-  expect(heroBodyElement).toHaveClass(styles.compassHeroBody);
-
-  const heroElement = heroBodyElement.parentElement;
-  expect(heroElement).toHaveClass(styles.compassPanel);
-  expect(heroElement).toHaveClass(styles.compassHero);
-});
-
-test('Renders with light background image style when backgroundSrcLight is provided', () => {
-  const backgroundSrc = 'light-bg.jpg';
-  render(<CompassHero backgroundSrcLight={backgroundSrc}>Test</CompassHero>);
-  expect(screen.getByText('Test').parentElement).toHaveStyle(
-    `--pf-v6-c-compass__hero--BackgroundImage--light: url(${backgroundSrc})`
-  );
-});
-
-test('Renders with dark background image style when backgroundSrcDark is provided', () => {
-  const backgroundSrc = 'dark-bg.jpg';
-  render(<CompassHero backgroundSrcDark={backgroundSrc}>Test</CompassHero>);
-  expect(screen.getByText('Test').parentElement).toHaveStyle(
-    `--pf-v6-c-compass__hero--BackgroundImage--dark: url(${backgroundSrc})`
-  );
-});
-
-test('Renders with both light and dark background image styles when both are provided', () => {
-  const lightSrc = 'light-bg.jpg';
-  const darkSrc = 'dark-bg.jpg';
-  render(
-    <CompassHero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
-      Test
-    </CompassHero>
-  );
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
-});
-
-test('Renders with light gradient styles when gradientLight is provided', () => {
-  const gradient = {
-    stop1: '#ff0000',
-    stop2: '#00ff00',
-    stop3: '#0000ff'
-  };
-  render(<CompassHero gradientLight={gradient}>Test</CompassHero>);
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${gradient.stop1}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--light: ${gradient.stop2}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-3--light: ${gradient.stop3}`);
-});
 
-test('Renders with dark gradient styles when gradientDark is provided', () => {
-  const gradient = {
-    stop1: '#ff0000',
-    stop2: '#00ff00',
-    stop3: '#0000ff'
-  };
-  render(<CompassHero gradientDark={gradient}>Test</CompassHero>);
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${gradient.stop1}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--dark: ${gradient.stop2}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-3--dark: ${gradient.stop3}`);
-});
-
-test('Renders with both light and dark gradient styles when both are provided', () => {
-  const lightGradient = {
-    stop1: '#ff0000',
-    stop2: '#00ff00',
-    stop3: '#0000ff'
-  };
-  const darkGradient = {
-    stop1: '#000000',
-    stop2: '#ffffff',
-    stop3: '#808080'
-  };
-  render(
-    <CompassHero gradientLight={lightGradient} gradientDark={darkGradient}>
-      Test
-    </CompassHero>
-  );
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__hero`, { exact: true });
 });
 
-test('Renders with both background images and gradient styles when both are provided', () => {
-  const lightSrc = 'light-bg.jpg';
-  const darkSrc = 'dark-bg.jpg';
-  const lightGradient = { stop1: '#ff0000' };
-  const darkGradient = { stop1: '#000000' };
-
-  render(
-    <CompassHero
-      backgroundSrcLight={lightSrc}
-      backgroundSrcDark={darkSrc}
-      gradientLight={lightGradient}
-      gradientDark={darkGradient}
-    >
-      Test
-    </CompassHero>
-  );
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassHero className="custom-class">Test</CompassHero>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
 test('Renders with additional props spread to the component', () => {
   render(<CompassHero aria-label="Test label">Test</CompassHero>);
-  expect(screen.getByText('Test').parentElement).toHaveAccessibleName('Test label');
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
 });
 
 test('Matches the snapshot', () => {
-  const { asFragment } = render(
-    <CompassHero
-      backgroundSrcLight="light.jpg"
-      backgroundSrcDark="dark.jpg"
-      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
-      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
-    >
-      <div>Hero content</div>
-    </CompassHero>
-  );
+  const { asFragment } = render(<CompassHero>Hero content</CompassHero>);
   expect(asFragment()).toMatchSnapshot();
 });

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