Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Validate boolean prop names nested deeper #2234

Merged
merged 1 commit into from Apr 12, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 14 additions & 1 deletion docs/rules/boolean-prop-naming.md
Expand Up @@ -30,7 +30,12 @@ var Hello = createReactClass({

```js
...
"react/boolean-prop-naming": [<enabled>, { "propTypeNames": Array<string>, "rule": <string>, "message": <string> }]
"react/boolean-prop-naming": [<enabled>, {
"propTypeNames": Array<string>,
"rule": <string>,
"message": <string>,
"validateNested": <boolean>
}]
...
```

Expand Down Expand Up @@ -86,3 +91,11 @@ And the failure would look like so:
```
It is better if your prop (something) matches this pattern: (^is[A-Z]([A-Za-z0-9]?)+)
```

### `validateNested`

This value is boolean. It tells if nested props should be validated as well. By default this is set to false but you can change it to true, to validate deeper layers of object:

```jsx
"react/boolean-prop-naming": ["error", { "validateNested": true }]
```
80 changes: 64 additions & 16 deletions lib/rules/boolean-prop-naming.js
Expand Up @@ -41,6 +41,10 @@ module.exports = {
message: {
minLength: 1,
type: 'string'
},
validateNested: {
default: false,
type: 'boolean'
}
},
type: 'object'
Expand Down Expand Up @@ -104,6 +108,64 @@ module.exports = {
return node.key.name;
}

/**
* Checks if prop is declared in flow way
* @param {Object} prop Property object, single prop type declaration
* @returns {Boolean}
*/
function flowCheck(prop) {
return (
prop.type === 'ObjectTypeProperty' &&
prop.value.type === 'BooleanTypeAnnotation' &&
rule.test(getPropName(prop)) === false
);
}

/**
* Checks if prop is declared in regular way
* @param {Object} prop Property object, single prop type declaration
* @returns {Boolean}
*/
function regularCheck(prop) {
const propKey = getPropKey(prop);
return (
propKey &&
propTypeNames.indexOf(propKey) >= 0 &&
rule.test(getPropName(prop)) === false
);
}

/**
* Checks if prop is nested
* @param {Object} prop Property object, single prop type declaration
* @returns {Boolean}
*/
function nestedPropTypes(prop) {
return (
prop.type === 'Property' &&
prop.value.type === 'CallExpression'
);
}

/**
* Runs recursive check on all proptypes
* @param {Array} proptypes A list of Property object (for each proptype defined)
* @param {Function} addInvalidProp callback to run for each error
*/
function runCheck(proptypes, addInvalidProp) {
proptypes = proptypes || [];

proptypes.forEach(prop => {
if (config.validateNested && nestedPropTypes(prop)) {
runCheck(prop.value.arguments[0].properties, addInvalidProp);
return;
}
if (flowCheck(prop) || regularCheck(prop)) {
addInvalidProp(prop);
}
});
}

/**
* Checks and mark props with invalid naming
* @param {Object} node The component node we're testing
Expand All @@ -113,22 +175,8 @@ module.exports = {
const component = components.get(node) || node;
const invalidProps = component.invalidProps || [];

(proptypes || []).forEach(prop => {
const propKey = getPropKey(prop);
const flowCheck = (
prop.type === 'ObjectTypeProperty' &&
prop.value.type === 'BooleanTypeAnnotation' &&
rule.test(getPropName(prop)) === false
);
const regularCheck = (
propKey &&
propTypeNames.indexOf(propKey) >= 0 &&
rule.test(getPropName(prop)) === false
);

if (flowCheck || regularCheck) {
invalidProps.push(prop);
}
runCheck(proptypes, prop => {
invalidProps.push(prop);
});

components.set(node, {
Expand Down
90 changes: 90 additions & 0 deletions tests/lib/rules/boolean-prop-naming.js
Expand Up @@ -373,6 +373,46 @@ ruleTester.run('boolean-prop-naming', rule, {
rule: '^is[A-Z]([A-Za-z0-9]?)+'
}],
parser: 'babel-eslint'
}, {
code: `
class Hello extends React.Component {
render() {
return (
<div />
);
}
}

Hello.propTypes = {
isSomething: PropTypes.bool.isRequired,
nested: PropTypes.shape({
isWorking: PropTypes.bool
})
};
`
}, {
code: `
class Hello extends React.Component {
render() {
return (
<div />
);
}
}

Hello.propTypes = {
isSomething: PropTypes.bool.isRequired,
nested: PropTypes.shape({
nested: PropTypes.shape({
isWorking: PropTypes.bool
})
})
};
`,
options: [{
rule: '^is[A-Z]([A-Za-z0-9]?)+',
validateNested: true
}]
}],

invalid: [{
Expand Down Expand Up @@ -807,5 +847,55 @@ ruleTester.run('boolean-prop-naming', rule, {
errors: [{
message: 'Prop name (something) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)'
}]
}, {
code: `
class Hello extends React.Component {
render() {
return (
<div />
);
}
}

Hello.propTypes = {
isSomething: PropTypes.bool.isRequired,
nested: PropTypes.shape({
failingItIs: PropTypes.bool
})
};
`,
options: [{
rule: '^is[A-Z]([A-Za-z0-9]?)+',
validateNested: true
}],
errors: [{
message: 'Prop name (failingItIs) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)'
}]
}, {
code: `
class Hello extends React.Component {
render() {
return (
<div />
);
}
}

Hello.propTypes = {
isSomething: PropTypes.bool.isRequired,
nested: PropTypes.shape({
nested: PropTypes.shape({
failingItIs: PropTypes.bool
})
})
};
`,
options: [{
rule: '^is[A-Z]([A-Za-z0-9]?)+',
validateNested: true
}],
errors: [{
message: 'Prop name (failingItIs) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)'
}]
}]
});