diff --git a/src/components/BackgroundImage/BackgroundImage.tsx b/src/components/BackgroundImage/BackgroundImage.tsx
index 58c7e7fe9..48911d705 100644
--- 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
index 428a02543..d5a505f15 100644
--- 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
new file mode 100644
index 000000000..5fe0a0423
--- /dev/null
+++ 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
index e6217d26f..1861be1e7 100644
--- 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
index 71d294a1b..153ea04cc 100644
--- 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,6 +90,7 @@ const Image = (props: ImageAllProps) => {
                 {...itemData}
                 imageClassName={imageClass}
                 imageStyle={{height}}
+                qa={qaAttributes.fullscreenImage}
             />
         );
     };
@@ -86,15 +98,27 @@ const Image = (props: ImageAllProps) => {
     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[]) => {
diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx
index 2c519cec9..d065a77d6 100644
--- a/src/components/Media/Media.tsx
+++ b/src/components/Media/Media.tsx
@@ -1,7 +1,7 @@
 import React, {ReactElement, useMemo, useState} from 'react';
 
-import {MediaProps} from '../../models';
-import {block} from '../../utils';
+import {MediaProps, QAProps} from '../../models';
+import {block, getQaAttrubutes} from '../../utils';
 import YoutubeBlock from '../VideoBlock/VideoBlock';
 
 import DataLens from './DataLens/DataLens';
@@ -13,7 +13,7 @@ import './Media.scss';
 
 const b = block('Media');
 
-export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps {
+export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
     youtubeClassName?: string;
 }
@@ -39,10 +39,13 @@ export const Media = (props: MediaAllProps) => {
         isBackground,
         playButton,
         customBarControlsClassName,
+        qa,
     } = props;
 
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
 
+    const qaAttributes = getQaAttrubutes(qa, 'video');
+
     const content = useMemo(() => {
         let result: ReactElement | ReactElement[] = [];
 
@@ -58,6 +61,7 @@ export const Media = (props: MediaAllProps) => {
                     video={video}
                     hasVideoFallback={hasVideoFallback}
                     fullscreen={fullscreen}
+                    qa={qaAttributes.image}
                 />,
             );
         }
@@ -79,9 +83,9 @@ export const Media = (props: MediaAllProps) => {
             };
 
             if (fullscreen) {
-                result.push(<FullscreenVideo {...videoProps} />);
+                result.push(<FullscreenVideo {...videoProps} qa={qaAttributes.video} />);
             } else {
-                result.push(<Video {...videoProps} />);
+                result.push(<Video {...videoProps} qa={qaAttributes.video} />);
             }
         }
 
@@ -114,6 +118,9 @@ export const Media = (props: MediaAllProps) => {
         imageClassName,
         isBackground,
         hasVideoFallback,
+        fullscreen,
+        qaAttributes.image,
+        qaAttributes.video,
         videoClassName,
         metrika,
         analyticsEvents,
@@ -122,11 +129,10 @@ export const Media = (props: MediaAllProps) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
-        fullscreen,
     ]);
 
     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
index b7a0a952b..8d82e00d6 100644
--- a/src/components/Media/Video/Video.tsx
+++ b/src/components/Media/Video/Video.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useMemo, useRef} from 'react';
 
-import {MediaComponentVideoProps, MediaVideoType, PlayButtonProps} from '../../../models';
-import {block} from '../../../utils';
+import {MediaComponentVideoProps, MediaVideoType, PlayButtonProps, QAProps} from '../../../models';
+import {block, getQaAttrubutes} from '../../../utils';
 import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 
 import {getVideoTypesWithPriority} from './utils';
@@ -22,7 +22,10 @@ interface InnerVideoProps {
     hasVideoFallback: boolean;
 }
 
-export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps &
+    MediaComponentVideoProps &
+    InnerVideoProps &
+    QAProps;
 
 const Video = (props: VideoAllProps) => {
     const {
@@ -37,8 +40,11 @@ const Video = (props: VideoAllProps) => {
         playVideo,
         setHasVideoFallback,
         hasVideoFallback,
+        qa,
     } = props;
 
+    const qaAttributes = getQaAttrubutes(qa, 'source');
+
     const ref = useRef<HTMLVideoElement>(null);
 
     useEffect(() => {
@@ -115,7 +121,11 @@ 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}}
+                data-qa={qaAttributes.default}
+            >
                 <video
                     disablePictureInPicture
                     playsInline
@@ -129,12 +139,20 @@ const Video = (props: VideoAllProps) => {
                     aria-label={video.ariaLabel}
                 >
                     {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (
-                        <source key={index} src={src} type={type} />
+                        <source key={index} src={src} type={type} data-qa={qaAttributes.source} />
                     ))}
                 </video>
             </div>
         ) : null;
-    }, [video, videoClassName, hasVideoFallback, height]);
+    }, [
+        video.src,
+        video.ariaLabel,
+        hasVideoFallback,
+        videoClassName,
+        height,
+        qaAttributes.default,
+        qaAttributes.source,
+    ]);
 
     switch (video.type) {
         case MediaVideoType.Player:
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
index 8f92481c6..9b03f320e 100644
--- a/src/models/constructor-items/common.ts
+++ b/src/models/constructor-items/common.ts
@@ -253,7 +253,7 @@ export interface MediaProps
     color?: string;
 }
 
-export interface BackgroundMediaProps extends MediaProps, Animatable {
+export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;
     className?: string;
     mediaClassName?: string;
diff --git a/src/utils/blocks.ts b/src/utils/blocks.ts
index c94497fbc..5710097d2 100644
--- a/src/utils/blocks.ts
+++ b/src/utils/blocks.ts
@@ -1,4 +1,4 @@
-import {camelCase} from 'lodash';
+import {camelCase, flatten} from 'lodash';
 
 import {ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize} from '../models';
 
@@ -41,7 +41,7 @@ const BLOCK_ELEMENTS = [
 
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
 
-const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button', 'animate'];
 
 export function getHeaderTag(size: TextSize) {
     switch (size) {
@@ -133,15 +133,17 @@ export const getShareLink = (
     }
 };
 
-export const getQaAttrubutes = (qa?: string, customKeys: Array<string> = []) => {
+export const getQaAttrubutes = (qa?: string, ...customKeys: (string | Array<string>)[]) => {
     const attributes: Record<string, string> = {};
 
     if (qa) {
-        const keys = QA_ATTRIBUTES_KEYS.concat(customKeys);
+        const keys = QA_ATTRIBUTES_KEYS.concat(flatten(customKeys));
 
         keys.forEach((key) => {
             attributes[camelCase(key)] = `${qa}-${key}`;
         });
+
+        attributes.default = qa;
     }
 
     return attributes;
diff --git a/test-utils/custom-environment.ts b/test-utils/custom-environment.ts
index 0d8aa4351..00fd5a02a 100644
--- 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
index 9c5c42da9..0d5028851 100644
--- a/test-utils/shared/common.tsx
+++ b/test-utils/shared/common.tsx
@@ -1,18 +1,21 @@
 import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React, {ElementType} from 'react';
 
 import {QAProps} from '../../src/models/common';
 import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
 
+type CommonTestArgs<T> = {
+    component: ElementType;
+    props: T & QAProps;
+    options?: {qaId?: string};
+};
+
 export const testCustomClassName = <T,>({
     component: Component,
     props,
     options,
-}: {
-    component: ElementType;
-    props: T & QAProps;
-    options?: {qaId?: string};
-}) => {
+}: CommonTestArgs<T>) => {
     if (!props.qa) {
         throw new Error(ERROR_INPUT_DATA_MESSAGE);
     }
@@ -23,13 +26,7 @@ export const testCustomClassName = <T,>({
     expect(anchor).toHaveClass(className);
 };
 
-export const testCustomStyle = <T,>({
-    component: Component,
-    props,
-}: {
-    component: ElementType;
-    props: T & QAProps;
-}) => {
+export const testCustomStyle = <T,>({component: Component, props}: CommonTestArgs<T>) => {
     if (!props.qa) {
         throw new Error(ERROR_INPUT_DATA_MESSAGE);
     }
@@ -41,3 +38,20 @@ export const testCustomStyle = <T,>({
 
     expect(component).toHaveStyle(style);
 };
+
+export const testAnimated = async <T,>({
+    component: Component,
+    props,
+    options,
+}: CommonTestArgs<T>) => {
+    if (!options?.qaId) {
+        throw new Error(ERROR_INPUT_DATA_MESSAGE);
+    }
+
+    const user = userEvent.setup();
+    render(<Component animated {...props} />);
+    const component = screen.getByTestId(options?.qaId);
+    await user.hover(component);
+
+    expect(component).toHaveClass('animate');
+};