test(BalancedMasonry): test for BalancedMasonry added (#172)

* test(BalancedMasonry): test for BalancedMasonry added --------- Co-authored-by: Nikolay Tverdokhlebov <[email protected]>
gravity-ui · Sep 19, 2023 · ea984b5 · ea984b5
1 parent d087a60
commit ea984b5
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 6 deletions.
diff --git a/src/components/BalancedMasonry/BalancedMasonry.tsx b/src/components/BalancedMasonry/BalancedMasonry.tsx
@@ -3,14 +3,14 @@ import React, {ReactNode, useCallback, useContext, useEffect, useRef, useState}
 import _ from 'lodash';
 
 import {SSRContext} from '../../context/ssrContext';
-import {WithChildren} from '../../models';
-import {block} from '../../utils';
+import {QAProps, WithChildren} from '../../models';
+import {block, getQaAttrubutes} from '../../utils';
 
 import './BalancedMasonry.scss';
 
 const b = block('BalancedMasonry');
 
-export interface BalancedMasonryProps {
+export interface BalancedMasonryProps extends QAProps {
     className: string;
     columnClassName: string;
     children: ReactNode[];
@@ -20,7 +20,8 @@ export interface BalancedMasonryProps {
 }
 
 const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
-    const {className, columnClassName, children = [], breakpointCols} = props;
+    const {className, columnClassName, children = [], breakpointCols, qa} = props;
+    const qaAttributes = getQaAttrubutes(qa, 'column');
     const {isServer} = useContext(SSRContext);
     const getCurrentColumnsCount = useCallback(() => {
         const breakpoints = Object.entries(breakpointCols).sort(
@@ -121,7 +122,7 @@ const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
     }, [balanceColumns, children]);
 
     return (
-        <div className={b(null, className)}>
+        <div className={b(null, className)} data-qa={qa}>
             <div className={b('hidden-container')} style={{width: `${100 / columnCount}%`}}>
                 <div ref={containerRef} className={b('hidden-list')}>
                     {children}
@@ -133,6 +134,7 @@ const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
                     key={index}
                     className={columnClassName}
                     style={{width: `${100 / columnCount}%`}}
+                    data-qa={qaAttributes.column}
                 >
                     {columnElements}
                 </div>

diff --git a/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx b/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+
+import {render, screen, waitFor} from '@testing-library/react';
+import {omit} from 'lodash';
+
+import {testCustomClassName} from '../../../../test-utils/shared/common';
+import {CardBase} from '../../../components';
+import {getQaAttrubutes} from '../../../utils';
+import BalancedMasonry, {BalancedMasonryProps} from '../BalancedMasonry';
+
+const balancedMasonry = {
+    className: 'my-class',
+    columnClassName: 'my-column-class',
+    breakpointCols: {
+        1440: 3,
+        1441: 2,
+    },
+    qa: 'balanced-mansory-component',
+    children: [
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+    ],
+};
+
+const {children: childrenToRender} = balancedMasonry;
+const balancedMasonryChildren = childrenToRender.map((child, index) => (
+    <CardBase key={index} className="balanced-masonry-stories__card-base">
+        <CardBase.Content>{child}</CardBase.Content>
+    </CardBase>
+));
+
+const qaAttributes = getQaAttrubutes(balancedMasonry.qa, 'column');
+
+describe('BalancedMasonry', () => {
+    test('render BalancedMasonry by default', async () => {
+        render(
+            <BalancedMasonry {...omit(balancedMasonry, 'children')}>
+                {balancedMasonryChildren}
+            </BalancedMasonry>,
+        );
+        const component = screen.getByTestId(balancedMasonry.qa);
+
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+
+    test('add className to container', () => {
+        testCustomClassName<BalancedMasonryProps>({
+            component: BalancedMasonry,
+            props: {...omit(balancedMasonry, 'children'), children: balancedMasonryChildren},
+        });
+    });
+
+    test('add className to column', async () => {
+        render(
+            <BalancedMasonry {...omit(balancedMasonry, 'children')}>
+                {balancedMasonryChildren}
+            </BalancedMasonry>,
+        );
+        await waitFor(() => {
+            expect(screen.getAllByTestId(qaAttributes.column)[0]).toBeInTheDocument();
+        });
+
+        const components = screen.queryAllByTestId(qaAttributes.column);
+        expect(components[0]).toHaveClass(balancedMasonry.columnClassName);
+    });
+
+    test('render width 1440px', async () => {
+        const width = 1440;
+        Object.defineProperty(document.body, 'clientWidth', {
+            writable: true,
+            configurable: true,
+            value: width,
+        });
+
+        render(
+            <BalancedMasonry {...omit(balancedMasonry, 'children')}>
+                {balancedMasonryChildren}
+            </BalancedMasonry>,
+        );
+        await waitFor(() => {
+            expect(screen.getAllByTestId(qaAttributes.column)[0]).toBeInTheDocument();
+        });
+
+        const components = screen.queryAllByTestId(qaAttributes.column);
+        expect(components.length).toEqual(balancedMasonry.breakpointCols[width]);
+    });
+
+    test('render width 1441px', async () => {
+        const width = 1441;
+        Object.defineProperty(document.body, 'clientWidth', {
+            writable: true,
+            configurable: true,
+            value: width,
+        });
+
+        render(
+            <BalancedMasonry {...omit(balancedMasonry, 'children')}>
+                {balancedMasonryChildren}
+            </BalancedMasonry>,
+        );
+        await waitFor(() => {
+            expect(screen.getAllByTestId(qaAttributes.column)[0]).toBeInTheDocument();
+        });
+
+        const components = screen.queryAllByTestId(qaAttributes.column);
+        expect(components.length).toEqual(balancedMasonry.breakpointCols[width]);
+    });
+});
diff --git a/test-utils/shared/common.tsx b/test-utils/shared/common.tsx
@@ -21,7 +21,7 @@ export const testCustomClassName = <T,>({
     }
 
     const className = 'custom-class-name';
-    render(<Component className={className} {...props} />);
+    render(<Component {...props} className={className} />);
     const anchor = screen.getByTestId(options?.qaId || props.qa);
     expect(anchor).toHaveClass(className);
 };