Skip to content

Commit 1d60cbc

Browse files
Wesley-0808github-actions[bot]tdesign-bot
authored
test(typography): improve test coverage and fix mark props(#5705)
* test: text * fix: text mark * test: title * test: paragraph * chore: update common * chore: test * chore: fix lint * chore: test name * chore: stash changelog [ci skip] --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: tdesign-bot <[email protected]>
1 parent 74f34cf commit 1d60cbc

File tree

8 files changed

+373
-75
lines changed

8 files changed

+373
-75
lines changed

‎packages/components/typography/__tests__/typography-paragraph.test.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { mount } from '@vue/test-utils';
2+
import { Paragraph } from '@tdesign/components/typography';
3+
import { nextTick } from 'vue';
4+
5+
describe('Typography Paragraph', () => {
6+
const longTextString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
7+
const shortText = 'TDesign was founded with the principles of open-source collaboration from the beginning.';
8+
const ellipsisText = new RegExp('...');
9+
10+
describe('props', () => {
11+
it(':content[String/Function]', () => {
12+
const defaultWrapperSlot = mount(() => <Paragraph>{shortText}</Paragraph>);
13+
const propWrapperString = mount(() => <Paragraph content={shortText}></Paragraph>);
14+
15+
expect(defaultWrapperSlot.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
16+
expect(propWrapperString.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
17+
});
18+
19+
it(':ellipsis[boolean]', () => {
20+
const wrapper = mount(() => <Paragraph ellipsis>{longTextString}</Paragraph>);
21+
22+
expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
23+
});
24+
25+
it(':ellipsis[object]', async () => {
26+
const wrapper = mount(() => (
27+
<Paragraph
28+
ellipsis={{
29+
expandable: true,
30+
collapsible: true,
31+
}}
32+
>
33+
{longTextString}
34+
</Paragraph>
35+
));
36+
37+
wrapper.find('.t-typography-ellipsis-symbol').trigger('click');
38+
await nextTick();
39+
expect(wrapper.find('.t-typography-ellipsis-symbol').element.innerHTML).toBe('收起');
40+
});
41+
});
42+
});

‎packages/components/typography/__tests__/typography-text.test.tsx‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import { mount } from '@vue/test-utils';
2+
import { Text } from '@tdesign/components';
3+
import type { TdTextProps } from '@tdesign/components';
4+
import { nextTick } from 'vue';
5+
6+
describe('Typography Text', () => {
7+
const longTextString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
8+
const shortText = 'TDesign was founded with the principles of open-source collaboration from the beginning.';
9+
const ellipsisText = new RegExp('...');
10+
11+
describe('props', () => {
12+
it(':code[Boolean]', () => {
13+
const wrapper = mount(() => <Text code>{shortText}</Text>);
14+
15+
expect(wrapper.find('code').element.innerHTML).toMatch(new RegExp(shortText));
16+
});
17+
18+
it(':content[String/Function/Slot]', () => {
19+
const defaultWrapperSlot = mount(() => <Text>{shortText}</Text>);
20+
const propWrapperString = mount(() => <Text content={shortText}></Text>);
21+
const propWrapperFunction = mount(() => <Text content={() => shortText}></Text>);
22+
const propWrapperSlot = mount(() => <Text v-slots={{ content: () => <>{shortText}</> }}></Text>);
23+
24+
expect(defaultWrapperSlot.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
25+
expect(propWrapperString.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
26+
expect(propWrapperFunction.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
27+
expect(propWrapperSlot.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
28+
});
29+
30+
it(':copyable[object]', async () => {
31+
const handleCopy = vi.fn();
32+
const renderCopySlot = () => 'test';
33+
const wrapper = mount(() => (
34+
<Text
35+
id="test"
36+
copyable={{
37+
onCopy: handleCopy,
38+
suffix: renderCopySlot,
39+
tooltipProps: { trigger: 'click', attach: '#test' },
40+
}}
41+
>
42+
{shortText}
43+
</Text>
44+
));
45+
46+
expect(wrapper.find('.t-button').element.innerHTML).toMatch(new RegExp('test'));
47+
48+
wrapper.find('.t-button').trigger('click');
49+
50+
expect(handleCopy).toHaveBeenCalled();
51+
});
52+
53+
it(':delete[Boolean]', () => {
54+
const wrapper = mount(() => <Text delete>{longTextString}</Text>);
55+
56+
expect(wrapper.find('del').exists()).eq(true);
57+
});
58+
59+
it(':disabled[Boolean]', () => {
60+
const wrapper = mount(() => <Text disabled>{longTextString}</Text>);
61+
62+
expect(wrapper.find('.t-typography').classes('t-typography--disabled')).eq(true);
63+
});
64+
65+
it(':ellipsis[Boolean]', () => {
66+
const wrapper = mount(() => <Text ellipsis>{longTextString}</Text>);
67+
68+
expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
69+
});
70+
71+
it(':ellipsis[object]', async () => {
72+
const onExpand = vi.fn();
73+
const wrapper = mount(() => (
74+
<Text
75+
ellipsis={{
76+
row: 1,
77+
onExpand,
78+
expandable: true,
79+
collapsible: true,
80+
tooltipProps: { content: 'tooltip content' },
81+
}}
82+
>
83+
{longTextString}
84+
</Text>
85+
));
86+
87+
await nextTick();
88+
89+
const expandSymbol = wrapper.find('.t-typography-ellipsis-symbol');
90+
expect(expandSymbol.exists()).toBe(true);
91+
92+
await expandSymbol.trigger('click');
93+
expect(onExpand).toHaveBeenCalledWith(true);
94+
95+
const collapseSymbol = wrapper.find('.t-typography-ellipsis-symbol');
96+
expect(collapseSymbol.exists()).toBe(true);
97+
98+
const collapsibleWrapper = mount(() => (
99+
<Text
100+
ellipsis={{
101+
row: 2,
102+
expandable: true,
103+
collapsible: false,
104+
onExpand,
105+
}}
106+
>
107+
{longTextString}
108+
</Text>
109+
));
110+
111+
await nextTick();
112+
113+
const expandBtn = collapsibleWrapper.find('.t-typography-ellipsis-symbol');
114+
await expandBtn.trigger('click');
115+
116+
expect(collapsibleWrapper.find('.t-typography-ellipsis-symbol').exists()).toBe(false);
117+
});
118+
119+
it(':ellipsis[object(slot)]', async () => {
120+
const wrapper = mount(() => (
121+
<Text
122+
ellipsis={{
123+
expandable: true,
124+
suffix: () => '...更多',
125+
}}
126+
>
127+
{longTextString}
128+
</Text>
129+
));
130+
131+
const expandSymbol = wrapper.find('.t-typography-ellipsis-symbol');
132+
expect(expandSymbol.exists()).toBe(true);
133+
// TODO: 组件的suffix存在问题，function会被渲染成string，计划后面再开pr fix
134+
expect(expandSymbol.text()).toBe("() => '...更多'");
135+
});
136+
137+
it(':italic[Boolean]', () => {
138+
const wrapper = mount(() => <Text italic>{longTextString}</Text>);
139+
140+
expect(wrapper.find('i').exists()).eq(true);
141+
});
142+
143+
it(':keyboard[Boolean]', () => {
144+
const wrapper = mount(() => <Text keyboard>{longTextString}</Text>);
145+
146+
expect(wrapper.find('kbd').exists()).eq(true);
147+
});
148+
149+
it(':mark[String/Boolean]', () => {
150+
const defaultWrapper = mount(() => <Text mark>{longTextString}</Text>);
151+
const colorWrapper = mount(() => <Text mark="#07c160">{longTextString}</Text>);
152+
153+
expect(defaultWrapper.find('mark').exists()).eq(true);
154+
expect(colorWrapper.find('mark').element.style.backgroundColor).eq('rgb(7, 193, 96)');
155+
});
156+
157+
it(':strong[Boolean]', () => {
158+
const wrapper = mount(() => <Text strong>{longTextString}</Text>);
159+
160+
expect(wrapper.find('strong').exists()).eq(true);
161+
});
162+
163+
const themeList: TdTextProps['theme'][] = ['primary', 'secondary', 'success', 'warning', 'error'];
164+
const classPrefix = 't-typography--';
165+
166+
themeList.forEach((item) => {
167+
it(`:theme[String]-${item}`, () => {
168+
const wrapper = mount(() => <Text theme={item}>{longTextString}</Text>);
169+
expect(wrapper.find('.t-typography').classes(`${classPrefix}${item}`)).eq(true);
170+
});
171+
});
172+
173+
it(':underline[Boolean]', () => {
174+
const wrapper = mount(() => <Text underline>{longTextString}</Text>);
175+
176+
expect(wrapper.find('u').exists()).eq(true);
177+
});
178+
});
179+
});

‎packages/components/typography/__tests__/typography-title.test.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { mount } from '@vue/test-utils';
2+
import { nextTick } from 'vue';
3+
import { Title } from '@tdesign/components/typography';
4+
import type { TdTitleProps } from '@tdesign/components/typography';
5+
6+
describe('Typography Title', () => {
7+
const longTextString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
8+
const shortText = 'TDesign was founded with the principles of open-source collaboration from the beginning.';
9+
const ellipsisText = new RegExp('...');
10+
11+
describe('props', () => {
12+
it(':default[content/default slot]', () => {
13+
const defaultWrapper = mount(() => <Title>{shortText}</Title>);
14+
const propWrapper = mount(() => <Title content={shortText}></Title>);
15+
16+
expect(defaultWrapper.find('h1.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
17+
expect(propWrapper.find('h1.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
18+
});
19+
20+
it(':ellipsis[Boolean/object]', async () => {
21+
const wrapper = mount(() => <Title ellipsis>{longTextString}</Title>);
22+
23+
expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
24+
25+
const onExpand = vi.fn();
26+
const objectWrapper = mount(() => (
27+
<Title
28+
ellipsis={{
29+
row: 1,
30+
onExpand,
31+
expandable: true,
32+
collapsible: true,
33+
tooltipProps: { content: 'tooltip content' },
34+
}}
35+
>
36+
{longTextString}
37+
</Title>
38+
));
39+
40+
await nextTick();
41+
42+
const expandSymbol = objectWrapper.find('.t-typography-ellipsis-symbol');
43+
expect(expandSymbol.exists()).toBe(true);
44+
45+
await expandSymbol.trigger('click');
46+
expect(onExpand).toHaveBeenCalledWith(true);
47+
48+
const collapseSymbol = objectWrapper.find('.t-typography-ellipsis-symbol');
49+
expect(collapseSymbol.exists()).toBe(true);
50+
});
51+
52+
const levelList: TdTitleProps['level'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
53+
54+
levelList.forEach((item) => {
55+
it(`:level[String]-${item}`, () => {
56+
const wrapper = mount(() => <Title level={item}>{longTextString}</Title>);
57+
58+
expect(wrapper.find(`${item}.t-typography`).exists()).eq(true);
59+
});
60+
});
61+
});
62+
});

‎packages/components/typography/__tests__/typography.test.tsx‎

Lines changed: 6 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,14 @@
11
import { mount } from '@vue/test-utils';
2-
import { Text, Title, Paragraph } from '@tdesign/components/typography';
3-
import { nextTick } from 'vue';
2+
import { Typography } from '@tdesign/components/typography';
43

54
describe('Typography', () => {
65
const longTextString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
76

8-
const shortText = 'TDesign was founded with the principles of open-source collaboration from the beginning.';
7+
describe('slot', () => {
8+
it('default', () => {
9+
const wrapper = mount(() => <Typography>{longTextString}</Typography>);
910

10-
const ellipsisText = new RegExp('...');
11-
12-
it('title 测试', () => {
13-
const wrapper = mount(() => <Title>{shortText}</Title>);
14-
15-
expect(wrapper.find('h1.t-typography').element.innerHTML).toBe(shortText);
16-
});
17-
18-
it('paragraph 测试', () => {
19-
const wrapper = mount(() => <Paragraph>{shortText}</Paragraph>);
20-
21-
expect(wrapper.find('.t-typography').element.innerHTML).toBe(shortText);
22-
});
23-
24-
it('text 测试', () => {
25-
const wrapper = mount(() => <Text>{shortText}</Text>);
26-
27-
expect(wrapper.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
28-
});
29-
30-
it('text code 测试', () => {
31-
const wrapper = mount(() => <Text code>{shortText}</Text>);
32-
33-
expect(wrapper.find('code').element.innerHTML).toMatch(new RegExp(shortText));
34-
});
35-
36-
window.innerWidth = 480;
37-
it('ellipsis 测试', () => {
38-
const wrapper = mount(() => <Paragraph ellipsis>{longTextString}</Paragraph>);
39-
40-
expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
41-
});
42-
43-
it('text ellipsis 测试', () => {
44-
const wrapper = mount(() => <Text ellipsis>{longTextString}</Text>);
45-
46-
expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
47-
});
48-
49-
it('title ellipsis 测试', () => {
50-
const wrapper = mount(() => <Title ellipsis>{longTextString}</Title>);
51-
52-
expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
53-
});
54-
55-
it('ellipsis expand 测试', async () => {
56-
const wrapper = await mount(() => (
57-
<Paragraph
58-
ellipsis={{
59-
expandable: true,
60-
collapsible: true,
61-
}}
62-
>
63-
{longTextString}
64-
</Paragraph>
65-
));
66-
67-
// 模拟鼠标进入
68-
wrapper.find('.t-typography-ellipsis-symbol').trigger('click');
69-
await nextTick();
70-
expect(wrapper.find('.t-typography-ellipsis-symbol').element.innerHTML).toBe('收起');
71-
});
72-
73-
it('text copyable 测试', () => {
74-
const handleCopy = vi.fn();
75-
const wrapper = mount(() => <Text copyable={{ onCopy: handleCopy }}>{shortText}</Text>);
76-
77-
wrapper.find('.t-button').trigger('click');
78-
79-
expect(handleCopy).toHaveBeenCalled();
11+
expect(wrapper.find('.t-typography').element.innerHTML).toMatch(longTextString);
12+
});
8013
});
8114
});

0 commit comments

Comments
 (0)