@@ -3,44 +3,104 @@ import React from 'react';
33import Cell from '../Cell' ;
44
55describe ( 'Cell' , ( ) => {
6- it ( 'renders the correct content' , ( ) => {
7- const { getByText } = render (
8- < Cell title = "Test Title" description = "Test Description" >
9- Test Children
10- </ Cell > ,
11- ) ;
12-
13- expect ( getByText ( 'Test Title' ) ) . toBeInTheDocument ( ) ;
14- expect ( getByText ( 'Test Description' ) ) . toBeInTheDocument ( ) ;
15- expect ( getByText ( 'Test Children' ) ) . toBeInTheDocument ( ) ;
16- } ) ;
6+ describe ( 'slots' , ( ) => {
7+ it ( ': default' , ( ) => {
8+ const { getByText } = render (
9+ < Cell title = "Test Title" description = "Test Description" >
10+ Test Children
11+ </ Cell > ,
12+ ) ;
1713
18- it ( 'renders left icon and image if provided' , ( ) => {
19- const { getByTestId } = render (
20- < Cell
21- leftIcon = { < div data-testid = "left-icon" > Left Icon</ div > }
22- image = "https://tdesign.gtimg.com/mobile/demos/avatar1.png"
23- >
24- Test Children
25- </ Cell > ,
26- ) ;
27-
28- expect ( getByTestId ( 'left-icon' ) ) . toBeInTheDocument ( ) ;
29- expect ( screen . getByText ( 'Test Children' ) ) . toBeInTheDocument ( ) ;
14+ expect ( getByText ( 'Test Title' ) ) . toBeInTheDocument ( ) ;
15+ expect ( getByText ( 'Test Description' ) ) . toBeInTheDocument ( ) ;
16+ expect ( getByText ( 'Test Children' ) ) . toBeInTheDocument ( ) ;
17+ } ) ;
3018 } ) ;
3119
32- it ( 'renders right icon if provided' , ( ) => {
33- const { getByTestId } = render ( < Cell rightIcon = { < div data-testid = "right-icon" > Right Icon</ div > } /> ) ;
20+ describe ( 'props' , ( ) => {
21+ it ( ': leftIcon and image' , ( ) => {
22+ const { getByTestId } = render (
23+ < Cell
24+ leftIcon = { < div data-testid = "left-icon" > Left Icon</ div > }
25+ image = "https://tdesign.gtimg.com/mobile/demos/avatar1.png"
26+ >
27+ Test Children
28+ </ Cell > ,
29+ ) ;
3430
35- expect ( getByTestId ( 'right-icon' ) ) . toBeInTheDocument ( ) ;
36- } ) ;
31+ expect ( getByTestId ( 'left-icon' ) ) . toBeInTheDocument ( ) ;
32+ expect ( screen . getByText ( 'Test Children' ) ) . toBeInTheDocument ( ) ;
33+ } ) ;
34+
35+ it ( ': image' , ( ) => {
36+ const { container } = render ( < Cell image = "https://tdesign.gtimg.com/mobile/demos/avatar1.png" > </ Cell > ) ;
37+
38+ expect ( container . querySelector ( '.t-cell__left-image' ) ) . toBeInTheDocument ( ) ;
39+ } ) ;
40+
41+ it ( ': rightIcon' , ( ) => {
42+ const { getByTestId } = render ( < Cell rightIcon = { < div data-testid = "right-icon" > Right Icon</ div > } /> ) ;
43+
44+ expect ( getByTestId ( 'right-icon' ) ) . toBeInTheDocument ( ) ;
45+ } ) ;
46+
47+ it ( ': required' , ( ) => {
48+ const { container, rerender } = render ( < Cell title = "Required Field" /> ) ;
49+
50+ expect ( container . querySelector ( '.t-cell--required' ) ) . not . toBeInTheDocument ( ) ;
51+
52+ rerender ( < Cell title = "Required Field" required /> ) ;
53+ expect ( container . querySelector ( '.t-cell--required' ) ) . toBeInTheDocument ( ) ;
54+ expect ( container . querySelector ( '.t-cell--required' ) ) . toHaveTextContent ( '*' ) ;
55+ } ) ;
56+
57+ it ( ': arrow' , ( ) => {
58+ const { container, rerender } = render ( < Cell /> ) ;
59+
60+ const rightIcon = container . querySelector ( '.t-cell__right-icon' ) ;
61+ expect ( rightIcon ) . not . toBeInTheDocument ( ) ;
62+
63+ rerender ( < Cell arrow /> ) ;
64+
65+ expect ( container . querySelector ( '.t-cell__right-icon' ) ) . toBeInTheDocument ( ) ;
66+ // 检查是否包含箭头图标
67+ expect ( container . querySelector ( '.t-cell__right-icon > svg' ) ) . toBeInTheDocument ( ) ;
68+ } ) ;
69+
70+ it ( ': arrow and rightIcon' , ( ) => {
71+ const { container } = render ( < Cell arrow rightIcon = { < div data-testid = "custom-right-icon" > Custom Icon</ div > } /> ) ;
72+
73+ const rightIcon = container . querySelector ( '.t-cell__right-icon' ) ;
74+ expect ( rightIcon ) . toBeInTheDocument ( ) ;
75+ // 应该显示箭头图标而不是自定义图标
76+ expect ( rightIcon . querySelector ( 'svg' ) ) . toBeInTheDocument ( ) ;
77+ expect ( container . querySelector ( '[data-testid="custom-right-icon"]' ) ) . not . toBeInTheDocument ( ) ;
78+ } ) ;
79+
80+ it ( ': note' , ( ) => {
81+ const { container, getByText } = render ( < Cell note = "Test Note" /> ) ;
82+
83+ const noteElement = container . querySelector ( '.t-cell__note' ) ;
84+ expect ( noteElement ) . toBeInTheDocument ( ) ;
85+ expect ( getByText ( 'Test Note' ) ) . toBeInTheDocument ( ) ;
86+ } ) ;
87+
88+ it ( ': renders note instead of children when both note and children are provided' , ( ) => {
89+ const { container, getByText, queryByText } = render ( < Cell note = "Test Note" > Test Children Content</ Cell > ) ;
90+
91+ const noteElement = container . querySelector ( '.t-cell__note' ) ;
92+ expect ( noteElement ) . toBeInTheDocument ( ) ;
93+ expect ( getByText ( 'Test Note' ) ) . toBeInTheDocument ( ) ;
94+ expect ( queryByText ( 'Test Children Content' ) ) . not . toBeInTheDocument ( ) ;
95+ } ) ;
3796
38- it ( 'calls onClick when the cell is clicked ' , ( ) => {
39- const handleClick = vi . fn ( ) ;
40- const { container } = render ( < Cell onClick = { handleClick } /> ) ;
97+ it ( ': onClick' , ( ) => {
98+ const handleClick = vi . fn ( ) ;
99+ const { container } = render ( < Cell onClick = { handleClick } /> ) ;
41100
42- fireEvent . click ( container . firstChild ) ;
101+ fireEvent . click ( container . firstChild ) ;
43102
44- expect ( handleClick ) . toHaveBeenCalledTimes ( 1 ) ;
103+ expect ( handleClick ) . toHaveBeenCalledTimes ( 1 ) ;
104+ } ) ;
45105 } ) ;
46106} ) ;
0 commit comments