Skip to content

Commit 031849a

Browse files
niktverdniktverd
authored
test(CTABlock): test for CTABlock added (#116)
1 parent 9a51641 commit 031849a

File tree

6 files changed

+255
-48
lines changed

6 files changed

+255
-48
lines changed

‎src/blocks/Banner/__tests__/Banner.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,28 +109,28 @@ describe('Banner', () => {
109109
test('Render with title', async () => {
110110
testContentWithTitle<BannerProps>({
111111
component: Banner,
112-
props: bannerData,
112+
props: pick(bannerData, 'title'),
113113
});
114114
});
115115

116116
test('Render with text', async () => {
117117
testContentWithText<BannerProps>({
118118
component: Banner,
119-
props: bannerData,
119+
props: pick(bannerData, 'text'),
120120
});
121121
});
122122

123123
test('Render with additionalInfo', async () => {
124124
testContentWithAdditionalInfo<BannerProps>({
125125
component: Banner,
126-
props: bannerData,
126+
props: pick(bannerData, 'additionalInfo'),
127127
});
128128
});
129129

130130
test.each(new Array<ContentSize>('s', 'l'))('Render with given "%s" size', (size) => {
131131
testContentWithSize<BannerProps>({
132132
component: Banner,
133-
props: {...bannerData, size},
133+
props: {qa: bannerData.qa, size},
134134
options: {qaId: contentQaAttributes.container},
135135
});
136136
});
@@ -139,7 +139,7 @@ describe('Banner', () => {
139139
const linkQa = getQaAttributes(contentQaAttributes.link, ['normal']);
140140
testContentWithLinks<BannerProps>({
141141
component: Banner,
142-
props: bannerData,
142+
props: pick(bannerData, 'links', 'qa'),
143143
options: {qaId: linkQa.normal},
144144
});
145145
});
@@ -165,7 +165,7 @@ describe('Banner', () => {
165165
(theme) => {
166166
testContentWithTheme<BannerProps>({
167167
component: Banner,
168-
props: {...bannerData, theme},
168+
props: {qa: bannerData.qa, theme},
169169
options: {qaId: contentQaAttributes.container},
170170
});
171171
},
@@ -174,7 +174,7 @@ describe('Banner', () => {
174174
test('Render with list', async () => {
175175
testContentWithList<BannerProps>({
176176
component: Banner,
177-
props: bannerData,
177+
props: pick(bannerData, 'list', 'qa'),
178178
options: {qaId: contentQaAttributes.list},
179179
});
180180
});

‎src/blocks/CTA/CTA.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,21 @@ import {BlogMetrikaGoalIds} from '../../constants';
77
import {CTAProps} from '../../models/blocks';
88
import {PaddingsDirections} from '../../models/paddings';
99
import {block} from '../../utils/cn';
10-
import {getBlogElementMetrika, updateContentSizes} from '../../utils/common';
10+
import {getBlogElementMetrika, getQaAttributes, updateContentSizes} from '../../utils/common';
1111

1212
import './CTA.scss';
1313

1414
const b = block('cta');
1515

16-
export const CTA = ({items, paddingTop, paddingBottom}: CTAProps) => {
16+
export const CTA = ({items, paddingTop, paddingBottom, qa}: CTAProps) => {
1717
/**
1818
* @deprecated Metrika will be deleted after launch of analyticsEvents
1919
*/
2020
const metrikaGoal: NewMetrikaGoal = {
2121
name: BlogMetrikaGoalIds.cta,
2222
isCrossSite: true,
2323
};
24+
const qaAttributes = getQaAttributes(qa, 'card');
2425

2526
return (
2627
<Wrapper
@@ -29,7 +30,7 @@ export const CTA = ({items, paddingTop, paddingBottom}: CTAProps) => {
2930
[PaddingsDirections.bottom]: paddingBottom,
3031
}}
3132
className={b('content')}
32-
qa="blog-cta-content"
33+
qa={qaAttributes.wrapper}
3334
>
3435
{items.map((content: ContentBlockProps, index: number) => {
3536
const contentData = updateContentSizes(content);
@@ -40,8 +41,8 @@ export const CTA = ({items, paddingTop, paddingBottom}: CTAProps) => {
4041
});
4142

4243
return (
43-
<div key={index} className={b('card')} data-qa="blog-cta-card">
44-
<Content {...contentData} />
44+
<div key={index} className={b('card')} data-qa={qaAttributes.card}>
45+
<Content {...contentData} qa={qaAttributes.content} />
4546
</div>
4647
);
4748
})}

‎src/blocks/CTA/__tests__/CTA.test.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
3+
import {LinkTheme} from '@gravity-ui/page-constructor';
4+
import {render, screen} from '@testing-library/react';
5+
6+
import {PADDING_SIZES} from '../../../../test-utils/constants';
7+
import {testPaddingBottom, testPaddingTop} from '../../../../test-utils/shared/common';
8+
import {testContentWithLinks, testContentWithTitle} from '../../../../test-utils/shared/content';
9+
import {CTAProps} from '../../../models/blocks';
10+
import {PaddingSize} from '../../../models/paddings';
11+
import {getQaAttributes} from '../../../utils/common';
12+
import {CTA} from '../CTA';
13+
14+
const ctaData = {
15+
items: [
16+
{
17+
title: 'CTA Title',
18+
text: 'CTA text',
19+
additionalInfo: 'additional info',
20+
centered: true,
21+
links: [{url: 'https://example.com', theme: 'normal' as LinkTheme}],
22+
list: [
23+
{
24+
icon: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png',
25+
title: 'list title',
26+
text: 'list text',
27+
},
28+
],
29+
},
30+
],
31+
32+
qa: 'colored-text',
33+
};
34+
35+
const qaAttributes = getQaAttributes(ctaData.qa);
36+
const contentQaAttributes = getQaAttributes(qaAttributes.content, 'link');
37+
38+
describe('CTA', () => {
39+
test('Render by default', async () => {
40+
render(<CTA {...ctaData} />);
41+
const coloredText = screen.getByText(ctaData.items[0].title);
42+
expect(coloredText).toBeInTheDocument();
43+
expect(coloredText).toBeVisible();
44+
});
45+
46+
test.each(new Array<PaddingSize>(...PADDING_SIZES))(
47+
'render with given "%s" paddingTop size',
48+
(size: PaddingSize) => {
49+
testPaddingTop<CTAProps>({
50+
component: CTA,
51+
props: {...ctaData, paddingTop: size},
52+
options: {qaId: qaAttributes.wrapper},
53+
});
54+
},
55+
);
56+
57+
test.each(new Array<PaddingSize>(...PADDING_SIZES))(
58+
'render with given "%s" paddingBottom size',
59+
(size: PaddingSize) => {
60+
testPaddingBottom<CTAProps>({
61+
component: CTA,
62+
props: {...ctaData, paddingBottom: size},
63+
options: {qaId: qaAttributes.wrapper},
64+
});
65+
},
66+
);
67+
68+
test('Render with title', async () => {
69+
testContentWithTitle<CTAProps>({
70+
component: CTA,
71+
props: ctaData,
72+
options: {
73+
textToFind: ctaData.items[0].title,
74+
},
75+
});
76+
});
77+
78+
test('Render with links', async () => {
79+
const linkQa = getQaAttributes(contentQaAttributes.link, ['normal']);
80+
testContentWithLinks<CTAProps>({
81+
component: CTA,
82+
props: ctaData,
83+
options: {qaId: linkQa.normal},
84+
});
85+
});
86+
});

‎src/blocks/ColoredText/__tests__/ColoredText.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -102,36 +102,36 @@ describe('ColoredText', () => {
102102
test('Render with title', async () => {
103103
testContentWithTitle<ColoredTextProps>({
104104
component: ColoredText,
105-
props: coloredTextData,
105+
props: pick(coloredTextData, 'title'),
106106
});
107107
});
108108

109109
test('Render with text', async () => {
110110
testContentWithText<ColoredTextProps>({
111111
component: ColoredText,
112-
props: coloredTextData,
112+
props: pick(coloredTextData, 'text'),
113113
});
114114
});
115115

116116
test('Render with additionalInfo', async () => {
117117
testContentWithAdditionalInfo<ColoredTextProps>({
118118
component: ColoredText,
119-
props: coloredTextData,
119+
props: pick(coloredTextData, 'additionalInfo'),
120120
});
121121
});
122122

123123
test.each(new Array<ContentSize>('s', 'l'))('Render with given "%s" size', (size) => {
124124
testContentWithSize<ColoredTextProps>({
125125
component: ColoredText,
126-
props: {...coloredTextData, size},
126+
props: {qa: coloredTextData.qa, size},
127127
options: {qaId: contentQaAttributes.container},
128128
});
129129
});
130130

131131
test('Render with centered', async () => {
132132
testContentWithCentered<ColoredTextProps>({
133133
component: ColoredText,
134-
props: coloredTextData,
134+
props: {...pick(coloredTextData, 'centered', 'qa')},
135135
options: {qaId: contentQaAttributes.container},
136136
});
137137
});
@@ -141,7 +141,7 @@ describe('ColoredText', () => {
141141
(theme) => {
142142
testContentWithTheme<ColoredTextProps>({
143143
component: ColoredText,
144-
props: {...coloredTextData, theme},
144+
props: {qa: coloredTextData.qa, theme},
145145
options: {qaId: contentQaAttributes.container},
146146
});
147147
},
@@ -150,7 +150,7 @@ describe('ColoredText', () => {
150150
test('Render with list', async () => {
151151
testContentWithList<ColoredTextProps>({
152152
component: ColoredText,
153-
props: coloredTextData,
153+
props: pick(coloredTextData, 'list', 'qa'),
154154
options: {qaId: contentQaAttributes.list},
155155
});
156156
});

‎src/models/blocks.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,8 @@ export type ColoredTextProps = ContentBlockProps &
3333
};
3434
} & PaddingsYFMProps;
3535

36-
export type CTAProps = {
36+
export type CTAProps = QAProps & {
3737
items: Array<ContentBlockProps>;
38-
columnCount?: number;
3938
} & PaddingsYFMProps;
4039

4140
export type HeaderProps = HeaderBlockProps & PaddingsYFMProps;

0 commit comments

Comments
 (0)