Skip to content

Commit 131dff3

Browse files
niktverdniktverd
authored
test(Image): test for Image added (#361)
* test(Image): test for Image added
1 parent 6d60e5b commit 131dff3

File tree

7 files changed

+327
-68
lines changed

7 files changed

+327
-68
lines changed

‎src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ import React from 'react';
33
import {render, screen} from '@testing-library/react';
44

55
import {testCustomClassName, testCustomStyle} from '../../../../test-utils/shared/common';
6+
import {testSourceProps} from '../../../../test-utils/shared/image';
67
import {BackgroundImageProps} from '../../../models';
8+
import {getQaAttrubutes} from '../../../utils';
79
import BackgroundImage from '../BackgroundImage';
810

911
const qa = 'background-image-component';
1012

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

16+
const qaAttributes = getQaAttrubutes(qa, 'image-desktop-source-compressed');
17+
1418
describe('BackgroundImage', () => {
1519
test('Render BackgroundImage by default', async () => {
1620
render(<BackgroundImage qa={qa} />);
@@ -21,17 +25,19 @@ describe('BackgroundImage', () => {
2125
});
2226

2327
test('add image as src prop', () => {
24-
render(<BackgroundImage src={imageSrc} />);
25-
const component = screen.getByRole('img');
26-
27-
expect(component).toHaveAttribute('src', imageSrc);
28+
testSourceProps<BackgroundImageProps>({
29+
component: BackgroundImage,
30+
props: {src: imageSrc, qa},
31+
options: {qaId: qaAttributes.imageDesktopSourceCompressed},
32+
});
2833
});
2934

3035
test('add image as desktop prop', () => {
31-
render(<BackgroundImage desktop={imageSrc} />);
32-
const component = screen.getByRole('img');
33-
34-
expect(component).toHaveAttribute('src', imageSrc);
36+
testSourceProps<BackgroundImageProps>({
37+
component: BackgroundImage,
38+
props: {desktop: imageSrc, qa},
39+
options: {qaId: qaAttributes.imageDesktopSourceCompressed},
40+
});
3541
});
3642

3743
test('should hide image', () => {

‎src/components/BackgroundMedia/__tests__/BackgroundMedia.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,10 @@ describe('BackgroundMedia', () => {
109109
test('render image', () => {
110110
const imageQaAttributes = getQaAttrubutes(
111111
qaAttributes.mediaImageBackgroundImage,
112-
'image-display-source',
112+
'image-desktop-source-compressed',
113113
);
114114
render(<BackgroundMedia qa={qaId} image={imageUrl} />);
115-
const component = screen.getByTestId(imageQaAttributes.imageDisplaySource);
115+
const component = screen.getByTestId(imageQaAttributes.imageDesktopSourceCompressed);
116116

117117
expect(component).toBeInTheDocument();
118118
});

‎src/components/Button/__tests__/Button.test.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import React from 'react';
22

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

7-
import {testCustomClassName} from '../../../../test-utils/shared/common';
6+
import {testCustomClassName, testOnClick} from '../../../../test-utils/shared/common';
87
import {ButtonImagePosition, ButtonTheme} from '../../../models';
98
import Button, {ButtonProps} from '../Button';
109
import {ICON_QA} from '../utils';
@@ -63,14 +62,10 @@ describe('Button', () => {
6362
});
6463

6564
test('call onClick', async () => {
66-
const user = userEvent.setup();
67-
const handleOnClick = jest.fn();
68-
render(<Button text={buttonProps.text} onClick={handleOnClick} />);
69-
70-
const button = screen.getByRole('button');
71-
72-
await user.click(button);
73-
expect(handleOnClick).toHaveBeenCalledTimes(1);
65+
testOnClick<ButtonProps>({
66+
component: Button,
67+
props: {text: buttonProps.text, qa},
68+
});
7469
});
7570

7671
test.each(new Array<ButtonSize>('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {

‎src/components/Image/Image.tsx‎

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,35 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
1616
containerClassName?: string;
1717
}
1818

19+
export interface DeviceSpecificFragmentProps extends QAProps {
20+
disableWebp: boolean;
21+
src: string;
22+
breakpoint: number;
23+
}
24+
1925
const checkWebP = (src: string) => {
2026
return src.endsWith('.webp') ? src : src + '.webp';
2127
};
2228

29+
const DeviceSpecificFragment = ({
30+
disableWebp,
31+
src,
32+
breakpoint,
33+
qa,
34+
}: DeviceSpecificFragmentProps) => (
35+
<Fragment>
36+
{!disableWebp && (
37+
<source
38+
srcSet={checkWebP(src)}
39+
type="image/webp"
40+
media={`(max-width: ${breakpoint}px)`}
41+
data-qa={`${qa}-compressed`}
42+
/>
43+
)}
44+
<source srcSet={src} media={`(max-width: ${breakpoint}px)`} data-qa={qa} />
45+
</Fragment>
46+
);
47+
2348
const Image = (props: ImageProps) => {
2449
const projectSettings = useContext(ProjectSettingsContext);
2550
const {
@@ -49,7 +74,7 @@ const Image = (props: ImageProps) => {
4974
'mobile-source',
5075
'tablet-webp-source',
5176
'tablet-source',
52-
'display-source',
77+
'desktop-source-compressed',
5378
);
5479

5580
const disableWebp =
@@ -61,44 +86,26 @@ const Image = (props: ImageProps) => {
6186
return (
6287
<picture className={containerClassName} data-qa={qa}>
6388
{mobile && (
64-
<Fragment>
65-
{!disableWebp && (
66-
<source
67-
srcSet={checkWebP(mobile)}
68-
type="image/webp"
69-
media={`(max-width: ${BREAKPOINTS.sm}px)`}
70-
data-qa={qaAttributes.mobileWebpSource}
71-
/>
72-
)}
73-
<source
74-
srcSet={mobile}
75-
media={`(max-width: ${BREAKPOINTS.sm}px)`}
76-
data-qa={qaAttributes.mobileSource}
77-
/>
78-
</Fragment>
89+
<DeviceSpecificFragment
90+
src={mobile}
91+
disableWebp={disableWebp}
92+
breakpoint={BREAKPOINTS.sm}
93+
qa={qaAttributes.mobileSource}
94+
/>
7995
)}
8096
{tablet && (
81-
<Fragment>
82-
{!disableWebp && (
83-
<source
84-
srcSet={checkWebP(tablet)}
85-
type="image/webp"
86-
media={`(max-width: ${BREAKPOINTS.md}px)`}
87-
data-qa={qaAttributes.tabletWebpSource}
88-
/>
89-
)}
90-
<source
91-
srcSet={tablet}
92-
media={`(max-width: ${BREAKPOINTS.md}px)`}
93-
data-qa={qaAttributes.tabletSource}
94-
/>
95-
</Fragment>
97+
<DeviceSpecificFragment
98+
src={tablet}
99+
disableWebp={disableWebp}
100+
breakpoint={BREAKPOINTS.md}
101+
qa={qaAttributes.tabletSource}
102+
/>
96103
)}
97104
{src && !disableWebp && (
98105
<source
99106
srcSet={checkWebP(src)}
100107
type="image/webp"
101-
data-qa={qaAttributes.displaySource}
108+
data-qa={qaAttributes.desktopSourceCompressed}
102109
/>
103110
)}
104111
<ImageBase

‎src/components/Image/__tests__/Image.test.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React from 'react';
2+
3+
import {render, screen} from '@testing-library/react';
4+
5+
import {
6+
testCustomClassName,
7+
testCustomStyle,
8+
testOnClick,
9+
} from '../../../../test-utils/shared/common';
10+
import {testSourceProps} from '../../../../test-utils/shared/image';
11+
import Image, {ImageProps} from '../Image';
12+
import i18n from '../i18n';
13+
14+
const qaId = 'image-component';
15+
16+
const imageSrc =
17+
'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';
18+
19+
describe('Image', () => {
20+
test('Render Image by default', async () => {
21+
render(<Image src={imageSrc} qa={qaId} />);
22+
23+
const component = screen.getByTestId(qaId);
24+
expect(component).toBeInTheDocument();
25+
expect(component).toBeVisible();
26+
});
27+
28+
test('add image as src prop', () => {
29+
testSourceProps<ImageProps>({
30+
component: Image,
31+
props: {src: imageSrc, qa: qaId},
32+
});
33+
});
34+
35+
test('add image as desktop prop', () => {
36+
testSourceProps<ImageProps>({
37+
component: Image,
38+
props: {desktop: imageSrc, qa: qaId},
39+
});
40+
});
41+
42+
test('add image as tablet prop', () => {
43+
testSourceProps<ImageProps>({
44+
component: Image,
45+
props: {desktop: imageSrc, tablet: imageSrc, qa: qaId},
46+
});
47+
});
48+
49+
test('add image as mobile prop', () => {
50+
testSourceProps<ImageProps>({
51+
component: Image,
52+
props: {desktop: imageSrc, mobile: imageSrc, qa: qaId},
53+
});
54+
});
55+
56+
test('add image as src prop with disabledCompress', () => {
57+
testSourceProps<ImageProps>({
58+
component: Image,
59+
props: {src: imageSrc, qa: qaId, disableCompress: true},
60+
});
61+
});
62+
63+
test('add image as desktop prop with disabledCompress', () => {
64+
testSourceProps<ImageProps>({
65+
component: Image,
66+
props: {desktop: imageSrc, qa: qaId, disableCompress: true},
67+
});
68+
});
69+
70+
test('add image as tablet prop with disabledCompress', () => {
71+
testSourceProps<ImageProps>({
72+
component: Image,
73+
props: {desktop: imageSrc, tablet: imageSrc, qa: qaId, disableCompress: true},
74+
});
75+
});
76+
77+
test('add image as mobile prop with disabledCompress', () => {
78+
testSourceProps<ImageProps>({
79+
component: Image,
80+
props: {desktop: imageSrc, mobile: imageSrc, qa: qaId, disableCompress: true},
81+
});
82+
});
83+
84+
test('add className', () => {
85+
testCustomClassName<ImageProps>({
86+
component: Image,
87+
props: {src: imageSrc, qa: qaId},
88+
options: {customClassNameProp: 'containerClassName'},
89+
});
90+
});
91+
92+
test('add className to image', () => {
93+
const className = 'custom-class-name';
94+
95+
render(<Image className={className} src={imageSrc} qa={qaId} />);
96+
97+
const component = screen.getByRole('img');
98+
expect(component).toHaveClass(className);
99+
});
100+
101+
test('add style', () => {
102+
testCustomStyle<ImageProps>({
103+
component: Image,
104+
props: {src: imageSrc, qa: qaId},
105+
options: {role: 'img'},
106+
});
107+
});
108+
109+
test('render default "alt"', () => {
110+
render(<Image src={imageSrc} qa={qaId} />);
111+
112+
const component = screen.getByRole('img');
113+
expect(component).toHaveAttribute('alt', i18n('img-alt'));
114+
});
115+
116+
test('render custom "alt"', () => {
117+
const alt = 'defined-alt';
118+
render(<Image src={imageSrc} alt={alt} qa={qaId} />);
119+
120+
const component = screen.getByRole('img');
121+
expect(component).toHaveAttribute('alt', alt);
122+
});
123+
124+
test('call onClick', async () => {
125+
testOnClick<ImageProps>({
126+
component: Image,
127+
props: {src: imageSrc, qa: qaId},
128+
options: {role: 'img'},
129+
});
130+
});
131+
});

0 commit comments

Comments
 (0)