@@ -241,52 +241,55 @@ describe('Wizard.Container', () => {
241
241
)
242
242
243
243
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
244
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
244
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
245
245
246
246
await userEvent . click ( nextButton ( ) )
247
247
248
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
249
+
248
250
await waitFor ( ( ) => {
249
- expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
250
- expect ( screen . queryByRole ( 'alert' ) ) . toBeNull ( )
251
+ expect ( document . querySelector ( '.dnb-form-status' ) ) . toBeNull ( )
251
252
} )
252
253
253
254
await userEvent . click ( nextButton ( ) )
254
255
256
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
257
+
255
258
await waitFor ( ( ) => {
256
- expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
257
- expect ( screen . queryByRole ( 'alert' ) ) . toBeInTheDocument ( )
259
+ expect (
260
+ document . querySelector ( '.dnb-form-status' )
261
+ ) . toBeInTheDocument ( )
258
262
} )
259
263
260
264
await userEvent . click ( previousButton ( ) )
261
265
266
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
267
+
262
268
await waitFor ( ( ) => {
263
- expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
264
- expect ( screen . queryByRole ( 'alert' ) ) . toBeNull ( )
269
+ expect ( document . querySelector ( '.dnb-form-status' ) ) . toBeNull ( )
265
270
} )
266
271
267
272
await userEvent . click ( nextButton ( ) )
268
273
269
- await waitFor ( ( ) => {
270
- expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
271
- } )
274
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
272
275
273
276
await waitFor ( ( ) => {
274
- expect ( screen . queryByRole ( 'alert' ) ) . toBeInTheDocument ( )
277
+ expect (
278
+ document . querySelector ( '.dnb-form-status' )
279
+ ) . toBeInTheDocument ( )
275
280
} )
276
281
277
282
await userEvent . type ( document . querySelector ( 'input' ) , 'foo' )
278
283
279
284
await waitFor ( ( ) => {
280
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
285
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
281
286
} )
282
287
283
288
await userEvent . click ( nextButton ( ) )
284
289
285
- await waitFor ( ( ) => {
286
- expect ( output ( ) ) . toHaveTextContent ( 'Step 3' )
287
- } )
290
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 3' )
288
291
289
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
292
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
290
293
} )
291
294
292
295
it ( 'should support navigating back and forth with async validators' , async ( ) => {
@@ -332,28 +335,28 @@ describe('Wizard.Container', () => {
332
335
const input = ( ) => document . querySelector ( 'input' )
333
336
334
337
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
335
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
338
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
336
339
337
340
await userEvent . click ( nextButton ( ) )
338
341
339
342
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
340
- expect ( screen . queryByRole ( 'alert ') ) . toHaveTextContent (
343
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toHaveTextContent (
341
344
nb . Field . errorRequired
342
345
)
343
346
344
347
await userEvent . type ( input ( ) , 'invalid' )
345
348
fireEvent . click ( nextButton ( ) )
346
349
347
350
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
348
- expect ( screen . queryByRole ( 'alert ') ) . toHaveTextContent (
351
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toHaveTextContent (
349
352
'onChangeValidator-error'
350
353
)
351
354
352
355
fireEvent . blur ( input ( ) )
353
356
354
357
await waitFor ( ( ) => {
355
358
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
356
- expect ( screen . queryByRole ( 'alert ') ) . toHaveTextContent (
359
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toHaveTextContent (
357
360
'onBlurValidator-error'
358
361
)
359
362
} )
@@ -362,33 +365,33 @@ describe('Wizard.Container', () => {
362
365
await userEvent . click ( nextButton ( ) )
363
366
364
367
expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
365
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
368
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
366
369
367
370
await userEvent . click ( nextButton ( ) )
368
371
369
372
expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
370
- expect ( screen . queryByRole ( 'alert ') ) . toHaveTextContent (
373
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toHaveTextContent (
371
374
nb . Field . errorRequired
372
375
)
373
376
374
377
await userEvent . click ( previousButton ( ) )
375
378
376
379
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
377
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
380
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
378
381
379
382
await userEvent . type ( input ( ) , '{Backspace>8}invalid' )
380
383
fireEvent . click ( nextButton ( ) )
381
384
382
385
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
383
- expect ( screen . queryByRole ( 'alert ') ) . toHaveTextContent (
386
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toHaveTextContent (
384
387
'onChangeValidator-error'
385
388
)
386
389
387
390
fireEvent . blur ( input ( ) )
388
391
389
392
await waitFor ( ( ) => {
390
393
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
391
- expect ( screen . queryByRole ( 'alert ') ) . toHaveTextContent (
394
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toHaveTextContent (
392
395
'onBlurValidator-error'
393
396
)
394
397
} )
@@ -397,7 +400,7 @@ describe('Wizard.Container', () => {
397
400
await userEvent . click ( nextButton ( ) )
398
401
399
402
expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
400
- expect ( screen . queryByRole ( 'alert ') ) . toHaveTextContent (
403
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toHaveTextContent (
401
404
nb . Field . errorRequired
402
405
)
403
406
} , 20000 )
@@ -528,35 +531,39 @@ describe('Wizard.Container', () => {
528
531
)
529
532
530
533
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
531
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
534
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
532
535
533
536
await userEvent . click ( secondStep . querySelector ( 'button' ) )
534
537
535
538
await waitFor ( ( ) => {
536
539
expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
537
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
540
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
538
541
} )
539
542
540
543
// Show the error message
541
544
await userEvent . click ( nextButton ( ) )
542
545
543
546
await waitFor ( ( ) => {
544
547
expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
545
- expect ( screen . queryByRole ( 'alert' ) ) . toBeInTheDocument ( )
548
+ expect (
549
+ document . querySelector ( '.dnb-form-status' )
550
+ ) . toBeInTheDocument ( )
546
551
} )
547
552
548
553
await userEvent . click ( firstStep . querySelector ( 'button' ) )
549
554
550
555
await waitFor ( ( ) => {
551
556
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
552
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
557
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
553
558
} )
554
559
555
560
await userEvent . click ( secondStep . querySelector ( 'button' ) )
556
561
557
562
await waitFor ( ( ) => {
558
563
expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
559
- expect ( screen . queryByRole ( 'alert' ) ) . toBeInTheDocument ( )
564
+ expect (
565
+ document . querySelector ( '.dnb-form-status' )
566
+ ) . toBeInTheDocument ( )
560
567
} )
561
568
} )
562
569
@@ -1917,9 +1924,9 @@ describe('Wizard.Container', () => {
1917
1924
await waitFor ( ( ) => {
1918
1925
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
1919
1926
expect ( screen . queryAllByRole ( 'alert' ) ) . toHaveLength ( 1 )
1920
- expect ( screen . queryByRole ( 'alert' ) ) . toHaveTextContent (
1921
- 'Error message'
1922
- )
1927
+ expect (
1928
+ document . querySelector ( '.dnb-form-status' )
1929
+ ) . toHaveTextContent ( 'Error message' )
1923
1930
expect ( previousButton ( ) ) . toBeDisabled ( )
1924
1931
expect ( nextButton ( ) ) . not . toBeDisabled ( )
1925
1932
} )
@@ -2039,9 +2046,9 @@ describe('Wizard.Container', () => {
2039
2046
await waitFor ( ( ) => {
2040
2047
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2041
2048
expect ( screen . queryAllByRole ( 'alert' ) ) . toHaveLength ( 1 )
2042
- expect ( screen . queryByRole ( 'alert' ) ) . toHaveTextContent (
2043
- 'Error message'
2044
- )
2049
+ expect (
2050
+ document . querySelector ( '.dnb-form-status' )
2051
+ ) . toHaveTextContent ( 'Error message' )
2045
2052
expect ( previousButton ( ) ) . toBeDisabled ( )
2046
2053
expect ( nextButton ( ) ) . not . toBeDisabled ( )
2047
2054
} )
@@ -2191,12 +2198,12 @@ describe('Wizard.Container', () => {
2191
2198
)
2192
2199
2193
2200
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2194
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
2201
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
2195
2202
2196
2203
fireEvent . click ( nextButton ( ) )
2197
2204
2198
2205
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2199
- expect ( screen . queryByRole ( 'alert ') ) . toBeInTheDocument ( )
2206
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeInTheDocument ( )
2200
2207
} )
2201
2208
2202
2209
it ( 'should set focus on step change' , async ( ) => {
@@ -2342,25 +2349,25 @@ describe('Wizard.Container', () => {
2342
2349
)
2343
2350
2344
2351
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2345
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
2352
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
2346
2353
2347
2354
fireEvent . click ( nextButton ( ) )
2348
2355
2349
2356
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2350
- expect ( screen . queryByRole ( 'alert ') ) . toBeInTheDocument ( )
2357
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeInTheDocument ( )
2351
2358
2352
2359
await userEvent . type ( document . querySelector ( 'input' ) , 'valid' )
2353
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
2360
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
2354
2361
2355
2362
await userEvent . click ( nextButton ( ) )
2356
2363
2357
2364
expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
2358
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
2365
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
2359
2366
2360
2367
await userEvent . click ( submitButton ( ) )
2361
2368
2362
2369
expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
2363
- expect ( screen . queryByRole ( 'alert ') ) . toBeInTheDocument ( )
2370
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeInTheDocument ( )
2364
2371
} )
2365
2372
2366
2373
it ( 'should prevent navigation if `preventNavigation` is called' , async ( ) => {
@@ -2447,15 +2454,17 @@ describe('Wizard.Container', () => {
2447
2454
await userEvent . click ( nextButton ( ) )
2448
2455
2449
2456
await waitFor ( ( ) => {
2450
- expect ( screen . queryByRole ( 'alert' ) ) . toBeInTheDocument ( )
2457
+ expect (
2458
+ document . querySelector ( '.dnb-form-status' )
2459
+ ) . toBeInTheDocument ( )
2451
2460
} )
2452
2461
2453
2462
expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2454
2463
2455
2464
await userEvent . type ( document . querySelector ( 'input' ) , 'valid' )
2456
2465
2457
2466
await waitFor ( ( ) => {
2458
- expect ( screen . queryByRole ( 'alert ') ) . toBeNull ( )
2467
+ expect ( document . querySelector ( '.dnb-form-status ') ) . toBeNull ( )
2459
2468
} )
2460
2469
2461
2470
await userEvent . click ( nextButton ( ) )
@@ -2468,6 +2477,78 @@ describe('Wizard.Container', () => {
2468
2477
} )
2469
2478
} )
2470
2479
2480
+ it ( 'should run validation before every step change using StepIndicator to navigate back and forth' , async ( ) => {
2481
+ const onStepChange = jest . fn ( )
2482
+
2483
+ render (
2484
+ < Form . Handler >
2485
+ < Wizard . Container onStepChange = { onStepChange } mode = "loose" >
2486
+ < Wizard . Step title = "Step 1" >
2487
+ < Field . String required />
2488
+ < output > Step 1</ output >
2489
+ < Wizard . Buttons />
2490
+ </ Wizard . Step >
2491
+ < Wizard . Step title = "Step 2" >
2492
+ < output > Step 2</ output >
2493
+ < Wizard . Buttons />
2494
+ </ Wizard . Step >
2495
+ </ Wizard . Container >
2496
+ </ Form . Handler >
2497
+ )
2498
+
2499
+ const [ firstStep , secondStep ] = Array . from (
2500
+ document . querySelectorAll ( '.dnb-step-indicator__item' )
2501
+ )
2502
+
2503
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2504
+
2505
+ // Try Step 2
2506
+ await userEvent . click ( secondStep . querySelector ( '.dnb-button' ) )
2507
+
2508
+ await waitFor ( ( ) => {
2509
+ expect (
2510
+ document . querySelector ( '.dnb-form-status' )
2511
+ ) . toBeInTheDocument ( )
2512
+ } )
2513
+
2514
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2515
+
2516
+ await userEvent . type ( document . querySelector ( 'input' ) , 'foo' )
2517
+
2518
+ await waitFor ( ( ) => {
2519
+ expect ( document . querySelector ( '.dnb-form-status' ) ) . toBeNull ( )
2520
+ } )
2521
+
2522
+ // Go to Step 2
2523
+ await userEvent . click ( secondStep . querySelector ( '.dnb-button' ) )
2524
+
2525
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 2' )
2526
+ expect ( onStepChange ) . toHaveBeenCalledTimes ( 1 )
2527
+ expect ( onStepChange ) . toHaveBeenLastCalledWith ( 1 , 'next' , {
2528
+ previousStep : { index : 0 } ,
2529
+ preventNavigation : expect . any ( Function ) ,
2530
+ } )
2531
+
2532
+ // Go to Step 1
2533
+ await userEvent . click ( firstStep . querySelector ( '.dnb-button' ) )
2534
+
2535
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2536
+ expect ( document . querySelector ( '.dnb-form-status' ) ) . toBeNull ( )
2537
+
2538
+ await userEvent . type ( document . querySelector ( 'input' ) , '{Backspace>3}' )
2539
+
2540
+ // Try Step 2
2541
+ await userEvent . click ( secondStep . querySelector ( '.dnb-button' ) )
2542
+
2543
+ await waitFor ( ( ) => {
2544
+ expect (
2545
+ document . querySelector ( '.dnb-form-status' )
2546
+ ) . toBeInTheDocument ( )
2547
+ } )
2548
+
2549
+ expect ( output ( ) ) . toHaveTextContent ( 'Step 1' )
2550
+ } )
2551
+
2471
2552
describe ( 'prerenderFieldProps and filterData' , ( ) => {
2472
2553
it ( 'should keep field props in memory during step change' , async ( ) => {
2473
2554
const filterDataHandler = jest . fn ( ( { props } ) => {
0 commit comments