Updated tests

Author: Eric Olkowski

packages/react-core/src/components/Alert/AlertActionCloseButton.tsx

@@ -35,7 +35,7 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
   const handleOnClick = () => {
     if (hasAnimations) {
       getParentAlertGroupItem()?.classList.add(offstageRight);
-      updateTransitionEnd(() => onClose());
+      updateTransitionEnd(onClose);
     } else {
       onClose();
     }

packages/react-core/src/components/Alert/AlertGroupContext.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 interface AlertGroupContext {
   hasAnimations?: boolean;
-  updateTransitionEnd?: (onTransitionEnd: React.Dispatch<React.SetStateAction<() => void>>) => void;
+  updateTransitionEnd?: (onTransitionEnd: () => void) => void;
 }
 
 export const AlertGroupContext = React.createContext<AlertGroupContext>({

packages/react-core/src/components/Alert/AlertGroupInline.tsx

@@ -16,7 +16,7 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   ...props
 }: AlertGroupProps) => {
   const [handleTransitionEnd, setHandleTransitionEnd] = React.useState(() => () => {});
-  const updateTransitionEnd = (onTransitionEnd: React.Dispatch<React.SetStateAction<() => void>>) => {
+  const updateTransitionEnd = (onTransitionEnd: () => void) => {
     setHandleTransitionEnd(() => onTransitionEnd);
   };
   return (

packages/react-core/src/components/Alert/__tests__/AlertActionCloseButton.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
 import { AlertActionCloseButton } from '../AlertActionCloseButton';
+import { AlertGroupContext } from '../AlertGroupContext';
 import { AlertContext } from '../AlertContext';
 
 jest.mock('../../Button');
@@ -74,6 +74,23 @@ test('Calls the callback provided via onClose when clicked', async () => {
   expect(onCloseMock).toHaveBeenCalledTimes(1);
 });
 
+test('Calls updateTransitionEnd with onClose when animations are enabled', async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+  const updateMock = jest.fn();
+  render(
+    <AlertGroupContext.Provider value={{ hasAnimations: true, updateTransitionEnd: updateMock }}>
+      <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+        <AlertActionCloseButton onClose={onClose} />
+      </AlertContext.Provider>
+    </AlertGroupContext.Provider>
+  );
+
+  await user.click(screen.getByRole('button'));
+  expect(updateMock).toHaveBeenCalledWith(onClose);
+  expect(updateMock).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' }}>

packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { render, screen, act, waitFor, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Alert } from '../../Alert';
@@ -67,7 +67,38 @@ test('Toast Alert Group contains expected modifier class', () => {
 
   expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
 });
-test('alertgroup closes when alerts are closed', async () => {
+
+test('Calls the callback set by updateTransitionEnd when transition ends and animations are enabled', async () => {
+  window.matchMedia = (query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  });
+  const mockCallback = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <AlertGroup isToast appendTo={document.body}>
+      <Alert
+        isLiveRegion
+        title={'Test Alert'}
+        actionClose={<AlertActionCloseButton aria-label="Close" onClose={mockCallback} />}
+      />
+    </AlertGroup>
+  );
+
+  await user.click(screen.getByLabelText('Close'));
+  expect(mockCallback).not.toHaveBeenCalled();
+  fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
+  expect(mockCallback).toHaveBeenCalled();
+});
+
+test('Does not call the callback set by updateTransitionEnd when transition ends and animations are disabled', async () => {
   window.matchMedia = (query) => ({
     matches: false,
     media: query,
@@ -78,19 +109,22 @@ test('alertgroup closes when alerts are closed', async () => {
     removeEventListener: jest.fn(),
     dispatchEvent: jest.fn()
   });
-  const onClose = jest.fn();
+  const mockCallback = jest.fn();
   const user = userEvent.setup();
+
   render(
-    <AlertGroup className="pf-v6-m-no-motion" isToast appendTo={document.body}>
+    <AlertGroup hasAnimations={false} isToast appendTo={document.body}>
       <Alert
         isLiveRegion
         title={'Test Alert'}
-        actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+        actionClose={<AlertActionCloseButton aria-label="Close" onClose={mockCallback} />}
       />
     </AlertGroup>
   );
 
   await user.click(screen.getByLabelText('Close'));
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+  // The transitionend event firing should not cause the callback to be called again
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
-  expect(onClose).toHaveBeenCalled();
+  expect(mockCallback).toHaveBeenCalledTimes(1);
 });