eslint-plugin-smarthr 0.5.11 → 0.5.12

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.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.12",
   "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/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")}] },
+  ]
+})