@patternfly/react-core 6.2.0-prerelease.32 → 6.2.0-prerelease.34

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.33","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.33","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.33","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.32",
+  "version": "6.2.0-prerelease.34",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.2.0-prerelease.11",
-    "@patternfly/react-styles": "^6.2.0-prerelease.10",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.10",
+    "@patternfly/react-icons": "^6.2.0-prerelease.12",
+    "@patternfly/react-styles": "^6.2.0-prerelease.11",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.11",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.19",
+    "@patternfly/patternfly": "6.2.0-prerelease.25",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "dd8e4d8000ae6c32f35246929b9054bd5b4bee5b"
+  "gitHead": "06f0914bed087998e510eddc309c8ab44e2ab194"
 }

package/src/components/Accordion/examples/Accordion.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
+import { useState } from 'react';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 ## Examples

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -10,8 +11,8 @@ import {
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 export const AccordionBordered: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('bordered-toggle4');
-  const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
+  const [expanded, setExpanded] = useState('bordered-toggle4');
+  const [isDisplayLarge, setIsDisplayLarge] = useState(false);
 
   const displaySize = isDisplayLarge ? 'lg' : 'default';
   const onToggle = (id: string) => {

package/src/components/Accordion/examples/AccordionDefinitionList.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionDefinitionList: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('def-list-toggle2');
+  const [expanded, setExpanded] = useState('def-list-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {

package/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState(['ex2-toggle4']);
+  const [expanded, setExpanded] = useState(['ex2-toggle4']);
 
   const toggle = (id) => {
     const index = expanded.indexOf(id);

package/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('ex-toggle2');
+  const [expanded, setExpanded] = useState('ex-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {

package/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionToggleIconAtStart: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('start-toggle-toggle2');
+  const [expanded, setExpanded] = useState('start-toggle-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {

package/src/components/ActionList/examples/ActionList.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-action-list
 propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   ActionList,
   ActionListGroup,
@@ -14,7 +14,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/components/Alert/Alert.tsx

@@ -1,9 +1,11 @@
-import { Fragment, useEffect, useRef, useState, type JSX } from 'react';
+import { Fragment, useEffect, useRef, useState, useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
+import alertGroupStyles from '@patternfly/react-styles/css/components/Alert/alert-group';
 import { AlertIcon } from './AlertIcon';
 import { capitalize, useOUIAProps, OUIAProps } from '../../helpers';
 import { AlertContext } from './AlertContext';
+import { AlertGroupContext } from './AlertGroupContext';
 import maxLines from '@patternfly/react-tokens/dist/esm/c_alert__title_max_lines';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import { AlertToggleExpandButton } from './AlertToggleExpandButton';
@@ -22,7 +24,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   /** Close button; use the alert action close button component.  */
   actionClose?: React.ReactNode;
   /** Action links; use a single alert action link component or multiple wrapped in an array
-   * or React.Fragment.
+   * or React fragment.
    */
   actionLinks?: React.ReactNode;
   /** Content rendered inside the alert. */
@@ -54,7 +56,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   /** Title of the alert.  */
   title: React.ReactNode;
   /** Sets the element to use as the alert title. Default is h4. */
-  component?: keyof JSX.IntrinsicElements;
+  component?: keyof React.JSX.IntrinsicElements;
   /** Adds accessible text to the alert toggle. */
   toggleAriaLabel?: string;
   /** Position of the tooltip which is displayed if text is truncated. */
@@ -140,7 +142,30 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const [timedOutAnimation, setTimedOutAnimation] = useState(true);
   const [isMouseOver, setIsMouseOver] = useState<boolean | undefined>();
   const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
-  const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
+  const shouldDismiss = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
+  const [isDismissed, setIsDismissed] = useState(false);
+  const { hasAnimations, updateTransitionEnd } = useContext(AlertGroupContext);
+  const { offstageRight } = alertGroupStyles.modifiers;
+
+  const getParentAlertGroupItem = () => divRef.current?.closest(`.${alertGroupStyles.alertGroupItem}`);
+  useEffect(() => {
+    const shouldSetDismissed = shouldDismiss && !isDismissed;
+    if (!shouldSetDismissed) {
+      return;
+    }
+
+    const alertGroupItem = getParentAlertGroupItem();
+    alertGroupItem?.classList.add(offstageRight);
+
+    if (hasAnimations) {
+      updateTransitionEnd(() => {
+        setIsDismissed(true);
+      });
+    } else {
+      setIsDismissed(true);
+    }
+  }, [shouldDismiss, isDismissed]);
+
   useEffect(() => {
     const calculatedTimeout = timeout === true ? 8000 : Number(timeout);
     if (calculatedTimeout > 0) {
@@ -171,8 +196,12 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
     }
   }, [containsFocus, isMouseOver, timeoutAnimation]);
   useEffect(() => {
-    dismissed && onTimeout();
-  }, [dismissed, onTimeout]);
+    isDismissed && onTimeout();
+  }, [isDismissed, onTimeout]);
+  useEffect(() => {
+    const alertGroupItem = getParentAlertGroupItem();
+    setTimeout(() => alertGroupItem?.classList.remove(alertGroupStyles.modifiers.offstageTop), 0);
+  }, []);
 
   const [isExpanded, setIsExpanded] = useState(false);
   const onToggleExpand = () => {
@@ -190,7 +219,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
     onMouseLeave(ev);
   };
 
-  if (dismissed) {
+  if (shouldDismiss && isDismissed) {
     return null;
   }
   const Title = (

package/src/components/Alert/AlertActionCloseButton.tsx

@@ -1,6 +1,9 @@
+import { useRef, useContext } from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { AlertContext } from './AlertContext';
+import { AlertGroupContext } from './AlertGroupContext';
+import alertGroupStyles from '@patternfly/react-styles/css/components/Alert/alert-group';
 
 /** Renders a close button for a dismissable alert when this sub-component is passed into
  * the alert's actionClose property.
@@ -23,18 +26,35 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
   'aria-label': ariaLabel = '',
   variantLabel,
   ...props
-}: AlertActionCloseButtonProps) => (
-  <AlertContext.Consumer>
-    {({ title, variantLabel: alertVariantLabel }) => (
-      <Button
-        variant={ButtonVariant.plain}
-        onClick={onClose}
-        aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
-        className={className}
-        icon={<TimesIcon />}
-        {...props}
-      />
-    )}
-  </AlertContext.Consumer>
-);
+}: AlertActionCloseButtonProps) => {
+  const closeButtonRef = useRef(null);
+  const { hasAnimations, updateTransitionEnd } = useContext(AlertGroupContext);
+  const { offstageRight } = alertGroupStyles.modifiers;
+
+  const getParentAlertGroupItem = () => closeButtonRef.current?.closest(`.${alertGroupStyles.alertGroupItem}`);
+  const handleOnClick = () => {
+    if (hasAnimations) {
+      getParentAlertGroupItem()?.classList.add(offstageRight);
+      updateTransitionEnd(onClose);
+    } else {
+      onClose();
+    }
+  };
+
+  return (
+    <AlertContext.Consumer>
+      {({ title, variantLabel: alertVariantLabel }) => (
+        <Button
+          ref={closeButtonRef}
+          variant={ButtonVariant.plain}
+          onClick={handleOnClick}
+          aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
+          className={className}
+          icon={<TimesIcon />}
+          {...props}
+        />
+      )}
+    </AlertContext.Consumer>
+  );
+};
 AlertActionCloseButton.displayName = 'AlertActionCloseButton';

package/src/components/Alert/AlertGroup.tsx

@@ -8,6 +8,10 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   className?: string;
   /** Alerts to be rendered in the AlertGroup */
   children?: React.ReactNode;
+  /** @beta Flag to indicate whether Alerts are animated upon rendering and being dismissed. This is intended
+   * to remain false for testing purposes only.
+   */
+  hasAnimations?: boolean;
   /** Toast notifications are positioned at the top right corner of the viewport */
   isToast?: boolean;
   /** Turns the container into a live region so that changes to content within the AlertGroup, such as appending an Alert, are reliably announced to assistive technology. */
@@ -58,6 +62,7 @@ class AlertGroup extends Component<AlertGroupProps, AlertGroupState> {
     const {
       className,
       children,
+      hasAnimations = false,
       isToast,
       isLiveRegion,
       onOverflowClick,
@@ -75,6 +80,7 @@ class AlertGroup extends Component<AlertGroupProps, AlertGroupState> {
         isLiveRegion={isLiveRegion}
         overflowMessage={overflowMessage}
         aria-label={ariaLabel}
+        hasAnimations={hasAnimations}
         {...props}
       >
         {children}

package/src/components/Alert/AlertGroupContext.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+interface AlertGroupContext {
+  hasAnimations?: boolean;
+  updateTransitionEnd?: (onTransitionEnd: () => void) => void;
+}
+
+export const AlertGroupContext = createContext<AlertGroupContext>({
+  hasAnimations: false,
+  updateTransitionEnd: () => {}
+});

package/src/components/Alert/AlertGroupInline.tsx

@@ -1,35 +1,74 @@
-import { Children } from 'react';
+import { Children, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert-group';
 import { AlertGroupProps } from './AlertGroup';
 import { AlertProps } from '../Alert';
+import { AlertGroupContext } from './AlertGroupContext';
 
 export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   className,
   children,
+  hasAnimations,
   isToast,
   isLiveRegion,
   onOverflowClick,
   overflowMessage,
-  ...rest
-}: AlertGroupProps) => (
-  <ul
-    role="list"
-    aria-live={isLiveRegion ? 'polite' : null}
-    aria-atomic={isLiveRegion ? false : null}
-    className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}
-    {...rest}
-  >
-    {Children.toArray(children).map((alert, index) => (
-      <li key={(alert as React.ReactElement<AlertProps>).props?.id || index}>{alert}</li>
-    ))}
-    {overflowMessage && (
-      <li>
-        <button onClick={onOverflowClick} className={css(styles.alertGroupOverflowButton)}>
-          {overflowMessage}
-        </button>
-      </li>
-    )}
-  </ul>
-);
+  ...props
+}: AlertGroupProps) => {
+  const [handleTransitionEnd, setHandleTransitionEnd] = useState(() => () => {});
+  const updateTransitionEnd = (onTransitionEnd: () => void) => {
+    setHandleTransitionEnd(() => onTransitionEnd);
+  };
+
+  const onTransitionEnd = (event: React.TransitionEvent<HTMLLIElement>) => {
+    if (!hasAnimations) {
+      return;
+    }
+
+    const prefersReducedMotion = !window.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
+    if (
+      // If a user has no motion preference, we want to target the grid template rows transition
+      // so that the onClose is called after the "slide up" animation of other alerts finishes.
+      // If they have motion preference, we don't need to check for a specific transition since only opacity should fire.
+      (prefersReducedMotion || (!prefersReducedMotion && event.propertyName === 'grid-template-rows')) &&
+      (event.target as HTMLElement).className.includes(styles.modifiers.offstageRight)
+    ) {
+      handleTransitionEnd();
+    }
+  };
+
+  return (
+    <AlertGroupContext.Provider value={{ hasAnimations, updateTransitionEnd }}>
+      <ul
+        role="list"
+        aria-live={isLiveRegion ? 'polite' : null}
+        aria-atomic={isLiveRegion ? false : null}
+        className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}
+        {...props}
+      >
+        {Children.toArray(children).map((alert, index) => (
+          <li
+            onTransitionEnd={onTransitionEnd}
+            className={css(styles.alertGroupItem, hasAnimations && styles.modifiers.offstageTop)}
+            key={
+              (alert as React.ReactElement<AlertProps>).props?.id ||
+              `alertGroupItem-${(alert as React.ReactElement<AlertProps>).key}` ||
+              index
+            }
+          >
+            {alert}
+          </li>
+        ))}
+        {overflowMessage && (
+          <li>
+            <button onClick={onOverflowClick} className={css(styles.alertGroupOverflowButton)}>
+              {overflowMessage}
+            </button>
+          </li>
+        )}
+      </ul>
+    </AlertGroupContext.Provider>
+  );
+};
+
 AlertGroupInline.displayName = 'AlertGroupInline';

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

@@ -1,7 +1,7 @@
 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');
@@ -59,8 +59,8 @@ test('Does not call the callback provided via onClose when it is not clicked', (
 });
 
 test('Calls the callback provided via onClose when clicked', async () => {
-  const onCloseMock = jest.fn();
   const user = userEvent.setup();
+  const onCloseMock = jest.fn();
 
   render(
     <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
@@ -73,6 +73,24 @@ 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 user = userEvent.setup();
+  const onClose = jest.fn();
+  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>
+  );
+
+  expect(updateMock).not.toHaveBeenCalled();
+  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' }}>

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

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Alert } from '../../Alert';
@@ -66,8 +66,48 @@ 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 () => {
-  const onClose = jest.fn();
+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: () => {}, // deprecated
+    removeListener: () => {}, // deprecated
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true
+  });
+  const mockCallback = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <AlertGroup hasAnimations 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,
+    onchange: null,
+    addListener: () => {}, // deprecated
+    removeListener: () => {}, // deprecated
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true
+  });
+  const mockCallback = jest.fn();
   const user = userEvent.setup();
 
   render(
@@ -75,11 +115,14 @@ test('alertgroup closes when alerts are closed', async () => {
       <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(onClose).toHaveBeenCalled();
+  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(mockCallback).toHaveBeenCalledTimes(1);
 });