@@ -11,6 +11,7 @@ const popperMock = jest.spyOn(popper, 'createPopper');
1111
1212describe ( 'Checkpoint' , ( ) => {
1313 const handleAdvance = jest . fn ( ) ;
14+ const handleBack = jest . fn ( ) ;
1415 const handleDismiss = jest . fn ( ) ;
1516 const handleEnd = jest . fn ( ) ;
1617
@@ -29,11 +30,12 @@ describe('Checkpoint', () => {
2930 < div id = "target-element" > ...</ div >
3031 < Checkpoint
3132 advanceButtonText = "Next"
33+ backButtonText = "Back"
3234 body = "Lorem ipsum checkpoint body"
33- dismissButtonText = "Dismiss"
3435 endButtonText = "End"
3536 index = { 1 }
3637 onAdvance = { handleAdvance }
38+ onBack = { handleBack }
3739 onDismiss = { handleDismiss }
3840 onEnd = { handleEnd }
3941 target = "#target-element"
@@ -44,31 +46,22 @@ describe('Checkpoint', () => {
4446 ) ;
4547 } ) ;
4648
47- it ( 'renders correct active breadcrumb' , ( ) => {
48- expect ( screen . getByText ( 'Checkpoint title' ) ) . toBeInTheDocument ( ) ;
49- const breadcrumbs = screen . getAllByTestId ( 'pgn__checkpoint-breadcrumb_' , { exact : false } ) ;
50- expect ( breadcrumbs . length ) . toEqual ( 5 ) ;
51- expect ( breadcrumbs [ 0 ] . classList ) . toContain ( 'pgn__checkpoint-breadcrumb_inactive' ) ;
52- expect ( breadcrumbs [ 1 ] . classList ) . toContain ( 'pgn__checkpoint-breadcrumb_active' ) ;
53- expect ( breadcrumbs [ 2 ] . classList ) . toContain ( 'pgn__checkpoint-breadcrumb_inactive' ) ;
54- expect ( breadcrumbs [ 3 ] . classList ) . toContain ( 'pgn__checkpoint-breadcrumb_inactive' ) ;
55- expect ( breadcrumbs [ 4 ] . classList ) . toContain ( 'pgn__checkpoint-breadcrumb_inactive' ) ;
56- } ) ;
57-
58- it ( 'only renders advance and dismiss buttons (i.e. does not render end button)' , ( ) => {
59- expect ( screen . getByRole ( 'button' , { name : 'Dismiss' } ) ) . toBeInTheDocument ( ) ;
49+ it ( 'only renders advance and back buttons (i.e. does not render end button)' , ( ) => {
50+ expect ( screen . getByRole ( 'button' , { name : 'Back' } ) ) . toBeInTheDocument ( ) ;
6051 expect ( screen . getByRole ( 'button' , { name : 'Next' } ) ) . toBeInTheDocument ( ) ;
6152 } ) ;
6253
63- it ( 'dismiss button onClick calls handleDismiss' , async ( ) => {
64- const dismissButton = screen . getByRole ( 'button' , { name : 'Dismiss' } ) ;
65- await userEvent . click ( dismissButton ) ;
66- expect ( handleDismiss ) . toHaveBeenCalledTimes ( 1 ) ;
54+ it ( 'back button onClick calls handleBack' , async ( ) => {
55+ const user = userEvent . setup ( ) ;
56+ const backButton = screen . getByRole ( 'button' , { name : 'Back' } ) ;
57+ await user . click ( backButton ) ;
58+ expect ( handleBack ) . toHaveBeenCalledTimes ( 1 ) ;
6759 } ) ;
6860
6961 it ( 'advance button onClick calls handleAdvance' , async ( ) => {
62+ const user = userEvent . setup ( ) ;
7063 const advanceButton = screen . getByRole ( 'button' , { name : 'Next' } ) ;
71- await userEvent . click ( advanceButton ) ;
64+ await user . click ( advanceButton ) ;
7265 expect ( handleAdvance ) . toHaveBeenCalledTimes ( 1 ) ;
7366 } ) ;
7467 } ) ;
@@ -80,8 +73,9 @@ describe('Checkpoint', () => {
8073 < div id = "#last-element" />
8174 < Checkpoint
8275 advanceButtonText = "Next"
76+ backButtonText = "Back"
8377 body = "Lorem ipsum checkpoint body"
84- dismissButtonText = "Dismiss "
78+ dismissAltText = "Escape "
8579 endButtonText = "End"
8680 index = { 4 }
8781 onAdvance = { handleAdvance }
@@ -95,10 +89,15 @@ describe('Checkpoint', () => {
9589 ) ;
9690 } ) ;
9791
98- it ( 'only renders end button (i.e. neither advance nor dismiss buttons)' , ( ) => {
92+ it ( 'only renders end button (i.e. neither advance nor back buttons)' , ( ) => {
9993 expect ( screen . getByText ( 'End' , { selector : 'button' } ) ) . toBeInTheDocument ( ) ;
10094 } ) ;
10195
96+ it ( 'uses customized alt text on the close icon' , ( ) => {
97+ const closeButton = screen . getByTestId ( 'dismiss-tour' ) ;
98+ expect ( closeButton ) . toHaveAttribute ( 'aria-label' , 'Escape' ) ;
99+ } ) ;
100+
102101 it ( 'end button onClick calls handleEnd' , async ( ) => {
103102 const user = userEvent . setup ( { pointerEventsCheck : PointerEventsCheckLevel . Never } ) ;
104103 const endButton = screen . getByText ( 'End' , { selector : 'button' } ) ;
@@ -115,7 +114,6 @@ describe('Checkpoint', () => {
115114 < Checkpoint
116115 advanceButtonText = "Next"
117116 body = "Lorem ipsum checkpoint body"
118- dismissButtonText = "Dismiss"
119117 endButtonText = "End"
120118 index = { 0 }
121119 onAdvance = { handleAdvance }
@@ -132,36 +130,5 @@ describe('Checkpoint', () => {
132130 it ( 'only renders end button (i.e. neither advance nor dismiss buttons)' , ( ) => {
133131 expect ( screen . getByText ( 'End' , { selector : 'button' } ) ) . toBeInTheDocument ( ) ;
134132 } ) ;
135-
136- it ( 'does not render breadcrumbs' , ( ) => {
137- const breadcrumbs = screen . queryAllByTestId ( 'pgn__checkpoint-breadcrumb_' , { exact : false } ) ;
138- expect ( breadcrumbs . length ) . toEqual ( 0 ) ;
139- } ) ;
140- } ) ;
141-
142- describe ( 'only one Checkpoint in Tour and showDismissButton set to true' , ( ) => {
143- it ( 'it renders dismiss button and end button' , ( ) => {
144- render (
145- < IntlProvider locale = "en" messages = { { } } >
146- < div id = "#target-element" />
147- < Checkpoint
148- advanceButtonText = "Next"
149- body = "Lorem ipsum checkpoint body"
150- dismissButtonText = "Dismiss"
151- endButtonText = "End"
152- index = { 0 }
153- onAdvance = { handleAdvance }
154- onDismiss = { handleDismiss }
155- onEnd = { handleEnd }
156- target = "#target-element"
157- title = "Checkpoint title"
158- totalCheckpoints = { 1 }
159- showDismissButton
160- />
161- </ IntlProvider > ,
162- ) ;
163- expect ( screen . getByText ( 'Dismiss' , { selector : 'button' } ) ) . toBeInTheDocument ( ) ;
164- expect ( screen . getByText ( 'End' , { selector : 'button' } ) ) . toBeInTheDocument ( ) ;
165- } ) ;
166133 } ) ;
167134} ) ;
0 commit comments