diff --git a/src/components/Control/Control.tsx b/src/components/Control/Control.tsx index 7400e8cfa..750165f5c 100644 --- a/src/components/Control/Control.tsx +++ b/src/components/Control/Control.tsx @@ -11,6 +11,8 @@ import './Control.scss'; const b = block('control'); +export const defaultIconId = 'icon-test-id'; + export interface ControlProps { icon: SVGIconData; theme?: 'primary' | 'secondary' | 'link' | 'accent'; @@ -19,6 +21,7 @@ export interface ControlProps { disabled?: boolean; className?: string; onClick?: (event: React.MouseEvent) => void; + qa?: string; } const Control = (props: ControlProps) => { @@ -30,6 +33,7 @@ const Control = (props: ControlProps) => { disabled = false, onClick, className, + qa, } = props; return ( @@ -39,8 +43,9 @@ const Control = (props: ControlProps) => { className={b({size, theme, disabled}, className)} onClick={disabled ? undefined : onClick} disabled={disabled} + data-qa={qa} > - + ); }; diff --git a/src/components/Control/__tests__/Control.test.tsx b/src/components/Control/__tests__/Control.test.tsx new file mode 100644 index 000000000..c646d98b7 --- /dev/null +++ b/src/components/Control/__tests__/Control.test.tsx @@ -0,0 +1,83 @@ +import React from 'react'; + +import {render, screen} from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import {testCustomClassName} from '../../../../test-utils/shared/common'; +import Control, {ControlProps, defaultIconId} from '../Control'; + +const qaId = 'control-component'; + +const icon = ``; +const themes: ControlProps['theme'][] = ['primary', 'secondary', 'link', 'accent']; +const sizes: ControlProps['size'][] = ['xs', 's', 'm', 'l']; + +describe('Control', () => { + test('render Control by default', async () => { + render(); + const control = screen.getByTestId(qaId); + + expect(control).toBeInTheDocument(); + expect(control).toBeVisible(); + expect(control).not.toBeDisabled(); + + const controlIcon = screen.getByTestId(defaultIconId); + + expect(controlIcon).toHaveAttribute(`width`, '16'); + expect(controlIcon).toHaveAttribute(`height`, '16'); + }); + + test('add disabled', async () => { + render(); + const control = screen.getByTestId(qaId); + + expect(control).toBeInTheDocument(); + expect(control).toBeVisible(); + expect(control).toBeDisabled(); + }); + + test('add className', () => { + testCustomClassName({ + component: Control, + props: {icon, qa: qaId}, + }); + }); + + test.each(new Array(...themes))( + 'render with given "%s" theme', + (theme) => { + render(); + const control = screen.getByTestId(qaId); + + expect(control).toHaveClass(`pc-control_theme_${theme}`); + }, + ); + + test.each(new Array(...sizes))('render with given "%s" size', (size) => { + render(); + const control = screen.getByTestId(qaId); + + expect(control).toHaveClass(`pc-control_size_${size}`); + }); + + test('add iconSize', () => { + const iconSize = 24; + render(); + + const controlIcon = screen.getByTestId(defaultIconId); + + expect(controlIcon).toHaveAttribute(`width`, iconSize.toString()); + expect(controlIcon).toHaveAttribute(`height`, iconSize.toString()); + }); + + test('add onClick', async () => { + const handleOnClick = jest.fn(); + const user = userEvent.setup(); + render(); + + const control = screen.getByTestId(qaId); + + await user.click(control); + expect(handleOnClick).toHaveBeenCalledTimes(1); + }); +});