test(BackgroundMedia): test for BackgroundMedia added (#170)

Co-authored-by: Nikolay Tverdokhlebov <[email protected]>
gravity-ui · Sep 15, 2023 · f95a76f · f95a76f
1 parent c1e2d97
commit f95a76f
Show file tree

Hide file tree

Showing 11 changed files with 304 additions and 43 deletions.
diff --git a/src/components/BackgroundImage/BackgroundImage.tsx b/src/components/BackgroundImage/BackgroundImage.tsx
@@ -1,19 +1,24 @@
 import React from 'react';
 
 import {BackgroundImageProps, WithChildren} from '../../models';
-import {block} from '../../utils';
+import {block, getQaAttrubutes} from '../../utils';
 import Image from '../Image/Image';
 
 import './BackgroundImage.scss';
 
+export const qaIdByDefault = 'background-image';
+
 const b = block('storage-background-image');
 
 const BackgroundImage = (props: WithChildren<BackgroundImageProps>) => {
     const {children, src, desktop, className, imageClassName, style, hide, qa} = props;
+    const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);
 
     return (
-        <div className={b(null, className)} style={style} data-qa={qa}>
-            {(src || desktop) && !hide && <Image {...props} className={b('img', imageClassName)} />}
+        <div className={b(null, className)} style={style} data-qa={qa || qaIdByDefault}>
+            {(src || desktop) && !hide && (
+                <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />
+            )}
             {children && <div className={b('container')}>{children}</div>}
         </div>
     );

diff --git a/src/components/BackgroundMedia/BackgroundMedia.tsx b/src/components/BackgroundMedia/BackgroundMedia.tsx
@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 
 import {MobileContext} from '../../context/mobileContext';
 import {BackgroundMediaProps} from '../../models';
-import {block} from '../../utils';
+import {block, getQaAttrubutes} from '../../utils';
 import AnimateBlock from '../AnimateBlock/AnimateBlock';
 import Media from '../Media/Media';
 
@@ -18,21 +18,25 @@ const BackgroundMedia = ({
     video,
     mediaClassName,
     fullWidthMedia,
+    qa,
     ...props
 }: BackgroundMediaProps) => {
     const isMobile = useContext(MobileContext);
+    const qaAttributes = getQaAttrubutes(qa, 'media');
 
     return (
         <AnimateBlock
             className={b(null, className)}
             style={{backgroundColor: color}}
             animate={animated}
+            qa={qaAttributes.animate}
         >
             <Media
                 className={b('media', {'full-width-media': fullWidthMedia}, mediaClassName)}
                 imageClassName={b('image')}
                 videoClassName={b('video')}
                 isBackground={true}
+                qa={qaAttributes.media}
                 {...{
                     height: 720,
                     color,

diff --git a/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx b/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+
+import {getQaAttrubutes} from '../../..';
+import {testAnimated, testCustomClassName} from '../../../../test-utils/shared/common';
+import {BackgroundMediaProps} from '../../../models';
+import BackgroundMedia from '../BackgroundMedia';
+
+const qaId = 'background-media-component';
+
+const imageUrl =
+    'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';
+const videoProps = {
+    src: [
+        'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_light.mp4',
+    ],
+};
+
+const qaAttributes = getQaAttrubutes(
+    qaId,
+    'media',
+    'media-video',
+    'media-video-source',
+    'media-image-background-image',
+    'media-image-animate',
+);
+
+describe('BackgroundMedia', () => {
+    test('render component by default', async () => {
+        render(<BackgroundMedia qa={qaId} />);
+        const component = screen.getByTestId(qaAttributes.animate);
+
+        expect(component).toBeInTheDocument();
+    });
+
+    test('add className', () => {
+        testCustomClassName<BackgroundMediaProps>({
+            component: BackgroundMedia,
+            props: {qa: qaId},
+            options: {qaId: qaAttributes.animate},
+        });
+    });
+
+    test('render with animated', async () => {
+        testAnimated<BackgroundMediaProps>({
+            component: BackgroundMedia,
+            props: {qa: qaId},
+            options: {qaId: qaAttributes.animate},
+        });
+    });
+
+    test('render with passed color', () => {
+        const style = {backgroundColor: 'red'};
+
+        render(<BackgroundMedia color={style.backgroundColor} qa={qaId} />);
+        const component = screen.getByTestId(qaAttributes.media);
+
+        expect(component).toHaveStyle(style);
+    });
+
+    test('add className to media component', () => {
+        const className = 'my-class';
+
+        render(<BackgroundMedia qa={qaId} mediaClassName={className} />);
+        const component = screen.getByTestId(qaAttributes.media);
+
+        expect(component).toHaveClass(className);
+    });
+
+    test('render video', () => {
+        render(<BackgroundMedia qa={qaId} video={videoProps} />);
+        const component = screen.getByTestId(qaAttributes.mediaVideoSource);
+
+        expect(component).toBeInTheDocument();
+    });
+
+    test('render video with videoClassName', () => {
+        render(<BackgroundMedia qa={qaId} video={videoProps} />);
+        const component = screen.getByTestId(qaAttributes.mediaVideo);
+
+        expect(component).toHaveClass('pc-BackgroundMedia__video');
+    });
+
+    test('render video with default height', () => {
+        const style = {height: '720px'};
+        render(<BackgroundMedia qa={qaId} video={videoProps} />);
+        const component = screen.getByTestId(qaAttributes.mediaVideo);
+
+        expect(component).toHaveStyle(style);
+    });
+
+    test('render video with custom height', () => {
+        const height = 300;
+        const style = {height: `${height}px`};
+
+        render(<BackgroundMedia qa={qaId} video={videoProps} height={height} />);
+        const component = screen.getByTestId(qaAttributes.mediaVideo);
+        expect(component).toHaveStyle(style);
+    });
+
+    test('render with fullWidthMedia prop', () => {
+        render(<BackgroundMedia qa={qaId} fullWidthMedia />);
+        const component = screen.getByTestId(qaAttributes.media);
+
+        expect(component).toHaveClass('pc-BackgroundMedia__media_full-width-media');
+    });
+
+    test('render image', () => {
+        const imageQaAttributes = getQaAttrubutes(
+            qaAttributes.mediaImageBackgroundImage,
+            'image-display-source',
+        );
+        render(<BackgroundMedia qa={qaId} image={imageUrl} />);
+        const component = screen.getByTestId(imageQaAttributes.imageDisplaySource);
+
+        expect(component).toBeInTheDocument();
+    });
+
+    test('render image with imageClassName', () => {
+        render(<BackgroundMedia qa={qaId} image={imageUrl} />);
+        const component = screen.getByTestId(qaAttributes.mediaImageBackgroundImage);
+
+        expect(component).toHaveClass('pc-BackgroundMedia__image');
+    });
+
+    test('render image with default height', () => {
+        const style = {height: '720px'};
+        render(<BackgroundMedia qa={qaId} image={imageUrl} />);
+        const component = screen.getByTestId(qaAttributes.mediaImageBackgroundImage);
+
+        expect(component).toHaveStyle(style);
+    });
+
+    test('render image with custom height', () => {
+        const height = 300;
+        const style = {height: `${height}px`};
+
+        render(<BackgroundMedia qa={qaId} image={imageUrl} height={height} />);
+        const component = screen.getByTestId(qaAttributes.mediaImageBackgroundImage);
+
+        expect(component).toHaveStyle(style);
+    });
+
+    test('do not render image when video is provided', () => {
+        render(<BackgroundMedia qa={qaId} image={imageUrl} video={videoProps} />);
+        const component = screen.getByTestId(qaAttributes.mediaImageBackgroundImage);
+
+        expect(component).toHaveClass('pc-media-component-image__item_withVideo');
+    });
+
+    test('render image with parallax', () => {
+        const style = {transform: 'translateY(0px)'};
+
+        render(<BackgroundMedia qa={qaId} parallax image={imageUrl} />);
+        const component = screen.getByTestId(qaAttributes.mediaImageAnimate);
+
+        expect(component).toHaveStyle(style);
+    });
+});
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -3,6 +3,7 @@ import React, {CSSProperties, Fragment, MouseEventHandler, useContext, useState}
 import {BREAKPOINTS} from '../../constants';
 import {ProjectSettingsContext} from '../../context/projectSettingsContext';
 import {ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';
+import {getQaAttrubutes} from '../../utils';
 import {isCompressible} from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
 
@@ -42,6 +43,15 @@ const Image = (props: ImageProps) => {
         return null;
     }
 
+    const qaAttributes = getQaAttrubutes(
+        qa,
+        'mobile-webp-source',
+        'mobile-source',
+        'tablet-webp-source',
+        'tablet-source',
+        'display-source',
+    );
+
     const disableWebp =
         projectSettings.disableCompress ||
         disableCompress ||
@@ -57,9 +67,14 @@ const Image = (props: ImageProps) => {
                             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)`} />
+                    <source
+                        srcSet={mobile}
+                        media={`(max-width: ${BREAKPOINTS.sm}px)`}
+                        data-qa={qaAttributes.mobileSource}
+                    />
                 </Fragment>
             )}
             {tablet && (
@@ -69,12 +84,23 @@ const Image = (props: ImageProps) => {
                             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)`} />
+                    <source
+                        srcSet={tablet}
+                        media={`(max-width: ${BREAKPOINTS.md}px)`}
+                        data-qa={qaAttributes.tabletSource}
+                    />
                 </Fragment>
             )}
-            {src && !disableWebp && <source srcSet={checkWebP(src)} type="image/webp" />}
+            {src && !disableWebp && (
+                <source
+                    srcSet={checkWebP(src)}
+                    type="image/webp"
+                    data-qa={qaAttributes.displaySource}
+                />
+            )}
             <ImageBase
                 className={className}
                 alt={alt}

diff --git a/src/components/Media/Image/Image.tsx b/src/components/Media/Image/Image.tsx
@@ -4,8 +4,8 @@ import _ from 'lodash';
 import {Interpolation, animated, config, useSpring} from 'react-spring';
 
 import SliderBlock from '../../../blocks/Slider/Slider';
-import {ImageProps, MediaComponentImageProps, SliderType} from '../../../models';
-import {block} from '../../../utils';
+import {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';
+import {block, getQaAttrubutes} from '../../../utils';
 import BackgroundImage from '../../BackgroundImage/BackgroundImage';
 import FullscreenImage from '../../FullscreenImage/FullscreenImage';
 import ImageView from '../../Image/Image';
@@ -26,7 +26,9 @@ interface InnerImageProps {
     hasVideoFallback: boolean;
 }
 
-type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps;
+type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;
+
+export const defaultAnimatedDivQa = 'animated-div';
 
 const Image = (props: ImageAllProps) => {
     const {
@@ -38,8 +40,17 @@ const Image = (props: ImageAllProps) => {
         hasVideoFallback,
         video,
         fullscreen,
+        qa,
     } = props;
 
+    const qaAttributes = getQaAttrubutes(
+        qa,
+        'fullscreen-image',
+        'animate',
+        'background-image',
+        'image-view',
+        'slider-block',
+    );
     const [scrollY, setScrollY] = useState(0);
     const [{springScrollY}, springSetScrollY] = useSpring(() => ({
         springScrollY: 0,
@@ -79,22 +90,35 @@ const Image = (props: ImageAllProps) => {
                 {...itemData}
                 imageClassName={imageClass}
                 imageStyle={{height}}
+                qa={qaAttributes.fullscreenImage}
             />
         );
     };
 
     const imageBackground = (oneImage: ImageProps) => {
         const imageData = getMediaImage(oneImage);
         return (
-            <animated.div style={{transform: parallaxInterpolate || 'none'}}>
-                <BackgroundImage {...imageData} className={imageClass} style={{height}} />
+            <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>
+                <BackgroundImage
+                    {...imageData}
+                    className={imageClass}
+                    style={{height}}
+                    qa={qaAttributes.backgroundImage}
+                />
             </animated.div>
         );
     };
 
     const imageOnly = (oneImage: ImageProps) => {
         const imageData = getMediaImage(oneImage);
-        return <ImageView {...imageData} className={imageClass} style={{height}} />;
+        return (
+            <ImageView
+                {...imageData}
+                className={imageClass}
+                style={{height}}
+                qa={qaAttributes.imageView}
+            />
+        );
     };
 
     const imageSlider = (imageArray: ImageProps[]) => {