@patternfly/react-core 6.4.1-prerelease.9 → 6.5.0-prerelease.2

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

@@ -0,0 +1,172 @@
+import { render, screen } from '@testing-library/react';
+import { Compass } from '../Compass';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-compass">
+      <Compass />
+    </div>
+  );
+  expect(screen.getByTestId('test-compass').firstChild).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Compass className="custom-class" data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass('custom-class');
+});
+
+test('Renders with default compass class', () => {
+  render(<Compass data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass(styles.compass);
+});
+
+test('Renders header content when provided', () => {
+  render(<Compass header={<div>Header content</div>} />);
+  expect(screen.getByText('Header content')).toBeVisible();
+});
+
+test('Renders sidebar start content when provided', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} />);
+  expect(screen.getByText('Sidebar start')).toBeVisible();
+});
+
+test('Renders main content when provided', () => {
+  render(<Compass main={<div>Main content</div>} />);
+  expect(screen.getByText('Main content')).toBeVisible();
+});
+
+test('Renders sidebar end content when provided', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} />);
+  expect(screen.getByText('Sidebar end')).toBeVisible();
+});
+
+test('Renders footer content when provided', () => {
+  render(<Compass footer={<div>Footer content</div>} />);
+  expect(screen.getByText('Footer content')).toBeVisible();
+});
+
+test('Renders header with expanded class when isHeaderExpanded is true', () => {
+  render(<Compass header={<div>Header</div>} isHeaderExpanded />);
+  expect(screen.getByText('Header').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders header without expanded class and with inert when isHeaderExpanded is false', () => {
+  render(<Compass header={<div>Header</div>} isHeaderExpanded={false} />);
+  const headerElement = screen.getByText('Header').parentElement;
+  expect(headerElement).not.toHaveClass('pf-m-expanded');
+  expect(headerElement).toHaveAttribute('inert');
+});
+
+test('Renders sidebar start with expanded class when isSidebarStartExpanded is true', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} isSidebarStartExpanded />);
+  expect(screen.getByText('Sidebar start').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders sidebar start without expanded class and with inert when isSidebarStartExpanded is false', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} isSidebarStartExpanded={false} />);
+  const sidebarElement = screen.getByText('Sidebar start').parentElement;
+  expect(sidebarElement).not.toHaveClass('pf-m-expanded');
+  expect(sidebarElement).toHaveAttribute('inert');
+});
+
+test('Renders sidebar end with expanded class when isSidebarEndExpanded is true', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} isSidebarEndExpanded />);
+  expect(screen.getByText('Sidebar end').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders sidebar end without expanded class and with inert when isSidebarEndExpanded is false', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} isSidebarEndExpanded={false} />);
+  const sidebarElement = screen.getByText('Sidebar end').parentElement;
+  expect(sidebarElement).not.toHaveClass('pf-m-expanded');
+  expect(sidebarElement).toHaveAttribute('inert');
+});
+
+test('Renders footer with expanded class when isFooterExpanded is true', () => {
+  render(<Compass footer={<div>Footer</div>} isFooterExpanded />);
+  expect(screen.getByText('Footer').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders footer without expanded class and with inert when isFooterExpanded is false', () => {
+  render(<Compass footer={<div>Footer</div>} isFooterExpanded={false} />);
+  const footerElement = screen.getByText('Footer').parentElement;
+  expect(footerElement).not.toHaveClass('pf-m-expanded');
+  expect(footerElement).toHaveAttribute('inert');
+});
+
+test('Renders with drawer when drawerContent is provided', () => {
+  render(<Compass drawerContent={<div>Drawer content</div>} />);
+  expect(screen.getByText('Drawer content')).toBeVisible();
+});
+
+test('Renders with light background image when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<Compass backgroundSrcLight={backgroundSrc} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${backgroundSrc})`);
+});
+
+test('Renders with dark background image when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<Compass backgroundSrcDark={backgroundSrc} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${backgroundSrc})`);
+});
+
+test('Renders with both light and dark background images when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(<Compass backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc} data-testid="compass" />);
+  const compassElement = screen.getByTestId('compass');
+  expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${lightSrc})`);
+  expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<Compass aria-label="Test label" data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with default expansion states', () => {
+  render(
+    <Compass
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    >
+      Test
+    </Compass>
+  );
+
+  expect(screen.getByText('Header').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Sidebar start').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Sidebar end').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Footer').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Matches the snapshot with basic layout', () => {
+  const { asFragment } = render(
+    <Compass
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      main={<div>Main content</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with drawer', () => {
+  const { asFragment } = render(
+    <Compass
+      drawerContent={<div>Drawer content</div>}
+      drawerProps={{ isExpanded: true }}
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      main={<div>Main content</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

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

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

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import { CompassHeader } from '../CompassHeader';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-header">
+      <CompassHeader />
+    </div>
+  );
+  expect(screen.getByTestId('test-header').firstChild).toBeVisible();
+});
+
+test('Renders logo content when provided', () => {
+  render(<CompassHeader logo={<div>Logo content</div>} />);
+  expect(screen.getByText('Logo content')).toBeVisible();
+});
+
+test('Renders nav content when provided', () => {
+  render(<CompassHeader nav={<div>Nav content</div>} />);
+  expect(screen.getByText('Nav content')).toBeVisible();
+});
+
+test('Renders profile content when provided', () => {
+  render(<CompassHeader profile={<div>Profile content</div>} />);
+  expect(screen.getByText('Profile content')).toBeVisible();
+});
+
+test('Renders all content when all props are provided', () => {
+  render(<CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />);
+  expect(screen.getByText('Logo')).toBeVisible();
+  expect(screen.getByText('Nav')).toBeVisible();
+  expect(screen.getByText('Profile')).toBeVisible();
+});
+
+test(`Renders logo with ${styles.compass}__logo class`, () => {
+  render(<CompassHeader logo={<div>Logo</div>} />);
+  expect(screen.getByText('Logo').parentElement).toHaveClass(`${styles.compass}__logo`);
+});
+
+test(`Renders nav with ${styles.compassNav} class`, () => {
+  render(<CompassHeader nav={<div>Nav</div>} />);
+  expect(screen.getByText('Nav').parentElement).toHaveClass(styles.compassNav);
+});
+
+test(`Renders profile with ${styles.compassProfile} class`, () => {
+  render(<CompassHeader profile={<div>Profile</div>} />);
+  expect(screen.getByText('Profile').parentElement).toHaveClass(styles.compassProfile);
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/react';
+import { CompassHero } from '../CompassHero';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-hero">
+      <CompassHero />
+    </div>
+  );
+  expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassHero>Test content</CompassHero>);
+  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`, () => {
+  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}`);
+});
+
+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 additional props spread to the component', () => {
+  render(<CompassHero aria-label="Test label">Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).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>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeader } from '../CompassMainHeader';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-main-header">
+      <CompassMainHeader />
+    </div>
+  );
+  expect(screen.getByTestId('test-main-header').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassMainHeader>Custom content</CompassMainHeader>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeader className="custom-class">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compass}__main-header class`, () => {
+  render(<CompassMainHeader>Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header`);
+});
+
+test('Renders title when provided', () => {
+  render(<CompassMainHeader title={<div>Title content</div>}>Test</CompassMainHeader>);
+  expect(screen.getByText('Title content')).toBeVisible();
+});
+
+test('Renders toolbar when provided', () => {
+  render(<CompassMainHeader toolbar={<div>Toolbar content</div>}>Test</CompassMainHeader>);
+  expect(screen.getByText('Toolbar content')).toBeVisible();
+});
+
+test('Renders both title and toolbar when provided', () => {
+  render(
+    <CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>}>
+      Test
+    </CompassMainHeader>
+  );
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.getByText('Toolbar')).toBeVisible();
+});
+
+test('Ignores children when title is provided', () => {
+  render(<CompassMainHeader title={<div>Title</div>}>Ignored children</CompassMainHeader>);
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Ignores children when toolbar is provided', () => {
+  render(<CompassMainHeader toolbar={<div>Toolbar</div>}>Ignored children</CompassMainHeader>);
+  expect(screen.getByText('Toolbar')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Ignores children when both title and toolbar are provided', () => {
+  render(
+    <CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>}>
+      Ignored children
+    </CompassMainHeader>
+  );
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.getByText('Toolbar')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Renders children when neither title nor toolbar are provided', () => {
+  render(<CompassMainHeader>Custom children content</CompassMainHeader>);
+  expect(screen.getByText('Custom children content')).toBeVisible();
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeader aria-label="Test label">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot with both title and toolbar', () => {
+  const { asFragment } = render(<CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>} />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with children', () => {
+  const { asFragment } = render(<CompassMainHeader>Custom children content</CompassMainHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMessageBar } from '../CompassMessageBar';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-message-bar">
+      <CompassMessageBar />
+    </div>
+  );
+  expect(screen.getByTestId('test-message-bar').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassMessageBar>Test content</CompassMessageBar>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMessageBar className="custom-class">Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassMessageBar} class`, () => {
+  render(<CompassMessageBar>Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassMessageBar);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMessageBar aria-label="Test label">Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassMessageBar>
+      <div>Message bar content</div>
+    </CompassMessageBar>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react';
+import { CompassPanel } from '../CompassPanel';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassPanel>Test content</CompassPanel>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassPanel className="custom-class">Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassPanel} class`, () => {
+  render(<CompassPanel>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassPanel);
+});
+
+test(`Renders with ${styles.modifiers.pill} when isPill is true`, () => {
+  render(<CompassPanel isPill>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill);
+});
+
+test(`Renders with ${styles.modifiers.noBorder} when hasNoBorder is true`, () => {
+  render(<CompassPanel hasNoBorder>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder);
+});
+
+test(`Renders with ${styles.modifiers.noPadding} when hasNoPadding is true`, () => {
+  render(<CompassPanel hasNoPadding>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPadding);
+});
+
+test('Renders with pf-v6-m-thinking when isThinking is true', () => {
+  render(<CompassPanel isThinking>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-v6-m-thinking');
+});
+
+test(`Renders with ${styles.modifiers.fullHeight} when isFullHeight is true`, () => {
+  render(<CompassPanel isFullHeight>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight);
+});
+
+test(`Renders with ${styles.modifiers.scrollable} when isScrollable is true`, () => {
+  render(<CompassPanel isScrollable>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
+});
+
+test('Renders with multiple modifier classes when multiple props are true', () => {
+  render(
+    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
+      Test
+    </CompassPanel>
+  );
+  const panelElement = screen.getByText('Test');
+  expect(panelElement).toHaveClass(styles.modifiers.pill);
+  expect(panelElement).toHaveClass(styles.modifiers.noBorder);
+  expect(panelElement).toHaveClass(styles.modifiers.noPadding);
+  expect(panelElement).toHaveClass('pf-v6-m-thinking');
+  expect(panelElement).toHaveClass(styles.modifiers.fullHeight);
+  expect(panelElement).toHaveClass(styles.modifiers.scrollable);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassPanel aria-label="Test label">Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot with all modifiers', () => {
+  const { asFragment } = render(
+    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
+      <div>Panel with all modifiers</div>
+    </CompassPanel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with no modifiers', () => {
+  const { asFragment } = render(
+    <CompassPanel>
+      <div>Basic panel</div>
+    </CompassPanel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});