@@ -71,7 +72,7 @@ it('Should prevent focus from exiting the trap, returns focus to first element',
-
+
,
)
const trapContainer = container.querySelector('#trapContainer')!
@@ -82,13 +83,13 @@ it('Should prevent focus from exiting the trap, returns focus to first element',
const controller = focusTrap(trapContainer)
lastButton.focus()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(firstButton)
controller.abort()
lastButton.focus()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(durianButton)
})
@@ -97,6 +98,7 @@ it('Should raise an error if there are no focusable children', async () => {
})
it('Should cycle focus from last element to first element and vice-versa', async () => {
+ const user = userEvent.setup()
const {container} = render(
@@ -107,7 +109,7 @@ it('Should cycle focus from last element to first element and vice-versa', async
-
+
,
)
const trapContainer = container.querySelector('#trapContainer')!
@@ -117,16 +119,17 @@ it('Should cycle focus from last element to first element and vice-versa', async
const controller = focusTrap(trapContainer)
lastButton.focus()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(firstButton)
- userEvent.tab({shift: true})
+ await user.tab({shift: true})
expect(document.activeElement).toEqual(lastButton)
controller.abort()
})
it('Should should release the trap when the signal is aborted', async () => {
+ const user = userEvent.setup()
const {container} = render(
@@ -137,7 +140,7 @@ it('Should should release the trap when the signal is aborted', async () => {
-
+
,
)
const trapContainer = container.querySelector('#trapContainer')!
@@ -148,13 +151,13 @@ it('Should should release the trap when the signal is aborted', async () => {
const controller = focusTrap(trapContainer)
lastButton.focus()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(firstButton)
controller.abort()
lastButton.focus()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(durianButton)
})
@@ -167,7 +170,7 @@ it('Should should release the trap when the container is removed from the DOM',
-
+ ,
)
const trapContainer = container.querySelector('#trapContainer')!
@@ -188,6 +191,7 @@ it('Should should release the trap when the container is removed from the DOM',
})
it('Should handle dynamic content', async () => {
+ const user = userEvent.setup()
const {container} = render(
-
+ ,
)
const focusZoneContainer = container.querySelector('#focusZone')!
@@ -206,18 +209,19 @@ it('Should focus-in to the most recently-focused element', () => {
firstButton.focus()
expect(document.activeElement).toEqual(firstButton)
- userEvent.type(firstButton, '{arrowdown}')
+ await user.keyboard('{arrowdown}')
expect(document.activeElement).toEqual(secondButton)
outsideButton.focus()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(secondButton)
controller.abort()
})
-it('Should focus-in to the first element when focusInStrategy is "first"', () => {
+it('Should focus-in to the first element when focusInStrategy is "first"', async () => {
+ const user = userEvent.setup()
const {container} = render(
-
+ ,
)
const focusZoneContainer = container.querySelector('#focusZone')!
@@ -239,18 +243,19 @@ it('Should focus-in to the first element when focusInStrategy is "first"', () =>
firstButton.focus()
expect(document.activeElement).toEqual(firstButton)
- userEvent.type(firstButton, '{arrowdown}')
+ await user.keyboard('{arrowdown}')
expect(document.activeElement).toEqual(secondButton)
outsideButton.focus()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(firstButton)
controller.abort()
})
-it('Should focus-in to the closest element when focusInStrategy is "closest"', () => {
+it('Should focus-in to the closest element when focusInStrategy is "closest"', async () => {
+ const user = userEvent.setup()
const {container} = render(
+ ,
)
const focusZoneContainer = container.querySelector('#focusZone')!
@@ -282,23 +287,24 @@ it('Should focus-in to the closest element when focusInStrategy is "closest"', (
firstButton.focus()
expect(document.activeElement).toEqual(firstButton)
- userEvent.type(firstButton, '{arrowdown}')
+ await user.keyboard('{arrowdown}')
expect(document.activeElement).toEqual(secondButton)
outsideBefore.focus()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(firstButton)
outsideAfter.focus()
- userEvent.tab({shift: true})
+ await user.tab({shift: true})
expect(document.activeElement).toEqual(thirdButton)
controller.abort()
})
-it('Should call the custom focusInStrategy callback', () => {
+it('Should call the custom focusInStrategy callback', async () => {
+ const user = userEvent.setup()
const {container} = render(
-
+ ,
)
const focusZoneContainer = container.querySelector('#focusZone')!
@@ -322,14 +328,15 @@ it('Should call the custom focusInStrategy callback', () => {
expect(secondButton.getAttribute('tabindex')).toEqual('0')
outsideButton.focus()
- userEvent.tab()
+ await user.tab()
expect(focusInCallback).toHaveBeenCalledWith<[HTMLElement]>(outsideButton)
expect(document.activeElement).toEqual(secondButton)
controller.abort()
})
-it('Should respect inputs by not moving focus if key would have some other effect', () => {
+it('Should respect inputs by not moving focus if key would have some other effect', async () => {
+ const user = userEvent.setup()
const {container} = render(
-
+ ,
)
const focusZoneContainer = container.querySelector('#focusZone')!
@@ -349,19 +356,24 @@ it('Should respect inputs by not moving focus if key would have some other effec
const controller = focusZone(focusZoneContainer, {bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd})
firstButton.focus()
- userEvent.type(firstButton, '{arrowright}')
+
+ await user.keyboard('{arrowright}')
expect(document.activeElement).toEqual(input)
- userEvent.type(input, '{arrowleft}')
+
+ await user.keyboard('{arrowleft}')
expect(document.activeElement).toEqual(input)
- userEvent.type(input, '{arrowright}')
+
+ await user.keyboard('{arrowright}')
expect(document.activeElement).toEqual(input)
- userEvent.type(input, '{arrowright}')
+
+ await user.keyboard('{arrowright}')
expect(document.activeElement).toEqual(secondButton)
controller.abort()
})
it('Should focus-in to the first element if the last-focused element is removed', async () => {
+ const user = userEvent.setup()
const {container} = render(
-
+ ,
)
const focusZoneContainer = container.querySelector('#focusZone')!
@@ -381,7 +393,7 @@ it('Should focus-in to the first element if the last-focused element is removed'
const controller = focusZone(focusZoneContainer)
firstButton.focus()
- userEvent.type(firstButton, '{arrowdown}')
+ await user.keyboard('{arrowdown}')
expect(document.activeElement).toEqual(secondButton)
outsideButton.focus()
@@ -390,16 +402,17 @@ it('Should focus-in to the first element if the last-focused element is removed'
// The mutation observer fires asynchronously
await nextTick()
- userEvent.tab()
+ await user.tab()
expect(document.activeElement).toEqual(firstButton)
- userEvent.type(firstButton, '{arrowdown}')
+ await user.keyboard('{arrowdown}')
expect(document.activeElement).toEqual(thirdButton)
controller.abort()
})
-it('Should call onActiveDescendantChanged properly', () => {
+it('Should call onActiveDescendantChanged properly', async () => {
+ const user = userEvent.setup()
const {container} = render(