Skip to content

Commit 16300aa

Browse files
MartinCupelaMartinCupela
committed
test(a11y): fix tests
1 parent d71c120 commit 16300aa

9 files changed

Lines changed: 156 additions & 4 deletions

File tree

‎src/components/Accessibility/__tests__/NotificationAnnouncer.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { mockTranslationContextValue } from 'mock-builders';
1212

1313
import type { Notification } from '../../../../../stream-chat-js/src';
1414

15-
vi.mock('../../components/Notifications/hooks/useNotifications', () => ({
15+
vi.mock('../../Notifications/hooks/useNotifications', () => ({
1616
useNotifications: vi.fn(),
1717
}));
1818

‎src/components/Channel/__tests__/__snapshots__/Channel.test.tsx.snap‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,34 @@ exports[`Channel > should render a LoadingIndicator if it is loading 1`] = `
1313
</DocumentFragment>
1414
`;
1515

16+
exports[`Channel > should render a LoadingIndicator if it is loading 2`] = `
17+
<DocumentFragment>
18+
<span
19+
data-testid="notification-announcer"
20+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
21+
>
22+
<div
23+
aria-atomic="true"
24+
aria-live="polite"
25+
role="status"
26+
/>
27+
<div
28+
aria-atomic="true"
29+
aria-live="assertive"
30+
role="alert"
31+
/>
32+
</span>
33+
<div
34+
class="str-chat messaging light str-chat__channel"
35+
id="str-chat__channel"
36+
>
37+
<div>
38+
Loading channel
39+
</div>
40+
</div>
41+
</DocumentFragment>
42+
`;
43+
1644
exports[`Channel > should render default loading indicator if channels query is in progress 1`] = `
1745
<DocumentFragment>
1846
<div

‎src/components/Message/__tests__/MessageTimestamp.test.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,21 @@ describe('<MessageTimestamp />', () => {
6767
const { container } = await renderComponent();
6868
expect(container).toMatchInlineSnapshot(`
6969
<div>
70+
<span
71+
data-testid="notification-announcer"
72+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
73+
>
74+
<div
75+
aria-atomic="true"
76+
aria-live="polite"
77+
role="status"
78+
/>
79+
<div
80+
aria-atomic="true"
81+
aria-live="assertive"
82+
role="alert"
83+
/>
84+
</span>
7085
<time
7186
datetime="2019-04-03T14:42:47.087Z"
7287
title="2019-04-03T14:42:47.087Z"
@@ -83,6 +98,21 @@ describe('<MessageTimestamp />', () => {
8398
});
8499
expect(container).toMatchInlineSnapshot(`
85100
<div>
101+
<span
102+
data-testid="notification-announcer"
103+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
104+
>
105+
<div
106+
aria-atomic="true"
107+
aria-live="polite"
108+
role="status"
109+
/>
110+
<div
111+
aria-atomic="true"
112+
aria-live="assertive"
113+
role="alert"
114+
/>
115+
</span>
86116
<time
87117
datetime="28"
88118
title="28"
@@ -239,6 +269,21 @@ describe('<MessageTimestamp />', () => {
239269
const { container } = await renderComponent({ props: { customClass } });
240270
expect(container).toMatchInlineSnapshot(`
241271
<div>
272+
<span
273+
data-testid="notification-announcer"
274+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
275+
>
276+
<div
277+
aria-atomic="true"
278+
aria-live="polite"
279+
role="status"
280+
/>
281+
<div
282+
aria-atomic="true"
283+
aria-live="assertive"
284+
role="alert"
285+
/>
286+
</span>
242287
<time
243288
class="custom-css-class"
244289
datetime="2019-04-03T14:42:47.087Z"

‎src/components/Message/__tests__/MessageUI.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ describe('<MessageSimple />', () => {
187187
date: new Date(),
188188
});
189189
const { container } = await renderMessageSimple({ message });
190-
expect(container).toBeEmptyDOMElement();
190+
expect(container.querySelector('.str-chat__message')).not.toBeInTheDocument();
191191
});
192192

193193
it('should render deleted message with default MessageDelete component when message was deleted', async () => {

‎src/components/Message/__tests__/__snapshots__/ReminderNotification.test.tsx.snap‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,21 @@
22

33
exports[`ReminderNotification > displays text for bookmark notifications (saved for later) 1`] = `
44
<div>
5+
<span
6+
data-testid="notification-announcer"
7+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
8+
>
9+
<div
10+
aria-atomic="true"
11+
aria-live="polite"
12+
role="status"
13+
/>
14+
<div
15+
aria-atomic="true"
16+
aria-live="assertive"
17+
role="alert"
18+
/>
19+
</span>
520
<div
621
class="str-chat__message-saved-for-later"
722
>
@@ -30,6 +45,21 @@ exports[`ReminderNotification > displays text for bookmark notifications (saved
3045

3146
exports[`ReminderNotification > displays text for reminder deadline if trespassed the refresh boundary 1`] = `
3247
<div>
48+
<span
49+
data-testid="notification-announcer"
50+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
51+
>
52+
<div
53+
aria-atomic="true"
54+
aria-live="polite"
55+
role="status"
56+
/>
57+
<div
58+
aria-atomic="true"
59+
aria-live="assertive"
60+
role="alert"
61+
/>
62+
</span>
3363
<p
3464
class="str-chat__message-reminder"
3565
>
@@ -66,6 +96,21 @@ exports[`ReminderNotification > displays text for reminder deadline if trespasse
6696

6797
exports[`ReminderNotification > displays text for time due in case of timed reminders (remind me) 1`] = `
6898
<div>
99+
<span
100+
data-testid="notification-announcer"
101+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
102+
>
103+
<div
104+
aria-atomic="true"
105+
aria-live="polite"
106+
role="status"
107+
/>
108+
<div
109+
aria-atomic="true"
110+
aria-live="assertive"
111+
role="alert"
112+
/>
113+
</span>
69114
<p
70115
class="str-chat__message-reminder"
71116
>

‎src/components/MessageComposer/__tests__/MessageInput.test.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,11 @@ if (typeof globalThis.DOMRect === 'undefined') {
150150

151151
// Patch getComputedStyle to return an iterable CSSStyleDeclaration (jsdom lacks Symbol.iterator)
152152
const origGetComputedStyle = window.getComputedStyle;
153-
window.getComputedStyle = function (...args) {
154-
const style = origGetComputedStyle.apply(this, args);
153+
window.getComputedStyle = function (element: Element, pseudoElt?: string | null) {
154+
// jsdom does not implement pseudo-element computed styles.
155+
const style = pseudoElt
156+
? origGetComputedStyle.call(this, element)
157+
: origGetComputedStyle.call(this, element, pseudoElt);
155158
if (!style[Symbol.iterator]) {
156159
style[Symbol.iterator] = function* () {
157160
for (let i = 0; i < this.length; i++) {

‎src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,21 @@
22

33
exports[`AttachmentPreviewList > should render custom BaseImage component 1`] = `
44
<div>
5+
<span
6+
data-testid="notification-announcer"
7+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
8+
>
9+
<div
10+
aria-atomic="true"
11+
aria-live="polite"
12+
role="status"
13+
/>
14+
<div
15+
aria-atomic="true"
16+
aria-live="assertive"
17+
role="alert"
18+
/>
19+
</span>
520
<div
621
class="str-chat messaging light str-chat__channel"
722
id="str-chat__channel"

‎src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.tsx.snap‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,21 @@
22

33
exports[`VirtualizedMessageList > should render the list without any message 1`] = `
44
<div>
5+
<span
6+
data-testid="notification-announcer"
7+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
8+
>
9+
<div
10+
aria-atomic="true"
11+
aria-live="polite"
12+
role="status"
13+
/>
14+
<div
15+
aria-atomic="true"
16+
aria-live="assertive"
17+
role="alert"
18+
/>
19+
</span>
520
<div
621
class="str-chat messaging light str-chat__channel"
722
id="str-chat__channel"

‎src/components/Modal/GlobalModal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@ export const GlobalModal = ({
148148
className='str-chat__modal__dialog'
149149
onKeyDown={handleDialogKeyDown}
150150
role={role}
151+
tabIndex={-1}
151152
>
152153
{children}
153154
</div>

0 commit comments

Comments
 (0)