test: add button tests

.eslintrc.json

@@ -1,13 +1,53 @@
 {
-  "plugins": ["prettier"],
   "extends": ["airbnb-base", "plugin:storybook/recommended", "prettier"],
   "env": {
     "browser": true
   },
+  "plugins": ["only-warn"],
+  "settings": {
+    "import/resolver": {
+      "node": true,
+      "jsconfig": {
+        "config": "jsconfig.json"
+      }
+    }
+  },
   "rules": {
-    "prettier/prettier": "error",
-    "no-console": "warn",
+    "no-console": [
+      "warn",
+      {
+        "allow": ["warn"]
+      }
+    ],
     "object-curly-newline": "off",
     "import/prefer-default-export": "off"
-  }
+  },
+  "overrides": [
+    {
+      "env": {
+        "node": true,
+        "jest": true
+      },
+      "plugins": ["vitest", "testing-library"],
+      "files": ["**/*.spec.js", "**/*.test.js"],
+      "extends": [
+        "plugin:testing-library/dom",
+        "plugin:vitest/recommended",
+        "plugin:vitest-globals/recommended"
+      ],
+      "rules": {
+        "testing-library/prefer-user-event": ["warn"],
+        "no-restricted-syntax": [
+          "warn",
+          {
+            "message": "Use screen 'methods' imported from '@testing-library/vanilla' instead.",
+            "selector": "MemberExpression > Identifier[name=\"selected\"]"
+          }
+        ]
+      },
+      "globals": {
+        "vi": true
+      }
+    }
+  ]
 }

.github/workflows/test.yml

@@ -0,0 +1,27 @@
+name: Test
+
+on:
+  pull_request:
+    branches: ['main']
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Code Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup deps
+        uses: ./.github/actions/install-deps
+
+      - name: Run unit Tests
+        run: pnpm vitest --silent --coverage
+
+      - name: 'Report Coverage'
+        uses: davelosert/vitest-coverage-report-action@v2
+
+      - name: 'Upload Coverage'
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage
+          path: coverage

.gitignore

@@ -24,3 +24,5 @@ dist-ssr
 *.sw?
 package-lock.json
 yarn.lock
+
+coverage

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
-  "*.js": ["eslint --fix", "prettier --write"],
+  "*.js": ["eslint --max-warnings=0 --fix ", "prettier --write"],
   "*.scss": ["stylelint --fix", "prettier --write"]
 }

.prettierrc

@@ -5,9 +5,7 @@
   "semi": true,
   "singleQuote": true,
   "jsxSingleQuote": false,
-  "jsxBracketSameLine": false,
   "arrowParens": "always",
   "endOfLine": "auto",
-  "eolLast": true,
   "printWidth": 80
 }

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+    "baseUrl": ".",
+    "paths": {
+      "@testing-library/vanilla": ["src/__tests__/index.js"]
+    }
+  }
+}

package.json

@@ -1,32 +1,43 @@
 {
   "name": "pet-dex-frontend",
   "private": true,
-  "version": "0.0.0",
   "type": "module",
+  "version": "0.0.0",
   "engines": {
     "node": "^20",
     "pnpm": "^8"
   },
   "scripts": {
     "dev": "vite",
     "test": "vitest",
+    "test:coverage": "vitest --ui --coverage",
     "build": "vite build --emptyOutDir",
-    "preview": "vite preview",
-    "prepare": "husky install",
+    "build-storybook": "storybook build",
+    "code-style": "concurrently \"pnpm lint\" \"pnpm stylelint\" \"pnpm prettier\"",
+    "commit": "git-cz",
     "lint": "eslint --ext .js .",
     "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
-    "stylelint": "stylelint \"**/*.scss\"",
+    "prepare": "husky install",
     "prettier": "prettier . --check --ignore-unknown",
     "prettier:fix": "prettier . --write --ignore-unknown",
-    "code-style": "concurrently \"pnpm lint\" \"pnpm stylelint\" \"pnpm prettier\"",
+    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "commit": "git-cz"
+    "stylelint": "stylelint \"**/*.scss\""
+  },
+  "dependencies": {
+    "concurrently": "8.2.2",
+    "dayjs": "^1.11.10",
+    "pet-dex-utilities": "^1.0.1",
+    "reset-css": "^5.0.2",
+    "vite-jsconfig-paths": "2.0.1",
+    "vite-plugin-pwa": "^0.19.8",
+    "vite": "^5.2.10"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.2.2",
     "@commitlint/config-conventional": "^19.2.2",
-    "@commitlint/cz-commitlint": "^19.2.0",
+    "@commitlint/cz-commitlint": "19.2.0",
+    "@faker-js/faker": "8.4.1",
     "@storybook/addon-essentials": "8.0.0-alpha.16",
     "@storybook/addon-interactions": "8.0.0-alpha.16",
     "@storybook/addon-links": "8.0.0-alpha.16",
@@ -35,17 +46,27 @@
     "@storybook/html-vite": "8.0.0-alpha.16",
     "@storybook/test": "8.0.0-alpha.16",
     "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/user-event": "14.5.2",
+    "@vitest/coverage-v8": "1.5.3",
+    "@vitest/ui": "1.5.3",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-jsconfig": "1.1.0",
+    "eslint-import-resolver-node": "0.3.9",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-only-warn": "1.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "6.2.2",
+    "eslint-plugin-vitest": "0.4.1",
+    "eslint-plugin-vitest-globals": "1.5.0",
     "husky": "^8.0.3",
     "jsdom": "^23.2.0",
     "lint-staged": "^15.2.2",
@@ -59,15 +80,7 @@
     "stylelint-order": "^6.0.4",
     "stylelint-prettier": "^5.0.0",
     "stylelint-scss": "^6.2.1",
-    "vitest": "^1.5.0"
-  },
-  "dependencies": {
-    "concurrently": "8.2.2",
-    "dayjs": "^1.11.10",
-    "pet-dex-utilities": "^1.0.1",
-    "reset-css": "^5.0.2",
-    "vite": "^5.2.10",
-    "vite-plugin-pwa": "^0.19.8"
+    "vitest": "^1.6.0"
   },
   "config": {
     "commitizen": {