@sumup-oss/eslint-plugin-circuit-ui
Version:
ESLint rules to lint Circuit UI.
316 lines (303 loc) • 8.6 kB
JavaScript
/**
* Copyright 2023, SumUp Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// We disable the rule in this file because we explicitly test invalid cases
import { RuleTester } from '@typescript-eslint/rule-tester';
import { noRenamedProps } from './index.js';
const ruleTester = new RuleTester({
languageOptions: {
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
});
ruleTester.run('no-renamed-props', noRenamedProps, {
valid: [
{
name: 'matched component with the correct prop value',
code: `
function Component() {
return <Button size="s" />
}
`,
},
{
name: 'unrelated component with the old prop value',
code: `
function Component() {
return <Badge size="kilo" />
}
`,
},
{
name: 'matched IconButton component with the correct icon prop and label as children',
code: `
function Component() {
return <IconButton icon={Close}>Close</IconButton>
}
`,
},
{
name: 'matched Body component without the variant prop',
code: `
function Component() {
return <Body>Lorem ipsum</Body>
}
`,
},
{
name: 'matched Body component with variant="quote"',
code: `
function Component() {
return (
<Body variant="quote">Lorem ipsum</Body>
)
}
`,
},
],
invalid: [
{
name: 'matched component with the old prop value',
code: `
function Component() {
return <Body size="two" />
}
`,
output: `
function Component() {
return <Body size="s" />
}
`,
errors: [{ messageId: 'propValue' }],
},
{
name: 'matched component with the old prop value as an expression',
code: `
function Component() {
return <Body size={'two'} />
}
`,
output: `
function Component() {
return <Body size="s" />
}
`,
errors: [{ messageId: 'propValue' }],
},
{
name: 'matched IconButton component with the old children prop',
code: `
function Component() {
return <IconButton label="Close"><Close /></IconButton>
}
`,
output: [
`
function Component() {
return <IconButton label="Close" icon={Close} />
}
`,
`
function Component() {
return <IconButton icon={Close} >Close</IconButton>
}
`,
],
errors: [{ messageId: 'propName' }, { messageId: 'propName' }],
},
{
name: 'matched IconButton component with icon component with size prop as child',
code: `
function Component() {
return (
<IconButton label="Close">
<Close size="16" />
</IconButton>
)
}
`,
output: [
`
function Component() {
return (
<IconButton label="Close" icon={Close} />
)
}
`,
`
function Component() {
return (
<IconButton icon={Close} >Close</IconButton>
)
}
`,
],
errors: [{ messageId: 'propName' }, { messageId: 'propName' }],
},
{
name: 'matched IconButton component with icon component with size prop and text as children',
code: `
function Component() {
return (
<IconButton label="Close">
Close <Close size="16" />
</IconButton>
)
}
`,
errors: [{ messageId: 'propName' }, { messageId: 'propName' }],
},
{
name: 'matched IconButton component with icon component with size and className props as child',
code: `
function Component() {
return (
<IconButton label="Close">
<Close size="16" className="icon" />
</IconButton>
)
}
`,
errors: [{ messageId: 'propName' }, { messageId: 'propName' }],
},
{
name: 'matched IconButton component with span element as child',
code: `
function Component() {
return (
<IconButton label="Close">
<span>x</span>
</IconButton>
)
}
`,
errors: [{ messageId: 'propName' }, { messageId: 'propName' }],
},
{
name: 'matched IconButton component with the old label prop',
code: `
// label prop as string
function ComponentA() {
return <IconButton icon={Close} label="Close" />
}
// label prop as expression
function ComponentB() {
return (
<IconButton icon={Close} label={t('close')} />
)
}
// label prop as elements
function ComponentC() {
return (
<IconButton icon={Close} label={<span>Close</span>} />
)
}
// label prop as conditional
function ComponentD() {
return (
<IconButton icon={Close} label={open ? 'Close' : 'Open'} />
)
}
// label prop as variable
function ComponentE() {
return (
<IconButton icon={Close} label={close} />
)
}
`,
output: `
// label prop as string
function ComponentA() {
return <IconButton icon={Close} >Close</IconButton>
}
// label prop as expression
function ComponentB() {
return (
<IconButton icon={Close} >{t('close')}</IconButton>
)
}
// label prop as elements
function ComponentC() {
return (
<IconButton icon={Close} ><span>Close</span></IconButton>
)
}
// label prop as conditional
function ComponentD() {
return (
<IconButton icon={Close} >{open ? 'Close' : 'Open'}</IconButton>
)
}
// label prop as variable
function ComponentE() {
return (
<IconButton icon={Close} >{close}</IconButton>
)
}
`,
errors: [
{ messageId: 'propName' },
{ messageId: 'propName' },
{ messageId: 'propName' },
{ messageId: 'propName' },
{ messageId: 'propName' },
],
},
{
name: 'matched Body component with the old prop value',
code: `
function ComponentA() {
return (
<Body variant="highlight">Lorem ipsum</Body>
)
}
function ComponentB() {
return (
<Body as="span" variant="highlight">Lorem ipsum</Body>
)
}
function ComponentC() {
return (
<Body variant="alert">Lorem ipsum</Body>
)
}
`,
output: `
function ComponentA() {
return (
<Body as="strong">Lorem ipsum</Body>
)
}
function ComponentB() {
return (
<Body as="span" weight="semibold">Lorem ipsum</Body>
)
}
function ComponentC() {
return (
<Body color="danger">Lorem ipsum</Body>
)
}
`,
errors: [
{ messageId: 'bodyVariant' },
{ messageId: 'bodyVariant' },
{ messageId: 'bodyVariant' },
],
},
],
});