55 no-new:0 */
66
77import React from "react" ;
8- import { mount } from "enzyme" ;
98import CommandPalette from "./command-palette" ;
109import mockCommands from "./__mocks__/commands" ;
11-
10+ import { render , screen , waitFor , waitForElementToBeRemoved , fireEvent } from '@testing-library/react'
11+ import userEvent from '@testing-library/user-event'
12+ import '@testing-library/jest-dom'
1213
1314// We have to put this in a separate file. Otherwise, the document.activeElement
1415// will be reseted by other test suite to null which we can't easily
@@ -17,65 +18,70 @@ describe("props.shouldReturnFocusAfterClose", () => {
1718 beforeEach ( ( ) => {
1819 global . document . body . innerHTML = "" ;
1920 } ) ;
20- afterEach ( ( ) => {
21- global . document . body . innerHTML = "" ;
22- } ) ;
2321
24- it . skip ( "should return to focused element after close if true" , async ( ) => {
25- const focusedElement = global . document . createElement ( "button" ) ;
26- focusedElement . setAttribute ( "id" , "button" ) ;
27- const focusedElement2 = global . document . createElement ( "button" ) ;
22+ it ( "should return to focused element after close if true" , async ( ) => {
23+ // Given shouldReturnFocusAfterClose = true then focus should return
24+ // to the focused element when the command palette is close. We'll setup
25+ // two buttons and force focus to move from the the originally focused button
26+ // to the nextfocused button while the palette is open. Upon closing the palette
27+ // focus will be returned to the originally focused button
28+
2829 const body = global . document . querySelector ( "body" ) ;
29- body . appendChild ( focusedElement ) ;
30- body . appendChild ( focusedElement2 ) ;
31- focusedElement . focus ( ) ;
32- expect ( global . document . activeElement ) . toBe (
33- global . document . querySelector ( "#button" )
34- ) ;
35- const commandPalette = mount (
36- < CommandPalette commands = { mockCommands } shouldReturnFocusAfterClose open />
37- ) ;
38- expect ( global . document . activeElement ) . toBe (
39- global . document . querySelector ( "input" )
40- ) ;
41- expect ( commandPalette . state ( "showModal" ) ) . toEqual ( true ) ;
42- expect ( global . document . activeElement ) . toBe (
43- global . document . querySelector ( "input" )
44- ) ;
45- // Change focus during command palette open
46- focusedElement2 . focus ( ) ;
47- expect ( global . document . activeElement ) . toBe ( focusedElement2 ) ;
48- commandPalette . instance ( ) . handleCloseModal ( ) ;
49- await new Promise ( ( r ) => setTimeout ( r , 50 ) ) ;
50- expect ( global . document . activeElement ) . toBe (
51- global . document . querySelector ( "#button" )
52- ) ;
30+ const originallyFocusedElement = global . document . createElement ( "button" ) ;
31+ const nextFocusedElement = global . document . createElement ( "button" ) ;
32+ originallyFocusedElement . setAttribute ( "data-testid" , "originallyFocusedButton" ) ;
33+ body . appendChild ( originallyFocusedElement ) ;
34+ body . appendChild ( nextFocusedElement ) ;
35+
36+ originallyFocusedElement . focus ( ) ;
37+ expect ( originallyFocusedElement ) . toHaveFocus ( ) ;
38+ const commandPalette = render ( < CommandPalette commands = { mockCommands } shouldReturnFocusAfterClose open /> ) ;
39+ const input = screen . getByPlaceholderText ( "Type a command" ) ;
40+ await waitFor ( ( ) => { expect ( input ) . toHaveFocus ( ) } ) ;
41+
42+ // Change focus while command palette is open
43+ nextFocusedElement . focus ( ) ;
44+ await waitFor ( ( ) => { expect ( nextFocusedElement ) . toHaveFocus ( ) } ) ;
45+
46+ // Close the command palette
47+ userEvent . click ( input ) ;
48+ userEvent . keyboard ( '{esc}' ) ;
49+ fireEvent . keyDown ( input , { key : 'Escape' , code : 'Escape' } )
50+ await waitForElementToBeRemoved ( ( ) => screen . getByLabelText ( "Command Palette" ) ) ;
51+
52+ await waitFor ( ( ) => { expect ( originallyFocusedElement ) . toHaveFocus ( ) } ) ;
5353 } ) ;
5454
55- it . skip ( "should not return to focused element after close if false" , async ( ) => {
56- const focusedElement = global . document . createElement ( "button" ) ;
57- focusedElement . setAttribute ( "id" , "button" ) ;
55+ it ( "should not return to focused element after close if false" , async ( ) => {
56+ // Given shouldReturnFocusAfterClose = true then focus should return
57+ // to the focused element when the command palette is close. We'll setup
58+ // two buttons and force focus to move from the the originally focused button
59+ // to the nextfocused button while the palette is open. Upon closing the palette
60+ // focus will be returned to the originally focused button
61+
5862 const body = global . document . querySelector ( "body" ) ;
59- body . appendChild ( focusedElement ) ;
60- focusedElement . focus ( ) ;
61- expect ( global . document . activeElement ) . toBe (
62- global . document . querySelector ( "#button" )
63- ) ;
64- const commandPalette = mount (
65- < CommandPalette
66- commands = { mockCommands }
67- shouldReturnFocusAfterClose = { false }
68- />
69- ) ;
70- commandPalette . instance ( ) . handleOpenModal ( ) ;
71- expect ( global . document . activeElement ) . toBe (
72- global . document . querySelector ( "input" )
73- ) ;
74- expect ( commandPalette . state ( "showModal" ) ) . toEqual ( true ) ;
75- commandPalette . instance ( ) . handleCloseModal ( ) ;
76- await new Promise ( ( r ) => setTimeout ( r , 50 ) ) ;
77- expect ( global . document . activeElement ) . toBe (
78- global . document . querySelector ( "body" )
79- ) ;
63+ const originallyFocusedElement = global . document . createElement ( "button" ) ;
64+ const nextFocusedElement = global . document . createElement ( "button" ) ;
65+ originallyFocusedElement . setAttribute ( "data-testid" , "originallyFocusedButton" ) ;
66+ body . appendChild ( originallyFocusedElement ) ;
67+ body . appendChild ( nextFocusedElement ) ;
68+
69+ originallyFocusedElement . focus ( ) ;
70+ expect ( originallyFocusedElement ) . toHaveFocus ( ) ;
71+ const commandPalette = render ( < CommandPalette commands = { mockCommands } shouldReturnFocusAfterClose = { false } open /> ) ;
72+ const input = screen . getByPlaceholderText ( "Type a command" ) ;
73+ await waitFor ( ( ) => { expect ( input ) . toHaveFocus ( ) } ) ;
74+
75+ // Change focus while command palette is open
76+ nextFocusedElement . focus ( ) ;
77+ await waitFor ( ( ) => { expect ( nextFocusedElement ) . toHaveFocus ( ) } ) ;
78+
79+ // Close the command palette
80+ userEvent . click ( input ) ;
81+ userEvent . keyboard ( '{esc}' ) ;
82+ fireEvent . keyDown ( input , { key : 'Escape' , code : 'Escape' } )
83+ await waitForElementToBeRemoved ( ( ) => screen . getByLabelText ( "Command Palette" ) ) ;
84+
85+ await waitFor ( ( ) => { expect ( global . document . body ) . toHaveFocus ( ) } ) ;
8086 } ) ;
8187} ) ;
0 commit comments