11import * as React from 'react'
2- import { render , fireEvent } from '@testing-library/react'
2+ import { render , fireEvent , waitFor } from '@testing-library/react'
33import '@testing-library/jest-dom'
44
5- import { Cart , Category , Hi , Home , User } from '@nutui/icons-react'
5+ import {
6+ Cart ,
7+ Category ,
8+ Heart ,
9+ HeartFill ,
10+ Hi ,
11+ Home ,
12+ User ,
13+ } from '@nutui/icons-react'
614import { Tabbar } from '../tabbar'
715
816test ( 'should render tabbar when default' , ( ) => {
917 const { container } = render (
1018 < >
1119 < Tabbar >
12- < Tabbar . Item title = "首页" icon = { < Home width = { 20 } height = { 20 } /> } />
13- < Tabbar . Item title = "分类" icon = { < Category width = { 20 } height = { 20 } /> } />
14- < Tabbar . Item title = "逛" icon = { < Hi width = { 20 } height = { 20 } /> } />
15- < Tabbar . Item title = "购物车" icon = { < Cart width = { 20 } height = { 20 } /> } />
16- < Tabbar . Item title = "我的" icon = { < User width = { 20 } height = { 20 } /> } />
20+ < Tabbar . Item title = "首页" icon = { < Home /> } />
21+ < Tabbar . Item title = "分类" icon = { < Category /> } />
22+ < Tabbar . Item title = "逛" icon = { < Hi /> } />
23+ < Tabbar . Item title = "购物车" icon = { < Cart /> } />
24+ < Tabbar . Item title = "我的" icon = { < User /> } />
1725 </ Tabbar >
1826 </ >
1927 )
2028
2129 expect ( container . firstChild ) . toBeInTheDocument ( )
2230 expect ( container . querySelectorAll ( '.nut-tabbar-item' ) . length ) . toEqual ( 5 )
2331 expect (
24- container . querySelectorAll ( '.nut-tabbar-item-icon-box ' ) . length
25- ) . toEqual ( 10 )
32+ container . querySelectorAll ( '.nut-tabbar-item .nut -icon' ) . length
33+ ) . toEqual ( 5 )
2634} )
2735
2836test ( 'should render custom color and badge when using prop' , ( ) => {
2937 const { container } = render (
3038 < >
3139 < Tabbar inactiveColor = "grey" activeColor = "blue" >
32- < Tabbar . Item
33- title = "首页"
34- icon = { < Home width = { 20 } height = { 20 } /> }
35- value = { 11 }
36- />
37- < Tabbar . Item title = "分类" icon = { < Category width = { 20 } height = { 20 } /> } />
38- < Tabbar . Item title = "逛" icon = { < Hi width = { 20 } height = { 20 } /> } />
40+ < Tabbar . Item title = "首页" icon = { < Home /> } value = { 11 } />
41+ < Tabbar . Item title = "分类" icon = { < Category /> } />
42+ < Tabbar . Item title = "逛" icon = { < Hi /> } />
3943 </ Tabbar >
4044 </ >
4145 )
@@ -51,8 +55,8 @@ test('should render fixed element when using bottom prop', async () => {
5155 const { container } = render (
5256 < >
5357 < Tabbar fixed safeArea >
54- < Tabbar . Item title = "首页" icon = { < Home width = { 20 } height = { 20 } /> } />
55- < Tabbar . Item title = "分类" icon = { < Category width = { 20 } height = { 20 } /> } />
58+ < Tabbar . Item title = "首页" icon = { < Home /> } />
59+ < Tabbar . Item title = "分类" icon = { < Category /> } />
5660 </ Tabbar >
5761 </ >
5862 )
@@ -64,37 +68,75 @@ test('should match active tabbar by click', async () => {
6468 < >
6569 < Tabbar inactiveColor = "grey" activeColor = "blue" >
6670 < Tabbar . Item
67- title = "首页"
68- icon = { < Home width = { 20 } height = { 20 } /> }
69- value = { 11 }
71+ title = { ( active ) => ( active ? '首页' : '首页2' ) }
72+ icon = { ( active ) => ( active ? < HeartFill /> : < Heart /> ) }
73+ value = { ( active ) => ( active ? '招手' : '22' ) }
7074 />
71- < Tabbar . Item title = "分类" icon = { < Category width = { 20 } height = { 20 } /> } />
72- < Tabbar . Item title = "逛" icon = { < Hi width = { 20 } height = { 20 } /> } />
75+ < Tabbar . Item title = "我的" icon = { < Hi /> } dot />
76+ < Tabbar . Item title = "我的" icon = { < Hi /> } dot />
77+ < Tabbar . Item title = "我的" icon = { < Hi /> } dot />
7378 </ Tabbar >
7479 </ >
7580 )
7681
7782 const tabbarItem : NodeListOf < HTMLElement > =
7883 container . querySelectorAll ( '.nut-tabbar-item' )
84+ const tabbarItemText : NodeListOf < HTMLElement > = container . querySelectorAll (
85+ '.nut-tabbar-item-text'
86+ )
87+ const tabbarItemBadgeValue : NodeListOf < HTMLElement > =
88+ container . querySelectorAll ( '.nut-badge-sup' )
89+ const tabbarItemActiveIcon : NodeListOf < HTMLElement > =
90+ container . querySelectorAll ( '.nut-icon-HeartFill' )
91+ const tabbarItemIcon : NodeListOf < HTMLElement > =
92+ container . querySelectorAll ( '.nut-icon-Heart' )
7993 expect ( tabbarItem [ 0 ] . style . color ) . toEqual ( 'blue' )
94+ expect ( tabbarItemText [ 0 ] . innerText ) . toEqual ( '首页' )
95+ expect ( tabbarItemActiveIcon . length ) . toEqual ( 1 )
96+ expect ( tabbarItemIcon . length ) . toEqual ( 0 )
97+ expect ( tabbarItemBadgeValue [ 0 ] . innerText ) . toEqual ( '招手' )
98+ fireEvent . click ( tabbarItem [ 1 ] )
99+ waitFor ( ( ) => {
100+ expect ( tabbarItem [ 0 ] . style . color ) . toEqual ( 'grey' )
101+ expect ( tabbarItemText [ 0 ] . innerText ) . toEqual ( '首页2' )
102+ expect ( tabbarItemActiveIcon . length ) . toEqual ( 0 )
103+ expect ( tabbarItemIcon . length ) . toEqual ( 1 )
104+ expect ( tabbarItemBadgeValue [ 0 ] . innerText ) . toEqual ( '22' )
105+ expect ( tabbarItem [ 1 ] . style . color ) . toEqual ( 'blue' )
106+ } )
107+ } )
108+
109+ test ( 'double click' , async ( ) => {
110+ const onActiveClick = vi . fn ( )
111+ const { container } = render (
112+ < >
113+ < Tabbar >
114+ < Tabbar . Item title = "首页" icon = { < Home /> } value = { 11 } />
115+ < Tabbar . Item
116+ title = "分类"
117+ icon = { < Category /> }
118+ onActiveClick = { onActiveClick }
119+ />
120+ < Tabbar . Item title = "逛" icon = { < Hi /> } />
121+ </ Tabbar >
122+ </ >
123+ )
124+
125+ const tabbarItem : NodeListOf < HTMLElement > =
126+ container . querySelectorAll ( '.nut-tabbar-item' )
127+ fireEvent . click ( tabbarItem [ 1 ] )
80128 fireEvent . click ( tabbarItem [ 1 ] )
81- expect ( tabbarItem [ 1 ] . style . color ) . toEqual ( 'blue' )
82- fireEvent . click ( tabbarItem [ 2 ] )
83- expect ( tabbarItem [ 2 ] . style . color ) . toEqual ( 'blue' )
129+ expect ( onActiveClick ) . toBeCalled ( )
84130} )
85131
86132test ( 'should show sure emitted when click' , async ( ) => {
87133 const onSwitch = vi . fn ( )
88134 const { container } = render (
89135 < >
90136 < Tabbar inactiveColor = "grey" activeColor = "blue" onSwitch = { onSwitch } >
91- < Tabbar . Item
92- title = "首页"
93- icon = { < Home width = { 20 } height = { 20 } /> }
94- value = { 11 }
95- />
96- < Tabbar . Item title = "分类" icon = { < Category width = { 20 } height = { 20 } /> } />
97- < Tabbar . Item title = "逛" icon = { < Hi width = { 20 } height = { 20 } /> } />
137+ < Tabbar . Item title = "首页" icon = { < Home /> } value = { 11 } />
138+ < Tabbar . Item title = "分类" icon = { < Category /> } />
139+ < Tabbar . Item title = "逛" icon = { < Hi /> } />
98140 </ Tabbar >
99141 </ >
100142 )
@@ -118,3 +160,15 @@ test('should only render title', async () => {
118160 )
119161 expect ( container . innerHTML ) . toMatchSnapshot ( )
120162} )
163+
164+ test ( 'render item size 2 and direction is horizontal' , async ( ) => {
165+ const { container } = render (
166+ < >
167+ < Tabbar direction = "horizontal" >
168+ < Tabbar . Item title = "首页" icon = { < Home /> } value = "招手" />
169+ < Tabbar . Item title = "我的" icon = { < Hi /> } dot />
170+ </ Tabbar >
171+ </ >
172+ )
173+ expect ( container . innerHTML ) . toMatchSnapshot ( )
174+ } )
0 commit comments