diff --git a/lib/rules/sort-prop-types.js b/lib/rules/sort-prop-types.js index f38b926e9e..9dbf13ad1a 100644 --- a/lib/rules/sort-prop-types.js +++ b/lib/rules/sort-prop-types.js @@ -8,6 +8,7 @@ const variableUtil = require('../util/variable'); const propsUtil = require('../util/props'); const docsUrl = require('../util/docsUrl'); const propWrapperUtil = require('../util/propWrapper'); +// const propTypesSortUtil = require('../util/propTypesSort'); // ------------------------------------------------------------------------------ // Rule Definition @@ -22,6 +23,8 @@ module.exports = { url: docsUrl('sort-prop-types') }, + // fixable: 'code', + schema: [{ type: 'object', properties: { @@ -95,6 +98,18 @@ module.exports = { return; } + // function fix(fixer) { + // return propTypesSortUtil.fixPropTypesSort( + // fixer, + // context, + // declarations, + // ignoreCase, + // requiredFirst, + // callbacksLast, + // sortShapeProp + // ); + // } + declarations.reduce((prev, curr, idx, decls) => { if (curr.type === 'ExperimentalSpreadProperty' || curr.type === 'SpreadElement') { return decls[idx + 1]; @@ -122,6 +137,7 @@ module.exports = { context.report({ node: curr, message: 'Required prop types must be listed before all other prop types' + // fix }); return curr; } @@ -137,6 +153,7 @@ module.exports = { context.report({ node: prev, message: 'Callback prop types must be listed after all other prop types' + // fix }); return prev; } @@ -146,6 +163,7 @@ module.exports = { context.report({ node: curr, message: 'Prop types declarations should be sorted alphabetically' + // fix }); return prev; } diff --git a/tests/lib/rules/jsx-sort-default-props.js b/tests/lib/rules/jsx-sort-default-props.js index 4f3918fb25..550307c265 100644 --- a/tests/lib/rules/jsx-sort-default-props.js +++ b/tests/lib/rules/jsx-sort-default-props.js @@ -622,6 +622,49 @@ ruleTester.run('jsx-sort-default-props', rule, { '};' ].join('\n') }, { + // Disabled test for comments -- fails + // code: [ + // 'class Hello extends React.Component {', + // ' render() {', + // ' return
Hello
;', + // ' }', + // '}', + // 'Hello.propTypes = {', + // ' "a": PropTypes.string,', + // ' "B": PropTypes.string,', + // '};', + // 'Hello.defaultProps = {', + // ' /* a */', + // ' "a": "a",', + // ' /* B */', + // ' "B": "B",', + // '};' + // ].join('\n'), + // parser: parsers.BABEL_ESLINT, + // errors: [{ + // message: ERROR_MESSAGE, + // line: 14, + // column: 3, + // type: 'Property' + // }], + // output: [ + // 'class Hello extends React.Component {', + // ' render() {', + // ' return
Hello
;', + // ' }', + // '}', + // 'Hello.propTypes = {', + // ' "a": PropTypes.string,', + // ' "B": PropTypes.string,', + // '};', + // 'Hello.defaultProps = {', + // ' /* B */', + // ' "B": "B",', + // ' /* a */', + // ' "a": "a",', + // '};' + // ].join('\n') + // }, { code: [ 'class Hello extends React.Component {', ' render() {', diff --git a/tests/lib/rules/sort-prop-types.js b/tests/lib/rules/sort-prop-types.js index 6de623e41a..65a529d589 100644 --- a/tests/lib/rules/sort-prop-types.js +++ b/tests/lib/rules/sort-prop-types.js @@ -487,6 +487,51 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' a: PropTypes.any,', + // ' z: PropTypes.string', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') + }, { + code: [ + 'var First = createReactClass({', + ' propTypes: {', + ' /* z */', + ' z: PropTypes.string,', + ' /* a */', + ' a: PropTypes.any', + ' },', + ' render: function() {', + ' return
;', + ' }', + '});' + ].join('\n'), + errors: [{ + message: ERROR_MESSAGE, + line: 6, + column: 5, + type: 'Property' + }] + // Disabled test for comments -- fails + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' /* a */', + // ' a: PropTypes.any,', + // ' /* z */', + // ' z: PropTypes.string', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -505,6 +550,17 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' Z: PropTypes.any,', + // ' z: PropTypes.any', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -526,6 +582,17 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' a: PropTypes.any,', + // ' Z: PropTypes.any', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -541,6 +608,19 @@ ruleTester.run('sort-prop-types', rule, { '});' ].join('\n'), errors: 2 + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' A: PropTypes.any,', + // ' Z: PropTypes.string,', + // ' a: PropTypes.any,', + // ' z: PropTypes.string', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -563,6 +643,26 @@ ruleTester.run('sort-prop-types', rule, { '});' ].join('\n'), errors: 2 + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' Zz: PropTypes.string,', + // ' a: PropTypes.any', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});', + // 'var Second = createReactClass({', + // ' propTypes: {', + // ' ZZ: PropTypes.string,', + // ' aAA: PropTypes.any', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'class First extends React.Component {', @@ -585,6 +685,26 @@ ruleTester.run('sort-prop-types', rule, { '};' ].join('\n'), errors: 2 + // output: [ + // 'class First extends React.Component {', + // ' render() {', + // ' return
;', + // ' }', + // '}', + // 'First.propTypes = {', + // ' bb: PropTypes.string,', + // ' yy: PropTypes.any', + // '};', + // 'class Second extends React.Component {', + // ' render() {', + // ' return
;', + // ' }', + // '}', + // 'Second.propTypes = {', + // ' ZZ: PropTypes.string,', + // ' aAA: PropTypes.any', + // '};' + // ].join('\n') }, { code: [ 'class Component extends React.Component {', @@ -600,6 +720,18 @@ ruleTester.run('sort-prop-types', rule, { ].join('\n'), parser: parsers.BABEL_ESLINT, errors: 2 + // output: [ + // 'class Component extends React.Component {', + // ' static propTypes = {', + // ' a: PropTypes.any,', + // ' y: PropTypes.any,', + // ' z: PropTypes.any', + // ' };', + // ' render() {', + // ' return
;', + // ' }', + // '}' + // ].join('\n') }, { code: [ 'class Component extends React.Component {', @@ -618,6 +750,18 @@ ruleTester.run('sort-prop-types', rule, { propWrapperFunctions: ['forbidExtraProps'] }, errors: 2 + // output: [ + // 'class Component extends React.Component {', + // ' static propTypes = forbidExtraProps({', + // ' a: PropTypes.any,', + // ' y: PropTypes.any,', + // ' z: PropTypes.any', + // ' });', + // ' render() {', + // ' return
;', + // ' }', + // '}' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -641,6 +785,19 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' a: PropTypes.any,', + // ' z: PropTypes.string,', + // ' onBar: PropTypes.func,', + // ' onFoo: PropTypes.func', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'class Component extends React.Component {', @@ -665,6 +822,19 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'class Component extends React.Component {', + // ' static propTypes = {', + // ' a: PropTypes.any,', + // ' z: PropTypes.string,', + // ' onBar: PropTypes.func,', + // ' onFoo: PropTypes.func', + // ' };', + // ' render() {', + // ' return
;', + // ' }', + // '}' + // ].join('\n') }, { code: [ 'class First extends React.Component {', @@ -688,6 +858,19 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'class First extends React.Component {', + // ' render() {', + // ' return
;', + // ' }', + // '}', + // 'First.propTypes = {', + // ' a: PropTypes.any,', + // ' z: PropTypes.string,', + // ' onBar: PropTypes.func,', + // ' onFoo: PropTypes.func', + // '};' + // ].join('\n') }, { code: [ 'class First extends React.Component {', @@ -714,6 +897,19 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'class First extends React.Component {', + // ' render() {', + // ' return
;', + // ' }', + // '}', + // 'First.propTypes = forbidExtraProps({', + // ' a: PropTypes.any,', + // ' z: PropTypes.string,', + // ' onBar: PropTypes.func,', + // ' onFoo: PropTypes.func', + // '});' + // ].join('\n') }, { code: [ 'const First = (props) =>
;', @@ -732,6 +928,14 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'const First = (props) =>
;', + // 'const propTypes = {', + // ' a: PropTypes.any,', + // ' z: PropTypes.string,', + // '};', + // 'First.propTypes = forbidExtraProps(propTypes);' + // ].join('\n') }, { code: [ 'const First = (props) =>
;', @@ -750,6 +954,14 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'const First = (props) =>
;', + // 'const propTypes = {', + // ' a: PropTypes.any,', + // ' z: PropTypes.string,', + // '};', + // 'First.propTypes = propTypes;' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -773,6 +985,19 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' a: PropTypes.any,', + // ' z: PropTypes.string,', + // ' onBar: PropTypes.func,', + // ' onFoo: PropTypes.func', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -795,6 +1020,18 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' barRequired: PropTypes.string.isRequired,', + // ' fooRequired: PropTypes.string.isRequired,', + // ' a: PropTypes.any', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -817,6 +1054,18 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' barRequired: PropTypes.string.isRequired,', + // ' a: PropTypes.any,', + // ' onFoo: PropTypes.func', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'export default class ClassWithSpreadInPropTypes extends BaseClass {', @@ -835,6 +1084,16 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'export default class ClassWithSpreadInPropTypes extends BaseClass {', + // ' static propTypes = {', + // ' b: PropTypes.string,', + // ' ...a.propTypes,', + // ' c: PropTypes.string,', + // ' d: PropTypes.string', + // ' }', + // '}' + // ].join('\n') }, { code: [ 'export default class ClassWithSpreadInPropTypes extends BaseClass {', @@ -855,6 +1114,18 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'export default class ClassWithSpreadInPropTypes extends BaseClass {', + // ' static propTypes = {', + // ' b: PropTypes.string,', + // ' ...a.propTypes,', + // ' d: PropTypes.string,', + // ' f: PropTypes.string,', + // ' ...e.propTypes,', + // ' c: PropTypes.string', + // ' }', + // '}' + // ].join('\n') }, { code: [ 'const propTypes = {', @@ -872,6 +1143,16 @@ ruleTester.run('sort-prop-types', rule, { column: 3, type: 'Property' }] + // output: [ + // 'const propTypes = {', + // ' a: PropTypes.string,', + // ' b: PropTypes.string,', + // '};', + // 'const TextFieldLabel = (props) => {', + // ' return
;', + // '};', + // 'TextFieldLabel.propTypes = propTypes;' + // ].join('\n') }, { code: ` class Component extends React.Component { @@ -903,6 +1184,22 @@ ruleTester.run('sort-prop-types', rule, { column: 11, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // x: PropTypes.any, + // y: PropTypes.any, + // z: PropTypes.shape({ + // a: PropTypes.any, + // b: PropTypes.bool, + // c: PropTypes.any, + // }), + // }; + // ` }, { code: ` class Component extends React.Component { @@ -925,6 +1222,18 @@ ruleTester.run('sort-prop-types', rule, { column: 9, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // x: PropTypes.any, + // y: PropTypes.any, + // z: PropTypes.shape(), + // }; + // ` }, { code: ` class Component extends React.Component { @@ -947,6 +1256,18 @@ ruleTester.run('sort-prop-types', rule, { column: 9, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // x: PropTypes.any, + // y: PropTypes.any, + // z: PropTypes.shape(someType), + // }; + // ` }, { code: ` class Component extends React.Component { @@ -994,6 +1315,23 @@ ruleTester.run('sort-prop-types', rule, { column: 11, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // a: PropTypes.shape({ + // C: PropTypes.string, + // a: PropTypes.any, + // b: PropTypes.bool, + // c: PropTypes.any, + // }), + // y: PropTypes.any, + // z: PropTypes.any, + // }; + // ` }, { code: ` class Component extends React.Component { @@ -1027,6 +1365,23 @@ ruleTester.run('sort-prop-types', rule, { column: 11, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // x: PropTypes.any, + // y: PropTypes.any, + // z: PropTypes.shape({ + // a: PropTypes.any, + // b: PropTypes.bool, + // c: PropTypes.any, + // C: PropTypes.string, + // }), + // }; + // ` }, { code: ` class Component extends React.Component { @@ -1055,6 +1410,23 @@ ruleTester.run('sort-prop-types', rule, { column: 11, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // x: PropTypes.any, + // y: PropTypes.any, + // z: PropTypes.shape({ + // c: PropTypes.number.isRequired, + // a: PropTypes.string, + // b: PropTypes.any, + // d: PropTypes.bool, + // }), + // }; + // ` }, { code: ` class Component extends React.Component { @@ -1089,6 +1461,24 @@ ruleTester.run('sort-prop-types', rule, { column: 11, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // x: PropTypes.any, + // y: PropTypes.any, + // z: PropTypes.shape({ + // a: PropTypes.string, + // b: PropTypes.any, + // c: PropTypes.number.isRequired, + // d: PropTypes.bool, + // onFoo: PropTypes.func, + // }), + // }; + // ` }, { code: ` class Component extends React.Component { @@ -1123,6 +1513,25 @@ ruleTester.run('sort-prop-types', rule, { column: 11, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // x: PropTypes.any, + // y: PropTypes.any, + // z: PropTypes.shape({ + // a: PropTypes.string, + // b: PropTypes.any, + // c: PropTypes.number.isRequired, + // ...otherPropTypes, + // d: PropTypes.string, + // f: PropTypes.bool, + // }), + // }; + // ` }, { code: ` class Component extends React.Component { @@ -1165,6 +1574,22 @@ ruleTester.run('sort-prop-types', rule, { column: 13, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // static propTypes = { + // a: PropTypes.shape({ + // a: PropTypes.any, + // b: PropTypes.bool, + // c: PropTypes.any, + // }), + // y: PropTypes.any, + // z: PropTypes.any, + // }; + // render() { + // return
; + // } + // } + // ` }, { code: [ 'var First = createReactClass({', @@ -1186,6 +1611,17 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' a: PropTypes.any,', + // ' z: PropTypes.string', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: [ 'var First = createReactClass({', @@ -1208,6 +1644,18 @@ ruleTester.run('sort-prop-types', rule, { column: 5, type: 'Property' }] + // output: [ + // 'var First = createReactClass({', + // ' propTypes: {', + // ' a: PropTypes.any,', + // ' \'data-letter\': PropTypes.string,', + // ' e: PropTypes.any', + // ' },', + // ' render: function() {', + // ' return
;', + // ' }', + // '});' + // ].join('\n') }, { code: ` class Component extends React.Component { @@ -1229,6 +1677,17 @@ ruleTester.run('sort-prop-types', rule, { column: 9, type: 'Property' }] + // output: ` + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // 0: PropTypes.any, + // 1: PropTypes.any, + // }; + // ` }, { code: ` const shape = { @@ -1261,6 +1720,22 @@ ruleTester.run('sort-prop-types', rule, { column: 9, type: 'Property' }] + // output: ` + // const shape = { + // a: PropTypes.any, + // b: PropTypes.bool, + // c: PropTypes.any, + // }; + // class Component extends React.Component { + // static propTypes = { + // x: PropTypes.shape(shape), + // }; + + // render() { + // return
; + // } + // } + // ` }, { code: ` const shape = { @@ -1291,5 +1766,20 @@ ruleTester.run('sort-prop-types', rule, { column: 9, type: 'Property' }] + // output: ` + // const shape = { + // a: PropTypes.any, + // b: PropTypes.bool, + // c: PropTypes.any, + // }; + // class Component extends React.Component { + // render() { + // return
; + // } + // } + // Component.propTypes = { + // x: PropTypes.shape(shape) + // }; + // ` }] });