test(Image): test for Image added

src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx

@@ -3,14 +3,18 @@ import React from 'react';
 import {render, screen} from '@testing-library/react';
 
 import {testCustomClassName, testCustomStyle} from '../../../../test-utils/shared/common';
+import {testSourceProps} from '../../../../test-utils/shared/image';
 import {BackgroundImageProps} from '../../../models';
+import {getQaAttrubutes} from '../../../utils';
 import BackgroundImage from '../BackgroundImage';
 
 const qa = 'background-image-component';
 
 const imageSrc =
     'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';
 
+const qaAttributes = getQaAttrubutes(qa, 'image-desktop-source-compressed');
+
 describe('BackgroundImage', () => {
     test('Render BackgroundImage by default', async () => {
         render(<BackgroundImage qa={qa} />);
@@ -21,17 +25,19 @@ describe('BackgroundImage', () => {
     });
 
     test('add image as src prop', () => {
-        render(<BackgroundImage src={imageSrc} />);
-        const component = screen.getByRole('img');
-
-        expect(component).toHaveAttribute('src', imageSrc);
+        testSourceProps<BackgroundImageProps>({
+            component: BackgroundImage,
+            props: {src: imageSrc, qa},
+            options: {qaId: qaAttributes.imageDesktopSourceCompressed},
+        });
     });
 
     test('add image as desktop prop', () => {
-        render(<BackgroundImage desktop={imageSrc} />);
-        const component = screen.getByRole('img');
-
-        expect(component).toHaveAttribute('src', imageSrc);
+        testSourceProps<BackgroundImageProps>({
+            component: BackgroundImage,
+            props: {desktop: imageSrc, qa},
+            options: {qaId: qaAttributes.imageDesktopSourceCompressed},
+        });
     });
 
     test('should hide image', () => {

src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx

@@ -109,10 +109,10 @@ describe('BackgroundMedia', () => {
     test('render image', () => {
         const imageQaAttributes = getQaAttrubutes(
             qaAttributes.mediaImageBackgroundImage,
-            'image-display-source',
+            'image-desktop-source-compressed',
         );
         render(<BackgroundMedia qa={qaId} image={imageUrl} />);
-        const component = screen.getByTestId(imageQaAttributes.imageDisplaySource);
+        const component = screen.getByTestId(imageQaAttributes.imageDesktopSourceCompressed);
 
         expect(component).toBeInTheDocument();
     });

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

@@ -2,9 +2,8 @@ import React from 'react';
 
 import {ButtonSize} from '@gravity-ui/uikit';
 import {render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
-import {testCustomClassName} from '../../../../test-utils/shared/common';
+import {testCustomClassName, testOnClick} from '../../../../test-utils/shared/common';
 import {ButtonImagePosition, ButtonTheme} from '../../../models';
 import Button, {ButtonProps} from '../Button';
 import {ICON_QA} from '../utils';
@@ -63,14 +62,10 @@ describe('Button', () => {
     });
 
     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);
+        testOnClick<ButtonProps>({
+            component: Button,
+            props: {text: buttonProps.text, qa},
+        });
     });
 
     test.each(new Array<ButtonSize>('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {

src/components/Image/Image.tsx

@@ -16,10 +16,35 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     containerClassName?: string;
 }
 
+export interface DeviceSpecificFragmentProps extends QAProps {
+    disableWebp: boolean;
+    src: string;
+    breakpoint: string;
+}
+
 const checkWebP = (src: string) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
 
+const DeviceSpecificFragment = ({
+    disableWebp,
+    src,
+    breakpoint,
+    qa,
+}: DeviceSpecificFragmentProps) => (
+    <Fragment>
+        {!disableWebp && (
+            <source
+                srcSet={checkWebP(src)}
+                type="image/webp"
+                media={`(max-width: ${breakpoint})`}
+                data-qa={`${qa}-compressed`}
+            />
+        )}
+        <source srcSet={src} media={`(max-width: ${breakpoint})`} data-qa={qa} />
+    </Fragment>
+);
+
 const Image = (props: ImageProps) => {
     const projectSettings = useContext(ProjectSettingsContext);
     const {
@@ -49,7 +74,7 @@ const Image = (props: ImageProps) => {
         'mobile-source',
         'tablet-webp-source',
         'tablet-source',
-        'display-source',
+        'desktop-source-compressed',
     );
 
     const disableWebp =
@@ -61,44 +86,26 @@ const Image = (props: ImageProps) => {
     return (
         <picture className={containerClassName} data-qa={qa}>
             {mobile && (
-                <Fragment>
-                    {!disableWebp && (
-                        <source
-                            srcSet={checkWebP(mobile)}
-                            type="image/webp"
-                            media={`(max-width: ${BREAKPOINTS.sm}px)`}
-                            data-qa={qaAttributes.mobileWebpSource}
-                        />
-                    )}
-                    <source
-                        srcSet={mobile}
-                        media={`(max-width: ${BREAKPOINTS.sm}px)`}
-                        data-qa={qaAttributes.mobileSource}
-                    />
-                </Fragment>
+                <DeviceSpecificFragment
+                    src={mobile}
+                    disableWebp={disableWebp}
+                    breakpoint={`${BREAKPOINTS.sm} px)`}
+                    qa={qaAttributes.mobileSource}
+                />
             )}
             {tablet && (
-                <Fragment>
-                    {!disableWebp && (
-                        <source
-                            srcSet={checkWebP(tablet)}
-                            type="image/webp"
-                            media={`(max-width: ${BREAKPOINTS.md}px)`}
-                            data-qa={qaAttributes.tabletWebpSource}
-                        />
-                    )}
-                    <source
-                        srcSet={tablet}
-                        media={`(max-width: ${BREAKPOINTS.md}px)`}
-                        data-qa={qaAttributes.tabletSource}
-                    />
-                </Fragment>
+                <DeviceSpecificFragment
+                    src={tablet}
+                    disableWebp={disableWebp}
+                    breakpoint={`${BREAKPOINTS.md} px)`}
+                    qa={qaAttributes.tabletSource}
+                />
             )}
             {src && !disableWebp && (
                 <source
                     srcSet={checkWebP(src)}
                     type="image/webp"
-                    data-qa={qaAttributes.displaySource}
+                    data-qa={qaAttributes.desktopSourceCompressed}
                 />
             )}
             <ImageBase

src/components/Image/__tests__/Image.test.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+
+import {
+    testCustomClassName,
+    testCustomStyle,
+    testOnClick,
+} from '../../../../test-utils/shared/common';
+import {testSourceProps} from '../../../../test-utils/shared/image';
+import Image, {ImageProps} from '../Image';
+import i18n from '../i18n';
+
+const qaId = 'image-component';
+
+const imageSrc =
+    'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';
+
+describe('Image', () => {
+    test('Render Image by default', async () => {
+        render(<Image src={imageSrc} qa={qaId} />);
+
+        const component = screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+
+    test('add image as src prop', () => {
+        testSourceProps<ImageProps>({
+            component: Image,
+            props: {src: imageSrc, qa: qaId},
+        });
+    });
+
+    test('add image as desktop prop', () => {
+        testSourceProps<ImageProps>({
+            component: Image,
+            props: {desktop: imageSrc, qa: qaId},
+        });
+    });
+
+    test('add image as tablet prop', () => {
+        testSourceProps<ImageProps>({
+            component: Image,
+            props: {desktop: imageSrc, tablet: imageSrc, qa: qaId},
+        });
+    });
+
+    test('add image as mobile prop', () => {
+        testSourceProps<ImageProps>({
+            component: Image,
+            props: {desktop: imageSrc, mobile: imageSrc, qa: qaId},
+        });
+    });
+
+    test('add image as src prop with disabledCompress', () => {
+        testSourceProps<ImageProps>({
+            component: Image,
+            props: {src: imageSrc, qa: qaId, disableCompress: true},
+        });
+    });
+
+    test('add image as desktop prop with disabledCompress', () => {
+        testSourceProps<ImageProps>({
+            component: Image,
+            props: {desktop: imageSrc, qa: qaId, disableCompress: true},
+        });
+    });
+
+    test('add image as tablet prop with disabledCompress', () => {
+        testSourceProps<ImageProps>({
+            component: Image,
+            props: {desktop: imageSrc, tablet: imageSrc, qa: qaId, disableCompress: true},
+        });
+    });
+
+    test('add image as mobile prop with disabledCompress', () => {
+        testSourceProps<ImageProps>({
+            component: Image,
+            props: {desktop: imageSrc, mobile: imageSrc, qa: qaId, disableCompress: true},
+        });
+    });
+
+    test('add className', () => {
+        testCustomClassName<ImageProps>({
+            component: Image,
+            props: {src: imageSrc, qa: qaId},
+            options: {customClassNameProp: 'containerClassName'},
+        });
+    });
+
+    test('add className to image', () => {
+        const className = 'custom-class-name';
+
+        render(<Image className={className} src={imageSrc} qa={qaId} />);
+
+        const component = screen.getByRole('img');
+        expect(component).toHaveClass(className);
+    });
+
+    test('add style', () => {
+        testCustomStyle<ImageProps>({
+            component: Image,
+            props: {src: imageSrc, qa: qaId},
+            options: {role: 'img'},
+        });
+    });
+
+    test('render default "alt"', () => {
+        render(<Image src={imageSrc} qa={qaId} />);
+
+        const component = screen.getByRole('img');
+        expect(component).toHaveAttribute('alt', i18n('img-alt'));
+    });
+
+    test('render custom "alt"', () => {
+        const alt = 'defined-alt';
+        render(<Image src={imageSrc} alt={alt} qa={qaId} />);
+
+        const component = screen.getByRole('img');
+        expect(component).toHaveAttribute('alt', alt);
+    });
+
+    test('call onClick', async () => {
+        testOnClick<ImageProps>({
+            component: Image,
+            props: {src: imageSrc, qa: qaId},
+            options: {role: 'img'},
+        });
+    });
+});