eslint-plugin-smarthr 0.5.11 → 0.5.13

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.13](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.12...v0.5.13) (2024-06-21)
+
+
+### Features
+
+* ButtonやTextLinkコンポーネントにprefix, suffixの両属性を同時に設定できないルールを追加 ([1eb7568](https://github.com/kufu/eslint-plugin-smarthr/commit/1eb75680a1125391106994532b58cc0591853711))
+
+### [0.5.12](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.11...v0.5.12) (2024-06-10)
+
+
+### Features
+
+* best-practice-for-data-test-attributeを追加 ([#141](https://github.com/kufu/eslint-plugin-smarthr/issues/141)) ([30a8f00](https://github.com/kufu/eslint-plugin-smarthr/commit/30a8f003e1cdb79c709390be0322703e74de284d))
+
 ### [0.5.11](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.9...v0.5.11) (2024-06-06)
 
 

package/README.md

@@ -15,6 +15,7 @@
 - [a11y-replace-unreadable-symbol](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-replace-unreadable-symbol)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
 - [best-practice-for-button-element](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-button-element)
+- [best-practice-for-data-test-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-data-test-attribute)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)
 - [best-practice-for-layouts](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-layouts)
 - [best-practice-for-remote-trigger-dialog](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-remote-trigger-dialog)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/best-practice-for-data-test-attribute/README.md

@@ -0,0 +1,34 @@
+# smarthr/best-practice-for-data-test-attribute
+
+- テスト用の `data-spec` と `data-testid` 属性の利用を控え、代替手段の検討を推奨するルールです。
+- `data-spec` 等の利用を控えることで、テスト環境標準のメソッドを利用することでアクセシビリティのテストも同時に行えるためテストコードの価値が高まります。
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-data-test-attribute': 'warn', // 'error', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Any data-spec="hoge">ほげ</Any>
+```
+
+```jsx
+<Any data-testid="hoge">ほげ</Any>
+```
+
+## ✅ Correct
+
+```jsx
+<Any data-hoge="true">...</Any>
+```
+
+```jsx
+<Any>...</Any>
+```

package/rules/best-practice-for-data-test-attribute/index.js

@@ -0,0 +1,36 @@
+const SCHEMA = []
+
+const prohibitAttributies = [
+  "data-spec",
+  "data-testid"
+]
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      JSXAttribute: (node) => {
+        const hit = prohibitAttributies.find((attr) => attr === node.name.name)
+
+        if (hit) {
+          context.report({
+            node,
+            message: `テストのために要素を指定するために、${hit} 属性を利用するのではなく、他の方法で要素を指定することを検討してください。
+ - 方法1: click_link, click_button等を利用したりすることで、利用しているテスト環境に準じた方法で要素を指定することを検討してください。
+   - 参考(Testing Library): https://testing-library.com/docs/queries/about
+   - 参考(Capybara): https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders
+ - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole属性、name属性、id属性等を利用した方法で要素を指定することを検討してください。
+ - 方法3: 上記の方法でも要素が指定できない場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`,
+          });
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/design-system-guideline-prohibit-double-icons/README.md

@@ -0,0 +1,47 @@
+# smarthr/design-system-guideline-prohibit-double-icons
+
+- 要素の前後両方にアイコンの使用を禁止するルールです
+  - `Button` や `TextLink` において、`prefix` と `suffix` が同時に設定されている場合、エラーとなります。
+  - 基本的にアイコンのみが設定される前提のルールになっていますが、文字列などが設定されている場合もエラーとなります。
+  - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/design-system-guideline-prohibit-double-icons': [
+      'error', // 'warn', 'off'
+      // { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Button>hoge</Button>
+<Button suffix={SUFFIX}>hoge</Button>
+<Button prefix="PREFIX">hoge</Button>
+<TextLink>hoge</TextLink>
+<TextLink suffix="SUFFIX">hoge</TextLink>
+<TextLink prefix={PREFIX}>hoge</TextLink>
+<StyledButton>hoge</StyledButton>
+<StyledLink>hoge</StyledLink>
+<Input prefix={PREFIX} suffix={SUFFIX} />
+```
+
+## ✅ Correct
+
+```jsx
+<Button>hoge</Button>
+<Button suffix={SUFFIX}>hoge</Button>
+<Button prefix="PREFIX">hoge</Button>
+<TextLink>hoge</TextLink>
+<TextLink suffix="SUFFIX">hoge</TextLink>
+<TextLink prefix={PREFIX}>hoge</TextLink>
+<StyledButton>hoge</StyledButton>
+<StyledLink>hoge</StyledLink>
+<Input prefix={PREFIX} suffix={SUFFIX} />
+```

package/rules/design-system-guideline-prohibit-double-icons/index.js

@@ -0,0 +1,58 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  '(Button)$': '(Button)$',
+  '(Link)$': '(Link)$',
+}
+
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const SCHEMA = []
+
+const REGEX_PATTERN = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const nodeName = node.name.name
+
+        if (REGEX_PATTERN.test(nodeName)) {
+          let prefix = null
+          let suffix = null
+
+          for (const attr of node.attributes) {
+            switch (attr.name.name) {
+              case 'prefix':
+                prefix = attr
+                break
+              case 'suffix':
+                suffix = attr
+                break
+            }
+
+            if(prefix && suffix) {
+              context.report({
+                node,
+                message: `${nodeName} には prefix と suffix は同時に設定できません。
+ - prefix または suffix のみを設定してください。
+ - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
+ - 両方設定したい場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`,
+              })
+              break
+            }
+          }
+        }
+      }
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/best-practice-for-data-test-attribute.js

@@ -0,0 +1,35 @@
+const rule = require('../rules/best-practice-for-data-test-attribute')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 12,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const generateErrorMessage = (attr) => `テストのために要素を指定するために、${attr} 属性を利用するのではなく、他の方法で要素を指定することを検討してください。
+ - 方法1: click_link, click_button等を利用したりすることで、利用しているテスト環境に準じた方法で要素を指定することを検討してください。
+   - 参考(Testing Library): https://testing-library.com/docs/queries/about
+   - 参考(Capybara): https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders
+ - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole属性、name属性、id属性等を利用した方法で要素を指定することを検討してください。
+ - 方法3: 上記の方法でも要素が指定できない場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`
+
+
+ruleTester.run('best-practice-for-data-test-attribute', rule, {
+  valid: [
+    { code: '<Any>ほげ</Any>'},
+    { code: '<Any name="hoge">ほげ</Any>'},
+    { code: '<Any data-any="fuga">ほげ</Any>'},
+  ],
+  invalid: [
+    { code: '<Any data-spec="hijklmn">ほげ</Any>', errors: [{message: generateErrorMessage("data-spec")}] },
+    { code: '<Any data-spec>ほげ</Any>', errors: [{message: generateErrorMessage("data-spec")}] },
+    { code: '<Any data-testid="abcdefg">ほげ</Any>', errors: [{message: generateErrorMessage("data-testid")}] },
+    { code: '<Any data-testid>ほげ</Any>', errors: [{message: generateErrorMessage("data-testid")}] },
+  ]
+})

package/test/design-system-guideline-prohibit-double-icons.js

@@ -0,0 +1,39 @@
+const rule = require('../rules/design-system-guideline-prohibit-double-icons')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 12,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const generateErrorText = (name) => `${name} には prefix と suffix は同時に設定できません。
+ - prefix または suffix のみを設定してください。
+ - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
+ - 両方設定したい場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`
+
+ruleTester.run('design-system-guideline-prohibit-double-icons', rule, {
+  valid: [
+    { code: `<Button>hoge</Button>` },
+    { code: `<Button suffix={SUFFIX}>hoge</Button>` },
+    { code: `<Button prefix="PREFIX">hoge</Button>` },
+    { code: `<TextLink>hoge</TextLink>` },
+    { code: `<TextLink suffix="SUFFIX">hoge</TextLink>` },
+    { code: `<TextLink prefix={PREFIX}>hoge</TextLink>` },
+    { code: `<StyledButton>hoge</StyledButton>` },
+    { code: `<StyledLink>hoge</StyledLink>` },
+    { code: `<Input prefix={PREFIX} suffix={SUFFIX} />` },
+  ],
+  invalid: [
+    { code: `<Button suffix={SUFFIX} prefix={PREFIX}>hoge</Button>`, errors: [{message: generateErrorText('Button')}]},
+    { code: `<Button suffix prefix>hoge</Button>`, errors: [{message: generateErrorText('Button')}]},
+    { code: `<StyledButton suffix={undefined} prefix={null}>hoge</StyledButton>`, errors: [{message: generateErrorText('StyledButton')}]},
+    { code: `<Link prefix="PREFIX" suffix="SUFFIX">hoge</Link>`, errors: [{message: generateErrorText('Link')}]},
+    { code: `<StyledLink prefix="PREFIX" suffix="SUFFIX">hoge</StyledLink>`, errors: [{message: generateErrorText('StyledLink')}]},
+  ]
+})