diff --git a/src/components/ErrorWrapper/ErrorWrapper.tsx b/src/components/ErrorWrapper/ErrorWrapper.tsx index b2585c819..44a60949a 100644 --- a/src/components/ErrorWrapper/ErrorWrapper.tsx +++ b/src/components/ErrorWrapper/ErrorWrapper.tsx @@ -2,34 +2,37 @@ 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) => - isError ? ( -
+ qa, + handler, +}: WithChildren) => { + const qaAttributes = getQaAttrubutes(qa); + + return isError ? ( +
{text}
{handler && ( - )} @@ -37,5 +40,6 @@ const ErrorWrapper = ({ ) : ( {children} ); +}; export default ErrorWrapper; diff --git a/src/components/ErrorWrapper/__tests__/ErrorWrapper.test.tsx b/src/components/ErrorWrapper/__tests__/ErrorWrapper.test.tsx new file mode 100644 index 000000000..9acd045c8 --- /dev/null +++ b/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:
Children
, + qa: 'error-wrapper-component', +}; + +const qaAttributes = getQaAttrubutes(errorWrapperProps.qa); + +const ErrorWrapperComponent = ({children, ...props}: ErrorWrapperProps) => { + return {children}; +}; + +describe('ErrorWrapper', () => { + test('render ErrorWrapper by default', async () => { + render(); + 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(); + 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(); + const errorWrapper = screen.queryByText(errorWrapperProps.text); + + expect(errorWrapper).toBeInTheDocument(); + expect(errorWrapper).toBeVisible(); + }); + + test('render ErrorWrapper with error text', async () => { + render(); + const errorWrapper = screen.queryByText(errorWrapperProps.text); + + expect(errorWrapper).toBeInTheDocument(); + expect(errorWrapper).toBeVisible(); + }); + + test('render ErrorWrapper with error text', async () => { + render(); + const errorWrapper = screen.queryByText(errorWrapperProps.text); + + expect(errorWrapper).toBeInTheDocument(); + expect(errorWrapper).toBeVisible(); + }); + + test('render ErrorWrapper with button', async () => { + const handleOnClick = jest.fn(); + render(); + 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(); + const errorWrapperButton = screen.queryByTestId(qaAttributes.button); + + expect(errorWrapperButton).not.toBeInTheDocument(); + }); + + test('call onClick', async () => { + testOnClick({ + component: ErrorWrapperComponent, + props: {...errorWrapperProps}, + options: { + handlerName: 'handler', + qaId: qaAttributes.button, + }, + }); + }); + + test('add className', () => { + testCustomClassName({ + component: ErrorWrapperComponent, + props: errorWrapperProps, + }); + }); +}); diff --git a/test-utils/shared/common.tsx b/test-utils/shared/common.tsx index 45b07ae07..c211ab05a 100644 --- a/test-utils/shared/common.tsx +++ b/test-utils/shared/common.tsx @@ -8,7 +8,12 @@ import {ERROR_INPUT_DATA_MESSAGE} from '../constants'; type CommonTestArgs = { component: ElementType; props: T & QAProps; - options?: {qaId?: string; customClassNameProp?: string; role?: string}; + options?: { + qaId?: string; + customClassNameProp?: string; + role?: string; + handlerName?: string; + }; }; const validateInputProps = (props: CommonTestArgs['props']) => { @@ -80,7 +85,10 @@ export const testOnClick = async ({ const user = userEvent.setup(); const handleOnClick = jest.fn(); - render(); + const handlerObject = { + [options?.handlerName || 'onClick']: handleOnClick, + }; + render(); const component = getComponent({props, options});