Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(Image): test for Image added #361

Merged
merged 5 commits into from
Sep 21, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@ import React from 'react';
import {render, screen} from '@testing-library/react';

import {testCustomClassName, testCustomStyle} from '../../../../test-utils/shared/common';
import {testSourceProps} from '../../../../test-utils/shared/image';
import {BackgroundImageProps} from '../../../models';
import {getQaAttrubutes} from '../../../utils';
import BackgroundImage from '../BackgroundImage';

const qa = 'background-image-component';

const imageSrc =
'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';

const qaAttributes = getQaAttrubutes(qa, 'image-desktop-source-compressed');

describe('BackgroundImage', () => {
test('Render BackgroundImage by default', async () => {
render(<BackgroundImage qa={qa} />);
Expand All @@ -21,17 +25,19 @@ describe('BackgroundImage', () => {
});

test('add image as src prop', () => {
render(<BackgroundImage src={imageSrc} />);
const component = screen.getByRole('img');

expect(component).toHaveAttribute('src', imageSrc);
testSourceProps<BackgroundImageProps>({
component: BackgroundImage,
props: {src: imageSrc, qa},
options: {qaId: qaAttributes.imageDesktopSourceCompressed},
});
});

test('add image as desktop prop', () => {
render(<BackgroundImage desktop={imageSrc} />);
const component = screen.getByRole('img');

expect(component).toHaveAttribute('src', imageSrc);
testSourceProps<BackgroundImageProps>({
component: BackgroundImage,
props: {desktop: imageSrc, qa},
options: {qaId: qaAttributes.imageDesktopSourceCompressed},
});
});

test('should hide image', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,10 @@ describe('BackgroundMedia', () => {
test('render image', () => {
const imageQaAttributes = getQaAttrubutes(
qaAttributes.mediaImageBackgroundImage,
'image-display-source',
'image-desktop-source-compressed',
);
render(<BackgroundMedia qa={qaId} image={imageUrl} />);
const component = screen.getByTestId(imageQaAttributes.imageDisplaySource);
const component = screen.getByTestId(imageQaAttributes.imageDesktopSourceCompressed);

expect(component).toBeInTheDocument();
});
Expand Down
15 changes: 5 additions & 10 deletions src/components/Button/__tests__/Button.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import React from 'react';

import {ButtonSize} from '@gravity-ui/uikit';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import {testCustomClassName} from '../../../../test-utils/shared/common';
import {testCustomClassName, testOnClick} from '../../../../test-utils/shared/common';
import {ButtonImagePosition, ButtonTheme} from '../../../models';
import Button, {ButtonProps} from '../Button';
import {ICON_QA} from '../utils';
Expand Down Expand Up @@ -63,14 +62,10 @@ describe('Button', () => {
});

test('call onClick', async () => {
const user = userEvent.setup();
const handleOnClick = jest.fn();
render(<Button text={buttonProps.text} onClick={handleOnClick} />);

const button = screen.getByRole('button');

await user.click(button);
expect(handleOnClick).toHaveBeenCalledTimes(1);
testOnClick<ButtonProps>({
component: Button,
props: {text: buttonProps.text, qa},
});
});

test.each(new Array<ButtonSize>('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
Expand Down
71 changes: 39 additions & 32 deletions src/components/Image/Image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,35 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
containerClassName?: string;
}

export interface DeviceSpecificFragmentProps extends QAProps {
disableWebp: boolean;
src: string;
breakpoint: 'md' | 'sm';
}

const checkWebP = (src: string) => {
return src.endsWith('.webp') ? src : src + '.webp';
};

const DeviceSpecificFragment = ({
disableWebp,
src,
breakpoint,
qa,
}: DeviceSpecificFragmentProps) => (
<Fragment>
{!disableWebp && (
<source
srcSet={checkWebP(src)}
type="image/webp"
media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`}
data-qa={`${qa}-compressed`}
/>
)}
<source srcSet={src} media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`} data-qa={qa} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<source srcSet={src} media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`} data-qa={qa} />
<source srcSet={src} media={`(max-width: breakpoint)`} data-qa={qa} />

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hope I understand you

</Fragment>
);

const Image = (props: ImageProps) => {
const projectSettings = useContext(ProjectSettingsContext);
const {
Expand Down Expand Up @@ -49,7 +74,7 @@ const Image = (props: ImageProps) => {
'mobile-source',
'tablet-webp-source',
'tablet-source',
'display-source',
'desktop-source-compressed',
);

const disableWebp =
Expand All @@ -61,44 +86,26 @@ const Image = (props: ImageProps) => {
return (
<picture className={containerClassName} data-qa={qa}>
{mobile && (
<Fragment>
{!disableWebp && (
<source
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)`}
data-qa={qaAttributes.mobileSource}
/>
</Fragment>
<DeviceSpecificFragment
src={mobile}
disableWebp={disableWebp}
breakpoint="sm"
qa={qaAttributes.mobileSource}
/>
)}
{tablet && (
<Fragment>
{!disableWebp && (
<source
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)`}
data-qa={qaAttributes.tabletSource}
/>
</Fragment>
<DeviceSpecificFragment
src={tablet}
disableWebp={disableWebp}
breakpoint="md"
qa={qaAttributes.tabletSource}
/>
)}
{src && !disableWebp && (
<source
srcSet={checkWebP(src)}
type="image/webp"
data-qa={qaAttributes.displaySource}
data-qa={qaAttributes.desktopSourceCompressed}
/>
)}
<ImageBase
Expand Down
131 changes: 131 additions & 0 deletions src/components/Image/__tests__/Image.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import React from 'react';

import {render, screen} from '@testing-library/react';

import {
testCustomClassName,
testCustomStyle,
testOnClick,
} from '../../../../test-utils/shared/common';
import {testSourceProps} from '../../../../test-utils/shared/image';
import Image, {ImageProps} from '../Image';
import i18n from '../i18n';

const qaId = 'image-component';

const imageSrc =
'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';

describe('Image', () => {
test('Render Image by default', async () => {
render(<Image src={imageSrc} qa={qaId} />);

const component = screen.getByTestId(qaId);
expect(component).toBeInTheDocument();
expect(component).toBeVisible();
});

test('add image as src prop', () => {
yuberdysheva marked this conversation as resolved.
Show resolved Hide resolved
testSourceProps<ImageProps>({
component: Image,
props: {src: imageSrc, qa: qaId},
});
});

test('add image as desktop prop', () => {
testSourceProps<ImageProps>({
component: Image,
props: {desktop: imageSrc, qa: qaId},
});
});

test('add image as tablet prop', () => {
testSourceProps<ImageProps>({
component: Image,
props: {desktop: imageSrc, tablet: imageSrc, qa: qaId},
});
});

test('add image as mobile prop', () => {
testSourceProps<ImageProps>({
component: Image,
props: {desktop: imageSrc, mobile: imageSrc, qa: qaId},
});
});

test('add image as src prop with disabledCompress', () => {
testSourceProps<ImageProps>({
component: Image,
props: {src: imageSrc, qa: qaId, disableCompress: true},
});
});

test('add image as desktop prop with disabledCompress', () => {
testSourceProps<ImageProps>({
component: Image,
props: {desktop: imageSrc, qa: qaId, disableCompress: true},
});
});

test('add image as tablet prop with disabledCompress', () => {
testSourceProps<ImageProps>({
component: Image,
props: {desktop: imageSrc, tablet: imageSrc, qa: qaId, disableCompress: true},
});
});

test('add image as mobile prop with disabledCompress', () => {
testSourceProps<ImageProps>({
component: Image,
props: {desktop: imageSrc, mobile: imageSrc, qa: qaId, disableCompress: true},
});
});

test('add className', () => {
testCustomClassName<ImageProps>({
component: Image,
props: {src: imageSrc, qa: qaId},
options: {customClassNameProp: 'containerClassName'},
});
});

test('add className to image', () => {
const className = 'custom-class-name';

render(<Image className={className} src={imageSrc} qa={qaId} />);

const component = screen.getByRole('img');
expect(component).toHaveClass(className);
});

test('add style', () => {
testCustomStyle<ImageProps>({
component: Image,
props: {src: imageSrc, qa: qaId},
options: {role: 'img'},
});
});

test('render default "alt"', () => {
render(<Image src={imageSrc} qa={qaId} />);

const component = screen.getByRole('img');
expect(component).toHaveAttribute('alt', i18n('img-alt'));
});

test('render custom "alt"', () => {
const alt = 'defined-alt';
render(<Image src={imageSrc} alt={alt} qa={qaId} />);

const component = screen.getByRole('img');
expect(component).toHaveAttribute('alt', alt);
});

test('call onClick', async () => {
testOnClick<ImageProps>({
component: Image,
props: {src: imageSrc, qa: qaId},
options: {role: 'img'},
});
});
});
Loading
Loading