make fe tests run

.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" \

lnbits/static/components/lnbits-error.vue

@@ -1,6 +1,30 @@
-window.app.component('lnbits-error', {
-  template: '#lnbits-error',
-  mixins: [window.windowMixin],
+<template>
+  <div class="text-center q-pa-md flex flex-center">
+    <div>
+      <div class="error-code" v-text="code"></div>
+      <div class="error-message" v-text="message"></div>
+      <div class="q-mx-auto q-mt-lg justify-center" style="width: max-content">
+        <q-btn
+          v-if="isExtension"
+          color="primary"
+          @click="goToExtension()"
+          label="Go To Extension"
+        ></q-btn>
+        <q-btn
+          v-else-if="g.isUserAuthorized"
+          color="primary"
+          @click="goToWallet()"
+          label="Go to Wallet"
+        ></q-btn>
+        <q-btn v-else color="primary" @click="goBack()" label="Go Back"></q-btn>
+        <span class="q-mx-md">OR</span>
+        <q-btn color="secondary" @click="goHome()" label="Go Home"></q-btn>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
   props: ['dynamic', 'code', 'message'],
   computed: {
     isExtension() {
@@ -50,4 +74,5 @@ window.app.component('lnbits-error', {
       }
     }
   }
-})
+}
+</script>

lnbits/static/components/main.js

@@ -0,0 +1,3 @@
+import LnbitsError from './lnbits-error.vue'
+
+window.LnbitsError = LnbitsError

lnbits/static/js/init-app.js

@@ -168,4 +168,8 @@ window.app.use(Quasar, quasarConfig)
 
 window.app.use(window.i18n)
 window.app.use(window.router)
+
+window.app.component(QrcodeVue)
+window.app.component('lnbits-error', window.LnbitsError)
+
 window.app.mount('#vue')

lnbits/static/vendor.json

@@ -76,7 +76,6 @@
     "js/components/lnbits-wallet-paylinks.js",
     "js/components/lnbits-wallet-extra.js",
     "js/components/lnbits-home-logos.js",
-    "js/components/lnbits-error.js",
     "js/components/lnbits-qrcode.js",
     "js/components/lnbits-qrcode-lnurl.js",
     "js/components/lnbits-disclaimer.js",

lnbits/templates/base.html

@@ -94,6 +94,8 @@
     {% endif %}
     <!-- scripts from extensions -->
     {% block scripts %}{% endblock %}
+    <!-- modules js -->
+    <script src="/static/modules/components.umd.js"></script>
     <!-- components js -->
     {% for url in INCLUDED_COMPONENTS %}
     <script src="{{ static_url_for('static', url) }}"></script>

lnbits/templates/components.vue

@@ -29,8 +29,7 @@ include('components/lnbits-wallet-api-docs.vue') %} {%
 include('components/lnbits-wallet-share.vue') %} {%
 include('components/lnbits-wallet-charts.vue') %} {%
 include('components/lnbits-wallet-paylinks.vue') %} {%
-include('components/lnbits-wallet-extra.vue') %} {%
-include('components/lnbits-error.vue') %}
+include('components/lnbits-wallet-extra.vue') %}
 
 <template id="lnbits-manage">
   <q-list v-if="g.user" dense class="lnbits-drawer__q-list">

lnbits/templates/components/lnbits-error.vue

@@ -1,25 +0,0 @@
-<template id="lnbits-error">
-  <div class="text-center q-pa-md flex flex-center">
-    <div>
-      <div class="error-code" v-text="code"></div>
-      <div class="error-message" v-text="message"></div>
-      <div class="q-mx-auto q-mt-lg justify-center" style="width: max-content">
-        <q-btn
-          v-if="isExtension"
-          color="primary"
-          @click="goToExtension()"
-          label="Go To Extension"
-        ></q-btn>
-        <q-btn
-          v-else-if="g.isUserAuthorized"
-          color="primary"
-          @click="goToWallet()"
-          label="Go to Wallet"
-        ></q-btn>
-        <q-btn v-else color="primary" @click="goBack()" label="Go Back"></q-btn>
-        <span class="q-mx-md">OR</span>
-        <q-btn color="secondary" @click="goHome()" label="Go Home"></q-btn>
-      </div>
-    </div>
-  </div>
-</template>

package.json

@@ -1,5 +1,6 @@
 {
   "name": "lnbits",
+  "type": "module",
   "scripts": {
     "sass": "./node_modules/.bin/sass ./lnbits/static/scss/base.scss > ./lnbits/static/css/base.css",
     "vendor_copy": "node -e \"require('./package.json').vendor.forEach((file) => require('fs').copyFileSync(file, './lnbits/static/vendor/'+file.split('/').pop()))\"",
@@ -10,15 +11,25 @@
     "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",
+    "build": "vite build",
+    "watch": "vite build --watch"
   },
   "devDependencies": {
+    "@quasar/quasar-app-extension-testing-unit-vitest": "^1.2.4",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@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": "^3"
   },
   "dependencies": {
     "axios": "^1.13.2",
@@ -129,7 +140,6 @@
       "js/components/lnbits-wallet-paylinks.js",
       "js/components/lnbits-wallet-extra.js",
       "js/components/lnbits-home-logos.js",
-      "js/components/lnbits-error.js",
       "js/components/lnbits-qrcode.js",
       "js/components/lnbits-qrcode-lnurl.js",
       "js/components/lnbits-disclaimer.js",

tests/frontend/unit/component_lnbits_error.spec.js

@@ -0,0 +1,38 @@
+import {mount} from '@vue/test-utils'
+import {expect, test} from 'vitest'
+import LnbitsError from '../../../lnbits/static/components/lnbits-error.vue'
+
+// installQuasarPlugin()
+export const quasarMock = {
+  global: {
+    mocks: {
+      g: {
+        isUserAuthorized: true
+      },
+      $q: {
+        platform: {},
+        screen: {},
+        dark: false
+      }
+    },
+    stubs: {
+      QCard: true,
+      QCardSection: true,
+      QIcon: true,
+      QBtn: true
+    }
+  }
+}
+test('displays message and code', () => {
+  expect(LnbitsError).toBeTruthy()
+
+  const wrapper = mount(LnbitsError, {
+    props: {
+      message: 'Page not found!!!',
+      code: 404
+    },
+    ...quasarMock
+  })
+  expect(wrapper.text()).toContain('Page not found!!!')
+  expect(wrapper.text()).toContain('404')
+})

vite.config.ts

@@ -0,0 +1,26 @@
+import {defineConfig} from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    globals: true,
+    environment: 'jsdom'
+  },
+  define: {
+    'process.env': {} // Replace process.env with an empty object for browser builds
+  },
+  build: {
+    lib: {
+      entry: 'lnbits/static/components/main.js',
+      name: 'LnbitsComponents',
+      fileName: 'components', // Output file name (build.js)
+      formats: ['umd']
+    },
+    minify: 'terser', // Optional: minify the output
+    rollupOptions: {
+      // If you have external dependencies, mark them here
+      external: []
+    },
+    outDir: 'lnbits/static/modules' // Output folder
+  }
+})