test(BlockBase): test for BlockBase added (#168)

* test(BlockBase): test for BlockBase added

Author: niktverd

src/components/Anchor/Anchor.tsx

@@ -8,13 +8,15 @@ import './Anchor.scss';
 
 const b = block('Anchor');
 
+export const qaIdByDefault = 'qa-anchor';
+
 export interface AnchorProps extends ClassNameProps {
     id: string;
     dataQa?: string;
 }
 
 const Anchor = ({id, className, dataQa}: AnchorProps) => (
-    <div id={id} className={b(null, className)} data-qa={dataQa}></div>
+    <div id={id} className={b(null, className)} data-qa={dataQa || qaIdByDefault}></div>
 );
 
 export default Anchor;

src/components/BlockBase/BlockBase.tsx

@@ -10,13 +10,14 @@ import './BlockBase.scss';
 const b = block('block-base');
 
 const BlockBase = (props: WithChildren<BlockBaseProps & ClassNameProps>) => {
-    const {anchor, visible, children, className, resetPaddings} = props;
+    const {anchor, visible, children, className, resetPaddings, qa} = props;
 
     return (
         <Col
             className={b({['reset-paddings']: resetPaddings}, className)}
             visible={visible}
             reset={true}
+            dataQa={qa}
         >
             {anchor && <Anchor id={anchor.url} className={b('anchor')} />}
             {children}

src/components/BlockBase/__tests__/BlockBase.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+
+import {qaIdByDefault} from '../../../components/Anchor/Anchor';
+import {GridColumnSize} from '../../../grid';
+import BlockBase from '../BlockBase';
+
+const qaId = 'block-base-component';
+
+describe('BlockBase', () => {
+    test('render component by default', async () => {
+        render(<BlockBase qa={qaId} />);
+        const component = screen.getByTestId(qaId);
+
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(component).not.toBeDisabled();
+    });
+
+    test('add className', () => {
+        const className = 'my-class';
+
+        render(<BlockBase qa={qaId} className={className} />);
+        const component = screen.getByTestId(qaId);
+
+        expect(component).toHaveClass(className);
+    });
+
+    test('should reset paddings', () => {
+        render(<BlockBase qa={qaId} resetPaddings={true} />);
+        const component = screen.getByTestId(qaId);
+
+        expect(component).toHaveClass('pc-block-base_reset-paddings');
+    });
+
+    test.each(new Array<GridColumnSize>(...Object.values(GridColumnSize)))(
+        'render with given "%s" size',
+        (size) => {
+            render(<BlockBase qa={qaId} visible={size} />);
+            const component = screen.getByTestId(qaId);
+
+            expect(component).toHaveClass(`d-${size}-block`);
+        },
+    );
+
+    test('should have anchor', () => {
+        const anchor = {
+            text: 'anchor',
+            url: 'https://github.com/gravity-ui/',
+        };
+        render(<BlockBase anchor={anchor} />);
+        const component = screen.getByTestId(qaIdByDefault);
+
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('id', anchor.url);
+    });
+});

src/models/constructor-items/blocks.ts

@@ -75,6 +75,7 @@ export interface BlockBaseProps {
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;
+    qa?: string;
 }
 
 export interface LoadableProps {