From 591aeed14906c29477a88edc61cd2727cc10c687 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 1/5] test(Image): test for Image added

---
 .../__tests__/BackgroundImage.test.tsx        |  22 +--
 .../__tests__/BackgroundMedia.test.tsx        |   4 +-
 .../Button/__tests__/Button.test.tsx          |  15 +-
 src/components/Image/Image.tsx                |  71 +++++-----
 src/components/Image/__tests__/Image.test.tsx | 131 ++++++++++++++++++
 test-utils/shared/common.tsx                  |  64 ++++++---
 test-utils/shared/image.tsx                   |  88 ++++++++++++
 7 files changed, 327 insertions(+), 68 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..a562ca7dc 100644
--- a/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
+++ b/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
@@ -3,7 +3,9 @@ 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';
@@ -11,6 +13,8 @@ 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-display-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.imageDisplaySourceCompressed},
+        });
     });
 
     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.imageDisplaySourceCompressed},
+        });
     });
 
     test('should hide image', () => {
diff --git a/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx b/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
index 5fe0a0423..a3bf4bcf2 100644
--- a/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
+++ b/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-display-source-compressed',
         );
         render(<BackgroundMedia qa={qaId} image={imageUrl} />);
-        const component = screen.getByTestId(imageQaAttributes.imageDisplaySource);
+        const component = screen.getByTestId(imageQaAttributes.imageDisplaySourceCompressed);
 
         expect(component).toBeInTheDocument();
     });
diff --git a/src/components/Button/__tests__/Button.test.tsx b/src/components/Button/__tests__/Button.test.tsx
index a3064bece..a7afd6ec7 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},
+        });
     });
 
     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..786b2c1ff 100644
--- a/src/components/Image/Image.tsx
+++ b/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: '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}-compressed`}
+            />
+        )}
+        <source srcSet={src} media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`} 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',
+        'display-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="sm"
+                    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="md"
+                    qa={qaAttributes.tabletSource}
+                />
             )}
             {src && !disableWebp && (
                 <source
                     srcSet={checkWebP(src)}
                     type="image/webp"
-                    data-qa={qaAttributes.displaySource}
+                    data-qa={qaAttributes.displaySourceCompressed}
                 />
             )}
             <ImageBase
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 59e95d348..45b07ae07 100644
--- a/test-utils/shared/common.tsx
+++ b/test-utils/shared/common.tsx
@@ -8,7 +8,23 @@ import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
 type CommonTestArgs<T> = {
     component: ElementType;
     props: T & QAProps;
-    options?: {qaId?: string};
+    options?: {qaId?: string; customClassNameProp?: string; role?: string};
+};
+
+const validateInputProps = <T,>(props: CommonTestArgs<T>['props']) => {
+    if (!props.qa) {
+        throw new Error(ERROR_INPUT_DATA_MESSAGE);
+    }
+};
+
+const getComponent = <T,>({props, options}: Omit<CommonTestArgs<T>, 'component'>) => {
+    if (!props.qa) {
+        throw new Error(ERROR_INPUT_DATA_MESSAGE);
+    }
+
+    return options?.role
+        ? screen.getByRole(options.role)
+        : screen.getByTestId(options?.qaId || props.qa);
 };
 
 export const testCustomClassName = <T,>({
@@ -16,25 +32,25 @@ export const testCustomClassName = <T,>({
     props,
     options,
 }: CommonTestArgs<T>) => {
-    if (!props.qa) {
-        throw new Error(ERROR_INPUT_DATA_MESSAGE);
-    }
+    validateInputProps(props);
 
     const className = 'custom-class-name';
-    render(<Component {...props} className={className} />);
-    const anchor = screen.getByTestId(options?.qaId || props.qa);
-    expect(anchor).toHaveClass(className);
+    const classNameProps = {
+        [options?.customClassNameProp || 'className']: className,
+    };
+    render(<Component {...props} {...classNameProps} />);
+    const component = getComponent({props, options});
+
+    expect(component).toHaveClass(className);
 };
 
-export const testCustomStyle = <T,>({component: Component, props}: CommonTestArgs<T>) => {
-    if (!props.qa) {
-        throw new Error(ERROR_INPUT_DATA_MESSAGE);
-    }
+export const testCustomStyle = <T,>({component: Component, props, options}: CommonTestArgs<T>) => {
+    validateInputProps(props);
 
     const style = {color: 'red'};
 
     render(<Component {...props} style={style} />);
-    const component = screen.getByTestId(props.qa);
+    const component = getComponent({props, options});
 
     expect(component).toHaveStyle(style);
 };
@@ -44,14 +60,30 @@ export const testAnimated = async <T,>({
     props,
     options,
 }: CommonTestArgs<T>) => {
-    if (!options?.qaId) {
-        throw new Error(ERROR_INPUT_DATA_MESSAGE);
-    }
+    validateInputProps(props);
 
     const user = userEvent.setup();
     render(<Component animated {...props} />);
-    const component = screen.getByTestId(options?.qaId);
+    const component = getComponent({props, options});
+
     await user.hover(component);
 
     expect(component).toHaveClass('animate');
 };
+
+export const testOnClick = async <T,>({
+    component: Component,
+    props,
+    options,
+}: CommonTestArgs<T>) => {
+    validateInputProps(props);
+
+    const user = userEvent.setup();
+    const handleOnClick = jest.fn();
+    render(<Component {...props} onClick={handleOnClick} />);
+
+    const component = getComponent({props, options});
+
+    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..f8e742edc
--- /dev/null
+++ b/test-utils/shared/image.tsx
@@ -0,0 +1,88 @@
+import {render, screen} from '@testing-library/react';
+import React, {ElementType} from 'react';
+
+import {getQaAttrubutes} from '../../src';
+import {QAProps} from '../../src/models';
+import {isCompressible} from '../../src/utils/imageCompress';
+import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
+
+export const testSourceProps = <T,>({
+    component: Component,
+    props,
+    options,
+}: {
+    component: ElementType;
+    props: T &
+        QAProps & {
+            src?: string;
+            tablet?: string;
+            desktop?: string;
+            mobile?: string;
+            disableCompress?: boolean;
+        };
+    options?: {
+        qaId?: string;
+    };
+}) => {
+    const src = props.src || props.desktop;
+    if (!src) {
+        throw new Error(ERROR_INPUT_DATA_MESSAGE);
+    }
+    const qaId = options?.qaId;
+
+    const qaAttributes = getQaAttrubutes(
+        props.qa,
+        'mobile-source-compressed',
+        'mobile-source',
+        'tablet-source-compressed',
+        'tablet-source',
+        'display-source-compressed',
+    );
+
+    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.queryByTestId(qaId || qaAttributes.displaySourceCompressed);
+        expect(sourceWebP).not.toBeInTheDocument();
+    } else {
+        const sourceWebP = screen.getByTestId(qaId || qaAttributes.displaySourceCompressed);
+        expect(sourceWebP).toHaveAttribute('srcset', src + '.webp');
+    }
+
+    if (props.tablet) {
+        if (disableWebp) {
+            const source = screen.getAllByTestId(qaId || qaAttributes.tabletSource);
+            const sourceWebP = screen.queryByTestId(qaId || qaAttributes.tabletSourceCompressed);
+
+            expect(source[0]).toHaveAttribute('srcset', props.tablet);
+            expect(sourceWebP).not.toBeInTheDocument();
+        } else {
+            const source = screen.getAllByTestId(qaId || qaAttributes.tabletSource);
+            const sourceWebP = screen.getByTestId(qaId || qaAttributes.tabletSourceCompressed);
+
+            expect(source[0]).toHaveAttribute('srcset', props.tablet);
+            expect(sourceWebP).toHaveAttribute('srcset', props.tablet + '.webp');
+        }
+    }
+
+    if (props.mobile) {
+        if (disableWebp) {
+            const source = screen.getAllByTestId(qaId || qaAttributes.mobileSource);
+            const sourceWebP = screen.queryByTestId(qaId || qaAttributes.mobileSourceCompressed);
+
+            expect(source[0]).toHaveAttribute('srcset', props.mobile);
+            expect(sourceWebP).not.toBeInTheDocument();
+        } else {
+            const source = screen.getAllByTestId(qaId || qaAttributes.mobileSource);
+            const sourceWebP = screen.getByTestId(qaId || qaAttributes.mobileSourceCompressed);
+
+            expect(source[0]).toHaveAttribute('srcset', props.mobile);
+            expect(sourceWebP).toHaveAttribute('srcset', props.mobile + '.webp');
+        }
+    }
+};

From 4364ab53ed12b65261da31c55a73c2f289963a73 Mon Sep 17 00:00:00 2001
From: Nik Tverd <niktverd@yandex-team.ru>
Date: Wed, 20 Sep 2023 16:43:25 +0600
Subject: [PATCH 2/5] fixup! test(Image): test for Image added

---
 .../BackgroundImage/__tests__/BackgroundImage.test.tsx      | 6 +++---
 .../BackgroundMedia/__tests__/BackgroundMedia.test.tsx      | 4 ++--
 src/components/Image/Image.tsx                              | 4 ++--
 test-utils/shared/image.tsx                                 | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
index a562ca7dc..6f2aae286 100644
--- a/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
+++ b/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
@@ -13,7 +13,7 @@ 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-display-source-compressed');
+const qaAttributes = getQaAttrubutes(qa, 'image-desktop-source-compressed');
 
 describe('BackgroundImage', () => {
     test('Render BackgroundImage by default', async () => {
@@ -28,7 +28,7 @@ describe('BackgroundImage', () => {
         testSourceProps<BackgroundImageProps>({
             component: BackgroundImage,
             props: {src: imageSrc, qa},
-            options: {qaId: qaAttributes.imageDisplaySourceCompressed},
+            options: {qaId: qaAttributes.imageDesktopSourceCompressed},
         });
     });
 
@@ -36,7 +36,7 @@ describe('BackgroundImage', () => {
         testSourceProps<BackgroundImageProps>({
             component: BackgroundImage,
             props: {desktop: imageSrc, qa},
-            options: {qaId: qaAttributes.imageDisplaySourceCompressed},
+            options: {qaId: qaAttributes.imageDesktopSourceCompressed},
         });
     });
 
diff --git a/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx b/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
index a3bf4bcf2..10fbe2f36 100644
--- a/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
+++ b/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
@@ -109,10 +109,10 @@ describe('BackgroundMedia', () => {
     test('render image', () => {
         const imageQaAttributes = getQaAttrubutes(
             qaAttributes.mediaImageBackgroundImage,
-            'image-display-source-compressed',
+            'image-desktop-source-compressed',
         );
         render(<BackgroundMedia qa={qaId} image={imageUrl} />);
-        const component = screen.getByTestId(imageQaAttributes.imageDisplaySourceCompressed);
+        const component = screen.getByTestId(imageQaAttributes.imageDesktopSourceCompressed);
 
         expect(component).toBeInTheDocument();
     });
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 786b2c1ff..402b89566 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -74,7 +74,7 @@ const Image = (props: ImageProps) => {
         'mobile-source',
         'tablet-webp-source',
         'tablet-source',
-        'display-source-compressed',
+        'desktop-source-compressed',
     );
 
     const disableWebp =
@@ -105,7 +105,7 @@ const Image = (props: ImageProps) => {
                 <source
                     srcSet={checkWebP(src)}
                     type="image/webp"
-                    data-qa={qaAttributes.displaySourceCompressed}
+                    data-qa={qaAttributes.desktopSourceCompressed}
                 />
             )}
             <ImageBase
diff --git a/test-utils/shared/image.tsx b/test-utils/shared/image.tsx
index f8e742edc..34986febf 100644
--- a/test-utils/shared/image.tsx
+++ b/test-utils/shared/image.tsx
@@ -36,7 +36,7 @@ export const testSourceProps = <T,>({
         'mobile-source',
         'tablet-source-compressed',
         'tablet-source',
-        'display-source-compressed',
+        'desktop-source-compressed',
     );
 
     const disableWebp = src && (props.disableCompress || !isCompressible(src));
@@ -47,10 +47,10 @@ export const testSourceProps = <T,>({
     expect(component).toHaveAttribute('src', src);
 
     if (disableWebp) {
-        const sourceWebP = screen.queryByTestId(qaId || qaAttributes.displaySourceCompressed);
+        const sourceWebP = screen.queryByTestId(qaId || qaAttributes.desktopSourceCompressed);
         expect(sourceWebP).not.toBeInTheDocument();
     } else {
-        const sourceWebP = screen.getByTestId(qaId || qaAttributes.displaySourceCompressed);
+        const sourceWebP = screen.getByTestId(qaId || qaAttributes.desktopSourceCompressed);
         expect(sourceWebP).toHaveAttribute('srcset', src + '.webp');
     }
 

From 956651a0ac0cb9753f6f0fa1541835a71ea67f4d Mon Sep 17 00:00:00 2001
From: Nik Tverd <niktverd@yandex-team.ru>
Date: Thu, 21 Sep 2023 21:39:58 +0600
Subject: [PATCH 3/5] fixup! fixup! test(Image): test for Image added

---
 src/components/Image/Image.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 402b89566..fa577a737 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -19,7 +19,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
 export interface DeviceSpecificFragmentProps extends QAProps {
     disableWebp: boolean;
     src: string;
-    breakpoint: 'md' | 'sm';
+    breakpoint: string;
 }
 
 const checkWebP = (src: string) => {
@@ -37,11 +37,11 @@ const DeviceSpecificFragment = ({
             <source
                 srcSet={checkWebP(src)}
                 type="image/webp"
-                media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`}
+                media={`(max-width: ${breakpoint})`}
                 data-qa={`${qa}-compressed`}
             />
         )}
-        <source srcSet={src} media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`} data-qa={qa} />
+        <source srcSet={src} media={`(max-width: ${breakpoint})`} data-qa={qa} />
     </Fragment>
 );
 
@@ -89,7 +89,7 @@ const Image = (props: ImageProps) => {
                 <DeviceSpecificFragment
                     src={mobile}
                     disableWebp={disableWebp}
-                    breakpoint="sm"
+                    breakpoint={`${BREAKPOINTS.sm} px)`}
                     qa={qaAttributes.mobileSource}
                 />
             )}
@@ -97,7 +97,7 @@ const Image = (props: ImageProps) => {
                 <DeviceSpecificFragment
                     src={tablet}
                     disableWebp={disableWebp}
-                    breakpoint="md"
+                    breakpoint={`${BREAKPOINTS.md} px)`}
                     qa={qaAttributes.tabletSource}
                 />
             )}

From dff88af8022ec281b4865f4c1341c83b5d499ec6 Mon Sep 17 00:00:00 2001
From: Nik Tverd <niktverd@yandex-team.ru>
Date: Thu, 21 Sep 2023 22:37:07 +0600
Subject: [PATCH 4/5] fixup! fixup! fixup! test(Image): test for Image added

---
 src/components/Image/Image.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index fa577a737..7776cb5b8 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -37,11 +37,11 @@ const DeviceSpecificFragment = ({
             <source
                 srcSet={checkWebP(src)}
                 type="image/webp"
-                media={`(max-width: ${breakpoint})`}
+                media={`(max-width: ${breakpoint}px)`}
                 data-qa={`${qa}-compressed`}
             />
         )}
-        <source srcSet={src} media={`(max-width: ${breakpoint})`} data-qa={qa} />
+        <source srcSet={src} media={`(max-width: ${breakpoint}px)`} data-qa={qa} />
     </Fragment>
 );
 
@@ -89,7 +89,7 @@ const Image = (props: ImageProps) => {
                 <DeviceSpecificFragment
                     src={mobile}
                     disableWebp={disableWebp}
-                    breakpoint={`${BREAKPOINTS.sm} px)`}
+                    breakpoint={BREAKPOINTS.sm}
                     qa={qaAttributes.mobileSource}
                 />
             )}
@@ -97,7 +97,7 @@ const Image = (props: ImageProps) => {
                 <DeviceSpecificFragment
                     src={tablet}
                     disableWebp={disableWebp}
-                    breakpoint={`${BREAKPOINTS.md} px)`}
+                    breakpoint={BREAKPOINTS.md}
                     qa={qaAttributes.tabletSource}
                 />
             )}

From 97d9752cc9a935cf9072f628d2849046b636d9bb Mon Sep 17 00:00:00 2001
From: Nik Tverd <niktverd@yandex-team.ru>
Date: Thu, 21 Sep 2023 22:40:45 +0600
Subject: [PATCH 5/5] fixup! fixup! fixup! fixup! test(Image): test for Image
 added

---
 src/components/Image/Image.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 7776cb5b8..aa38dfcc7 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -19,7 +19,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
 export interface DeviceSpecificFragmentProps extends QAProps {
     disableWebp: boolean;
     src: string;
-    breakpoint: string;
+    breakpoint: number;
 }
 
 const checkWebP = (src: string) => {