feat(UserGuide): tests

packages/react-components/src/components/UserGuide/components/UserGuideBubbleStep/UserGuideBubbleStep.spec.tsx

@@ -0,0 +1,45 @@
+import { render, userEvent, vi } from 'test-utils';
+
+import { IUserGuideBubbleStepProps } from './types';
+import { UserGuideBubbleStep } from './UserGuideBubbleStep';
+
+const DEFAULT_PROPS: IUserGuideBubbleStepProps = {
+  headerMessage: 'Header',
+  message: 'Text',
+  cta: <button>Primary</button>,
+  disableTypingAnimations: true,
+};
+
+const renderComponent = (props: IUserGuideBubbleStepProps) =>
+  render(<UserGuideBubbleStep {...props} />);
+
+describe('<UserGuideBubbleStep> component', () => {
+  it('should render all default elements', () => {
+    const { getByText, getByRole } = renderComponent(DEFAULT_PROPS);
+
+    expect(getByText('Header')).toBeInTheDocument();
+    expect(getByText('Text')).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Primary' })).toBeInTheDocument();
+  });
+
+  it('should render icon if provided', () => {
+    const { getByTestId } = renderComponent({
+      ...DEFAULT_PROPS,
+      headerIcon: <div data-testid="icon" />,
+    });
+
+    expect(getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('should call handleAnimationComplete when all bubbles are visible', () => {
+    const handleAnimationComplete = vi.fn();
+    const { getByRole } = renderComponent({
+      ...DEFAULT_PROPS,
+      handleAnimationComplete,
+    });
+
+    userEvent.click(getByRole('button', { name: 'Primary' }));
+
+    expect(handleAnimationComplete).toHaveBeenCalled();
+  });
+});

packages/react-components/src/components/UserGuide/components/UserGuideBubbleStep/UserGuideBubbleStep.tsx

@@ -18,6 +18,7 @@ export const UserGuideBubbleStep: FC<IUserGuideBubbleStepProps> = ({
   cta,
   isCompleted,
   handleAnimationComplete,
+  disableTypingAnimations,
 }) => {
   const [visibleBubbles, setVisibleBubbles] = useState<string[]>(['header']);
   const isHeaderVisible = visibleBubbles.includes('header');
@@ -55,7 +56,7 @@ export const UserGuideBubbleStep: FC<IUserGuideBubbleStepProps> = ({
             <Text as="span">
               <AnimatedTextContainer
                 text={headerMessage}
-                typingAnimation
+                typingAnimation={!disableTypingAnimations}
                 onTypingEnd={() =>
                   setVisibleBubbles([...visibleBubbles, 'message'])
                 }
@@ -82,7 +83,7 @@ export const UserGuideBubbleStep: FC<IUserGuideBubbleStepProps> = ({
             <Text as="span">
               <AnimatedTextContainer
                 text={message}
-                typingAnimation
+                typingAnimation={!disableTypingAnimations}
                 typingDelay={0}
                 onTypingEnd={() =>
                   setVisibleBubbles([...visibleBubbles, 'cta'])

packages/react-components/src/components/UserGuide/components/UserGuideBubbleStep/types.ts

@@ -25,4 +25,8 @@ export interface IUserGuideBubbleStepProps {
    * The function to be called when the all bubbles animations complete
    */
   handleAnimationComplete?: () => void;
+  /**
+   * Set to true to disable typing animations
+   */
+  disableTypingAnimations?: boolean;
 }

packages/react-components/src/components/UserGuide/components/UserGuideStep/UserGuideStep.spec.tsx

@@ -0,0 +1,77 @@
+import { render, userEvent, vi } from 'test-utils';
+
+import { IUserGuideStepProps } from './types';
+import { UserGuideStep } from './UserGuideStep';
+
+const DEFAULT_PROPS: IUserGuideStepProps = {
+  header: 'Header',
+  text: 'Text',
+  currentStep: 1,
+  stepMax: 2,
+  handleClickPrimary: vi.fn(),
+};
+
+const renderComponent = (props: IUserGuideStepProps) =>
+  render(<UserGuideStep {...props} />);
+
+describe('<UserGuideStep> component', () => {
+  it('should render all default elements', () => {
+    const { getByText, getByRole } = renderComponent(DEFAULT_PROPS);
+
+    expect(getByText('Header')).toBeInTheDocument();
+    expect(getByText('Text')).toBeInTheDocument();
+    expect(getByText('Step 1 of 2')).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Next' })).toBeInTheDocument();
+  });
+
+  it('should render image if provided', () => {
+    const { getByAltText } = renderComponent({
+      ...DEFAULT_PROPS,
+      image: { src: 'image.jpg', alt: 'Image' },
+    });
+
+    expect(getByAltText('Image')).toBeInTheDocument();
+  });
+
+  it('should render video if provided and no image', () => {
+    const { getByTestId } = renderComponent({
+      ...DEFAULT_PROPS,
+      video: { src: 'video.mp4' },
+    });
+
+    expect(getByTestId('user-guide-step-video')).toBeInTheDocument();
+  });
+
+  it('should call handleClickPrimary when primary button is clicked', () => {
+    const handleClickPrimary = vi.fn();
+    const { getByRole } = renderComponent({
+      ...DEFAULT_PROPS,
+      handleClickPrimary,
+    });
+
+    userEvent.click(getByRole('button', { name: 'Next' }));
+
+    expect(handleClickPrimary).toHaveBeenCalled();
+  });
+
+  it('should call handleCloseAction when skip button is clicked', () => {
+    const handleCloseAction = vi.fn();
+    const { getByRole } = renderComponent({
+      ...DEFAULT_PROPS,
+      handleCloseAction,
+    });
+
+    userEvent.click(getByRole('button', { name: 'Skip all' }));
+
+    expect(handleCloseAction).toHaveBeenCalled();
+  });
+
+  it('should change primary button content when currentStep is equal to stepMax', () => {
+    const { getByRole } = renderComponent({
+      ...DEFAULT_PROPS,
+      currentStep: 2,
+    });
+
+    expect(getByRole('button', { name: 'Finish' })).toBeInTheDocument();
+  });
+});

packages/react-components/src/components/UserGuide/components/UserGuideStep/UserGuideStep.tsx

@@ -35,16 +35,14 @@ export const UserGuideStep: FC<IUserGuideStepProps> = ({
 
   return (
     <div className={styles[`${baseClass}`]}>
-      {header && (
-        <Text
-          size="lg"
-          bold
-          as="span"
-          className={styles[`${baseClass}__heading`]}
-        >
-          {header}
-        </Text>
-      )}
+      <Text
+        size="lg"
+        bold
+        as="span"
+        className={styles[`${baseClass}__heading`]}
+      >
+        {header}
+      </Text>
       {image && (
         <div className={styles[`${baseClass}__image-wrapper`]}>
           <img
@@ -56,6 +54,7 @@ export const UserGuideStep: FC<IUserGuideStepProps> = ({
       )}
       {video && !image && (
         <video
+          data-testid="user-guide-step-video"
           src={video.src}
           playsInline={video.playsInline}
           autoPlay={video.autoPlay}