@patternfly/react-core 4.266.0 → 4.266.2

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Sidebar } from '../Sidebar';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="sidebar">
+      <Sidebar />
+    </div>
+  );
+  expect(screen.getByTestId('sidebar').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Sidebar>Test</Sidebar>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with only class name pf-c-sidebar by default', () => {
+  render(<Sidebar>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-c-sidebar', { exact: true });
+});
+
+test('Renders with class name pf-c-sidebar', () => {
+  render(<Sidebar>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-c-sidebar');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Sidebar className="custom-class">Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test('Renders with class name pf-m-no-background when hasNoBackground prop is passed', () => {
+  render(<Sidebar hasNoBackground>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-no-background');
+});
+
+test('Renders with class name pf-m-stack when "stack" is passed to orientation prop', () => {
+  render(<Sidebar orientation="stack">Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-stack');
+});
+
+test('Renders with class name pf-m-split when "split" is passed to orientation prop', () => {
+  render(<Sidebar orientation="split">Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-split');
+});
+
+test('Renders with class name pf-m-panel-right when isPanelRight prop is passed', () => {
+  render(<Sidebar isPanelRight>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-panel-right');
+});
+
+test('Renders with class name pf-m-gutter when hasGutter prop is passed', () => {
+  render(<Sidebar hasGutter>Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-gutter');
+});
+
+test('Renders with class name pf-m-sidebar__main by default for child component', () => {
+  render(<Sidebar>Test</Sidebar>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__main');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<Sidebar aria-label="Test label">Test</Sidebar>);
+  expect(screen.getByText('Test').parentElement).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Sidebar>Test</Sidebar>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SidebarContent } from '../SidebarContent';
+
+test('Renders children', () => {
+  render(<SidebarContent>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with only class name pf-c-sidebar__content by default', () => {
+  render(<SidebarContent>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__content', { exact: true });
+});
+
+test('Renders with class name pf-c-sidebar__content', () => {
+  render(<SidebarContent>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__content');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<SidebarContent className="custom-class">Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with class name pf-m-no-background when hasNoBackground prop is passed', () => {
+  render(<SidebarContent hasNoBackground>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-no-background');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<SidebarContent aria-label="Test label">Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<SidebarContent>Test</SidebarContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SidebarPanel, SidebarPanelWidthType } from '../SidebarPanel';
+
+test('Renders children', () => {
+  render(<SidebarPanel>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with with only class name pf-c-sidebar__panel by default', () => {
+  render(<SidebarPanel>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__panel', { exact: true });
+});
+
+test('Renders with with class name pf-c-sidebar__panel', () => {
+  render(<SidebarPanel>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__panel');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<SidebarPanel className="custom-class">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with class name pf-m-sticky when "sticky" is passed to variant prop', () => {
+  render(<SidebarPanel variant="sticky">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-sticky');
+});
+
+test('Renders with class name pf-m-static when "static" is passed to variant prop', () => {
+  render(<SidebarPanel variant="static">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-static');
+});
+
+test('Renders with class name pf-m-no-background when hasNoBackground prop is passed', () => {
+  render(<SidebarPanel hasNoBackground>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-no-background');
+});
+
+['width_25', 'width_33', 'width_50', 'width_66', 'width_75', 'width_100'].forEach(widthType => {
+  test(`Renders with appropriate class names when ${widthType} is passed to each breakpoint of width prop`, () => {
+    render(
+      <SidebarPanel
+        width={{
+          default: `${widthType as SidebarPanelWidthType}`,
+          sm: `${widthType as SidebarPanelWidthType}`,
+          md: `${widthType as SidebarPanelWidthType}`,
+          lg: `${widthType as SidebarPanelWidthType}`,
+          xl: `${widthType as SidebarPanelWidthType}`,
+          '2xl': `${widthType as SidebarPanelWidthType}`
+        }}
+      >
+        Test
+      </SidebarPanel>
+    );
+
+    const className = widthType.replace('_', '-');
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-sm`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-md`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-lg`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-xl`);
+    expect(screen.getByText('Test')).toHaveClass(`pf-m-${className}-on-2xl`);
+  });
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<SidebarPanel aria-label="Test label">Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<SidebarPanel>Test</SidebarPanel>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-sidebar"
+  >
+    <div
+      class="pf-c-sidebar__main"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Sidebar/__tests__/__snapshots__/SidebarContent.test.tsx.snap

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

package/src/components/Sidebar/__tests__/__snapshots__/SidebarPanel.test.tsx.snap

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