diff --git a/src/blocks/Companies/Companies.tsx b/src/blocks/Companies/Companies.tsx index c4dc8d2c0..6dd052d30 100644 --- a/src/blocks/Companies/Companies.tsx +++ b/src/blocks/Companies/Companies.tsx @@ -4,20 +4,23 @@ import {Image} from '../../components'; import AnimateBlock from '../../components/AnimateBlock/AnimateBlock'; import {useTheme} from '../../context/theme'; import {CompaniesBlockProps} from '../../models'; -import {block, getThemedValue} from '../../utils'; +import {block, getQaAttrubutes, getThemedValue} from '../../utils'; import './Companies.scss'; const b = block('companies-block'); -export const CompaniesBlock = ({title, images, animated}: CompaniesBlockProps) => { +export const CompaniesBlock = ({title, images, animated, qa}: CompaniesBlockProps) => { + const qaAttributes = getQaAttrubutes(qa, 'title'); const theme = useTheme(); const themedImages = getThemedValue(images, theme) || {}; return ( - +
-

{title}

+

+ {title} +

diff --git a/src/blocks/Companies/__tests__/Companies.test.tsx b/src/blocks/Companies/__tests__/Companies.test.tsx new file mode 100644 index 000000000..85d60283e --- /dev/null +++ b/src/blocks/Companies/__tests__/Companies.test.tsx @@ -0,0 +1,108 @@ +import React from 'react'; + +import {render, screen} from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import {ThemeContext} from '../../../context/theme'; +import {CompaniesBlockProps, Theme} from '../../../models'; +import {getQaAttrubutes} from '../../../utils'; +import Companies from '../Companies'; + +const companies: CompaniesBlockProps = { + title: 'Companies Title', + animated: true, + images: { + light: { + desktop: + 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_light.svg', + tablet: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_light.svg', + mobile: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_light.svg', + alt: 'Page constructor', + }, + dark: { + desktop: + 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_dark.svg', + tablet: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_dark.svg', + mobile: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_dark.svg', + alt: 'Page constructor', + }, + }, + qa: 'companies-block', +}; + +const qaAttributes = getQaAttrubutes(companies.qa, 'title'); + +describe('Companies', () => { + test('render Companies by default', async () => { + render(); + + const component = screen.getByTestId(qaAttributes.default); + + expect(component).toBeInTheDocument(); + expect(component).toBeVisible(); + }); + + test('render Companies with title', async () => { + render(); + + const component = screen.getByTestId(qaAttributes.title); + + expect(component).toHaveTextContent(companies.title); + }); + + test('render Companies with animated', async () => { + const user = userEvent.setup(); + + render( +
+ +
, + ); + + const component = screen.getByTestId(qaAttributes.default); + await user.hover(component); + + expect(component).toHaveClass('animate'); + }); + + test('render Companies without animated', async () => { + const user = userEvent.setup(); + + render( +
+ +
, + ); + + const component = screen.getByTestId(qaAttributes.default); + await user.hover(component); + + expect(component).not.toHaveClass('animate'); + }); + + test('render Companies pass className to AnimatedBlock', async () => { + render(); + + const component = screen.getByTestId(qaAttributes.default); + + expect(component).toHaveClass('pc-companies-block'); + }); + + test.each(new Array(Theme.Light, Theme.Dark))( + 'render Companies with given %s theme', + async (theme) => { + render( + + + , + ); + + const component = screen.getByRole('img'); + + expect(component).toHaveAttribute( + 'src', + `https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_${theme}.svg`, + ); + }, + ); +}); diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 18442bb2c..a4eb7c462 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -4,7 +4,7 @@ import {ButtonSize} from '@gravity-ui/uikit'; import {GridColumnSize, GridColumnSizesType} from '../../grid/types'; import {ThemeSupporting} from '../../utils'; -import {AnalyticsEventsBase} from '../common'; +import {AnalyticsEventsBase, QAProps} from '../common'; import { AnchorProps, @@ -210,7 +210,7 @@ export interface QuestionBlockItemProps extends QuestionItem { export interface BannerBlockProps extends BannerCardProps, Animatable {} -export interface CompaniesBlockProps extends Animatable { +export interface CompaniesBlockProps extends Animatable, QAProps { title: string; images: ThemeSupporting; }