Skip to content

Commit 568c593

Browse files
tangjinzhoutangjinzhou
committed
test: add descriptions test
1 parent dff0951 commit 568c593

File tree

5 files changed

+367
-17
lines changed

5 files changed

+367
-17
lines changed

‎components/descriptions/Col.jsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,24 @@ const ColProps = {
1010
};
1111

1212
const Col = {
13+
functional: true,
1314
props: ColProps,
14-
render() {
15-
const { child, bordered, colon, type, layout } = this.$props;
15+
render(h, ctx) {
16+
const { child, bordered, colon, type, layout } = ctx.props;
1617
const { prefixCls, span = 1 } = getOptionProps(child);
17-
18+
const { key } = ctx.data;
1819
const label = getComponentFromProp(child, 'label');
1920
const slots = getSlots(child);
2021
const labelProps = {
2122
attrs: {},
22-
class: [`${prefixCls}-item-label`, {
23-
[`${prefixCls}-item-colon`]: colon,
24-
[`${prefixCls}-item-no-label`]: !label,
25-
}],
26-
key: 'label',
23+
class: [
24+
`${prefixCls}-item-label`,
25+
{
26+
[`${prefixCls}-item-colon`]: colon,
27+
[`${prefixCls}-item-no-label`]: !label,
28+
},
29+
],
30+
key: `${key}-label`,
2731
};
2832
if (layout === 'vertical') {
2933
labelProps.attrs.colSpan = span * 2 - 1;
@@ -34,7 +38,7 @@ const Col = {
3438
return <th {...labelProps}>{label}</th>;
3539
}
3640
return (
37-
<td class={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
41+
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
3842
{slots.default}
3943
</td>
4044
);
@@ -43,7 +47,7 @@ const Col = {
4347
if (type === 'content') {
4448
return (
4549
<td colSpan={span} class={`${prefixCls}-item`}>
46-
<span class={`${prefixCls}-item-content`} key="content">
50+
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
4751
{slots.default}
4852
</span>
4953
</td>
@@ -53,7 +57,7 @@ const Col = {
5357
<td colSpan={span} class={`${prefixCls}-item`}>
5458
<span
5559
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
56-
key="label"
60+
key={`${key}-label`}
5761
>
5862
{label}
5963
</span>
@@ -63,7 +67,7 @@ const Col = {
6367
return (
6468
<td colSpan={span} class={`${prefixCls}-item`}>
6569
<span {...labelProps}>{label}</span>
66-
<span class={`${prefixCls}-item-content`} key="content">
70+
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
6771
{slots.default}
6872
</span>
6973
</td>

‎components/descriptions/__tests__/__snapshots__/index.test.js.snap

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Descriptions Descriptions support colon 1`] = `
4+
<div class="ant-descriptions">
5+
<div class="ant-descriptions-view">
6+
<table>
7+
<tbody>
8+
<tr class="ant-descriptions-row">
9+
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
10+
</tr>
11+
</tbody>
12+
</table>
13+
</div>
14+
</div>
15+
`;
16+
17+
exports[`Descriptions Descriptions support style 1`] = `
18+
<div class="ant-descriptions" style="background-color: rgb(232, 232, 232);">
19+
<div class="ant-descriptions-view">
20+
<table>
21+
<tbody>
22+
<tr class="ant-descriptions-row">
23+
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon ant-descriptions-item-no-label"></span><span class="ant-descriptions-item-content">Cloud Database</span></td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
</div>
28+
</div>
29+
`;
30+
31+
exports[`Descriptions Descriptions.Item support className 1`] = `
32+
<div class="ant-descriptions">
33+
<div class="ant-descriptions-view">
34+
<table>
35+
<tbody>
36+
<tr class="ant-descriptions-row">
37+
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
38+
</tr>
39+
</tbody>
40+
</table>
41+
</div>
42+
</div>
43+
`;
44+
45+
exports[`Descriptions column is number 1`] = `
46+
<div class="ant-descriptions">
47+
<div class="ant-descriptions-view">
48+
<table>
49+
<tbody>
50+
<tr class="ant-descriptions-row">
51+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
52+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
53+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
54+
</tr>
55+
<tr class="ant-descriptions-row">
56+
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
57+
</tr>
58+
</tbody>
59+
</table>
60+
</div>
61+
</div>
62+
`;
63+
64+
exports[`Descriptions vertical layout 1`] = `
65+
<div class="ant-descriptions">
66+
<div class="ant-descriptions-view">
67+
<table>
68+
<tbody>
69+
<tr class="ant-descriptions-row">
70+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span></td>
71+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span></td>
72+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span></td>
73+
</tr>
74+
<tr class="ant-descriptions-row">
75+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">Cloud Database</span></td>
76+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">Prepaid</span></td>
77+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">18:00:00</span></td>
78+
</tr>
79+
<tr class="ant-descriptions-row">
80+
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span></td>
81+
</tr>
82+
<tr class="ant-descriptions-row">
83+
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-content">$80.00</span></td>
84+
</tr>
85+
</tbody>
86+
</table>
87+
</div>
88+
</div>
89+
`;
90+
91+
exports[`Descriptions when item is rendered conditionally 1`] = `
92+
<div class="ant-descriptions">
93+
<div class="ant-descriptions-view">
94+
<table>
95+
<tbody>
96+
<tr class="ant-descriptions-row">
97+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
98+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
99+
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
100+
</tr>
101+
<tr class="ant-descriptions-row">
102+
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
103+
</tr>
104+
</tbody>
105+
</table>
106+
</div>
107+
</div>
108+
`;

0 commit comments

Comments
 (0)