test(BackgroundMedia): test for BackgroundMedia added

gravity-ui · Jun 2, 2023 · 6654cfb · 6654cfb
1 parent 5365791
commit 6654cfb
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 5 deletions.
diff --git a/src/components/BackgroundImage/BackgroundImage.tsx b/src/components/BackgroundImage/BackgroundImage.tsx
@@ -6,13 +6,15 @@ import Image from '../Image/Image';
 
 import './BackgroundImage.scss';
 
+export const qaIdByDefault = 'qa-background-image';
+
 const b = block('storage-background-image');
 
 const BackgroundImage = (props: WithChildren<BackgroundImageProps>) => {
     const {children, src, desktop, className, imageClassName, style, hide, qa} = props;
 
     return (
-        <div className={b(null, className)} style={style} data-qa={qa}>
+        <div className={b(null, className)} style={style} data-qa={qa || qaIdByDefault}>
             {(src || desktop) && !hide && <Image {...props} className={b('img', imageClassName)} />}
             {children && <div className={b('container')}>{children}</div>}
         </div>

diff --git a/src/components/BackgroundMedia/BackgroundMedia.tsx b/src/components/BackgroundMedia/BackgroundMedia.tsx
@@ -18,6 +18,7 @@ const BackgroundMedia = ({
     video,
     mediaClassName,
     fullWidthMedia,
+    qa,
     ...props
 }: BackgroundMediaProps) => {
     const isMobile = useContext(MobileContext);
@@ -27,6 +28,7 @@ const BackgroundMedia = ({
             className={b(null, className)}
             style={{backgroundColor: color}}
             animate={animated}
+            qa={qa}
         >
             <Media
                 className={b('media', {'full-width-media': fullWidthMedia}, mediaClassName)}

diff --git a/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx b/src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+
+import {testAnimated, testCustomClassName} from '../../../../test-utils/shared/common';
+import {qaIdByDefault as qaIdOfBackgroundImage} from '../../../components/BackgroundImage/BackgroundImage';
+import {qaIdByDefault as qaIdOfMedia} from '../../../components/Media/Media';
+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',
+    ],
+};
+
+describe('BackgroundMedia', () => {
+    test('render component by default', async () => {
+        render(<BackgroundMedia qa={qaId} />);
+        const component = screen.getByTestId(qaId);
+
+        expect(component).toBeInTheDocument();
+    });
+
+    test('add className', () => {
+        testCustomClassName<BackgroundMediaProps>({
+            component: BackgroundMedia,
+            props: {qa: qaId},
+        });
+    });
+
+    test('render with animated', async () => {
+        testAnimated<BackgroundMediaProps>({
+            component: BackgroundMedia,
+            props: {qa: qaId},
+        });
+    });
+
+    test('render with passed color', () => {
+        const style = {backgroundColor: 'red'};
+
+        render(<BackgroundMedia color={style.backgroundColor} qa={qaId} />);
+        const component = screen.getByTestId(qaId);
+
+        expect(component).toHaveStyle(style);
+    });
+
+    test('add className to media component', () => {
+        const className = 'my-class';
+
+        render(<BackgroundMedia qa={qaId} mediaClassName={className} />);
+        const component = screen.getByTestId(qaIdOfMedia);
+
+        expect(component).toHaveClass(className);
+    });
+
+    test('render video', () => {
+        render(<BackgroundMedia qa={qaId} video={videoProps} />);
+        const component = screen.getByRole('media-video-source');
+
+        expect(component).toBeInTheDocument();
+    });
+
+    test('render video with videoClassName', () => {
+        render(<BackgroundMedia qa={qaId} video={videoProps} />);
+        const component = screen.getByRole('media-video');
+
+        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.getByRole('media-video');
+
+        expect(component).toHaveStyle(style);
+    });
+
+    test('render video with defined height', () => {
+        const height = 300;
+        const style = {height: `${height}px`};
+
+        render(<BackgroundMedia qa={qaId} video={videoProps} height={height} />);
+        const component = screen.getByRole('media-video');
+        expect(component).toHaveStyle(style);
+    });
+
+    test('render with fullWidthMedia prop', () => {
+        render(<BackgroundMedia qa={qaId} fullWidthMedia />);
+        const component = screen.getByTestId(qaIdOfMedia);
+
+        expect(component).toHaveClass('pc-BackgroundMedia__media_full-width-media');
+    });
+
+    test('render image', () => {
+        render(<BackgroundMedia qa={qaId} image={imageUrl} />);
+        const component = screen.getByTestId(qaIdOfBackgroundImage);
+
+        expect(component).toBeInTheDocument();
+    });
+
+    test('render image with imageClassName', () => {
+        render(<BackgroundMedia qa={qaId} image={imageUrl} />);
+        const component = screen.getByTestId(qaIdOfBackgroundImage);
+
+        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(qaIdOfBackgroundImage);
+
+        expect(component).toHaveStyle(style);
+    });
+
+    test('render image with defined height', () => {
+        const height = 300;
+        const style = {height: `${height}px`};
+
+        render(<BackgroundMedia qa={qaId} image={imageUrl} height={height} />);
+        const component = screen.getByTestId(qaIdOfBackgroundImage);
+
+        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(qaIdOfBackgroundImage);
+
+        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.getByRole('animated-div');
+
+        expect(component).toHaveStyle(style);
+    });
+});
diff --git a/src/components/Media/Image/Image.tsx b/src/components/Media/Image/Image.tsx
@@ -84,7 +84,7 @@ const Image = (props: ImageAllProps) => {
     const imageBackground = (oneImage: ImageProps) => {
         const imageData = getMediaImage(oneImage);
         return (
-            <animated.div style={{transform: parallaxInterpolate}}>
+            <animated.div style={{transform: parallaxInterpolate}} role="animated-div">
                 <BackgroundImage {...imageData} className={imageClass} style={{height}} />
             </animated.div>
         );

diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx
@@ -11,11 +11,14 @@ import Video, {VideoAdditionProps} from './Video/Video';
 
 import './Media.scss';
 
+export const qaIdByDefault = 'qa-media';
+
 const b = block('Media');
 
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps {
     className?: string;
     youtubeClassName?: string;
+    qa?: string;
 }
 
 // TODO delete along with fullScreen props
@@ -46,6 +49,7 @@ export const Media = (props: MediaAllProps) => {
         isBackground,
         playButton,
         customBarControlsClassName,
+        qa = qaIdByDefault,
     } = props;
 
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
@@ -133,7 +137,7 @@ export const Media = (props: MediaAllProps) => {
     ]);
 
     return (
-        <div className={b(null, className)} style={{backgroundColor: color}}>
+        <div className={b(null, className)} style={{backgroundColor: color}} data-qa={qa}>
             {content}
         </div>
     );

diff --git a/src/components/Media/Video/Video.tsx b/src/components/Media/Video/Video.tsx
@@ -103,7 +103,7 @@ const Video = (props: VideoAllProps) => {
 
     const defaultVideoBlock = useMemo(() => {
         return video.src.length && !hasVideoFallback ? (
-            <div className={b('wrap', videoClassName)} style={{height}}>
+            <div className={b('wrap', videoClassName)} style={{height}} role="media-video">
                 <video
                     disablePictureInPicture={true}
                     playsInline={true}
@@ -115,7 +115,7 @@ const Video = (props: VideoAllProps) => {
                     muted={true}
                 >
                     {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (
-                        <source key={index} src={src} type={type} />
+                        <source key={index} src={src} type={type} role="media-video-source" />
                     ))}
                 </video>
             </div>

diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -259,6 +259,7 @@ export interface BackgroundMediaProps extends MediaProps, Animatable {
     fullWidthMedia?: boolean;
     className?: string;
     mediaClassName?: string;
+    qa?: string;
 }
 
 export type Coordinate = number[];

diff --git a/test-utils/custom-environment.ts b/test-utils/custom-environment.ts
@@ -13,6 +13,8 @@ class CustomEnvironment extends JsDomEnvironmetn {
     constructor(config: JestEnvironmentConfig, context: EnvironmentContext) {
         super(config, context);
         this.global.matchMedia = matchMedia;
+        this.global.HTMLMediaElement.prototype.pause = () => {};
+        this.global.HTMLMediaElement.prototype.play = () => Promise.resolve();
     }
 }
 

diff --git a/test-utils/shared/common.tsx b/test-utils/shared/common.tsx
@@ -1,4 +1,5 @@
 import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React, {ElementType} from 'react';
 
 type QA = {
@@ -32,3 +33,18 @@ export const testCustomStyle = <T,>({
 
     expect(component).toHaveStyle(style);
 };
+
+export const testAnimated = async <T,>({
+    component: Component,
+    props,
+}: {
+    component: ElementType;
+    props: T & QA;
+}) => {
+    const user = userEvent.setup();
+    render(<Component animated {...props} />);
+    const component = screen.getByTestId(props.qa);
+    await user.hover(component);
+
+    expect(component).toHaveClass('animate');
+};