eslint-plugin-smarthr 0.1.2 → 0.2.1

package/test/a11y-clickable-element-has-text.js

@@ -0,0 +1,142 @@
+const rule = require('../rules/a11y-clickable-element-has-text')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const defaultErrorMessage = 'a, button要素にはテキストを設定してください。要素内にアイコン、画像のみを設置する場合はSmartHR UIのvisuallyHiddenText、通常のHTML要素にはaltなどの代替テキスト用属性を指定してください'
+
+ruleTester.run('a11y-clickable-element-has-text', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeAnchor = styled.a``' },
+    { code: 'const HogeLink = styled.a``' },
+    { code: 'const HogeButton = styled.button``' },
+    { code: 'const HogeAnchor = styled(Anchor)``' },
+    { code: 'const HogeLink = styled(Link)``' },
+    { code: 'const HogeButton = styled(Button)``' },
+    { code: 'const FugaAnchor = styled(HogeAnchor)``' },
+    {
+      code: `<a>ほげ</a>`,
+    },
+    {
+      code: `<Link>ほげ</Link>`,
+    },
+    {
+      code: `<HogeLink>ほげ</HogeLink>`,
+    },
+    {
+      code: `<Anchor>ほげ</Anchor>`,
+    },
+    {
+      code: `<FugaAnchor>ほげ</FugaAnchor>`,
+    },
+    {
+      code: `<AnchorButton>ほげ</AnchorButton>`,
+    },
+    {
+      code: `<HogaAnchorButton>ほげ</HogaAnchorButton>`,
+    },
+    {
+      code: `<Button>ほげ</Button>`,
+    },
+    {
+      code: `<a />`,
+    },
+    {
+      code: `<button />`,
+    },
+    {
+      code: `<Anchor />`,
+    },
+    {
+      code: `<Link />`,
+    },
+    {
+      code: `<Button />`,
+    },
+    {
+      code: `<HogeButton />`,
+    },
+    {
+      code: `<a><span>ほげ</span></a>`,
+    },
+    {
+      code: `<a><AnyComponent>ほげ</AnyComponent></a>`,
+    },
+    {
+      code: `<a><img src="hoge.jpg" alt="ほげ" /></a>`,
+    },
+    {
+      code: `<a><Icon visuallyHiddenText="ほげ" /></a>`,
+    },
+    {
+      code: `<a><AnyComponent><Icon visuallyHiddenText="ほげ" /></AnyComponent></a>`,
+    },
+    {
+      code: `<a>{any}</a>`,
+    },
+    {
+      code: `<a><span>{any}</span></a>`,
+    },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Fuga = styled(HogeAnchor)``', errors: [ { message: `Fugaを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    {
+      code: `<a><img src="hoge.jpg" /></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<a><Any /></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<a><span><Any /></span></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<a><img src="hoge.jpg" alt="" /></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<a><AnyComponent><Icon visuallyHiddenText="" /></AnyComponent></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><img src="hoge.jpg" /></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><Any /></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><span><Any /></span></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><img src="hoge.jpg" alt="" /></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><AnyComponent><Icon visuallyHiddenText="" /></AnyComponent></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+  ]
+})

package/test/a11y-image-has-alt-attribute.js

@@ -0,0 +1,44 @@
+const rule = require('../rules/a11y-image-has-alt-attribute')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('a11y-image-has-alt-attribute', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeImg = styled.img``' },
+    { code: 'const HogeImage = styled.img``' },
+    { code: 'const HogeIcon = styled.img``' },
+    { code: 'const HogeImg = styled.svg``' },
+    { code: 'const HogeImage = styled.svg``' },
+    { code: 'const HogeIcon = styled.svg``' },
+    { code: 'const HogeImg = styled(Img)``' },
+    { code: 'const HogeImage = styled(Image)``' },
+    { code: 'const HogeIcon = styled(ICon)``' },
+    { code: '<img alt="hoge" />' },
+    { code: '<HogeImg alt="hoge" />' },
+    { code: '<HogeImage alt="hoge" />' },
+    { code: '<HogeIcon />' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.img``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.svg``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Icon)``', errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Img)``', errors: [ { message: `Hogeを正規表現 "/Img$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Image)``', errors: [ { message: `Hogeを正規表現 "/Image$/" がmatchする名称に変更してください` } ] },
+    { code: '<img />', errors: [ { message: '画像にはalt属性を指定してください。SVG component の場合、altを属性として受け取れるようにした上で `<svg role="img" aria-label={alt}>` のように指定してください。画像ではない場合、img or image を末尾に持たない名称に変更してください。' } ] },
+    { code: '<HogeImage alt="" />', errors: [ { message: '画像の情報をテキストにした代替テキスト（`alt`）を設定してください。装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。' } ] },
+  ]
+})

package/test/a11y-trigger-has-button.js

@@ -0,0 +1,50 @@
+const rule = require('../rules/a11y-trigger-has-button')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('a11y-trigger-has-button', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeButton = styled.button``' },
+    { code: 'const HogeAnchor = styled.a``' },
+    { code: 'const HogeLink = styled.a``' },
+    { code: 'const HogeButton = styled(Button)``' },
+    { code: 'const HogeButtonAnchor = styled(ButtonAnchor)``' },
+    { code: 'const HogeAnchorButton = styled(AnchorButton)``' },
+    { code: 'const HogeLink = styled(FugaLink)``' },
+    { code: 'const HogeAnchor = styled(FugaAnchor)``' },
+    { code: 'const HogeDialogTrigger = styled(DialogTrigger)``' },
+    { code: 'const HogeDropdownTrigger = styled(DropdownTrigger)``' },
+    { code: '<DropdownTrigger><button>hoge</button></DropdownTrigger>' },
+    { code: '<DialogTrigger><button>{hoge}</button></DialogTrigger>' },
+    { code: '<DropdownTrigger>{hoge}</DropdownTrigger>' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(AnchorButton)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` },{ message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(ButtonAnchor)``', errors: [ { message: `Hogeを正規表現 "/ButtonAnchor$/" がmatchする名称に変更してください` }, { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(DropdownTrigger)``', errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(DialogTrigger)``', errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください` } ]  },
+    { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+    { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+    { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+    { code: '<DropdownTrigger><ButtonAnchor>ほげ</ButtonAnchor></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+  ]
+})

package/test/best-practice-for-date.js

@@ -0,0 +1,31 @@
+const rule = require('../rules/best-practice-for-date')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const errorNewDate = "'new Date(arg)' のように引数一つのみの指定方は実行環境により結果が変わる可能性があるため 'new Date(2022, 12 - 1, 31)' のようにparseするなど他の方法を検討してください。"
+const errorDateParse = 'Date.parse は日付形式の解釈がブラウザによって異なるため、他の手段を検討してください'
+
+ruleTester.run('best-practice-for-date', rule, {
+  valid: [
+    { code: `new Date()` },
+    { code: `new Date(2022, 11, 31)` },
+    { code: `new Date('2022', '11', '31')` },
+    { code: `const year = 2022; const month = 11; const date = 31; new Date(year, month, date)` },
+  ],
+  invalid: [
+    { code: 'new Date("2022/12/31")', errors: [ { message: errorNewDate } ] },
+    { code: 'const arg = "2022/12/31"; new Date(arg)', errors: [ { message: errorNewDate } ] },
+    { code: 'Date.parse("2022/12/31")', errors: [ { message: errorDateParse } ] },
+    { code: 'const arg = "2022/12/31"; Date.parse(arg)', errors: [ { message: errorDateParse } ] },
+  ]
+})

package/test/format-translate-component.js

@@ -0,0 +1,37 @@
+const rule = require('../rules/format-translate-component')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const options = [
+  {
+    componentPath: '@/any/path/Translate',
+    componentName: 'Translate',
+    prohibitAttributies: ['data-translate'],
+  }
+]
+
+ruleTester.run('format-translate-component', rule, {
+  valid: [
+    { code: '<Any data-wovn-enable="true">ほげ</Any>', options },
+    { code: '<Translate>ほげ</Translate>', options },
+    { code: '<Translate>ほげ<br />ふが</Translate>', options },
+    { code: '<Translate>{any}</Translate>', options },
+    { code: '<Translate dangerouslySetInnerHTML={{ __html: "ほげ" }} />', options },
+  ],
+  invalid: [
+    { code: '<Any data-translate="true">ほげ</Any>', options, errors: [ { message: 'data-translate 属性は使用せず、 @/any/path/Translate コンポーネントを利用してください' } ] },
+    { code: '<Translate><Any>ほげ</Any></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
+    { code: '<Translate><Any /></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
+    { code: '<Translate></Translate>', options, errors: [ { message: 'Translate 内には必ずテキストを設置してください' } ] },
+  ]
+})

package/test/prohibit-file-name.js

@@ -0,0 +1,45 @@
+const rule = require('../rules/prohibit-file-name')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2015
+  },
+})
+
+ruleTester.run('prohibit-file-name', rule, {
+  valid: [
+    {
+      code: 'const any = "code"',
+      filename: 'hoge.js',
+      options: [
+        {
+          'fuga\.js': 'any message.',
+        }
+      ]
+    },
+  ],
+  invalid: [
+    {
+      code: 'const any = "code"',
+      filename: 'hoge.js',
+      options: [
+        {
+          'hoge\.js': 'any message.',
+        }
+      ],
+      errors: [{ message: 'any message.' }]
+    },
+    {
+      code: 'const any = "code"',
+      filename: 'hoge.js',
+      options: [
+        {
+          '(hoge|fuga)\.js': '$1.jsは作成しないで！',
+        }
+      ],
+      errors: [{ message: 'hoge.jsは作成しないで！' }]
+    },
+  ]
+})

package/test/require-export.js

@@ -0,0 +1,83 @@
+const rule = require('../rules/require-export')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2015
+  },
+})
+
+ruleTester.run('require-export', rule, {
+  valid: [
+    {
+      code: `const hoge = {}; export { hoge }`,
+      options: [
+        {
+          '^.+$': ['hoge'],
+        }
+      ],
+    },
+    {
+      code: `const hoge = {}, fuga = {}; export { hoge, fuga }`,
+      options: [
+        {
+          '^.+$': ['hoge', 'fuga'],
+        }
+      ],
+    },
+    {
+      code: `const hoge = {}, fuga = {}; export { hoge, fuga }`,
+      options: [
+        {
+          '^.+$': ['fuga'],
+        }
+      ],
+    },
+    {
+      code: `export const hoge = {}`,
+      options: [
+        {
+          '^.+$': ['hoge'],
+        }
+      ],
+    },
+    {
+      code: `const hoge = {}; export default hoge`,
+      options: [
+        {
+          '^.+$': ['default'],
+        }
+      ],
+    },
+  ],
+  invalid: [
+    {
+      code: `const hoge ={}; export { hoge }`,
+      options: [
+        {
+          '^.+$': ['fuga'],
+        }
+      ],
+      errors: [{ message: 'fuga をexportしてください' }],
+    },
+    {
+      code: `export const hoge = {}`,
+      options: [
+        {
+          '^.+$': ['fuga'],
+        }
+      ],
+      errors: [{ message: 'fuga をexportしてください' }],
+    },
+    {
+      code: `const hoge = {}; export { hoge }`,
+      options: [
+        {
+          '^.+$': ['default'],
+        }
+      ],
+      errors: [{ message: 'default をexportしてください' }],
+    },
+  ]
+})

package/rules/a11y-icon-button-has-name.js

@@ -1,56 +0,0 @@
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    messages: {
-      'a11y-icon-button-has-name': '{{ message }}',
-    },
-    schema: [],
-  },
-  create(context) {
-    return {
-      JSXOpeningElement: (node) => {
-        if (!node.name.name || !node.name.name.match(/Button(Anchor)?$/)) {
-          return
-        }
-
-        const children = node.parent.children.filter((c) => (
-          !(c.type === 'JSXText' && c.value.match(/^\s*\n+\s*$/))
-        ))
-
-        if (children.length === 0) {
-          return
-        }
-
-        let existIcon = false
-        let existNoIcon = false
-        let targetNode = node
-
-        const child = children.find((c) => {
-          if (c.type === 'JSXElement' && c.openingElement.name.name.match(/Icon$/)) {
-            existIcon = true
-            targetNode = c
-
-            if (!existNoIcon) {
-              existNoIcon = c.openingElement.attributes.some((a) => a.name.name === 'visuallyHiddenText')
-            }
-          } else {
-            existNoIcon = true
-          }
-
-          return existIcon && !existNoIcon
-        })
-
-        if (child) {
-          context.report({
-            node: targetNode,
-            messageId: 'a11y-icon-button-has-name',
-            data: {
-              message: `Button 内に Icon のみを設置する場合、Icon に visuallyHiddenText props を指定してください`,
-            },
-          });
-        }
-      },
-    }
-  },
-}
-module.exports.schema = []