WIP

package.json

@@ -16,6 +16,7 @@
         "@intlify/vue-i18n-loader": "^4.2.0",
         "@quasar/app-webpack": "^3.0.0",
         "@quasar/cli": "^2.4.1",
+        "@quasar/vite-plugin": "^1.8.1",
         "babel-loader": "^9.2.1",
         "css-loader": "^7.1.2",
         "cypress": "^13.6.6",
@@ -31,17 +32,22 @@
         "eslint-plugin-vue": "^9.27.0",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
+        "happy-dom": "^15.11.7",
         "json-loader": "^0.5.7",
         "postcss-loader": "^8.1.1",
+        "sass-embedded": "^1.80.2",
         "sass-loader": "^16.0.4",
         "tinymce": "^6.3.0",
         "url-loader": "^4.1.1",
+        "vitest": "^2.1.8",
         "vue-loader": "^17.4.2",
         "vue-style-loader": "^4.1.3",
         "yaml-loader": "^0.5.0"
     },
     "dependencies": {
+        "@intlify/unplugin-vue-i18n": "^6.0.1",
         "@quasar/extras": "^1.16.9",
+        "@vitejs/plugin-vue": "^5.2.1",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
         "pinia": "^2.0.11",
@@ -58,6 +64,7 @@
         "db": "cd ../salix && gulp docker",
         "cy:open": "npm run db && cypress open",
         "test:e2e": "npm run db && cypress run",
+        "test:unit": "vitest",
         "build": "rm -rf dist/ ; quasar build",
         "clean": "rm -rf dist/",
         "lint": "eslint --ext .js,.vue ./"

quasar.config.js

@@ -71,7 +71,8 @@ module.exports = configure(function (ctx) {
                 chain
                     .plugin('eslint-webpack-plugin')
                     .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
-
+                chain.resolve.alias
+                    .set('@', path.resolve(__dirname, 'src'));
                 chain.module
                     .rule('i18n-resource')
                     .test(/\.(json5?|ya?ml)$/)

src/boot/axios.js

@@ -1,9 +1,9 @@
 import { boot } from 'quasar/wrappers';
 import { Connection } from '../js/db/connection';
-import { useUserStore } from 'stores/user';
+import { useUserStore } from '@/stores/user';
 import axios from 'axios';
-import useNotify from 'src/composables/useNotify.js';
+import useNotify from '@/composables/useNotify.js';
-import { useAppStore } from 'src/stores/app';
+import { useAppStore } from '@/stores/app';
 
 const { notify } = useNotify();
 // Be careful when using SSR for cross-request state pollution

src/boot/i18n.js

@@ -1,6 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import { createI18n } from 'vue-i18n';
-import messages from 'src/i18n';
+import messages from '@/i18n';
 
 const i18n = createI18n({
     locale: navigator.language || navigator.userLanguage,

src/composables/useNotify.js

@@ -1,5 +1,5 @@
 import { Notify } from 'quasar';
-import { i18n } from 'src/boot/i18n';
+import { i18n } from '@/boot/i18n';
 
 export default function useNotify() {
     const notify = (message, type, icon) => {

src/stores/app.js

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
-import { jApi } from 'boot/axios';
+import { jApi } from '@/boot/axios';
-import useNotify from 'src/composables/useNotify.js';
+import useNotify from '@/composables/useNotify.js';
-import { i18n } from 'src/boot/i18n';
+import { i18n } from '@/boot/i18n';
 import { useQuasar } from 'quasar';
 
 const { notify } = useNotify();

src/stores/user.js

@@ -1,8 +1,8 @@
 import { defineStore } from 'pinia';
 import { ref, computed, watch } from 'vue';
-import { api, jApi } from 'boot/axios';
+import { api, jApi } from '@/boot/axios';
-import useNotify from 'src/composables/useNotify.js';
+import useNotify from '@/composables/useNotify.js';
-import { useAppStore } from 'src/stores/app.js';
+import { useAppStore } from '@/stores/app.js';
 
 const { notify } = useNotify();
 const TOKEN_MULTIMEDIA = 'tokenMultimedia';

src/test/vitest/stores/user.spec.js

@@ -0,0 +1,91 @@
+import { vi, describe, expect, it, beforeAll } from 'vitest';
+import { api } from '@/boot/axios';
+import { useUserStore } from '@/stores/user';
+import { createPinia, setActivePinia } from 'pinia';
+
+describe('session', () => {
+    let userStore;
+
+    beforeAll(() => {
+        // Configura Pinia y el store
+        setActivePinia(createPinia());
+        userStore = useUserStore();
+
+        vi.mock('@/boot/axios', () => ({
+            api: {
+                post: vi.fn()
+            }
+        }));
+    });
+
+    describe('RenewToken', () => {
+        const expectedToken = 'myToken';
+        const expectedTokenMultimedia = 'myTokenMultimedia';
+        beforeAll(() => {
+            const tokenConfig = {
+                id: 1,
+                renewPeriod: 21600,
+                courtesyTime: 60,
+                renewInterval: 300
+            };
+            userStore.tokenConfig = tokenConfig;
+            sessionStorage.setItem('renewPeriod', 21600);
+        });
+
+        it('NOT Should renewToken', async () => {
+            const data = {
+                username: 'myUser',
+                created: Date.now(),
+                ttl: 1,
+                keepLogin: false,
+                token: expectedToken,
+                tokenMultimedia: expectedTokenMultimedia
+            };
+
+            userStore.setSession(data);
+            expect(sessionStorage.getItem('created')).toBeDefined();
+            expect(sessionStorage.getItem('ttl')).toEqual('1');
+            await userStore.checkValidity();
+            expect(sessionStorage.getItem('token')).toEqual(expectedToken);
+            expect(sessionStorage.getItem('tokenMultimedia')).toEqual(
+                expectedTokenMultimedia
+            );
+        });
+
+        it('Should renewToken', async () => {
+            const data = {
+                token: expectedToken,
+                tokenMultimedia: expectedTokenMultimedia,
+                keepLogin: false,
+                ttl: 3600, // 1 hora
+                created: Date.now() - 100000000 // forzamos a que crea que el token se creó hace 100000000 ms
+            };
+
+            userStore.setSession(data);
+
+            // Mockea las respuestas de la API
+            api.post
+                .mockResolvedValueOnce({
+                    data: { id: 'newToken1' }
+                })
+                .mockResolvedValueOnce({
+                    data: { id: 'newToken2' }
+                });
+
+            // Verifica el estado inicial
+            expect(sessionStorage.getItem('keepLogin')).toBeFalsy();
+            expect(sessionStorage.getItem('created')).toBeDefined();
+            expect(sessionStorage.getItem('ttl')).toEqual('3600');
+            expect(sessionStorage.getItem('token')).toEqual(expectedToken);
+
+            // Llama al método que debe validar y renovar el token
+            await userStore.checkValidity();
+
+            // Verifica que los tokens hayan cambiado
+            expect(sessionStorage.getItem('token')).not.toEqual(expectedToken);
+            expect(sessionStorage.getItem('tokenMultimedia')).not.toEqual(
+                expectedTokenMultimedia
+            );
+        });
+    });
+});

vitest.config.js

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
+// import jsconfigPaths from 'vite-jsconfig-paths';
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+      resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+        },
+    },
+    test: {
+        environment: 'happy-dom',
+        include: [
+            // Matches vitest tests in any subfolder of 'src' or into 'test/vitest/__tests__'
+            // Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
+            'src/test/vitest/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+        ],
+    },
+    plugins: [
+      vue({
+      template: { transformAssetUrls }
+    }),
+    quasar({
+      sassVariables: 'src/css/quasar-variables.sass'
+    }),
+        VueI18nPlugin({
+            include: [
+                path.resolve(__dirname, 'src/i18n/**'),
+                path.resolve(__dirname, 'src/pages/**/locale/**'),
+            ],
+        }),
+        // jsconfigPaths(),
+    ],
+});