diff --git a/src/hooks/utils/__tests__/useA11yMessageStatus.multiple.test.ts b/src/hooks/utils/__tests__/useA11yMessageStatus.multiple.test.ts new file mode 100644 index 00000000..490c205c --- /dev/null +++ b/src/hooks/utils/__tests__/useA11yMessageStatus.multiple.test.ts @@ -0,0 +1,56 @@ +import {act, renderHook, screen} from '@testing-library/react' +import {useA11yMessageStatus} from '../useA11yMessageStatus' + +jest.useFakeTimers() + +afterEach(() => { + act(() => jest.runOnlyPendingTimers()) + document.body.innerHTML = '' +}) + +afterAll(() => jest.useRealTimers()) + +test('empty status messages do not cancel pending non-empty status messages', () => { + const getA11yStatusMessage = ({message}: {message: string}) => message + const environment = {document} + const {rerender} = renderHook( + ({ + firstMessage, + secondMessage, + updateCount, + }: { + firstMessage: string + secondMessage: string + updateCount: number + }) => { + useA11yMessageStatus( + getA11yStatusMessage, + {message: firstMessage}, + [firstMessage, updateCount], + environment, + ) + useA11yMessageStatus( + getA11yStatusMessage, + {message: secondMessage}, + [secondMessage, updateCount], + environment, + ) + }, + { + initialProps: { + firstMessage: '', + secondMessage: '', + updateCount: 0, + }, + }, + ) + + rerender({ + firstMessage: 'Item added.', + secondMessage: '', + updateCount: 1, + }) + act(() => jest.advanceTimersByTime(200)) + + expect(screen.getByRole('status')).toHaveTextContent('Item added.') +}) diff --git a/src/hooks/utils/useA11yMessageStatus.ts b/src/hooks/utils/useA11yMessageStatus.ts index 0f261f48..d4e5a00f 100644 --- a/src/hooks/utils/useA11yMessageStatus.ts +++ b/src/hooks/utils/useA11yMessageStatus.ts @@ -35,6 +35,10 @@ export function useA11yMessageStatus( const status = getA11yStatusMessage(options) + if (!status) { + return + } + updateA11yStatus(status, document) // eslint-disable-next-line react-hooks/exhaustive-deps