From ece8b8fa1578da16baca88524b58d52e8b3f910f Mon Sep 17 00:00:00 2001
From: Nik Tverd <nn.tverd@gmail.com>
Date: Wed, 14 Jun 2023 15:26:32 +0600
Subject: [PATCH] test(Image): test for Image added

---
 .../__tests__/BackgroundImage.test.tsx        |  17 +--
 .../Button/__tests__/Button.test.tsx          |  15 +-
 src/components/Image/Image.tsx                |  61 ++++----
 src/components/Image/__tests__/Image.test.tsx | 131 ++++++++++++++++++
 test-utils/shared/common.tsx                  |  30 +++-
 test-utils/shared/image.tsx                   |  64 +++++++++
 6 files changed, 266 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Image/__tests__/Image.test.tsx
 create mode 100644 test-utils/shared/image.tsx

diff --git a/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
index 4326a66d3..c162825d8 100644
--- a/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
+++ b/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
@@ -3,6 +3,7 @@ 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 BackgroundImage from '../BackgroundImage';
 
@@ -21,17 +22,17 @@ 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: qaId},
+        });
     });
 
     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: qaId},
+        });
     });
 
     test('should hide image', () => {
diff --git a/src/components/Button/__tests__/Button.test.tsx b/src/components/Button/__tests__/Button.test.tsx
index a3064bece..42b0b9862 100644
--- a/src/components/Button/__tests__/Button.test.tsx
+++ b/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: qaId},
+        });
     });
 
     test.each(new Array<ButtonSize>('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 1861be1e7..92ab8c075 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -16,10 +16,39 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     containerClassName?: string;
 }
 
+export interface DeviceSpecificFragmentProps extends QAProps {
+    disableWebp: boolean;
+    src: string;
+    breakpoint: 'md' | 'sm';
+}
+
 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: ${BREAKPOINTS[breakpoint]}px)`}
+                data-qa={`${qa}-${breakpoint}`}
+            />
+        )}
+        <source
+            srcSet={src}
+            media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`}
+            data-qa={`${qa}-${breakpoint}`}
+        />
+    </Fragment>
+);
+
 const Image = (props: ImageProps) => {
     const projectSettings = useContext(ProjectSettingsContext);
     const {
@@ -61,38 +90,10 @@ 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="sm" />
             )}
             {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="md" />
             )}
             {src && !disableWebp && (
                 <source
diff --git a/src/components/Image/__tests__/Image.test.tsx b/src/components/Image/__tests__/Image.test.tsx
new file mode 100644
index 000000000..e0124574b
--- /dev/null
+++ b/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'},
+        });
+    });
+});
diff --git a/test-utils/shared/common.tsx b/test-utils/shared/common.tsx
index 0d5028851..7f9b89b33 100644
--- a/test-utils/shared/common.tsx
+++ b/test-utils/shared/common.tsx
@@ -8,8 +8,9 @@ import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
 type CommonTestArgs<T> = {
     component: ElementType;
     props: T & QAProps;
-    options?: {qaId?: string};
+    options?: {qaId?: string; customClassNameProp?: string};
 };
+import {QA} from './types';
 
 export const testCustomClassName = <T,>({
     component: Component,
@@ -21,12 +22,12 @@ export const testCustomClassName = <T,>({
     }
 
     const className = 'custom-class-name';
-    render(<Component className={className} {...props} />);
+    render(<Component {...props} className={className} />);
     const anchor = screen.getByTestId(options?.qaId || props.qa);
     expect(anchor).toHaveClass(className);
 };
 
-export const testCustomStyle = <T,>({component: Component, props}: CommonTestArgs<T>) => {
+export const testCustomStyle = <T,>({component: Component, props, options}: CommonTestArgs<T>) => {
     if (!props.qa) {
         throw new Error(ERROR_INPUT_DATA_MESSAGE);
     }
@@ -34,7 +35,7 @@ export const testCustomStyle = <T,>({component: Component, props}: CommonTestArg
     const style = {color: 'red'};
 
     render(<Component {...props} style={style} />);
-    const component = screen.getByTestId(props.qa);
+    const component = screen.getByTestId(options?.qaId || props.qa);
 
     expect(component).toHaveStyle(style);
 };
@@ -55,3 +56,24 @@ export const testAnimated = async <T,>({
 
     expect(component).toHaveClass('animate');
 };
+
+export const testOnClick = async <T,>({
+    component: Component,
+    props,
+    options,
+}: {
+    component: ElementType;
+    props: T & QAProps;
+    options?: {
+        role?: string;
+    };
+}) => {
+    const user = userEvent.setup();
+    const handleOnClick = jest.fn();
+    render(<Component {...props} onClick={handleOnClick} />);
+
+    const component = options?.role ? screen.getByRole('button') : screen.getByTestId(props.qa);
+
+    await user.click(component);
+    expect(handleOnClick).toHaveBeenCalledTimes(1);
+};
diff --git a/test-utils/shared/image.tsx b/test-utils/shared/image.tsx
new file mode 100644
index 000000000..e95a897a8
--- /dev/null
+++ b/test-utils/shared/image.tsx
@@ -0,0 +1,64 @@
+import {render, screen} from '@testing-library/react';
+import React, {ElementType} from 'react';
+
+import {isCompressible} from '../../src/utils/imageCompress';
+
+import {QA} from './types';
+
+export const testSourceProps = <T,>({
+    component: Component,
+    props,
+}: {
+    component: ElementType;
+    props: T &
+        QA & {
+            src?: string;
+            tablet?: string;
+            desktop?: string;
+            mobile?: string;
+            disableCompress?: boolean;
+        };
+}) => {
+    const src = props.src || props.desktop;
+
+    const disableWebp = src && (props.disableCompress || !isCompressible(src));
+
+    render(<Component {...props} />);
+
+    const component = screen.queryByRole('img');
+    expect(component).toHaveAttribute('src', src);
+
+    if (disableWebp) {
+        const sourceWebP = screen.queryByRole('image-webp-default');
+        expect(sourceWebP).not.toBeInTheDocument();
+    } else {
+        const sourceWebP = screen.getByRole('image-webp-default');
+        expect(sourceWebP).toHaveAttribute('srcset', src + '.webp');
+    }
+
+    if (props.tablet) {
+        const source = screen.getByRole('image-source-md');
+        expect(source).toHaveAttribute('srcset', props.tablet);
+
+        if (disableWebp) {
+            const sourceWebP = screen.queryByRole('image-webp-source-md');
+            expect(sourceWebP).not.toBeInTheDocument();
+        } else {
+            const sourceWebP = screen.getByRole('image-webp-source-md');
+            expect(sourceWebP).toHaveAttribute('srcset', props.tablet + '.webp');
+        }
+    }
+
+    if (props.mobile) {
+        const source = screen.getByRole('image-source-sm');
+        expect(source).toHaveAttribute('srcset', props.mobile);
+
+        if (disableWebp) {
+            const sourceWebP = screen.queryByRole('image-webp-source-sm');
+            expect(sourceWebP).not.toBeInTheDocument();
+        } else {
+            const sourceWebP = screen.getByRole('image-webp-source-sm');
+            expect(sourceWebP).toHaveAttribute('srcset', props.mobile + '.webp');
+        }
+    }
+};