@patternfly/react-core 4.244.1 → 4.245.0

package/src/components/Alert/__tests__/AlertActionCloseButton.test.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { AlertActionCloseButton } from '../AlertActionCloseButton';
+import { AlertContext } from '../AlertContext';
+
+jest.mock('../../Button', () => ({
+  Button: ({ children, variant, isInline, onClick, ...props }) => (
+    <>
+      <button onClick={onClick} {...props}>
+        {children}
+      </button>
+      <p>{`variant: ${variant}`}</p>
+      <p id="labelling-id">Test label</p>
+    </>
+  ),
+  ButtonVariant: { plain: 'plain' }
+}));
+
+test('Renders without children', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toBeVisible();
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton className="custom-class" />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton aria-labelledby="labelling-id" />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Renders a Button with variant: ButtonVariant.plain', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByText('variant: plain')).toBeVisible();
+});
+
+test('Does not call the callback provided via onClose when it is not clicked', () => {
+  const onCloseMock = jest.fn();
+
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton onClose={onCloseMock} />
+    </AlertContext.Provider>
+  );
+
+  expect(onCloseMock).not.toHaveBeenCalled();
+});
+
+test('Calls the callback provided via onClose when clicked', async () => {
+  const onCloseMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton onClose={onCloseMock} />
+    </AlertContext.Provider>
+  );
+
+  await user.click(screen.getByRole('button'));
+
+  expect(onCloseMock).toHaveBeenCalledTimes(1);
+});
+
+test('Renders with an aria label composed with the title and variantLabel provided via a context by default', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Close variantLabel alert: title');
+});
+
+test('Renders with an aria label composed with the title provided via a context and variantLabel provided via prop', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton variantLabel='variant label prop'/>
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Close variant label prop alert: title');
+});
+
+test('Renders with the aria label provided via prop when one is provided', () => {
+    render(
+      <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+        <AlertActionCloseButton aria-label='Aria label prop'/>
+      </AlertContext.Provider>
+    );
+  
+    expect(screen.getByRole('button')).toHaveAccessibleName('Aria label prop');
+  });
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton />
+    </AlertContext.Provider>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Alert/__tests__/AlertActionLink.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AlertActionLink } from '../AlertActionLink';
+
+jest.mock('../../Button', () => ({
+  Button: ({ children, variant, isInline, ...props }) => (
+    <>
+      <button {...props}>{children}</button>
+      <p>{`variant: ${variant}`}</p>
+      <p>{`isInline: ${isInline}`}</p>
+    </>
+  ),
+  ButtonVariant: { link: 'link' }
+}));
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <AlertActionLink />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<AlertActionLink>Test</AlertActionLink>);
+
+  expect(screen.getByRole('button')).toBeVisible();
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<AlertActionLink className="custom-class">Test</AlertActionLink>);
+
+  expect(screen.getByRole('button')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<AlertActionLink aria-label="Test label">Test</AlertActionLink>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Renders a Button with variant: ButtonVariant.link', () => {
+  render(<AlertActionLink>Test</AlertActionLink>);
+
+  expect(screen.getByText('variant: link')).toBeVisible();
+});
+
+test('Renders a Button with isInline: true', () => {
+  render(<AlertActionLink>Test</AlertActionLink>);
+
+  expect(screen.getByText('isInline: true')).toBeVisible();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<AlertActionLink>Test</AlertActionLink>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Alert/__tests__/AlertIcon.test.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { AlertIcon } from '../AlertIcon';
+
+jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Check circle icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon', () => () => 'Exclamation circle icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon', () => () =>
+  'Exclamation triangle icon mock'
+);
+jest.mock('@patternfly/react-icons/dist/esm/icons/info-circle-icon', () => () => 'Info circle icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/bell-icon', () => () => 'Bell icon mock');
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <AlertIcon variant="default" />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with the bell icon when variant = default', () => {
+  render(<AlertIcon variant="default" />);
+
+  expect(screen.getByText('Bell icon mock')).toBeVisible();
+});
+
+test('Renders with the check circle icon when variant = success', () => {
+  render(<AlertIcon variant="success" />);
+
+  expect(screen.getByText('Check circle icon mock')).toBeVisible();
+});
+
+test('Renders with the exclamation circle icon when variant = danger', () => {
+  render(<AlertIcon variant="danger" />);
+
+  expect(screen.getByText('Exclamation circle icon mock')).toBeVisible();
+});
+
+test('Renders with the exclamation triangle icon when variant = warning', () => {
+  render(<AlertIcon variant="warning" />);
+
+  expect(screen.getByText('Exclamation triangle icon mock')).toBeVisible();
+});
+
+test('Renders with the info circle icon when variant = info', () => {
+  render(<AlertIcon variant="info" />);
+
+  expect(screen.getByText('Info circle icon mock')).toBeVisible();
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<AlertIcon variant="default" className="test-class" />);
+
+  expect(screen.getByText('Bell icon mock')).toHaveClass('test-class');
+});
+
+test('Renders with the passed custom icon when one is passed rather than the icon determined by the passed variant', () => {
+  render(<AlertIcon variant="default" customIcon="Custom icon" />);
+
+  expect(screen.queryByText('Bell icon mock')).not.toBeInTheDocument();
+  expect(screen.getByText('Custom icon')).toBeVisible();
+});
+
+test('Renders the icon inside class pf-c-alert__icon', () => {
+  render(<AlertIcon variant="default" />);
+
+  expect(screen.getByText('Bell icon mock')).toHaveClass('pf-c-alert__icon');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<AlertIcon variant="default" aria-label="Test label" />);
+
+  expect(screen.getByText('Bell icon mock')).toHaveAccessibleName('Test label');
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<AlertIcon variant="default" />);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { AlertToggleExpandButton } from '../AlertToggleExpandButton';
+import { AlertContext } from '../AlertContext';
+
+jest.mock('../../Button', () => ({
+  Button: ({ children, variant, isInline, onClick, ...props }) => (
+    <>
+      <button onClick={onClick} {...props}>
+        {children}
+      </button>
+      <p>{`variant: ${variant}`}</p>
+      <p id="labelling-id">Test label</p>
+    </>
+  ),
+  ButtonVariant: { plain: 'plain' }
+}));
+
+jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+        <AlertToggleExpandButton />
+      </AlertContext.Provider>
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with an aria label composed with the title and variantLabel provided via a context by default', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle variantLabel alert: title');
+});
+
+test('Renders with the aria label provided via prop when one is provided', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton aria-label="Aria label prop" />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Aria label prop');
+});
+
+test('Does not call the callback provided via onToggleExpand when it is not clicked', () => {
+  const onToggleExpandMock = jest.fn();
+
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton onToggleExpand={onToggleExpandMock} />
+    </AlertContext.Provider>
+  );
+
+  expect(onToggleExpandMock).not.toHaveBeenCalled();
+});
+
+test('Calls the callback provided via onToggleExpand when clicked', async () => {
+  const onToggleExpandMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton onToggleExpand={onToggleExpandMock} />
+    </AlertContext.Provider>
+  );
+
+  await user.click(screen.getByRole('button'));
+
+  expect(onToggleExpandMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not render the button as aria-expanded by default', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Renders the button as aria-expanded when isExpanded = true', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton isExpanded />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Renders with an aria label composed with the title provided via a context and variantLabel provided via prop', () => {
+    render(
+      <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+        <AlertToggleExpandButton variantLabel='variantLabelProp'/>
+      </AlertContext.Provider>
+    );
+  
+    expect(screen.getByRole('button')).toHaveAccessibleName('Toggle variantLabelProp alert: title');
+  });
+
+test('Renders a Button with variant: ButtonVariant.plain', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByText('variant: plain')).toBeVisible();
+});
+
+test('Renders with the toggle icon inside class pf-c-alert__toggle-icon', () => {
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByText('Icon mock')).toHaveClass('pf-c-alert__toggle-icon');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+    render(
+      <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+        <AlertToggleExpandButton aria-labelledby="labelling-id" />
+      </AlertContext.Provider>
+    );
+  
+    expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+  });
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertToggleExpandButton />
+    </AlertContext.Provider>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});