@samitouri / QOS-React
Code Commits Issues Pulls Sessions CI/CD
main
main
js 110 lines 3.58 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @emails react-core
8 */
9
10 'use strict';
11
12 describe('ReactDOMInvalidARIAHook', () => {
13 let React;
14 let ReactDOMClient;
15 let mountComponent;
16 let act;
17 let assertConsoleErrorDev;
18
19 beforeEach(() => {
20 jest.resetModules();
21 React = require('react');
22 ReactDOMClient = require('react-dom/client');
23 act = require('internal-test-utils').act;
24 assertConsoleErrorDev =
25 require('internal-test-utils').assertConsoleErrorDev;
26
27 mountComponent = async function (props) {
28 const container = document.createElement('div');
29 const root = ReactDOMClient.createRoot(container);
30 await act(() => {
31 root.render(<div {...props} />);
32 });
33 };
34 });
35
36 describe('aria-* props', () => {
37 it('should allow valid aria-* props', async () => {
38 await mountComponent({'aria-label': 'Bumble bees'});
39 });
40
41 it('should allow new ARIA 1.3 attributes', async () => {
42 // Test aria-braillelabel
43 await mountComponent({'aria-braillelabel': 'Braille label text'});
44
45 // Test aria-brailleroledescription
46 await mountComponent({'aria-brailleroledescription': 'Navigation menu'});
47
48 // Test aria-colindextext
49 await mountComponent({'aria-colindextext': 'Column A'});
50
51 // Test aria-rowindextext
52 await mountComponent({'aria-rowindextext': 'Row 1'});
53
54 // Test multiple ARIA 1.3 attributes together
55 await mountComponent({
56 'aria-braillelabel': 'Braille text',
57 'aria-colindextext': 'First column',
58 'aria-rowindextext': 'First row',
59 });
60 });
61 it('should warn for one invalid aria-* prop', async () => {
62 await mountComponent({'aria-badprop': 'maybe'});
63 assertConsoleErrorDev([
64 'Invalid aria prop `aria-badprop` on <div> tag. ' +
65 'For details, see https://react.dev/link/invalid-aria-props\n' +
66 ' in div (at **)',
67 ]);
68 });
69 it('should warn for many invalid aria-* props', async () => {
70 await mountComponent({
71 'aria-badprop': 'Very tall trees',
72 'aria-malprop': 'Turbulent seas',
73 });
74 assertConsoleErrorDev([
75 'Invalid aria props `aria-badprop`, `aria-malprop` on <div> ' +
76 'tag. For details, see https://react.dev/link/invalid-aria-props\n' +
77 ' in div (at **)',
78 ]);
79 });
80 it('should warn for an improperly cased aria-* prop', async () => {
81 // The valid attribute name is aria-haspopup.
82 await mountComponent({'aria-hasPopup': 'true'});
83 assertConsoleErrorDev([
84 'Unknown ARIA attribute `aria-hasPopup`. ' +
85 'Did you mean `aria-haspopup`?\n' +
86 ' in div (at **)',
87 ]);
88 });
89
90 it('should warn for use of recognized camel case aria attributes', async () => {
91 // The valid attribute name is aria-haspopup.
92 await mountComponent({ariaHasPopup: 'true'});
93 assertConsoleErrorDev([
94 'Invalid ARIA attribute `ariaHasPopup`. ' +
95 'Did you mean `aria-haspopup`?\n' +
96 ' in div (at **)',
97 ]);
98 });
99
100 it('should warn for use of unrecognized camel case aria attributes', async () => {
101 // The valid attribute name is aria-haspopup.
102 await mountComponent({ariaSomethingInvalid: 'true'});
103 assertConsoleErrorDev([
104 'Invalid ARIA attribute `ariaSomethingInvalid`. ARIA ' +
105 'attributes follow the pattern aria-* and must be lowercase.\n' +
106 ' in div (at **)',
107 ]);
108 });
109 });
110 });