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.

Sign up for GitHub

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

Jump to bottom

Additional cases for prop-types and no-unused-prop-types #1939

Merged
merged 3 commits into from Aug 20, 2018
Merged

Additional cases for prop-types and no-unused-prop-types #1939

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb5c87f
Additional tests for prop-types and no-unused-prop-types
alexzherdev Aug 5, 2018
e5bf7da
Fix lint
alexzherdev Aug 15, 2018
2d28512
Add propTypes tests
alexzherdev Aug 15, 2018
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
8 changes: 4 additions & 4 deletions lib/rules/no-unused-prop-types.js
View file
Open in desktop
Expand Up @@ -146,7 +146,7 @@ module.exports = {
function mustBeValidated(component) {
return Boolean(
component &&
!component.ignorePropsValidation
!component.ignoreUnusedPropTypesValidation
);
}

Expand Down Expand Up @@ -397,7 +397,7 @@ module.exports = {

const component = components.get(utils.getParentComponent());
const usedPropTypes = component && component.usedPropTypes || [];
let ignorePropsValidation = component && component.ignorePropsValidation || false;
let ignoreUnusedPropTypesValidation = component && component.ignoreUnusedPropTypesValidation || false;

switch (type) {
case 'direct':
Expand All @@ -414,7 +414,7 @@ module.exports = {
case 'destructuring':
for (let k = 0, l = (properties || []).length; k < l; k++) {
if (hasSpreadOperator(properties[k]) || properties[k].computed) {
ignorePropsValidation = true;
ignoreUnusedPropTypesValidation = true;
break;
}
const propName = getKeyValue(properties[k]);
Expand All @@ -441,7 +441,7 @@ module.exports = {

components.set(component ? component.node : node, {
usedPropTypes: usedPropTypes,
ignorePropsValidation: ignorePropsValidation
ignoreUnusedPropTypesValidation: ignoreUnusedPropTypesValidation
});
}

Expand Down
2 changes: 1 addition & 1 deletion lib/rules/prop-types.js
View file
Open in desktop
Expand Up @@ -191,7 +191,7 @@ module.exports = {
return true;
}
// Consider every children as declared
if (propType.children === true) {
if (propType.children === true || propType.containsSpread) {
return true;
}
if (propType.acceptedProperties) {
Expand Down
10 changes: 5 additions & 5 deletions lib/util/propTypes.js
View file
Open in desktop
Expand Up @@ -143,10 +143,10 @@ module.exports = function propTypesInstructions(context, components, utils) {
}
});

// nested object type spread means we need to ignore/accept everything in this object
if (containsObjectTypeSpread) {
return {};
}
// Mark if this shape has spread. We will know to consider all props from this shape as having propTypes,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to the case with propTypes, if the shape contains a spread plus some properties e.g.

type Props = {
  person: {
    ...$Exact<BasePerson>,
    lastname: string
  }
};

it would be unwise to throw away the information we have about lastname just because we have a spread. By setting an additional flag and leaving the children data in place, we can detect if lastname is being used.

// but still have the ability to detect unused children of this shape.
shapeTypeDefinition.containsSpread = containsObjectTypeSpread;

return shapeTypeDefinition;
},

Expand Down Expand Up @@ -669,7 +669,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
JSXSpreadAttribute: function(node) {
const component = components.get(utils.getParentComponent());
components.set(component ? component.node : node, {
ignorePropsValidation: true
ignoreUnusedPropTypesValidation: true
});
},

Expand Down
258 changes: 230 additions & 28 deletions tests/lib/rules/no-unused-prop-types.js
View file
Open in desktop
Expand Up @@ -1801,34 +1801,6 @@ ruleTester.run('no-unused-prop-types', rule, {
' bar: PropTypes.bool',
'};'
].join('\n')
}, {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So these tests are now able to detect that lastname is not used. I understand this is a breaking change? Not insisting on any of these to go in, but seems like a good change to me.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could consider it a bug that the rule missed it previously.

code: [
'type Person = {',
' ...data,',
' lastname: string',
'};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint'
}, {
code: [
'type Person = {|',
' ...data,',
' lastname: string',
'|};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint'
}, {
// The next two test cases are related to: https://github.com/yannickcr/eslint-plugin-react/issues/1183
code: [
Expand Down Expand Up @@ -2470,6 +2442,20 @@ ruleTester.run('no-unused-prop-types', rule, {
'}'
].join('\n'),
parser: 'babel-eslint'
}, {
code: [
'const foo = {};',
'class Hello extends React.Component {',
' render() {',
' const {firstname, lastname} = this.props.name;',
' return <div>{firstname} {lastname}</div>;',
' }',
'}',
'Hello.propTypes = {',
' name: PropTypes.shape(foo)',
'};'
].join('\n'),
parser: 'babel-eslint'
}, {
// issue #933
code: [
Expand Down Expand Up @@ -2913,6 +2899,23 @@ ruleTester.run('no-unused-prop-types', rule, {
}
`,
parser: 'babel-eslint'
}, {
code: [
'import type {BasePerson} from \'./types\'',
'type Props = {',
' person: {',
' ...$Exact<BasePerson>,',
' lastname: string',
' }',
'};',
'class Hello extends React.Component {',
' props: Props;',
' render () {',
' return <div>Hello {this.props.person.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
}
],

Expand Down Expand Up @@ -4475,6 +4478,48 @@ ruleTester.run('no-unused-prop-types', rule, {
errors: [{
message: '\'lastname\' PropType is defined but prop is never used'
}]
}, {
code: `
type Person = string;
class Hello extends React.Component<{ person: Person }> {
render () {
return <div />;
}
}
`,
settings: {react: {flowVersion: '0.53'}},
errors: [{
message: '\'person\' PropType is defined but prop is never used'
}],
parser: 'babel-eslint'
}, {
code: `
type Person = string;
class Hello extends React.Component<void, { person: Person }, void> {
render () {
return <div />;
}
}
`,
settings: {react: {flowVersion: '0.52'}},
errors: [{
message: '\'person\' PropType is defined but prop is never used'
}],
parser: 'babel-eslint'
}, {
code: `
function higherOrderComponent<P: { foo: string }>() {
return class extends React.Component<P> {
render() {
return <div />;
}
}
}
`,
errors: [{
message: '\'foo\' PropType is defined but prop is never used'
}],
parser: 'babel-eslint'
}, {
// issue #1506
code: [
Expand Down Expand Up @@ -4665,6 +4710,163 @@ ruleTester.run('no-unused-prop-types', rule, {
}, {
message: '\'a.b.c\' PropType is defined but prop is never used'
}]
}, {
code: `
type Props = { foo: string }
function higherOrderComponent<Props>() {
return class extends React.Component<Props> {
render() {
return <div />;
}
}
}
`,
parser: 'babel-eslint',
errors: [{
message: '\'foo\' PropType is defined but prop is never used'
}]
}, {
code: [
'type Person = {',
' ...data,',
' lastname: string',
'};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
errors: [{
message: '\'lastname\' PropType is defined but prop is never used'
}]
}, {
code: [
'type Person = {|',
' ...data,',
' lastname: string',
'|};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
errors: [{
message: '\'lastname\' PropType is defined but prop is never used'
}]
}, {
code: [
'type Person = {',
' ...$Exact<data>,',
' lastname: string',
'};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
errors: [{
message: '\'lastname\' PropType is defined but prop is never used'
}]
}, {
code: [
'import type {Data} from \'./Data\'',
'type Person = {',
' ...Data,',
' lastname: string',
'};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.bar}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
errors: [{
message: '\'lastname\' PropType is defined but prop is never used'
}]
}, {
code: [
'import type {Data} from \'some-libdef-like-flow-typed-provides\'',
'type Person = {',
' ...Data,',
' lastname: string',
'};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.bar}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
errors: [{
message: '\'lastname\' PropType is defined but prop is never used'
}]
}, {
code: [
'type Person = {',
' ...data,',
' lastname: string',
'};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
errors: [{
message: '\'lastname\' PropType is defined but prop is never used'
}]
}, {
code: [
'type Person = {|',
' ...data,',
' lastname: string',
'|};',
'class Hello extends React.Component {',
' props: Person;',
' render () {',
' return <div>Hello {this.props.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
errors: [{
message: '\'lastname\' PropType is defined but prop is never used'
}]
}, {
code: [
'import type {BasePerson} from \'./types\'',
'type Props = {',
' person: {',
' ...$Exact<BasePerson>,',
' lastname: string',
' }',
'};',
'class Hello extends React.Component {',
' props: Props;',
' render () {',
' return <div>Hello {this.props.person.firstname}</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
options: [{skipShapeProps: false}],
errors: [{
message: '\'person.lastname\' PropType is defined but prop is never used'
}]
}

/* , {
Expand Down