eslint-plugin-reblend
Version:
Reblend specific linting rules for ESLint
573 lines (564 loc) • 12.1 kB
JavaScript
/**
* @fileoverview Tests for forbid-component-props
*/
'use strict';
// -----------------------------------------------------------------------------
// Requirements
// -----------------------------------------------------------------------------
const RuleTester = require('eslint').RuleTester;
const rule = require('../../../lib/rules/forbid-component-props');
const parsers = require('../../helpers/parsers');
const parserOptions = {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
};
// -----------------------------------------------------------------------------
// Tests
// -----------------------------------------------------------------------------
const ruleTester = new RuleTester({ parserOptions });
ruleTester.run('forbid-component-props', rule, {
valid: parsers.all([
{
code: `
var First = createReblendClass({
render: function() {
return <div className="foo" />;
}
});
`,
},
{
code: `
var First = createReblendClass({
render: function() {
return <div style={{color: "red"}} />;
}
});
`,
options: [{ forbid: ['style'] }],
},
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <Foo bar="baz" />;
}
});
`,
},
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <Foo className="bar" />;
}
});
`,
options: [{ forbid: ['style'] }],
},
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <Foo className="bar" />;
}
});
`,
options: [{ forbid: ['style', 'foo'] }],
},
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <this.Foo bar="baz" />;
}
});
`,
},
{
code: `
class First extends createReblendClass {
render() {
return <this.foo className="bar" />;
}
}
`,
options: [{ forbid: ['style'] }],
},
{
code: `
const First = (props) => (
<this.Foo {...props} />
);
`,
},
{
code: `
const item = (<ReblendModal className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
allowedFor: ['ReblendModal'],
},
],
},
],
},
{
code: `
const item = (<AntdLayout.Content className="antdFoo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
allowedFor: ['AntdLayout.Content'],
},
],
},
],
},
{
code: `
const item = (<this.ReblendModal className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
allowedFor: ['this.ReblendModal'],
},
],
},
],
},
{
code: `
const item = (<Foo className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
disallowedFor: ['ReblendModal'],
},
],
},
],
},
{
code: `
const item = (<Foo className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
disallowedFor: ['ReblendModal'],
},
],
},
],
},
{
code: `
<fbt:param name="Total number of files" number={true} />
`,
features: ['jsx namespace'],
},
{
code: `
const item = (
<Foo className="bar">
<ReblendModal style={{color: "red"}} />
</Foo>
);
`,
options: [
{
forbid: [
{
propName: 'className',
disallowedFor: ['OtherModal', 'ReblendModal'],
},
{
propName: 'style',
disallowedFor: ['Foo'],
},
],
},
],
},
{
code: `
const item = (
<Foo className="bar">
<ReblendModal style={{color: "red"}} />
</Foo>
);
`,
options: [
{
forbid: [
{
propName: 'className',
disallowedFor: ['OtherModal', 'ReblendModal'],
},
{
propName: 'style',
allowedFor: ['ReblendModal'],
},
],
},
],
},
{
code: `
const item = (<this.ReblendModal className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
disallowedFor: ['ReblendModal'],
},
],
},
],
},
]),
invalid: parsers.all([
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <Foo className="bar" />;
}
});
`,
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'className' },
line: 5,
type: 'JSXAttribute',
},
],
},
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <Foo style={{color: "red"}} />;
}
});
`,
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'style' },
line: 5,
type: 'JSXAttribute',
},
],
},
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <Foo className="bar" />;
}
});
`,
options: [{ forbid: ['className', 'style'] }],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'className' },
line: 5,
column: 25,
type: 'JSXAttribute',
},
],
},
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <Foo style={{color: "red"}} />;
}
});
`,
options: [{ forbid: ['className', 'style'] }],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'style' },
line: 5,
type: 'JSXAttribute',
},
],
},
{
code: `
var First = createReblendClass({
propTypes: externalPropTypes,
render: function() {
return <Foo style={{color: "red"}} />;
}
});
`,
options: [
{
forbid: [
{
propName: 'style',
disallowedFor: ['Foo'],
},
],
},
],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'style' },
line: 5,
type: 'JSXAttribute',
},
],
},
{
code: `
const item = (<Foo className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
allowedFor: ['ReblendModal'],
},
],
},
],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'className' },
line: 2,
type: 'JSXAttribute',
},
],
},
{
code: `
const item = (<this.ReblendModal className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
allowedFor: ['ReblendModal'],
},
],
},
],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'className' },
line: 2,
column: 40,
type: 'JSXAttribute',
},
],
},
{
code: `
const item = (<this.ReblendModal className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
disallowedFor: ['this.ReblendModal'],
},
],
},
],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'className' },
line: 2,
column: 40,
type: 'JSXAttribute',
},
],
},
{
code: `
const item = (<ReblendModal className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
disallowedFor: ['ReblendModal'],
},
],
},
],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'className' },
line: 2,
column: 35,
type: 'JSXAttribute',
},
],
},
{
code: `
const item = (<AntdLayout.Content className="antdFoo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
disallowedFor: ['AntdLayout.Content'],
},
],
},
],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'className' },
line: 2,
column: 43,
type: 'JSXAttribute',
},
],
},
{
code: `
const item = (<Foo className="foo" />);
`,
options: [
{
forbid: [
{
propName: 'className',
message: 'Please use ourCoolClassName instead of ClassName',
},
],
},
],
errors: [
{
message: 'Please use ourCoolClassName instead of ClassName',
line: 2,
column: 28,
type: 'JSXAttribute',
},
],
},
{
code: `
const item = () => (
<Foo className="foo">
<Bar option="high" />
</Foo>
);
`,
options: [
{
forbid: [
{
propName: 'className',
message: 'Please use ourCoolClassName instead of ClassName',
},
{
propName: 'option',
message: 'Avoid using option',
},
],
},
],
errors: [
{
message: 'Please use ourCoolClassName instead of ClassName',
line: 3,
column: 16,
type: 'JSXAttribute',
},
{
message: 'Avoid using option',
line: 4,
column: 18,
type: 'JSXAttribute',
},
],
},
{
code: `
const item = () => (
<Foo className="foo">
<Bar option="high" />
</Foo>
);
`,
options: [
{
forbid: [
{ propName: 'className' },
{
propName: 'option',
message: 'Avoid using option',
},
],
},
],
errors: [
{
messageId: 'propIsForbidden',
data: { prop: 'className' },
line: 3,
column: 16,
type: 'JSXAttribute',
},
{
message: 'Avoid using option',
line: 4,
column: 18,
type: 'JSXAttribute',
},
],
},
]),
});