@patternfly/react-core 4.244.1 → 4.245.0

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

@@ -1,210 +1,724 @@
 import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
 
 import { Alert, AlertVariant } from '../Alert';
-import { AlertActionLink } from '../AlertActionLink';
-import { AlertActionCloseButton } from '../AlertActionCloseButton';
-import { UsersIcon } from '@patternfly/react-icons';
-
-describe('Alert', () => {
-  test('default Alert variant is default', () => {
-    render(<Alert title="this is a test">Alert testing</Alert>);
-    expect(screen.getByText('this is a test')).toHaveClass('pf-c-alert__title');
-  });
-
-  Object.values(AlertVariant).forEach(variant => {
-    describe(`Alert - ${variant}`, () => {
-      test('Description', () => {
-        const { asFragment } = render(
-          <Alert variant={variant} title="">
-            Some alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('Title', () => {
-        const { asFragment } = render(
-          <Alert variant={variant} title="Some title">
-            Some alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('Heading level', () => {
-        const { asFragment } = render(
-          <Alert variant={variant} title="Some title" titleHeadingLevel="h1">
-            Some alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('Action Link', () => {
-        const { asFragment } = render(
-          <Alert variant={variant} actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]} title="">
-            Some alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('Action Close Button', async () => {
-        const onClose = jest.fn();
-        const user = userEvent.setup();
-
-        render(
-          <Alert
-            variant={variant}
-            actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
-            title={`Sample ${variant} alert`}
-          >
-            Some alert
-          </Alert>
-        );
-
-        await user.click(screen.getByLabelText('Close'));
-        expect(onClose).toHaveBeenCalled();
-      });
-
-      test('Action and Title', () => {
-        const { asFragment } = render(
-          <Alert
-            variant={variant}
-            actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]}
-            title="Some title"
-          >
-            Some alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('Custom aria label', () => {
-        const { asFragment } = render(
-          <Alert
-            variant={variant}
-            aria-label={`Custom aria label for ${variant}`}
-            actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]}
-            title="Some title"
-          >
-            Some alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('inline variation', () => {
-        const { asFragment } = render(
-          <Alert variant={variant} isInline title="Some title">
-            Some alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('expandable variation', () => {
-        const { asFragment } = render(
-          <Alert variant={variant} title="Some title" isExpandable>
-            <p>Success alert description. This should tell the user more information about the alert.</p>
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('expandable variation description hidden', () => {
-        const description = 'Success alert description.';
-
-        render(
-          <Alert variant={variant} title="Some title" isExpandable>
-            <p>{description}</p>
-          </Alert>
-        );
-
-        expect(screen.queryByText(description)).toBeNull();
-      });
-
-      test('Toast alerts match snapsnot', () => {
-        const { asFragment } = render(
-          <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
-            Some toast alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-
-      test('Toast alerts contain default live region', () => {
-        const ariaLabel = `${variant} toast alert`;
-
-        render(
-          <Alert isLiveRegion={true} variant={variant} aria-label={ariaLabel} title="Some title">
-            Some toast alert
-          </Alert>
-        );
-
-        expect(screen.getByLabelText(ariaLabel)).toHaveAttribute('aria-live', 'polite');
-      });
-
-      test('Toast alert live regions are not atomic', () => {
-        const ariaLabel = `${variant} toast alert`;
-
-        render(
-          <Alert isLiveRegion={true} variant={variant} aria-label={ariaLabel} title="Some title">
-            Some toast alert
-          </Alert>
-        );
-
-        expect(screen.getByLabelText(ariaLabel)).toHaveAttribute('aria-atomic', 'false');
-      });
-
-      test('Non-toast alerts can have custom live region settings', () => {
-        const ariaLabel = `${variant} toast alert`;
-
-        render(
-          <Alert
-            aria-live="assertive"
-            aria-relevant="all"
-            aria-atomic="true"
-            variant={variant}
-            aria-label={ariaLabel}
-            title="Some title"
-          >
-            Some noisy alert
-          </Alert>
-        );
-        const alert = screen.getByLabelText(ariaLabel);
-
-        expect(alert).toHaveAttribute('aria-live', 'assertive');
-        expect(alert).toHaveAttribute('aria-relevant', 'all');
-        expect(alert).toHaveAttribute('aria-atomic', 'true');
-      });
-
-      test('Custom icon', () => {
-        const { asFragment } = render(
-          <Alert
-            customIcon={<UsersIcon />}
-            variant={variant}
-            aria-label={`${variant} custom icon alert`}
-            title="custom icon alert title"
-          >
-            Some noisy alert
-          </Alert>
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-    });
-  });
-
-  test('Alert truncate title', () => {
+import { AlertContext } from '../AlertContext';
+import { capitalize } from '../../../helpers';
+
+jest.mock('../AlertToggleExpandButton', () => ({
+  AlertToggleExpandButton: ({ isExpanded, onToggleExpand, ...props }) => (
+    <button onClick={onToggleExpand} {...props}>
+      isExpanded: {`${isExpanded}`}
+    </button>
+  )
+}));
+
+jest.mock('../AlertIcon', () => ({
+  AlertIcon: ({ variant, className, customIcon, ...props }) => (
+    <div {...props} className={className}>
+      <p>custom icon: {customIcon}</p>
+      <p>variant: {variant}</p>
+    </div>
+  )
+}));
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <Alert title="Some title" />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with class pf-c-alert on the containing div', () => {
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-c-alert');
+});
+
+test('Renders with class pf-c-alert__title on the div containing the title', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+  expect(screen.getByRole('heading', { name: 'Default alert: Some title' })).toHaveClass('pf-c-alert__title');
+});
+
+test('Renders with a default aria label of Default Alert', () => {
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByTestId('Alert-test-id')).toHaveAccessibleName('Default Alert');
+});
+
+['success', 'danger', 'warning', 'info'].forEach(variant => {
+  test(`Does not render with class pf-m-${variant} by default`, () => {
+    render(
+      <Alert title="Some title" data-testid="Alert-test-id">
+        Some alert
+      </Alert>
+    );
+    expect(screen.getByTestId('Alert-test-id')).not.toHaveClass(`pf-m-${variant}`);
+  });
+
+  test(`Renders with class pf-m-${variant} when variant = ${variant}`, () => {
+    render(
+      <Alert variant={`${variant as AlertVariant}`} title="Some title" data-testid="Alert-test-id">
+        Some alert
+      </Alert>
+    );
+    expect(screen.getByTestId('Alert-test-id')).toHaveClass(`pf-m-${variant}`);
+  });
+
+  test(`Renders with aria label ${capitalize(variant)} Alert when variant = ${variant}`, () => {
+    render(
+      <Alert variant={`${variant as AlertVariant}`} title="Some title" data-testid="Alert-test-id">
+        Some alert
+      </Alert>
+    );
+    expect(screen.getByTestId('Alert-test-id')).toHaveAccessibleName(`${capitalize(variant)} Alert`);
+  });
+
+  test(`Renders the title with an accessible name of '${capitalize(
+    variant
+  )} alert: Some title' when variant = ${variant}`, () => {
+    render(
+      <Alert variant={`${variant as AlertVariant}`} title="Some title">
+        Some alert
+      </Alert>
+    );
+
+    expect(screen.getByRole('heading')).toHaveAccessibleName(`${capitalize(variant)} alert: Some title`);
+  });
+
+  test(`Passes AlertToggleExpandButton an aria label of '${capitalize(
+    variant
+  )} alert details' when variant = ${variant} and it is expandable`, () => {
+    render(
+      <Alert variant={`${variant as AlertVariant}`} title="Some title" isExpandable>
+        Some alert
+      </Alert>
+    );
+
+    expect(screen.getByRole('button')).toHaveAccessibleName(`${capitalize(variant)} alert details`);
+  });
+
+  test(`Provides a variantLabel of '${capitalize(variant)} alert:' in a context when variant = ${variant}`, () => {
+    const TestComponent: React.FunctionComponent = () => {
+      const context = React.useContext(AlertContext);
+
+      return (
+        <p data-testid="Test-component" aria-label={context.variantLabel}>
+          {context.title}
+        </p>
+      );
+    };
+
     render(
-      <Alert truncateTitle={1} title="this is a test">
-        Alert testing
+      <Alert
+        variant={`${variant as AlertVariant}`}
+        title="Some title"
+        data-testid="Alert-test-id"
+        actionClose={<TestComponent />}
+      >
+        Some alert
       </Alert>
     );
 
-    expect(screen.getByText('this is a test')).toHaveClass('pf-m-truncate');
+    expect(screen.getByTestId('Test-component')).toHaveAccessibleName(`${capitalize(variant)} alert:`);
+  });
+});
+
+test('Does not render with class pf-m-inline by default', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-inline');
+});
+
+test('Renders with class pf-m-inline when isInline = true', () => {
+  render(
+    <Alert isInline title="Some title">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-inline');
+});
+
+test('Does not render with class pf-m-plain by default', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-plain');
+});
+
+test('Renders with class pf-m-plain when isPlain = true', () => {
+  render(
+    <Alert isPlain title="Some title">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-plain');
+});
+
+test('Renders the title', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+
+  expect(screen.getByText('Some title')).toBeVisible();
+});
+
+test('Renders the title as an h4 by default', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+
+  expect(screen.getByRole('heading', { level: 4, name: 'Default alert: Some title' })).toBeVisible();
+});
+
+test('Renders the title as other heading levels when one is passed using titleHeadingLevel', () => {
+  render(
+    <Alert title="Some title" titleHeadingLevel="h1">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByRole('heading', { level: 1, name: 'Default alert: Some title' })).toBeVisible();
+});
+
+test('Renders the element passed via the actionClose prop', () => {
+  render(
+    <Alert title="Some title" actionClose={<button>Action close</button>}>
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByRole('button', { name: 'Action close' })).toBeVisible();
+});
+
+test('Renders the actionClose element inside pf-c-alert__action', () => {
+  render(
+    <Alert title="Some title" actionClose="Action close">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByText('Action close')).toHaveClass('pf-c-alert__action');
+});
+
+test('Provides the actionClose element access to the title via a context', () => {
+  const TestComponent: React.FunctionComponent = () => {
+    const context = React.useContext(AlertContext);
+
+    return (
+      <p data-testid="Test-component" aria-label={context.variantLabel}>
+        {context.title}
+      </p>
+    );
+  };
+
+  render(
+    <Alert title="Some title" actionClose={<TestComponent />}>
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByTestId('Test-component')).toHaveTextContent('Some title');
+});
+
+test('Renders the element passed via the actionLinks prop', () => {
+  render(
+    <Alert title="Some title" actionLinks={<button>Action link</button>}>
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByRole('button', { name: 'Action link' })).toBeVisible();
+});
+
+test('Renders the actionLinks element inside pf-c-alert__action-group', () => {
+  render(
+    <Alert title="Some title" actionLinks="Action link">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByText('Action link')).toHaveClass('pf-c-alert__action-group');
+});
+
+test('Renders children', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+
+  expect(screen.getByText('Some alert')).toBeVisible();
+});
+
+test('Renders children inside pf-c-alert__description', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+
+  expect(screen.getByText('Some alert')).toHaveClass('pf-c-alert__description');
+});
+
+test('Renders with the aria label passed via prop', () => {
+  render(
+    <Alert aria-label="Test label" title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByTestId('Alert-test-id')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with the variantLabel passed via prop', () => {
+  const TestComponent: React.FunctionComponent = () => {
+    const context = React.useContext(AlertContext);
+
+    return (
+      <p data-testid="Test-component" aria-label={context.variantLabel}>
+        {context.title}
+      </p>
+    );
+  };
+
+  render(
+    <Alert variantLabel="Test label" title="Some title" data-testid="Alert-test-id" actionClose={<TestComponent />}>
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByTestId('Test-component')).toHaveAccessibleName('Test label');
+});
+
+test('Renders without aria-live and aria-atomic attributes by default', () => {
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+
+  const alertContainer = screen.getByTestId('Alert-test-id');
+
+  expect(alertContainer).not.toHaveAttribute('aria-live');
+  expect(alertContainer).not.toHaveAttribute('aria-atomic');
+});
+
+test('Has an aria-live value of polite and aria-atomic value of false when isLiveRegion = true', () => {
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id" isLiveRegion>
+      Some alert
+    </Alert>
+  );
+
+  const alertContainer = screen.getByTestId('Alert-test-id');
+
+  expect(alertContainer).toHaveAttribute('aria-live', 'polite');
+  expect(alertContainer).toHaveAttribute('aria-atomic', 'false');
+});
+
+test('Renders with no timeout by default', () => {
+  jest.useFakeTimers();
+
+  render(<Alert title="Some title">Some alert</Alert>);
+
+  act(() => {
+    jest.advanceTimersByTime(8000);
+  });
+
+  expect(screen.getByText('Some alert')).toBeVisible();
+  jest.useRealTimers();
+});
+
+test('Removes the alert after 8000ms when timeout = true', () => {
+  jest.useFakeTimers();
+
+  render(
+    <Alert title="Some title" timeout>
+      Some alert
+    </Alert>
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(7999);
+  });
+
+  expect(screen.getByText('Some alert')).toBeVisible();
+
+  act(() => {
+    jest.advanceTimersByTime(1);
+  });
+
+  expect(screen.queryByText('Some alert')).not.toBeInTheDocument();
+  jest.useRealTimers();
+});
+
+test('Removes the alert after a custom time when timeout is passed with a number', () => {
+  jest.useFakeTimers();
+
+  render(
+    <Alert title="Some title" timeout={2000}>
+      Some alert
+    </Alert>
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(1999);
+  });
+
+  expect(screen.getByText('Some alert')).toBeVisible();
+
+  act(() => {
+    jest.advanceTimersByTime(1);
   });
+
+  expect(screen.queryByText('Some alert')).not.toBeInTheDocument();
+  jest.useRealTimers();
+});
+
+test('Does not remove the alert on timeout if the user is focused on the alert', async () => {
+  const user = userEvent.setup({
+    advanceTimers: delay => jest.advanceTimersByTime(delay)
+  });
+  jest.useFakeTimers();
+
+  render(
+    <Alert title="Some title" timeout>
+      Some alert
+    </Alert>
+  );
+
+  const alert = screen.getByText('Some alert');
+
+  await user.click(alert);
+
+  act(() => {
+    jest.advanceTimersByTime(8000);
+  });
+
+  expect(screen.getByText('Some alert')).toBeVisible();
+  jest.useRealTimers();
+});
+
+test('Does not remove the alert on timeout if the user is hovered over the alert', async () => {
+  const user = userEvent.setup({
+    advanceTimers: delay => jest.advanceTimersByTime(delay)
+  });
+  jest.useFakeTimers();
+
+  render(
+    <Alert title="Some title" timeout>
+      Some alert
+    </Alert>
+  );
+
+  const alert = screen.getByText('Some alert');
+
+  await user.hover(alert);
+
+  act(() => {
+    jest.advanceTimersByTime(8000);
+  });
+
+  expect(alert).toBeVisible();
+  jest.useRealTimers();
+});
+
+test('Removes the alert after the user removes focus from the alert and 3000ms have passed', async () => {
+  const user = userEvent.setup({
+    advanceTimers: delay => jest.advanceTimersByTime(delay)
+  });
+  jest.useFakeTimers();
+
+  render(
+    <div>
+      <input />
+      <Alert title="Some title" timeout>
+        Some alert
+      </Alert>
+    </div>
+  );
+
+  const alert = screen.getByText('Some alert');
+
+  await user.click(alert);
+
+  act(() => {
+    jest.advanceTimersByTime(8000);
+  });
+
+  await user.click(screen.getByRole('textbox'));
+
+  act(() => {
+    jest.advanceTimersByTime(3000);
+  });
+
+  expect(screen.queryByText('Some alert')).not.toBeInTheDocument();
+  jest.useRealTimers();
+});
+
+test('Removes the alert after the user removes hover from the alert and 3000ms have passed', async () => {
+  const user = userEvent.setup({
+    advanceTimers: delay => jest.advanceTimersByTime(delay)
+  });
+  jest.useFakeTimers();
+
+  render(
+    <div>
+      <input />
+      <Alert title="Some title" timeout>
+        Some alert
+      </Alert>
+    </div>
+  );
+
+  const alert = screen.getByText('Some alert');
+
+  await user.hover(alert);
+
+  act(() => {
+    jest.advanceTimersByTime(8000);
+  });
+
+  await user.hover(screen.getByRole('textbox'));
+
+  act(() => {
+    jest.advanceTimersByTime(3000);
+  });
+
+  expect(screen.queryByText('Some alert')).not.toBeInTheDocument();
+  jest.useRealTimers();
+});
+
+test('Removes the alert after the user removes hover from the alert and timeoutAnimation time has passed', async () => {
+  const user = userEvent.setup({
+    advanceTimers: delay => jest.advanceTimersByTime(delay)
+  });
+  jest.useFakeTimers();
+
+  render(
+    <div>
+      <input />
+      <Alert title="Some title" timeout timeoutAnimation={1000}>
+        Some alert
+      </Alert>
+    </div>
+  );
+
+  const alert = screen.getByText('Some alert');
+
+  await user.hover(alert);
+
+  act(() => {
+    jest.advanceTimersByTime(8000);
+  });
+
+  await user.hover(screen.getByRole('textbox'));
+
+  act(() => {
+    jest.advanceTimersByTime(1000);
+  });
+
+  expect(screen.queryByText('Some alert')).not.toBeInTheDocument();
+  jest.useRealTimers();
+});
+
+test('Does not call the onTimeout callback before the timeout period has expired', () => {
+  jest.useFakeTimers();
+  const onTimeoutMock = jest.fn();
+
+  render(
+    <Alert title="Some title" timeout onTimeout={onTimeoutMock}>
+      Some alert
+    </Alert>
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(7999);
+  });
+
+  expect(onTimeoutMock).not.toHaveBeenCalled();
+  jest.useRealTimers();
+});
+
+test('Calls the onTimeout callback after the timeout period has expired', () => {
+  jest.useFakeTimers();
+  const onTimeoutMock = jest.fn();
+
+  render(
+    <Alert title="Some title" timeout onTimeout={onTimeoutMock}>
+      Some alert
+    </Alert>
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(8000);
+  });
+
+  expect(onTimeoutMock).toHaveBeenCalledTimes(1);
+  jest.useRealTimers();
+});
+
+test('Renders titles without truncation styling by default', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+
+  const title = screen.getByRole('heading');
+
+  expect(title).not.toHaveClass('pf-m-truncate');
+  expect(title).not.toHaveAttribute('style');
+});
+
+test('Renders titles with the expected truncation styling when truncateTitle is a value', () => {
+  render(
+    <Alert title="Some title" truncateTitle={3}>
+      Some alert
+    </Alert>
+  );
+
+  const title = screen.getByRole('heading');
+
+  expect(title).toHaveClass('pf-m-truncate');
+  expect(title).toHaveAttribute('style', '--pf-c-alert__title--max-lines: 3;');
+});
+
+test('Passes customIcon value to AlertIcon', () => {
+  render(
+    <Alert title="Some title" customIcon="custom-icon-test">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByText('custom icon: custom-icon-test')).toBeVisible();
+});
+
+test('Does not render with class pf-m-expandable by default', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-expandable');
+});
+
+test('Renders with class pf-m-expandable when isExpandable = true', () => {
+  render(
+    <Alert isExpandable title="Some title">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-expandable');
+});
+
+test('Renders AlertToggleExpandButton inside pf-c-alert__toggle', () => {
+  render(
+    <Alert isExpandable title="Some title">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByRole('button').parentElement).toHaveClass('pf-c-alert__toggle');
+});
+
+test('Does not render with class pf-m-expanded when AlertToggleExpandButton has not been clicked', () => {
+  render(
+    <Alert isExpandable title="Some title">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-expanded');
+});
+
+test('Renders with class pf-m-expanded once the AlertToggleExpandButton is clicked', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Alert isExpandable title="Some title">
+      Some alert
+    </Alert>
+  );
+
+  await user.click(screen.getByRole('button'));
+
+  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-expanded');
+});
+
+test('Does not render children when isExpandable = true and AlertToggleExpandButton has not been clicked', () => {
+  render(
+    <Alert isExpandable title="Some title">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.queryByText('Some alert')).not.toBeInTheDocument();
+});
+
+test('Renders children when isExpandable = true and AlertToggleExpandButton has been clicked', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Alert isExpandable title="Some title">
+      Some alert
+    </Alert>
+  );
+
+  await user.click(screen.getByRole('button'));
+
+  expect(screen.getByText('Some alert')).toBeVisible();
+});
+
+test('Passes AlertToggleExpandButton isExpanded = false when AlertToggleExpandButton has not been clicked', () => {
+  render(
+    <Alert isExpandable title="Some title">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByText('isExpanded: false')).toBeVisible();
+});
+
+test('Passes AlertToggleExpandButton isExpanded = true once the AlertToggleExpandButton is clicked', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Alert isExpandable title="Some title">
+      Some alert
+    </Alert>
+  );
+
+  await user.click(screen.getByRole('button'));
+
+  expect(screen.getByText('isExpanded: true')).toBeVisible();
+});
+
+test('Passes AlertToggleExpandButton the aria label provided via toggleAriaLabel', () => {
+  render(
+    <Alert isExpandable title="Some title" toggleAriaLabel="Test label">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Passes the id prop to the top level returned element', () => {
+  render(
+    <Alert title="Some title" aria-label="Test label" id="test-id">
+      Some alert
+    </Alert>
+  );
+
+  expect(screen.getByLabelText('Test label')).toHaveAttribute('id', 'test-id');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <Alert title="Some title" aria-describedby="labelling-id" aria-label="Test label" />
+      <p id="labelling-id">Described by text</p>
+    </>
+  );
+
+  expect(screen.getByLabelText('Test label')).toHaveAccessibleDescription('Described by text');
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(
+    <Alert isLiveRegion={true} aria-label="Toast alert label" title="Some title" ouiaId="ouia-id">
+      Some toast alert
+    </Alert>
+  );
+  expect(asFragment()).toMatchSnapshot();
 });