test(front): add vitest, testing-tools, and svelte mocks (#1066)

dgrebb · Jan 18, 2024 · 365567b · 365567b
1 parent 3b23d3c
commit 365567b
Show file tree

Hide file tree

Showing 13 changed files with 1,282 additions and 45 deletions.
diff --git a/_utils/_scripts/front.sh b/_utils/_scripts/front.sh
@@ -18,13 +18,13 @@ while test "$1" != --; do
     d | dev)
         setFrontEnv ${env}
         cdfront &&
-            pnpm run dev.${env} --host
+            pnpm dev.${env} --host
         break
         ;;
     dn | dev-network)
         setFrontEnv ${env}
         cdfront &&
-            pnpm run dev --host
+            pnpm dev --host
         break
         ;;
     i | install)
@@ -33,12 +33,12 @@ while test "$1" != --; do
         ;;
     b | build)
         setFrontEnv ${env}
-        cdfront && pnpm run build.${env}
+        cdfront && pnpm build.${env}
         break
         ;;
     bp | build-production)
         setFrontEnv ${env}
-        cdfront && pnpm run build.p
+        cdfront && pnpm build.p
         break
         ;;
     u | update)
@@ -55,7 +55,7 @@ while test "$1" != --; do
             read -p $'\e[32mStart the dev server?\e[0m: ' -n 1 -r
             echo # newline
             if [[ $REPLY =~ ^[Yy]$ ]]; then
-                pnpm run dev.l
+                pnpm dev.l
             else
                 exit 0
             fi
@@ -74,7 +74,7 @@ while test "$1" != --; do
             DEPLOY_ENV=development \
             UPLOAD_SOURCEMAPS=true \
             RELEASE_NAME=$RELEASE_NAME DIST=$DIST \
-            DEPLOY_ENV=$DEPLOY_ENV pnpm run build.${env}
+            DEPLOY_ENV=$DEPLOY_ENV pnpm build.${env}
         break
         ;;
     s | http-server)
@@ -85,11 +85,19 @@ while test "$1" != --; do
         break
         ;;
     p | preview)
-        cdfront && pnpm run preview.local --host
+        cdfront && pnpm preview.local --host
         break
         ;;
     l | lint)
-        cdfront && pnpm run lint
+        cdfront && pnpm lint
+        break
+        ;;
+    t | test)
+        cdfront && pnpm test
+        break
+        ;;
+    tw | test-watch)
+        cdfront && pnpm test.watch
         break
         ;;
     r | bundle-report)
@@ -98,7 +106,7 @@ while test "$1" != --; do
         ;;
     ba | baseline-report)
         printDgMsg "Baselining the current BundleStats report..."
-        cdfront && pnpm run baseline
+        cdfront && pnpm baseline
         break
         ;;
     ?)

diff --git a/front/.eslintrc.cjs b/front/.eslintrc.cjs
@@ -1,10 +1,16 @@
 module.exports = {
   root: true,
   extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
+  plugins: ['vitest'],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,
-    extraFileExtensions: ['.svelte'],
+    overrides: [
+      {
+        files: ['*.svelte'],
+        parser: 'svelte-eslint-parser',
+      },
+    ],
   },
   env: {
     browser: true,
@@ -13,6 +19,9 @@ module.exports = {
   },
   globals: {
     plausible: true,
+    describe: true,
+    expect: true,
+    it: true,
   },
   rules: {
     'svelte/no-at-html-tags': 'off',

diff --git a/front/package.json b/front/package.json
@@ -24,10 +24,11 @@
     "postbuild.p": "npx -y -q svelte-sitemap -i '404.html' -i '/404/index.html' -i 'shingle.html' -i '/shingle/index.html' -i '/cv/*/**' -t --attribution=false --domain https://www.dgrebb.com",
     "postbuild": "npx -y -q svelte-sitemap -i '404.html' -i '/404/index.html' -i 'shingle.html' -i '/shingle/index.html' -i '/cv/*/**' -t --attribution=false --domain https://www.dgrebb.com",
     "format": "prettier --write .",
-    "test.all": "pnpm run test.integration && pnpm run test.unit",
+    "test.all": "pnpm test.integration && pnpm run test.unit",
     "test.integration": "playwright test",
-    "test.unit": "vitest",
-    "test": "vitest",
+    "test": "vitest run",
+    "test.ui": "vitest --ui",
+    "test.watch": "vitest",
     "coverage": "vitest run --coverage"
   },
   "devDependencies": {
@@ -44,11 +45,16 @@
     "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/kit": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@testing-library/svelte": "^4.0.5",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vitest/ui": "^1.2.1",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-vitest": "^0.3.20",
     "html-minifier-terser": "^7.2.0",
+    "jsdom": "^23.2.0",
     "marked": "^11.1.1",
     "marked-alert": "^2.0.1",
     "patch-package": "^8.0.0",
@@ -71,7 +77,8 @@
     "unplugin-icons": "^0.18.2",
     "vite": "^5.0.11",
     "vite-plugin-progress": "^0.0.7",
-    "vitest": "^1.2.0"
+    "vitest": "^1.2.0",
+    "vitest-dom": "^0.1.1"
   },
   "type": "module",
   "pnpm": {