Skip to content

Commit

Permalink
Support createClass in no-typos
Browse files Browse the repository at this point in the history 
Resolves #1721
  • Loading branch information
@alexzherdev
alexzherdev committed Jun 15, 2018
1 parent d68b9e8 commit 07232ad
Show file tree
Hide file tree
Showing 2 changed files with 241 additions and 29 deletions.
26 changes: 21 additions & 5 deletions lib/rules/no-typos.js
View file
Expand Up @@ -124,15 +124,18 @@ module.exports = {
}
}

function reportErrorIfClassPropertyCasingTypo(node, propertyName) {
function reportErrorIfPropertyCasingTypo(node, propertyName, isClassProperty) {
if (propertyName === 'propTypes' || propertyName === 'contextTypes' || propertyName === 'childContextTypes') {
checkValidPropObject(node);
}
STATIC_CLASS_PROPERTIES.forEach(CLASS_PROP => {
if (propertyName && CLASS_PROP.toLowerCase() === propertyName.toLowerCase() && CLASS_PROP !== propertyName) {
const message = isClassProperty
? 'Typo in static class property declaration'
: 'Typo in property declaration';
context.report({
node: node,
message: 'Typo in static class property declaration'
message: message
});
}
});
Expand Down Expand Up @@ -175,7 +178,7 @@ module.exports = {

const tokens = context.getFirstTokens(node, 2);
const propertyName = tokens[1].value;
reportErrorIfClassPropertyCasingTypo(node.value, propertyName);
reportErrorIfPropertyCasingTypo(node.value, propertyName, true);
},

MemberExpression: function(node) {
Expand All @@ -195,16 +198,29 @@ module.exports = {
(utils.isES6Component(relatedComponent.node) || utils.isReturningJSX(relatedComponent.node)) &&
(node.parent && node.parent.type === 'AssignmentExpression' && node.parent.right)
) {
reportErrorIfClassPropertyCasingTypo(node.parent.right, propertyName);
reportErrorIfPropertyCasingTypo(node.parent.right, propertyName, true);
}
},

MethodDefinition: function (node) {
MethodDefinition: function(node) {
if (!utils.isES6Component(node.parent.parent)) {
return;
}

reportErrorIfLifecycleMethodCasingTypo(node);
},

ObjectExpression: function(node) {
const component = utils.isES5Component(node) && components.get(node);

if (!component) {
return;
}

node.properties.forEach(property => {
reportErrorIfPropertyCasingTypo(property.value, property.key.name, false);
reportErrorIfLifecycleMethodCasingTypo(property);
});
}
};
})
Expand Down
244 changes: 220 additions & 24 deletions tests/lib/rules/no-typos.js
View file
Expand Up @@ -23,6 +23,7 @@ const parserOptions = {
// -----------------------------------------------------------------------------

const ERROR_MESSAGE = 'Typo in static class property declaration';
const ERROR_MESSAGE_ES5 = 'Typo in property declaration';
const ERROR_MESSAGE_LIFECYCLE_METHOD = 'Typo in component lifecycle method declaration';

const ruleTester = new RuleTester();
Expand Down Expand Up @@ -519,6 +520,105 @@ ruleTester.run('no-typos', rule, {
`,
parser: 'babel-eslint',
parserOptions: parserOptions
}, {
code: `
import React from 'react';
import PropTypes from 'prop-types';
const Component = React.createReactClass({
propTypes: {
a: PropTypes.string.isRequired,
b: PropTypes.shape({
c: PropTypes.number
}).isRequired
}
});
`,
parserOptions: parserOptions
}, {
code: `
import React from 'react';
import PropTypes from 'prop-types';
const Component = React.createReactClass({
propTypes: {
a: PropTypes.string.isRequired,
b: PropTypes.shape({
c: PropTypes.number
}).isRequired
}
});
`,
parser: 'babel-eslint',
parserOptions: parserOptions
}, {
code: `
import React from 'react';
import PropTypes from 'prop-types';
const Component = React.createReactClass({
childContextTypes: {
a: PropTypes.bool,
b: PropTypes.array,
c: PropTypes.func,
d: PropTypes.object,
}
});
`,
parserOptions: parserOptions
}, {
code: `
import React from 'react';
import PropTypes from 'prop-types';
const Component = React.createReactClass({
childContextTypes: {
a: PropTypes.bool,
b: PropTypes.array,
c: PropTypes.func,
d: PropTypes.object,
}
});
`,
parser: 'babel-eslint',
parserOptions: parserOptions
}, {
code: `
import React from 'react';
const Component = React.createReactClass({
propTypes: {},
childContextTypes: {},
contextTypes: {},
componentWillMount() { },
componentDidMount() { },
componentWillReceiveProps() { },
shouldComponentUpdate() { },
componentWillUpdate() { },
componentDidUpdate() { },
componentWillUnmount() { },
render() {
return <div>Hello {this.props.name}</div>;
}
});
`,
parserOptions: parserOptions
}, {
code: `
import React from 'react';
const Component = React.createReactClass({
propTypes: {},
childContextTypes: {},
contextTypes: {},
componentWillMount() { },
componentDidMount() { },
componentWillReceiveProps() { },
shouldComponentUpdate() { },
componentWillUpdate() { },
componentDidUpdate() { },
componentWillUnmount() { },
render() {
return <div>Hello {this.props.name}</div>;
}
});
`,
parser: 'babel-eslint',
parserOptions: parserOptions
}],

invalid: [{
Expand Down Expand Up @@ -1369,28 +1469,11 @@ ruleTester.run('no-typos', rule, {
}, {
message: 'Typo in declared prop type: objectof'
}]
}]
/*
// PropTypes declared on a component that is detected through JSDoc comments and is
// declared AFTER the PropTypes assignment
// Commented out since it only works with ESLint 5.
,{
code: `
MyComponent.PROPTYPES = {}
\/** @extends React.Component *\/
class MyComponent extends BaseComponent {}
`,
parserOptions: parserOptions
},
*/
/*
// createClass tests below fail, so they're commented out
// ---------
}, {
code: `
import React from 'react';
import PropTypes from 'prop-types';
const Component = React.createClass({
const Component = React.createReactClass({
propTypes: {
a: PropTypes.string.isrequired,
b: PropTypes.shape({
Expand All @@ -1410,7 +1493,7 @@ ruleTester.run('no-typos', rule, {
code: `
import React from 'react';
import PropTypes from 'prop-types';
const Component = React.createClass({
const Component = React.createReactClass({
childContextTypes: {
a: PropTypes.bools,
b: PropTypes.Array,
Expand All @@ -1434,7 +1517,7 @@ ruleTester.run('no-typos', rule, {
code: `
import React from 'react';
import PropTypes from 'prop-types';
const Component = React.createClass({
const Component = React.createReactClass({
propTypes: {
a: PropTypes.string.isrequired,
b: PropTypes.shape({
Expand All @@ -1453,7 +1536,7 @@ ruleTester.run('no-typos', rule, {
code: `
import React from 'react';
import PropTypes from 'prop-types';
const Component = React.createClass({
const Component = React.createReactClass({
childContextTypes: {
a: PropTypes.bools,
b: PropTypes.Array,
Expand All @@ -1472,8 +1555,121 @@ ruleTester.run('no-typos', rule, {
}, {
message: 'Typo in declared prop type: objectof'
}]
}, {
code: `
import React from 'react';
const Component = React.createReactClass({
proptypes: {},
childcontexttypes: {},
contexttypes: {},
ComponentWillMount() { },
ComponentDidMount() { },
ComponentWillReceiveProps() { },
ShouldComponentUpdate() { },
ComponentWillUpdate() { },
ComponentDidUpdate() { },
ComponentWillUnmount() { },
render() {
return <div>Hello {this.props.name}</div>;
}
});
`,
parserOptions: parserOptions,
errors: [{
message: ERROR_MESSAGE_ES5,
type: 'ObjectExpression'
}, {
message: ERROR_MESSAGE_ES5,
type: 'ObjectExpression'
}, {
message: ERROR_MESSAGE_ES5,
type: 'ObjectExpression'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}]
}, {
code: `
import React from 'react';
const Component = React.createReactClass({
proptypes: {},
childcontexttypes: {},
contexttypes: {},
ComponentWillMount() { },
ComponentDidMount() { },
ComponentWillReceiveProps() { },
ShouldComponentUpdate() { },
ComponentWillUpdate() { },
ComponentDidUpdate() { },
ComponentWillUnmount() { },
render() {
return <div>Hello {this.props.name}</div>;
}
});
`,
parser: 'babel-eslint',
parserOptions: parserOptions,
errors: [{
message: ERROR_MESSAGE_ES5,
type: 'ObjectExpression'
}, {
message: ERROR_MESSAGE_ES5,
type: 'ObjectExpression'
}, {
message: ERROR_MESSAGE_ES5,
type: 'ObjectExpression'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}, {
message: ERROR_MESSAGE_LIFECYCLE_METHOD,
type: 'Property'
}]
/*
// PropTypes declared on a component that is detected through JSDoc comments and is
// declared AFTER the PropTypes assignment
// Commented out since it only works with ESLint 5.
,{
code: `
MyComponent.PROPTYPES = {}
\/** @extends React.Component *\/
class MyComponent extends BaseComponent {}
`,
parserOptions: parserOptions
},
*/
}]
// ---------
// createClass tests above fail, so they're commented out
*/
});

0 comments on commit 07232ad

Please sign in to comment.