test(ErrorWrapper): test form ErrorWrapper added

src/components/ErrorWrapper/ErrorWrapper.tsx

@@ -2,40 +2,44 @@ import React from 'react';
 
 import {Button} from '@gravity-ui/uikit';
 
-import {ClassNameProps, WithChildren} from '../../models';
-import {block} from '../../utils';
+import {ClassNameProps, QAProps, WithChildren} from '../../models';
+import {block, getQaAttrubutes} from '../../utils';
 
 import './ErrorWrapper.scss';
 
 const b = block('ErrorWrapper');
 
-export interface ErrorWrapperProps extends ClassNameProps {
+export interface ErrorWrapperProps extends ClassNameProps, QAProps {
     text: string;
-    handler: () => void;
     isError: boolean;
     buttonText: string;
     children: React.ReactNode;
+    handler?: () => void;
 }
 
 const ErrorWrapper = ({
     text,
     buttonText,
     className,
-    handler,
     isError,
     children,
-}: WithChildren<ErrorWrapperProps>) =>
-    isError ? (
-        <div className={b(null, className)}>
+    qa,
+    handler,
+}: WithChildren<ErrorWrapperProps>) => {
+    const qaAttributes = getQaAttrubutes(qa);
+
+    return isError ? (
+        <div className={b(null, className)} data-qa={qaAttributes.default}>
             <div className={b('text')}>{text}</div>
             {handler && (
-                <Button size="s" onClick={handler}>
+                <Button size="s" onClick={handler} qa={qaAttributes.button}>
                     {buttonText}
                 </Button>
             )}
         </div>
     ) : (
         <React.Fragment>{children}</React.Fragment>
     );
+};
 
 export default ErrorWrapper;

src/components/ErrorWrapper/__tests__/ErrorWrapper.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+
+import {testCustomClassName, testOnClick} from '../../../../test-utils/shared/common';
+import {getQaAttrubutes} from '../../../utils';
+import ErrorWrapper, {ErrorWrapperProps} from '../ErrorWrapper';
+
+const errorWrapperProps = {
+    text: 'Error Wrapper Text',
+    buttonText: 'Button Text',
+    isError: true,
+    children: <div>Children</div>,
+    qa: 'error-wrapper-component',
+};
+
+const qaAttributes = getQaAttrubutes(errorWrapperProps.qa);
+
+const ErrorWrapperComponent = ({children, ...props}: ErrorWrapperProps) => {
+    return <ErrorWrapper {...props}>{children}</ErrorWrapper>;
+};
+
+describe('ErrorWrapper', () => {
+    test('render ErrorWrapper by default', async () => {
+        render(<ErrorWrapperComponent {...errorWrapperProps} />);
+        const errorWrapper = screen.getByTestId(qaAttributes.default);
+        const children = screen.queryByText('Children');
+
+        expect(errorWrapper).toBeInTheDocument();
+        expect(errorWrapper).toBeVisible();
+        expect(errorWrapper).not.toBeDisabled();
+
+        expect(children).not.toBeInTheDocument();
+    });
+
+    test('render ErrorWrapper with isError = false', async () => {
+        render(<ErrorWrapperComponent {...errorWrapperProps} isError={false} />);
+        const errorWrapper = screen.queryByTestId(qaAttributes.default);
+        const children = screen.queryByText('Children');
+
+        expect(children).toBeInTheDocument();
+        expect(children).toBeVisible();
+
+        expect(errorWrapper).not.toBeInTheDocument();
+    });
+
+    test('render ErrorWrapper with error text', async () => {
+        render(<ErrorWrapperComponent {...errorWrapperProps} />);
+        const errorWrapper = screen.queryByText(errorWrapperProps.text);
+
+        expect(errorWrapper).toBeInTheDocument();
+        expect(errorWrapper).toBeVisible();
+    });
+
+    test('render ErrorWrapper with error text', async () => {
+        render(<ErrorWrapperComponent {...errorWrapperProps} />);
+        const errorWrapper = screen.queryByText(errorWrapperProps.text);
+
+        expect(errorWrapper).toBeInTheDocument();
+        expect(errorWrapper).toBeVisible();
+    });
+
+    test('render ErrorWrapper with error text', async () => {
+        render(<ErrorWrapperComponent {...errorWrapperProps} />);
+        const errorWrapper = screen.queryByText(errorWrapperProps.text);
+
+        expect(errorWrapper).toBeInTheDocument();
+        expect(errorWrapper).toBeVisible();
+    });
+
+    test('render ErrorWrapper with button', async () => {
+        const handleOnClick = jest.fn();
+        render(<ErrorWrapperComponent {...errorWrapperProps} handler={handleOnClick} />);
+        const errorWrapperButton = screen.queryByTestId(qaAttributes.button);
+
+        expect(errorWrapperButton).toBeInTheDocument();
+        expect(errorWrapperButton).toBeVisible();
+        expect(errorWrapperButton).toHaveTextContent(errorWrapperProps.buttonText);
+    });
+
+    test('render ErrorWrapper without button when handler is not provided', async () => {
+        render(<ErrorWrapperComponent {...errorWrapperProps} />);
+        const errorWrapperButton = screen.queryByTestId(qaAttributes.button);
+
+        expect(errorWrapperButton).not.toBeInTheDocument();
+    });
+
+    test('call onClick', async () => {
+        testOnClick<ErrorWrapperProps>({
+            component: ErrorWrapperComponent,
+            props: {...errorWrapperProps},
+            options: {
+                handlerName: 'handler',
+                qaId: qaAttributes.button,
+            },
+        });
+    });
+
+    test('add className', () => {
+        testCustomClassName<ErrorWrapperProps>({
+            component: ErrorWrapperComponent,
+            props: errorWrapperProps,
+        });
+    });
+});

test-utils/shared/common.tsx

@@ -8,7 +8,12 @@ import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
 type CommonTestArgs<T> = {
     component: ElementType;
     props: T & QAProps;
-    options?: {qaId?: string; customClassNameProp?: string; role?: string};
+    options?: {
+        qaId?: string;
+        customClassNameProp?: string;
+        role?: string;
+        handlerName?: string;
+    };
 };
 
 const validateInputProps = <T,>(props: CommonTestArgs<T>['props']) => {
@@ -80,7 +85,10 @@ export const testOnClick = async <T,>({
 
     const user = userEvent.setup();
     const handleOnClick = jest.fn();
-    render(<Component {...props} onClick={handleOnClick} />);
+    const handlerObject = {
+        [options?.handlerName || 'onClick']: handleOnClick,
+    };
+    render(<Component {...props} {...handlerObject} />);
 
     const component = getComponent({props, options});