aria-props-test.js
2.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* eslint-env jest */
/**
* @fileoverview Enforce all aria-* properties are valid.
* @author Ethan Cohen
*/
// -----------------------------------------------------------------------------
// Requirements
// -----------------------------------------------------------------------------
import { aria } from 'aria-query';
import { RuleTester } from 'eslint';
import parserOptionsMapper from '../../__util__/parserOptionsMapper';
import rule from '../../../src/rules/aria-props';
import getSuggestion from '../../../src/util/getSuggestion';
// -----------------------------------------------------------------------------
// Tests
// -----------------------------------------------------------------------------
const ruleTester = new RuleTester();
const ariaAttributes = [...aria.keys()];
const errorMessage = (name) => {
const suggestions = getSuggestion(name, ariaAttributes);
const message = `${name}: This attribute is an invalid ARIA attribute.`;
if (suggestions.length > 0) {
return {
type: 'JSXAttribute',
message: `${message} Did you mean to use ${suggestions}?`,
};
}
return {
type: 'JSXAttribute',
message,
};
};
// Create basic test cases using all valid role types.
const basicValidityTests = ariaAttributes.map((prop) => ({
code: `<div ${prop.toLowerCase()}="foobar" />`,
}));
ruleTester.run('aria-props', rule, {
valid: [
// Variables should pass, as we are only testing literals.
{ code: '<div />' },
{ code: '<div></div>' },
{ code: '<div aria="wee"></div>' }, // Needs aria-*
{ code: '<div abcARIAdef="true"></div>' },
{ code: '<div fooaria-foobar="true"></div>' },
{ code: '<div fooaria-hidden="true"></div>' },
{ code: '<Bar baz />' },
{ code: '<input type="text" aria-errormessage="foobar" />' },
].concat(basicValidityTests).map(parserOptionsMapper),
invalid: [
{ code: '<div aria-="foobar" />', errors: [errorMessage('aria-')] },
{
code: '<div aria-labeledby="foobar" />',
errors: [errorMessage('aria-labeledby')],
},
{
code: '<div aria-skldjfaria-klajsd="foobar" />',
errors: [errorMessage('aria-skldjfaria-klajsd')],
},
].map(parserOptionsMapper),
});