| 1 | /**
|
|---|
| 2 | * @fileoverview Enforce autoFocus prop is not used.
|
|---|
| 3 | * @author Ethan Cohen <@evcohen>
|
|---|
| 4 | */
|
|---|
| 5 |
|
|---|
| 6 | // -----------------------------------------------------------------------------
|
|---|
| 7 | // Requirements
|
|---|
| 8 | // -----------------------------------------------------------------------------
|
|---|
| 9 |
|
|---|
| 10 | import { RuleTester } from 'eslint';
|
|---|
| 11 | import parserOptionsMapper from '../../__util__/parserOptionsMapper';
|
|---|
| 12 | import parsers from '../../__util__/helpers/parsers';
|
|---|
| 13 | import rule from '../../../src/rules/no-autofocus';
|
|---|
| 14 |
|
|---|
| 15 | // -----------------------------------------------------------------------------
|
|---|
| 16 | // Tests
|
|---|
| 17 | // -----------------------------------------------------------------------------
|
|---|
| 18 |
|
|---|
| 19 | const ruleTester = new RuleTester();
|
|---|
| 20 |
|
|---|
| 21 | const expectedError = {
|
|---|
| 22 | message: 'The autoFocus prop should not be used, as it can reduce usability and accessibility for users.',
|
|---|
| 23 | type: 'JSXAttribute',
|
|---|
| 24 | };
|
|---|
| 25 |
|
|---|
| 26 | const ignoreNonDOMSchema = [
|
|---|
| 27 | {
|
|---|
| 28 | ignoreNonDOM: true,
|
|---|
| 29 | },
|
|---|
| 30 | ];
|
|---|
| 31 |
|
|---|
| 32 | const componentsSettings = {
|
|---|
| 33 | 'jsx-a11y': {
|
|---|
| 34 | components: {
|
|---|
| 35 | Button: 'button',
|
|---|
| 36 | },
|
|---|
| 37 | },
|
|---|
| 38 | };
|
|---|
| 39 |
|
|---|
| 40 | ruleTester.run('no-autofocus', rule, {
|
|---|
| 41 | valid: parsers.all([].concat(
|
|---|
| 42 | { code: '<div />;' },
|
|---|
| 43 | { code: '<div autofocus />;' },
|
|---|
| 44 | { code: '<input autofocus="true" />;' },
|
|---|
| 45 | { code: '<Foo bar />' },
|
|---|
| 46 | { code: '<Foo autoFocus />', options: ignoreNonDOMSchema },
|
|---|
| 47 | { code: '<div><div autofocus /></div>', options: ignoreNonDOMSchema },
|
|---|
| 48 | { code: '<Button />', settings: componentsSettings },
|
|---|
| 49 | { code: '<Button />', options: ignoreNonDOMSchema, settings: componentsSettings },
|
|---|
| 50 | )).map(parserOptionsMapper),
|
|---|
| 51 | invalid: parsers.all([].concat(
|
|---|
| 52 | { code: '<div autoFocus />', errors: [expectedError] },
|
|---|
| 53 | { code: '<div autoFocus={true} />', errors: [expectedError] },
|
|---|
| 54 | { code: '<div autoFocus={false} />', errors: [expectedError] },
|
|---|
| 55 | { code: '<div autoFocus={undefined} />', errors: [expectedError] },
|
|---|
| 56 | { code: '<div autoFocus="true" />', errors: [expectedError] },
|
|---|
| 57 | { code: '<div autoFocus="false" />', errors: [expectedError] },
|
|---|
| 58 | { code: '<input autoFocus />', errors: [expectedError] },
|
|---|
| 59 | { code: '<Foo autoFocus />', errors: [expectedError] },
|
|---|
| 60 | { code: '<Button autoFocus />', errors: [expectedError], settings: componentsSettings },
|
|---|
| 61 | {
|
|---|
| 62 | code: '<Button autoFocus />',
|
|---|
| 63 | errors: [expectedError],
|
|---|
| 64 | options: ignoreNonDOMSchema,
|
|---|
| 65 | settings: componentsSettings,
|
|---|
| 66 | },
|
|---|
| 67 | )).map(parserOptionsMapper),
|
|---|
| 68 | });
|
|---|