test: add frontend tests for vue components

.github/workflows/ci.yml

@@ -12,6 +12,13 @@ jobs:
   lint:
     uses: ./.github/workflows/lint.yml
 
+  test-frontend:
+    needs: [ lint ]
+    uses: ./.github/workflows/make.yml
+    with:
+      make: test-frontend
+      npm: true
+
   test-api:
     needs: [ lint ]
     strategy:

.github/workflows/tests.yml

@@ -1,4 +1,4 @@
-name: tests
+name: tests pytest
 
 on:
   workflow_call:

Makefile

@@ -41,6 +41,10 @@ dev:
 docker:
 	docker build -t lnbits/lnbits .
 
+test-frontend:
+	npm install
+	npm test
+
 test-wallets:
 	LNBITS_DATA_FOLDER="./tests/data" \
 	LNBITS_BACKEND_WALLET_CLASS="FakeWallet" \

package.json

@@ -10,15 +10,21 @@
     "vendor_minify_css": "./node_modules/.bin/cleancss -o ./lnbits/static/bundle.min.css ./lnbits/static/bundle.css",
     "vendor_minify_js": "./node_modules/.bin/terser ./lnbits/static/bundle.js -o ./lnbits/static/bundle.min.js --compress --mangle",
     "vendor_minify_components": "./node_modules/.bin/terser ./lnbits/static/bundle-components.js -o ./lnbits/static/bundle-components.min.js --compress --mangle",
-    "bundle": "npm run sass && npm run vendor_copy && npm run vendor_json && npm run vendor_bundle_css && npm run vendor_bundle_js && npm run vendor_bundle_components && npm run vendor_minify_css && npm run vendor_minify_js && npm run vendor_minify_components"
+    "bundle": "npm run sass && npm run vendor_copy && npm run vendor_json && npm run vendor_bundle_css && npm run vendor_bundle_js && npm run vendor_bundle_components && npm run vendor_minify_css && npm run vendor_minify_js && npm run vendor_minify_components",
+    "test": "npm run test:unit",
+    "test:unit": "vitest --watch=false tests/frontend/unit",
+    "test:unit:watch": "vitest tests/frontend/unit"
   },
   "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
     "clean-css-cli": "^5.6.3",
     "concat": "^1.0.3",
+    "jsdom": "^27.3.0",
     "prettier": "^3.7.4",
     "pyright": "1.1.289",
     "sass": "^1.94.2",
-    "terser": "^5.44.1"
+    "terser": "^5.44.1",
+    "vitest": "^4.0.16"
   },
   "dependencies": {
     "axios": "^1.13.2",

tests/frontend/unit/test_test.spec.js

@@ -0,0 +1,19 @@
+import {mount} from '@vue/test-utils'
+import {expect, test} from 'vitest'
+
+// The component to test
+const MessageComponent = {
+  template: '<p>{{ msg }}</p>',
+  props: ['msg']
+}
+
+test('displays message', () => {
+  const wrapper = mount(MessageComponent, {
+    props: {
+      msg: 'Hello world'
+    }
+  })
+
+  // Assert the rendered text of the component
+  expect(wrapper.text()).toContain('Hello world')
+})

vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "jsdom",
+  },
+})