test(Button): test for Button added (#164)

Author: niktverd

src/components/Button/Button.tsx

@@ -3,7 +3,7 @@ import {Platform, Button as CommonButton, Icon, StoreBadge} from '@gravity-ui/ui
 
 import {block, setUrlTld} from '../../utils';
 import {ButtonProps as ButtonParams, DefaultEventNames} from '../../models';
-import {OldButtonSize, OldButtonTheme, toCommonSize, toCommonView} from './utils';
+import {OldButtonSize, OldButtonTheme, toCommonSize, toCommonView, ICON_QA} from './utils';
 import {LocaleContext} from '../../context/localeContext/localeContext';
 import {useMetrika} from '../../hooks/useMetrika';
 import {useAnalytics} from '../../hooks';
@@ -15,6 +15,7 @@ export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
     onClick?: () => void;
+    qa?: string;
 }
 
 const b = block('button-block');
@@ -70,7 +71,7 @@ const Button = (props: ButtonProps) => {
     let image = img && <img className={b('image')} src={buttonImg.url} alt={buttonImg.alt} />;
 
     if (theme === 'github') {
-        icon = <Icon className={b('icon')} data={Github} size={24} />;
+        icon = <Icon className={b('icon')} data={Github} size={24} qa={ICON_QA} />;
         image = undefined;
     }
 

src/components/Button/__tests__/Button.test.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {ButtonSize} from '@gravity-ui/uikit';
+
+import {ButtonImagePosition, ButtonTheme} from '../../../models';
+import {ICON_QA} from '../utils';
+
+import Button from '../Button';
+
+const qaId = 'button-component';
+
+const buttonProps = {
+    text: 'Button Text',
+    url: 'https://github.com/gravity-ui/',
+    target: '_blank',
+    img: {
+        url: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg',
+        position: 'left' as ButtonImagePosition,
+        alt: 'alt-text',
+    },
+};
+
+const buttonViews: ButtonTheme[] = [
+    'normal',
+    'action',
+    'outlined',
+    'outlined-info',
+    'outlined-danger',
+    'raised',
+    'flat',
+    'flat-info',
+    'flat-danger',
+    'flat-secondary',
+    'normal-contrast',
+    'outlined-contrast',
+    'flat-contrast',
+    'github',
+    'scale',
+    'monochrome',
+];
+
+describe('Button', () => {
+    test('render button by default', async () => {
+        render(<Button text={buttonProps.text} />);
+        const button = screen.getByRole('button');
+
+        expect(button).toBeInTheDocument();
+        expect(button).toBeVisible();
+        expect(button).not.toBeDisabled();
+    });
+
+    test('should render <a /> tag', async () => {
+        render(
+            <Button text={buttonProps.text} url={buttonProps.url} target={buttonProps.target} />,
+        );
+        const button = screen.getByRole('link');
+
+        expect(button).toBeVisible();
+        expect(button).toHaveAttribute('href', buttonProps.url);
+        expect(button).toHaveAttribute('target', buttonProps.target);
+    });
+
+    test('call onClick', async () => {
+        const user = userEvent.setup();
+        const handleOnClick = jest.fn();
+        render(<Button text={buttonProps.text} onClick={handleOnClick} />);
+
+        const button = screen.getByRole('button');
+
+        await user.click(button);
+        expect(handleOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    test.each(new Array<ButtonSize>('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
+        render(<Button text={buttonProps.text} size={size} qa={qaId} />);
+        const button = screen.getByTestId(qaId);
+
+        expect(button).toHaveClass(`pc-button-block_size_${size}`);
+    });
+
+    test.each(new Array<ButtonTheme>(...buttonViews))('render with given "%s" view', (theme) => {
+        render(<Button text={buttonProps.text} theme={theme} qa={qaId} />);
+        const button = screen.getByTestId(qaId);
+
+        expect(button).toHaveClass(`pc-button-block_theme_${theme}`);
+    });
+
+    test('add className', () => {
+        const className = 'my-class';
+
+        render(<Button text={buttonProps.text} className={className} qa={qaId} />);
+        const button = screen.getByTestId(qaId);
+
+        expect(button).toHaveClass(className);
+    });
+
+    test('should render icon', () => {
+        render(<Button text={buttonProps.text} img={buttonProps.img} />);
+
+        const button = screen.getByRole('button');
+        const iconComponent = screen.getByRole('img');
+
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+
+    test('should render github icon', () => {
+        render(<Button text={buttonProps.text} img={buttonProps.img} theme="github" />);
+
+        const button = screen.getByRole('button');
+        const iconComponent = screen.getByTestId(ICON_QA);
+
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+});

src/components/Button/utils.ts

@@ -1,5 +1,7 @@
 import {ButtonSize, ButtonView} from '@gravity-ui/uikit';
 
+export const ICON_QA = 'button-icon';
+
 export type OldButtonTheme =
     | 'normal'
     | 'action'

src/models/constructor-items/common.ts

@@ -168,21 +168,31 @@ export interface FileLinkProps extends ClassNameProps {
 }
 
 // buttons
+export type ButtonTheme =
+    | ButtonView
+    | 'github'
+    | 'app-store'
+    | 'google-play'
+    | 'scale'
+    | 'monochrome';
+
 export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
     size?: ButtonSize;
-    theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
+    theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     target?: string;
 }
 
+export type ButtonImagePosition = 'left' | 'right';
+
 export interface ButtonImageProps {
     url: string;
-    position?: 'left' | 'right';
+    position?: ButtonImagePosition;
     alt?: string;
 }