You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
)}
</>
);
};
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:
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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:
And jest test file:
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:
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!
Beta Was this translation helpful? Give feedback.
All reactions