test(BackgroundImage): test for BackgroundImage added (#169)

* test(BackgroundImage): test for BackgroundImage added

Author: niktverd

src/components/BackgroundImage/BackgroundImage.tsx

@@ -9,10 +9,10 @@ import './BackgroundImage.scss';
 const b = block('storage-background-image');
 
 const BackgroundImage = (props: WithChildren<BackgroundImageProps>) => {
-    const {children, src, desktop, className, imageClassName, style, hide} = props;
+    const {children, src, desktop, className, imageClassName, style, hide, qa} = props;
 
     return (
-        <div className={b(null, className)} style={style}>
+        <div className={b(null, className)} style={style} data-qa={qa}>
             {(src || desktop) && !hide && <Image {...props} className={b('img', imageClassName)} />}
             {children && <div className={b('container')}>{children}</div>}
         </div>

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

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+import {BackgroundImageProps} from 'src/models';
+
+import {testCustomClassName, testCustomStyle} from '../../../../test-utils/shared/common';
+import BackgroundImage from '../BackgroundImage';
+
+const qaId = 'background-image-component';
+
+const imageSrc =
+    'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';
+
+describe('BackgroundImage', () => {
+    test('Render BackgroundImage by default', async () => {
+        render(<BackgroundImage qa={qaId} />);
+
+        const component = screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+
+    test('add image as src prop', () => {
+        render(<BackgroundImage src={imageSrc} />);
+        const component = screen.getByRole('img');
+
+        expect(component).toHaveAttribute('src', imageSrc);
+    });
+
+    test('add image as desktop prop', () => {
+        render(<BackgroundImage desktop={imageSrc} />);
+        const component = screen.getByRole('img');
+
+        expect(component).toHaveAttribute('src', imageSrc);
+    });
+
+    test('should hide image', () => {
+        render(<BackgroundImage src={imageSrc} hide qa={qaId} />);
+        const component = screen.getByTestId(qaId);
+        const imageComponent = screen.queryByRole('img');
+
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(imageComponent).not.toBeInTheDocument();
+    });
+
+    test('should render children', () => {
+        const childText = 'child-component';
+        render(
+            <BackgroundImage src={imageSrc} hide qa={qaId}>
+                <p>{childText}</p>
+            </BackgroundImage>,
+        );
+        const component = screen.getByText(childText);
+
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+
+    test('add className', () => {
+        testCustomClassName<BackgroundImageProps>({
+            component: BackgroundImage,
+            props: {qa: qaId},
+        });
+    });
+
+    test('add style', () => {
+        testCustomStyle<BackgroundImageProps>({
+            component: BackgroundImage,
+            props: {qa: qaId},
+        });
+    });
+
+    test('add className to image', () => {
+        const className = 'my-class';
+
+        render(<BackgroundImage src={imageSrc} imageClassName={className} />);
+        const component = screen.getByRole('img');
+
+        expect(component).toHaveClass(className);
+    });
+});

src/components/Image/Image.tsx

@@ -13,6 +13,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     className?: string;
     onClick?: MouseEventHandler;
     containerClassName?: string;
+    qa?: string;
 }
 
 const checkWebP = (src: string) => {
@@ -32,6 +33,7 @@ const Image = (props: ImageProps) => {
         className,
         onClick,
         containerClassName,
+        qa,
     } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
 
@@ -48,7 +50,7 @@ const Image = (props: ImageProps) => {
         imgLoadingError;
 
     return (
-        <picture className={containerClassName}>
+        <picture className={containerClassName} data-qa={qa}>
             {mobile && (
                 <Fragment>
                     {!disableWebp && (

src/models/constructor-items/common.ts

@@ -131,6 +131,7 @@ export interface BackgroundImageProps
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
+    qa?: string;
 }
 
 //components props