@@ -175,3 +175,135 @@ test('should render empty when list is empty', () => {
175
175
const { container } = render ( < Elevator list = { [ ] } /> )
176
176
expect ( container . querySelectorAll ( '.nut-elevator-list-item' ) . length ) . toBe ( 0 )
177
177
} )
178
+
179
+ // 测试非标准属性的渲染
180
+ test ( 'should render with custom floor key' , ( ) => {
181
+ const customList = [
182
+ {
183
+ customTitle : 'A' ,
184
+ list : [
185
+ {
186
+ name : '安徽' ,
187
+ id : 1 ,
188
+ } ,
189
+ ] ,
190
+ } ,
191
+ {
192
+ customTitle : 'B' ,
193
+ list : [
194
+ {
195
+ name : '北京' ,
196
+ id : 2 ,
197
+ } ,
198
+ ] ,
199
+ } ,
200
+ ]
201
+
202
+ const { container } = render (
203
+ < Elevator list = { customList } floorKey = "customTitle" />
204
+ )
205
+ const barItems = container . querySelectorAll ( '.nut-elevator-bars-inner-item' )
206
+
207
+ expect ( barItems [ 0 ] . textContent ) . toBe ( 'A' )
208
+ expect ( barItems [ 1 ] . textContent ) . toBe ( 'B' )
209
+ } )
210
+
211
+ // 测试非字符串值的正确渲染
212
+ test ( 'should render non-string values properly' , ( ) => {
213
+ const numericKeyList = [
214
+ {
215
+ index : 1 ,
216
+ list : [
217
+ {
218
+ name : '项目1' ,
219
+ id : 1 ,
220
+ } ,
221
+ ] ,
222
+ } ,
223
+ {
224
+ index : 2 ,
225
+ list : [
226
+ {
227
+ name : '项目2' ,
228
+ id : 2 ,
229
+ } ,
230
+ ] ,
231
+ } ,
232
+ ]
233
+
234
+ const { container } = render (
235
+ < Elevator list = { numericKeyList } floorKey = "index" />
236
+ )
237
+ const barItems = container . querySelectorAll ( '.nut-elevator-bars-inner-item' )
238
+
239
+ expect ( barItems [ 0 ] . textContent ) . toBe ( '1' )
240
+ expect ( barItems [ 1 ] . textContent ) . toBe ( '2' )
241
+ } )
242
+
243
+ // 测试列表项点击后索引值的正确传递
244
+ test ( 'should pass correct index value when clicking bars item' , ( ) => {
245
+ const testClick = vi . fn ( )
246
+ const { container } = render (
247
+ < Elevator list = { list } onIndexClick = { ( key : string ) => testClick ( key ) } />
248
+ )
249
+
250
+ // 点击第二个索引
251
+ const indexItem = container . querySelectorAll (
252
+ '.nut-elevator-bars-inner-item'
253
+ ) [ 1 ]
254
+ fireEvent . click ( indexItem )
255
+
256
+ expect ( testClick ) . toHaveBeenCalledWith ( 'B' )
257
+ } )
258
+
259
+ // 测试列表滚动时高亮显示的正确性
260
+ test ( 'should highlight the correct index when scrolling' , async ( ) => {
261
+ const { container } = render ( < Elevator list = { list } height = { 200 } /> )
262
+
263
+ // 模拟滚动
264
+ const listView = container . querySelector ( '.nut-elevator-list-inner' )
265
+
266
+ await act ( ( ) => {
267
+ // 手动触发点击索引,应该会导致滚动和高亮
268
+ const indexItem = container . querySelectorAll (
269
+ '.nut-elevator-bars-inner-item'
270
+ ) [ 2 ]
271
+ fireEvent . click ( indexItem )
272
+ } )
273
+
274
+ // 检查是否正确高亮了第三个索引
275
+ waitFor ( ( ) => {
276
+ const activeIndex = container . querySelector (
277
+ '.nut-elevator-bars-inner-item-active'
278
+ )
279
+ expect ( activeIndex ?. textContent ) . toBe ( 'G' )
280
+ } )
281
+ } )
282
+
283
+ // 测试当存在垂直模式和sticky时,固定头部是否正确显示
284
+ test ( 'should show fixed title in vertical mode with sticky' , async ( ) => {
285
+ const { container } = render (
286
+ < Elevator list = { list } mode = "vertical" sticky height = { 200 } />
287
+ )
288
+
289
+ // 首先触发点击以模拟滚动
290
+ await act ( ( ) => {
291
+ const indexItem = container . querySelectorAll (
292
+ '.nut-elevator-bars-inner-item'
293
+ ) [ 1 ]
294
+ fireEvent . click ( indexItem )
295
+
296
+ // 模拟滚动事件
297
+ const listView = container . querySelector ( '.nut-elevator-list-inner' )
298
+ if ( listView ) {
299
+ Object . defineProperty ( listView , 'scrollTop' , { value : 50 } )
300
+ fireEvent . scroll ( listView )
301
+ }
302
+ } )
303
+
304
+ // 等待滚动效果完成后检查固定标题
305
+ waitFor ( ( ) => {
306
+ const fixedTitle = container . querySelector ( '.nut-elevator-list-fixed-title' )
307
+ expect ( fixedTitle ) . not . toBeNull ( )
308
+ } )
309
+ } )
0 commit comments