src/components/LeftMenu.vue

@@ -33,13 +33,16 @@ const pinnedModules = computed(() => {
 const search = ref(null);
 
 const filteredItems = computed(() => {
+    return filterItems();
+});
+function filterItems() {
     if (!search.value) return items.value;
     const normalizedSearch = normalize(search.value);
     return items.value.filter((item) => {
         const locale = normalize(t(item.title));
         return locale.includes(normalizedSearch);
     });
-});
+}
 
 const filteredPinnedModules = computed(() => {
     if (!search.value) return pinnedModules.value;
@@ -103,7 +106,17 @@ function addChildren(module, route, parent) {
 }
 
 function getRoutes() {
-    if (props.source === 'main') {
+    const handleRoutes = {
+        main: getMainRoutes,
+        card: getCardRoutes,
+    };
+    try {
+        handleRoutes[props.source]();
+    } catch (error) {
+        throw new Error(`Method is not defined`);
+    }
+}
+function getMainRoutes() {
     const modules = Object.assign([], navigation.getModules().value);
 
     for (const item of modules) {
@@ -119,18 +132,15 @@ function getRoutes() {
     items.value = modules;
 }
 
-    if (props.source === 'card') {
+function getCardRoutes() {
     const currentRoute = route.matched[1];
     const currentModule = toLowerCamel(currentRoute.name);
-        let moduleDef = routes.find(
+    let moduleDef = routes.find((route) => toLowerCamel(route.name) === currentModule);
-            (route) => toLowerCamel(route.name) === currentModule
-        );
 
     if (!moduleDef) return;
     if (!moduleDef?.menus) moduleDef = betaGetRoutes();
     addChildren(currentModule, moduleDef, items.value);
 }
-}
 
 function betaGetRoutes() {
     let menuRoute;

src/components/__tests__/Leftmenu.spec.js

@@ -1,9 +1,12 @@
-import { vi, describe, expect, it, beforeAll } from 'vitest';
+import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
 import { createWrapper, axios } from 'app/test/vitest/helper';
 import Leftmenu from 'components/LeftMenu.vue';
-
+import * as vueRouter from 'vue-router';
 import { useNavigationStore } from 'src/stores/useNavigationStore';
 
+let vm;
+let navigation;
+
 vi.mock('src/router/modules', () => ({
     default: [
         {
@@ -21,6 +24,16 @@ vi.mock('src/router/modules', () => ({
                 {
                     path: '',
                     name: 'CustomerMain',
+                    meta: {
+                        menu: 'Customer',
+                        menuChildren: [
+                            {
+                                name: 'CustomerCreditContracts',
+                                title: 'creditContracts',
+                                icon: 'vn:solunion',
+                            },
+                        ],
+                    },
                     children: [
                         {
                             path: 'list',
@@ -28,6 +41,13 @@ vi.mock('src/router/modules', () => ({
                             meta: {
                                 title: 'list',
                                 icon: 'view_list',
+                                menuChildren: [
+                                    {
+                                        name: 'CustomerCreditContracts',
+                                        title: 'creditContracts',
+                                        icon: 'vn:solunion',
+                                    },
+                                ],
                             },
                         },
                         {
@@ -44,20 +64,59 @@ vi.mock('src/router/modules', () => ({
         },
     ],
 }));
-
+vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
-describe('Leftmenu', () => {
+    matched: [
-    let vm;
+        {
-    let navigation;
+            path: '/',
-    beforeAll(() => {
+            redirect: {
+                name: 'Dashboard',
+            },
+            name: 'Main',
+            meta: {},
+            props: {
+                default: false,
+            },
+            children: [
+                {
+                    path: '/dashboard',
+                    name: 'Dashboard',
+                    meta: {
+                        title: 'dashboard',
+                        icon: 'dashboard',
+                    },
+                },
+            ],
+        },
+        {
+            path: '/customer',
+            redirect: {
+                name: 'CustomerMain',
+            },
+            name: 'Customer',
+            meta: {
+                title: 'customers',
+                icon: 'vn:client',
+                moduleName: 'Customer',
+                keyBinding: 'c',
+                menu: 'customer',
+            },
+        },
+    ],
+    query: {},
+    params: {},
+    meta: { moduleName: 'mockName' },
+    path: 'mockName/1',
+    name: 'Customer',
+});
+function mount(source = 'main') {
     vi.spyOn(axios, 'get').mockResolvedValue({
         data: [],
     });
-
+    const wrapper = createWrapper(Leftmenu, {
-        vm = createWrapper(Leftmenu, {
         propsData: {
-                source: 'main',
+            source,
         },
-        }).vm;
+    });
 
     navigation = useNavigationStore();
     navigation.fetchPinned = vi.fn().mockReturnValue(Promise.resolve(true));
@@ -71,24 +130,253 @@ describe('Leftmenu', () => {
             },
         ],
     });
+    return wrapper;
+}
+
+describe('getRoutes', () => {
+    afterEach(() => vi.clearAllMocks());
+    const getRoutes = vi.fn().mockImplementation((props, getMethodA, getMethodB) => {
+        const handleRoutes = {
+            methodA: getMethodA,
+            methodB: getMethodB,
+        };
+        try {
+            handleRoutes[props.source]();
+        } catch (error) {
+            throw Error('Method not defined');
+        }
     });
 
-    it('should return a proper formated object with two child items', async () => {
+    const getMethodA = vi.fn();
-        const expectedMenuItem = [
+    const getMethodB = vi.fn();
-            {
+    const fn = (props) => getRoutes(props, getMethodA, getMethodB);
-                children: null,
+
-                name: 'CustomerList',
+    it('should call getMethodB when source is card', () => {
-                title: 'globals.pageTitles.list',
+        let props = { source: 'methodB' };
-                icon: 'view_list',
+        fn(props);
-            },
+
-            {
+        expect(getMethodB).toHaveBeenCalled();
-                children: null,
+        expect(getMethodA).not.toHaveBeenCalled();
-                name: 'CustomerCreate',
+    });
-                title: 'globals.pageTitles.createCustomer',
+    it('should call getMethodA when source is main', () => {
-                icon: 'vn:addperson',
+        let props = { source: 'methodA' };
-            },
+        fn(props);
+
+        expect(getMethodA).toHaveBeenCalled();
+        expect(getMethodB).not.toHaveBeenCalled();
+    });
+
+    it('should call getMethodA when source is main', () => {
+        let props = { source: 'methodC' };
+        expect(() => fn(props)).toThrowError('Method not defined');
+
+        expect(getMethodA).not.toHaveBeenCalled();
+        expect(getMethodB).not.toHaveBeenCalled();
+    });
+});
+
+describe('Leftmenu as card', () => {
+    beforeAll(() => {
+        vm = mount('card').vm;
+    });
+
+    it('should get routes for card source', async () => {
+        vm.getRoutes();
+    });
+});
+describe('Leftmenu as main', () => {
+    beforeEach(() => {
+        vm = mount().vm;
+    });
+
+    it('should initialize with default props', () => {
+        expect(vm.source).toBe('main');
+    });
+
+    it('should filter items based on search input', async () => {
+        vm.search = 'Rou';
+        await vm.$nextTick();
+        expect(vm.filterItems()).toEqual([]);
+    });
+
+    it('should return pinned items', () => {
+        vm.items = [
+            { name: 'Item 1', isPinned: false },
+            { name: 'Item 2', isPinned: true },
         ];
-        const firstMenuItem = vm.items[0];
+        expect(vm.pinnedModules).toEqual(
-        expect(firstMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
+            new Map([['Item 2', { name: 'Item 2', isPinned: true }]])
+        );
+    });
+
+    it('should find matches in routes', () => {
+        const search = 'child1';
+        const item = {
+            children: [
+                { name: 'child1', children: [] },
+                { name: 'child2', children: [] },
+            ],
+        };
+        const matches = vm.findMatches(search, item);
+        expect(matches).toEqual([{ name: 'child1', children: [] }]);
+    });
+    it('should not proceed if event is already prevented', async () => {
+        const item = { module: 'testModule', isPinned: false };
+        const event = {
+            preventDefault: vi.fn(),
+            stopPropagation: vi.fn(),
+            defaultPrevented: true,
+        };
+
+        await vm.togglePinned(item, event);
+
+        expect(event.preventDefault).not.toHaveBeenCalled();
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+    });
+
+    it('should call quasar.notify with success message', async () => {
+        const item = { module: 'testModule', isPinned: false };
+        const event = {
+            preventDefault: vi.fn(),
+            stopPropagation: vi.fn(),
+            defaultPrevented: false,
+        };
+        const response = { data: { id: 1 } };
+
+        vi.spyOn(axios, 'post').mockResolvedValue(response);
+        vi.spyOn(vm.quasar, 'notify');
+
+        await vm.togglePinned(item, event);
+
+        expect(vm.quasar.notify).toHaveBeenCalledWith({
+            message: 'Data saved',
+            type: 'positive',
+        });
+    });
+
+    it('should handle a single matched route with a menu', () => {
+        const route = {
+            matched: [{ meta: { menu: 'customer' } }],
+        };
+
+        const result = vm.betaGetRoutes();
+
+        expect(result.meta.menu).toEqual(route.matched[0].meta.menu);
+    });
+    it('should get routes for main source', () => {
+        vm.props.source = 'main';
+        vm.getRoutes();
+        expect(useNavigationStore().getModules).toHaveBeenCalled();
+    });
+
+    it('should find direct child matches', () => {
+        const search = 'child1';
+        const item = {
+            children: [{ name: 'child1' }, { name: 'child2' }],
+        };
+        const result = vm.findMatches(search, item);
+        expect(result).toEqual([{ name: 'child1' }]);
+    });
+
+    it('should find nested child matches', () => {
+        const search = 'child3';
+        const item = {
+            children: [
+                { name: 'child1' },
+                {
+                    name: 'child2',
+                    children: [{ name: 'child3' }],
+                },
+            ],
+        };
+        const result = vm.findMatches(search, item);
+        expect(result).toEqual([{ name: 'child3' }]);
+    });
+});
+
+describe('normalize', () => {
+    beforeAll(() => {
+        vm = mount('card').vm;
+    });
+    it('should normalize and lowercase text', () => {
+        const input = 'ÁÉÍÓÚáéíóú';
+        const expected = 'aeiouaeiou';
+        expect(vm.normalize(input)).toBe(expected);
+    });
+
+    it('should handle empty string', () => {
+        const input = '';
+        const expected = '';
+        expect(vm.normalize(input)).toBe(expected);
+    });
+
+    it('should handle text without diacritics', () => {
+        const input = 'hello';
+        const expected = 'hello';
+        expect(vm.normalize(input)).toBe(expected);
+    });
+
+    it('should handle mixed text', () => {
+        const input = 'Héllo Wórld!';
+        const expected = 'hello world!';
+        expect(vm.normalize(input)).toBe(expected);
+    });
+});
+
+describe('addChildren', () => {
+    const module = 'testModule';
+    beforeEach(() => {
+        vm = mount().vm;
+        vi.clearAllMocks();
+    });
+
+    it('should add menu items to parent if matches are found', () => {
+        const parent = 'testParent';
+        const route = {
+            meta: {
+                menu: 'testMenu',
+            },
+            children: [{ name: 'child1' }, { name: 'child2' }],
+        };
+        vm.addChildren(module, route, parent);
+
+        expect(useNavigationStore().addMenuItem).toHaveBeenCalled();
+    });
+
+    it('should handle routes with no meta menu', () => {
+        const route = {
+            meta: {},
+            menus: {},
+        };
+
+        const parent = [];
+
+        vm.addChildren(module, route, parent);
+        expect(useNavigationStore().addMenuItem).toHaveBeenCalled();
+    });
+
+    it('should handle empty parent array', () => {
+        const parent = [];
+        const route = {
+            meta: {
+                menu: 'child11',
+            },
+            children: [
+                {
+                    name: 'child1',
+                    meta: {
+                        menuChildren: [
+                            {
+                                name: 'CustomerCreditContracts',
+                                title: 'creditContracts',
+                                icon: 'vn:solunion',
+                            },
+                        ],
+                    },
+                },
+            ],
+        };
+        vm.addChildren(module, route, parent);
+        expect(useNavigationStore().addMenuItem).toHaveBeenCalled();
     });
 });