Skip to content

Commit

Permalink
fix(a11yStatus): pass correct dependency array (#1586)
Browse files Browse the repository at this point in the history
  • Loading branch information
silviuaavram authored Mar 29, 2024
1 parent 5b0d503 commit 57981b2
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 6 deletions.
23 changes: 23 additions & 0 deletions src/hooks/useCombobox/__tests__/props.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,29 @@ describe('props', () => {
expect(getA11yStatusContainer()).not.toBeInTheDocument()
})

test('calls the function only on state changes', async () => {
const getA11yStatusMessage = jest.fn()
const {rerender} = renderCombobox({
getA11yStatusMessage,
})

await changeInputValue('h')
waitForDebouncedA11yStatusUpdate()

expect(getA11yStatusMessage).toHaveBeenCalledWith({
inputValue: 'h',
highlightedIndex: -1,
isOpen: true,
selectedItem: null,
})
expect(getA11yStatusMessage).toHaveBeenCalledTimes(1)

getA11yStatusMessage.mockClear()
rerender({getA11yStatusMessage})

expect(getA11yStatusMessage).not.toHaveBeenCalled()
})

test('adds a status message element with the text returned', async () => {
const a11yStatusMessage1 = 'Dropdown is open'
const a11yStatusMessage2 = 'Dropdown is still open'
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/useMultipleSelection/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,7 @@ function getA11yStatusMessage(state) {
const {selectedItems} = state

if (selectedItems.length === previousSelectedItemsRef.current.length) {
return
return ''
}

const removedSelectedItem = previousSelectedItemsRef.current.find(
Expand Down
33 changes: 30 additions & 3 deletions src/hooks/useMultipleSelection/__tests__/props.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,33 @@ describe('props', () => {
expect(getA11yStatusContainer()).not.toBeInTheDocument()
})

test('calls the function only on state changes', async () => {
const getA11yStatusMessage = jest.fn()
const selectedItems = [items[0], items[1]]
const multipleSelectionProps = {
selectedItems,
initialActiveIndex: 1,
getA11yStatusMessage,
}
const {rerender} = renderMultipleCombobox({
multipleSelectionProps,
})

await keyDownOnSelectedItemAtIndex(1, '{ArrowLeft}')
waitForDebouncedA11yStatusUpdate()

expect(getA11yStatusMessage).toHaveBeenCalledWith({
activeIndex: 0,
selectedItems,
})
expect(getA11yStatusMessage).toHaveBeenCalledTimes(1)

getA11yStatusMessage.mockClear()
rerender({multipleSelectionProps: {...multipleSelectionProps, activeIndex: 0}})

expect(getA11yStatusMessage).not.toHaveBeenCalled()
})

test('adds a status message element with the text returned', async () => {
const a11yStatusMessage1 = 'to the left to the left'
const a11yStatusMessage2 = 'to the right?'
Expand All @@ -81,7 +108,7 @@ describe('props', () => {
renderMultipleCombobox({
multipleSelectionProps: {
selectedItems,
initialActiveIndex: 0,
initialActiveIndex: 1,
getA11yStatusMessage,
},
})
Expand Down Expand Up @@ -114,7 +141,7 @@ describe('props', () => {
renderMultipleCombobox({
multipleSelectionProps: {
selectedItems: [items[0], items[1]],
initialActiveIndex: 0,
initialActiveIndex: 1,
getA11yStatusMessage: jest.fn().mockReturnValue('bla bla'),
},
})
Expand Down Expand Up @@ -157,7 +184,7 @@ describe('props', () => {
renderMultipleCombobox({
multipleSelectionProps: {
selectedItems: [items[0], items[1]],
initialActiveIndex: 0,
initialActiveIndex: 1,
getA11yStatusMessage: jest.fn().mockReturnValue('bla bla'),
environment,
},
Expand Down
23 changes: 23 additions & 0 deletions src/hooks/useSelect/__tests__/props.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,29 @@ describe('props', () => {
expect(getA11yStatusContainer()).not.toBeInTheDocument()
})

test('calls the function only on state changes', async () => {
const getA11yStatusMessage = jest.fn()
const {rerender} = renderSelect({
getA11yStatusMessage,
})

await keyDownOnToggleButton('h')
waitForDebouncedA11yStatusUpdate()

expect(getA11yStatusMessage).toHaveBeenCalledWith({
inputValue: 'h',
highlightedIndex: 15,
isOpen: true,
selectedItem: null
})
expect(getA11yStatusMessage).toHaveBeenCalledTimes(1)

getA11yStatusMessage.mockClear()
rerender({getA11yStatusMessage})

expect(getA11yStatusMessage).not.toHaveBeenCalled()
})

test('adds a status message element with the text returned', async () => {
const a11yStatusMessage1 = 'Dropdown is open'
const a11yStatusMessage2 = 'Dropdown is still open'
Expand Down
4 changes: 2 additions & 2 deletions src/hooks/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ function useMouseAndTouchTracker(
environment.removeEventListener('touchmove', onTouchMove)
environment.removeEventListener('touchend', onTouchEnd)
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
// eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
}, [environment, handleBlur])

return mouseAndTouchTrackersRef.current
Expand Down Expand Up @@ -505,7 +505,7 @@ function useA11yMessageStatus(
updateA11yStatus(status, document)

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dependencyArray])
}, dependencyArray)

// Cleanup the status message container.
useEffect(() => {
Expand Down

0 comments on commit 57981b2

Please sign in to comment.