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);
+ });
+});