test(AnimateBlock): test for AnimateBlock added (#167)

* test(AnimateBlock): test for AnimateBlock added

Author: niktverd

src/components/AnimateBlock/AnimateBlock.tsx

@@ -14,18 +14,19 @@ export interface AnimateBlockProps extends AnimateContextProps {
     className?: string;
     style?: CSSProperties;
     onScroll?: () => void;
+    qa?: string;
 }
 
 const AnimateBlock = (props: WithChildren<AnimateBlockProps>) => {
     const {animated} = useContext(AnimateContext);
-    const {children, className, offset = 100, onScroll, style, animate = animated} = props;
+    const {children, className, offset = 100, onScroll, style, animate = animated, qa} = props;
     const [playAnimation, setPlayAnimation] = useState<boolean>(false);
 
     const divClassName = animate
         ? b(null, `${playAnimation && 'animate'} ${className}`)
         : className;
     return (
-        <div className={divClassName} style={style}>
+        <div className={divClassName} style={style} data-qa={qa}>
             <Waypoint
                 // trigger animation if element is above screen
                 topOffset={'-100000%'}

src/components/AnimateBlock/__tests__/AnimateBlock.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import AnimateBlock from '../AnimateBlock';
+
+const qaId = 'animate-block';
+
+describe('AnimateBlock', () => {
+    test('render AnimateBlock by default', async () => {
+        render(<AnimateBlock qa={qaId} />);
+
+        const component = screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+    });
+
+    test('add className', () => {
+        const className = 'my-class';
+
+        render(<AnimateBlock qa={qaId} className={className} />);
+        const component = screen.getByTestId(qaId);
+
+        expect(component).toHaveClass(className);
+    });
+
+    test('use passed style', () => {
+        const style = {color: 'red'};
+
+        render(<AnimateBlock style={style} qa={qaId} />);
+        const component = screen.getByTestId(qaId);
+
+        expect(component).toHaveStyle(style);
+    });
+
+    test('call onScroll', async () => {
+        const onScroll = jest.fn();
+        const user = userEvent.setup();
+
+        render(
+            <div style={{paddingTop: 100000}}>
+                <AnimateBlock onScroll={onScroll} qa={qaId} />
+            </div>,
+        );
+        const component = screen.getByTestId(qaId);
+
+        await user.hover(component);
+        expect(onScroll).toHaveBeenCalledTimes(1);
+    });
+});