commit 85c53bcd8687c2baf9577459f4e8e867d9ba7317 · kitten.sh/use-interactions

+59
src/__tests__/useMenuFocus.test.tsx
···

       142
       142
        
         cy.realPress('Escape');

     

       143
       143
        
         cy.get('@input').should('have.focus');

     

       144
       144
        
       });

     

       145
       145
       +
       

     

       146
       146
       +
       it('behaves nicely for nested menus', () => {

     

       147
       147
       +
         const InnerMenu = () => {

     

       148
       148
       +
           const ref = useRef<HTMLUListElement>(null);

     

       149
       149
       +
           useMenuFocus(ref);

     

       150
       150
       +
       

     

       151
       151
       +
           return (

     

       152
       152
       +
             <ul ref={ref}>

     

       153
       153
       +
               <li tabIndex={0}>Inner #1</li>

     

       154
       154
       +
               <li tabIndex={0}>Inner #2</li>

     

       155
       155
       +
             </ul>

     

       156
       156
       +
           );

     

       157
       157
       +
         };

     

       158
       158
       +
       

     

       159
       159
       +
         const OuterMenu = () => {

     

       160
       160
       +
           const ref = useRef<HTMLUListElement>(null);

     

       161
       161
       +
           useMenuFocus(ref);

     

       162
       162
       +
       

     

       163
       163
       +
           return (

     

       164
       164
       +
             <ul ref={ref}>

     

       165
       165
       +
               <li tabIndex={0}>Outer #1</li>

     

       166
       166
       +
               <InnerMenu />

     

       167
       167
       +
             </ul>

     

       168
       168
       +
           );

     

       169
       169
       +
         };

     

       170
       170
       +
       

     

       171
       171
       +
         mount(

     

       172
       172
       +
           <main>

     

       173
       173
       +
             <button tabIndex={-1}>Start</button>

     

       174
       174
       +
             <OuterMenu />

     

       175
       175
       +
           </main>

     

       176
       176
       +
         );

     

       177
       177
       +
       

     

       178
       178
       +
         // Moves into the inner menu as needed

     

       179
       179
       +
         cy.get('button').first().focus();

     

       180
       180
       +
         cy.focused().contains('Start');

     

       181
       181
       +
         cy.realPress('Tab');

     

       182
       182
       +
         cy.focused().contains('Outer #1');

     

       183
       183
       +
         cy.realPress('Tab');

     

       184
       184
       +
         cy.focused().contains('Inner #1');

     

       185
       185
       +
         cy.realPress('Tab');

     

       186
       186
       +
         cy.focused().contains('Inner #2');

     

       187
       187
       +
         cy.realPress('ArrowDown');

     

       188
       188
       +
         cy.focused().contains('Inner #1');

     

       189
       189
       +
         cy.realPress('Escape');

     

       190
       190
       +
         cy.focused().contains('Start');

     

       191
       191
       +
       

     

       192
       192
       +
         // Can move from outer to inner seamlessly

     

       193
       193
       +
         cy.get('button').first().focus();

     

       194
       194
       +
         cy.focused().contains('Start');

     

       195
       195
       +
         cy.realPress('Tab');

     

       196
       196
       +
         cy.focused().contains('Outer #1');

     

       197
       197
       +
         cy.realPress('ArrowDown');

     

       198
       198
       +
         cy.focused().contains('Inner #1');

     

       199
       199
       +
         cy.realPress('ArrowDown');

     

       200
       200
       +
         cy.focused().contains('Inner #2');

     

       201
       201
       +
         cy.realPress('ArrowDown');

     

       202
       202
       +
         cy.focused().contains('Inner #1');

     

       203
       203
       +
       });