Updated unit tests

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .thumbs.db
 node_modules
+junit.xml
 
 # Quasar core related directories
 .quasar

src/App.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { onMounted } from 'vue';
 import axios from 'axios';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
@@ -8,9 +9,22 @@ import { useSession } from 'src/composables/useSession';
 const quasar = useQuasar();
 const router = useRouter();
 const session = useSession();
-const { t } = useI18n();
+const { t, availableLocales, locale, fallbackLocale } = useI18n();
 const { isLoggedIn } = session;
 
+onMounted(() => {
+    let userLang = window.navigator.language;
+    if (userLang.includes('-')) {
+        userLang = userLang.split('-')[0];
+    }
+
+    if (availableLocales.includes(userLang)) {
+        locale.value = userLang;
+    } else {
+        locale.value = fallbackLocale;
+    }
+});
+
 quasar.iconMapFn = (iconName) => {
     if (iconName.startsWith('vn:')) {
         const name = iconName.substring(3);

src/__tests__/App.spec.js

@@ -11,21 +11,14 @@ const session = useSession();
 jest.mock('vue-router', () => ({
     useRouter: () => ({
         push: mockPush,
-        currentRoute: { value: 'myCurrentRoute' }
+        currentRoute: { value: 'myCurrentRoute' },
     }),
 }));
 
 jest.mock('src/composables/useSession', () => ({
     useSession: () => ({
         isLoggedIn: mockLoggedIn,
-        destroy: mockDestroy
+        destroy: mockDestroy,
-    }),
-}));
-
-jest.mock('vue-i18n', () => ({
-    createI18n: () => { },
-    useI18n: () => ({
-        t: () => { }
     }),
 }));
 
@@ -34,11 +27,10 @@ describe('App', () => {
     beforeAll(() => {
         const options = {
             global: {
-                stubs: ['router-view']
+                stubs: ['router-view'],
-            }
+            },
         };
         vm = createWrapper(App, options).vm;
-
     });
 
     it('should return a login error message', async () => {
@@ -48,17 +40,17 @@ describe('App', () => {
 
         const response = {
             response: {
-                status: 401
+                status: 401,
-            }
+            },
         };
 
         expect(vm.responseError(response)).rejects.toEqual(expect.objectContaining(response));
-        expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
+        expect(vm.quasar.notify).toHaveBeenCalledWith(
-            {
+            expect.objectContaining({
+                message: 'Invalid username or password',
                 type: 'negative',
-                message: 'login.loginError'
+            })
-            }
+        );
-        ));
     });
 
     it('should return an unauthorized error message', async () => {
@@ -68,17 +60,17 @@ describe('App', () => {
 
         const response = {
             response: {
-                status: 401
+                status: 401,
-            }
+            },
         };
 
         expect(vm.responseError(response)).rejects.toEqual(expect.objectContaining(response));
-        expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
+        expect(vm.quasar.notify).toHaveBeenCalledWith(
-            {
+            expect.objectContaining({
+                message: 'Access denied',
                 type: 'negative',
-                message: 'errors.statusUnauthorized'
+            })
-            }
+        );
-        ));
 
         expect(session.destroy).toHaveBeenCalled();
     });

src/boot/i18n.js

@@ -3,9 +3,11 @@ import { createI18n } from 'vue-i18n';
 import messages from 'src/i18n';
 
 const i18n = createI18n({
-    locale: 'es',
+    locale: 'en',
+    fallbackLocale: 'en',
     messages,
-    legacy: false
+    legacy: false,
+    missingWarn: false
 });
 
 export default boot(({ app }) => {

src/components/LeftMenu.vue

@@ -22,9 +22,8 @@ const props = defineProps({
     },
 });
 
-onMounted(async () => {
+onMounted(() => {
-    await navigation.fetchPinned();
+    navigation.fetchPinned().then(getRoutes());
-    getRoutes();
 });
 
 function findMatches(search, item) {
@@ -48,11 +47,13 @@ function addChildren(module, route, parent) {
     if (route.menus) {
         const mainMenus = route.menus[props.source];
         const matches = findMatches(mainMenus, route);
+
         for (const child of matches) {
             navigation.addMenuItem(module, child, parent);
         }
     }
 }
+
 const pinnedItems = computed(() => {
     return items.value.filter((item) => item.isPinned);
 });
@@ -61,11 +62,13 @@ const items = ref([]);
 function getRoutes() {
     if (props.source === 'main') {
         const modules = Object.assign([], navigation.getModules().value);
+
         for (const item of modules) {
             const moduleDef = routes.find((route) => toLowerCamel(route.name) === item.module);
-
             item.children = [];
 
+            if (!moduleDef) continue;
+
             addChildren(item.module, moduleDef, item.children);
         }
 
@@ -77,6 +80,8 @@ function getRoutes() {
         const currentModule = toLowerCamel(currentRoute.name);
         const moduleDef = routes.find((route) => toLowerCamel(route.name) === currentModule);
 
+        if (!moduleDef) return;
+
         addChildren(currentModule, moduleDef, items.value);
     }
 }

src/components/__tests__/Leftmenu.spec.js

@@ -3,7 +3,6 @@ import { createWrapper } from 'app/tests/jest/jestHelpers';
 import Leftmenu from '../LeftMenu.vue';
 
 import { createTestingPinia } from '@pinia/testing';
-import { createI18n } from 'vue-i18n';
 import { useNavigationStore } from 'src/stores/useNavigationStore';
 
 const mockPush = jest.fn();
@@ -18,49 +17,38 @@ jest.mock('vue-router', () => ({
     }),
 }));
 
-jest.mock('src/router/routes', () => [
+jest.mock('src/router/modules', () => [
     {
-        path: '/',
+        path: '/customer',
-        name: 'Main',
+        name: 'Customer',
+        meta: {
+            title: 'customers',
+            icon: 'vn:client',
+        },
+        menus: {
+            main: ['CustomerList', 'CustomerCreate'],
+            card: ['CustomerBasicData'],
+        },
         children: [
             {
-                path: '/dashboard',
+                path: '',
-                name: 'Dashboard',
+                name: 'CustomerMain',
-                meta: { title: 'dashboard', icon: 'dashboard' },
-            },
-            {
-                path: '/customer',
-                name: 'Customer',
-                meta: {
-                    title: 'customers',
-                    icon: 'vn:client',
-                },
-                menus: {
-                    main: ['CustomerList', 'CustomerCreate'],
-                    card: ['CustomerBasicData'],
-                },
                 children: [
                     {
-                        path: '',
+                        path: 'list',
-                        name: 'CustomerMain',
+                        name: 'CustomerList',
-                        children: [
+                        meta: {
-                            {
+                            title: 'list',
-                                path: 'list',
+                            icon: 'view_list',
-                                name: 'CustomerList',
+                        },
-                                meta: {
+                    },
-                                    title: 'list',
+                    {
-                                    icon: 'view_list',
+                        path: 'create',
-                                },
+                        name: 'CustomerCreate',
-                            },
+                        meta: {
-                            {
+                            title: 'createCustomer',
-                                path: 'create',
+                            icon: 'vn:addperson',
-                                name: 'CustomerCreate',
+                        },
-                                meta: {
-                                    title: 'createCustomer',
-                                    icon: 'vn:addperson',
-                                },
-                            },
-                        ],
                     },
                 ],
             },
@@ -70,57 +58,47 @@ jest.mock('src/router/routes', () => [
 
 describe('Leftmenu', () => {
     let vm;
-    beforeAll(() => {
+    let navigation;
-        const i18n = createI18n({
+    beforeAll(async () => {
-            legacy: false,
-            messages: {
-                'en-US': {
-                    globals: {
-                        pinnedModules: 'Test',
-                    },
-                    moduleIndex: {
-                        allModules: 'All modules',
-                    },
-                },
-            },
-        });
-
         vm = createWrapper(Leftmenu, {
             propsData: {
                 source: 'main',
             },
             global: {
-                plugins: [i18n, createTestingPinia()],
+                plugins: [createTestingPinia({ stubActions: false })],
             },
         }).vm;
 
-        try {
+        navigation = useNavigationStore();
-            const navigation = useNavigationStore();
+        navigation.modules = ['customer']; // I should mock to have just one module but isn´t working
-            navigation.getModules();
+        navigation.fetchPinned = jest.fn().mockReturnValue(Promise.resolve(true));
-        } catch (error) {
+        navigation.getModules = jest.fn().mockReturnValue({
-            console.log('err!');
+            value: [
-        }
+                {
+                    name: 'customer',
+                    title: 'customer.pageTitles.customers',
+                    icon: 'vn:customer',
+                    module: 'customer',
+                },
+            ],
+        });
     });
 
     it('should return a proper formated object with two child items', async () => {
         const expectedMenuItem = [
             {
                 name: 'CustomerList',
-                title: 'list',
+                title: 'customer.pageTitles.list',
                 icon: 'view_list',
-                stateName: 'CustomerList',
             },
             {
                 name: 'CustomerCreate',
-                title: 'createCustomer',
+                title: 'customer.pageTitles.createCustomer',
                 icon: 'vn:addperson',
-                stateName: 'CustomerCreate',
             },
         ];
 
-        const secondMenuItem = vm.items;
+        const firstMenuItem = vm.items[0];
-        expect(secondMenuItem.length).toEqual(1);
+        expect(firstMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
-        //expect(secondMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
-        //expect(secondMenuItem.children.length).toEqual(2);
     });
 });

src/stores/useNavigationStore.js

@@ -12,9 +12,10 @@ export const useNavigationStore = defineStore('navigationStore', () => {
 
     function getModules() {
         const modulesRoutes = ref([]);
-        console.log('routes', routes);
         for (const module of modules) {
             const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
+            if (!moduleDef) continue;
+
             const item = addMenuItem(module, moduleDef, modulesRoutes.value);
             if (!item) continue;
 

tests/jest/jestHelpers.js

@@ -1,25 +1,27 @@
 import { mount, flushPromises } from '@vue/test-utils';
 import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
 import { i18n } from 'src/boot/i18n';
-import { Notify } from 'quasar';
+import { Notify, Dialog } from 'quasar';
 import axios from 'axios';
 
-// Specify here Quasar config you'll need to test your component
 installQuasarPlugin({
     plugins: {
-        Notify
+        Notify,
-    }
+        Dialog,
+    },
 });
 
 export function createWrapper(component, options) {
-    const mountOptions = {
+    const mountOptions = {};
-        global: {
-            plugins: [i18n]
-        }
-    };
 
-    if (options instanceof Object)
+    if (options instanceof Object) Object.assign(mountOptions, options);
-        Object.assign(mountOptions, options)
+
+    if (mountOptions.global && mountOptions.global.plugins) {
+        mountOptions.global.plugins.push(i18n);
+    } else {
+        if (!mountOptions.global) mountOptions.global = {};
+        mountOptions.global.plugins = [i18n];
+    }
 
     const wrapper = mount(component, mountOptions);
     const vm = wrapper.vm;
@@ -27,7 +29,4 @@ export function createWrapper(component, options) {
     return { vm, wrapper };
 }
 
-export {
+export { axios, flushPromises };
-    axios,
-    flushPromises
-}