Coachmark Component: How to test "onAnimationOpenEnd" prop ?

[rockcs1992]

Hi,

I'm implementing a very simple Coachmark component and writing unit tests for it to meet our test coverage threshold. Currently I have a hard time figuring out how to test "onAnimationOpenEnd" prop.

My test component:

import * as React from "react";
import {
  Coachmark,
  DirectionalHint,
  TeachingBubbleContent,
} from "@fluentui/react";
import { DefaultButton, IButtonProps } from "@fluentui/react/lib/Button";

const buttonProps: IButtonProps = {
    text: "Try it",
  };

  const buttonProps2: IButtonProps = {
    text: "Try it again",
  };

export const CoachmarkComponent: React.FunctionComponent = () => {
    const targetButton = React.useRef<HTMLDivElement>(null);
    const [isCoachmarkVisible] = React.useState(true);
    const [coachmarkPosition] = React.useState<DirectionalHint>(DirectionalHint.bottomAutoEdge);

    const positioningContainerProps = React.useMemo(
      () => ({
        directionalHint: coachmarkPosition,
        doNotLayer: false,
      }),
      [coachmarkPosition],
    );

    const onCoachmarkExpanded = () => {
        console.log("expanded!");
    };

    return (
      <>
        <div ref={targetButton}>
            <DefaultButton text="testButton" />
        </div>
        {isCoachmarkVisible && (
          <Coachmark
            target={targetButton.current}
            positioningContainerProps={positioningContainerProps}
            ariaAlertText="A coachmark has appeared"
            ariaDescribedBy="coachmark-desc1"
            ariaLabelledBy="coachmark-label1"
            ariaDescribedByText="Press enter or alt + C to open the coachmark notification"
            ariaLabelledByText="Coachmark notification"
            onAnimationOpenEnd={onCoachmarkExpanded}
          >
            <TeachingBubbleContent
              headline="Example title"
              hasCloseButton
              closeButtonAriaLabel="Close"
              primaryButtonProps={buttonProps}
              secondaryButtonProps={buttonProps2}
            //   onDismiss={hideCoachmark}
              ariaDescribedBy="example-description1"
              ariaLabelledBy="example-label1"
            >
              Welcome to the land of coachmarks!
            </TeachingBubbleContent>
          </Coachmark>
        )}
      </>
    );
  };

And jest test file:

import * as React from "react";
import { CoachmarkComponent } from "../internal/Coachmark";
import { act, fireEvent, render, RenderResult } from "@testing-library/react";

const renderComponent = async () => {
    let result: RenderResult;
    await act(async () => {
        result = render(<CoachmarkComponent />);
    });
    return result;
};

describe("coachmark", () => {
    it ("should render correctly", async () => {
        const result: RenderResult = await renderComponent();
        await new Promise((res) => {
            setTimeout(() => {
                res(true);
            }, 2000);
        });
        const container = await result.findByRole("dialog");
        fireEvent.mouseOver(container);
        expect(result).toMatchSnapshot();
    });
});

Icov report shows that the callback I provided to onAnimationOpenEnd prop is not called and not covered, but I cannot figure out how to trigger that in my jest test. From the generated screenshot I saw the following snippet:

<div
            class="ms-PositioningContainer-layerHost [dynamic classname]"
            style="opacity: 0;"
            tabindex="-1"
>

And I think that opacity 0 may be the reason why the coachmark never gets expanded, and I'm not sure how to adjust it as well.

Any ideas would be appreciated!