#7058 LeftMenu vitest #1153

Open
jsegarra wants to merge 18 commits from 7058_leftMenu_vitest into dev
1 changed files with 314 additions and 108 deletions
Showing only changes of commit 12715adbdb - Show all commits

View File

@ -1,9 +1,11 @@
import { vi, describe, expect, it, beforeAll, beforeEach } 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: [
{
@ -44,23 +46,16 @@ vi.mock('src/router/modules', () => ({
},
],
}));
function mount(source) {
return createWrapper(Leftmenu, {
vi.spyOn(axios, 'get').mockResolvedValue({
data: [],
});
const wrapper = createWrapper(Leftmenu, {
propsData: {
source,
},
});
}
describe('Leftmenu', () => {
let vm;
let navigation;
beforeAll(() => {
vi.spyOn(axios, 'get').mockResolvedValue({
data: [],
});
vm = mount('main').vm;
vi.spyOn(vm, 'getCardRoutes');
navigation = useNavigationStore();
navigation.fetchPinned = vi.fn().mockReturnValue(Promise.resolve(true));
@ -74,16 +69,67 @@ describe('Leftmenu', () => {
},
],
});
});
describe.only(' its card', () => {
it('getRoutes', () => {
vm.props.source = 'card';
return wrapper;
}
vm.getRoutes();
expect(useNavigationStore().getModules).toHaveBeenCalled();
describe('Leftmenu as card', () => {
beforeAll(() => {
vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
matched: [
{
path: '/',
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',
},
},
],
query: {},
params: {},
meta: { moduleName: 'mockName' },
path: 'mockName/1',
name: 'Customer',
});
vm = mount('card').vm;
vm.getCardRoutes = vi.fn().mockReturnValue(() => vi.fn);
});
it('should get routes for card source', () => {
const spyGetCardRoutes = vi.spyOn(vm, 'getCardRoutes');
vm.getCardRoutes();
console.log('spyGetCardRoutes', spyGetCardRoutes.mock.calls);
expect(spyGetCardRoutes.mock.calls).toHaveLength(1);
});
});
describe(' its main', () => {
describe('Leftmenu as main', () => {
beforeAll(() => {
vm = mount('main').vm;
});
@ -104,9 +150,7 @@ describe('Leftmenu', () => {
},
];
const firstMenuItem = vm.items[0];
expect(firstMenuItem.children).toEqual(
expect.arrayContaining(expectedMenuItem)
);
expect(firstMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
});
it('should initialize with default props', () => {
@ -141,29 +185,191 @@ describe('Leftmenu', () => {
const matches = vm.findMatches(search, item);
expect(matches).toEqual([{ name: 'child1', children: [] }]);
});
it.skip('should add children to navigation', () => {
const module = 'module1';
const route = {
meta: { menu: 'child1' },
children: [
{ name: 'child1', children: [] },
{ name: 'child2', 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,
};
const parent = 'parent1';
vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalledWith(
module,
{ name: 'child1', children: [] },
parent
);
await vm.togglePinned(item, event);
Review

Estaría bien crear un test que devuelva algún resultado, mockea otra para comprobar que solo te va a devolver esa.

Estaría bien crear un test que devuelva algún resultado, mockea otra para comprobar que solo te va a devolver esa.
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 an empty matched array', () => {
const result = vm.betaGetRoutes();
expect(result).toBeUndefined();
});
it.skip('should handle a single matched route with a menu', () => {
const route = {
matched: [{ meta: { menu: 'menu1' } }],
};
const result = vm.betaGetRoutes();
expect(result).toEqual(route.matched[0]);
});
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);
});
});
// WIP
describe.skip('addChildren', () => {
it('should add menu items to parent if matches are found', () => {
const module = 'testModule';
const route = {
meta: { menu: 'child1' },
children: [{ name: 'child1' }, { name: 'child2' }],
};
const parent = [];
vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalledWith(
module,
{ name: 'child1' },
parent
);
});
it.skip('should not add menu items if no matches are found', () => {
const module = 'testModule';
const route = {
meta: { menu: 'child3' },
children: [{ name: 'child1' }, { name: 'child2' }],
};
const parent = [];
vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).not.toHaveBeenCalled();
Review

En estos tests, solo veo que compruebes que la función haya sido llamada, no se debería comprobar si navigation ha cambiado?

En estos tests, solo veo que compruebes que la función haya sido llamada, no se debería comprobar si navigation ha cambiado?
});
it.skip('should handle routes with no meta menu', () => {
const module = 'testModule';
const route = {
menus: { main: 'child1' },
children: [{ name: 'child1' }, { name: 'child2' }],
};
const parent = [];
vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalledWith(
module,
{ name: 'child1' },
parent
);
});
it.skip('should handle routes with no matches', () => {
const module = 'testModule';
const route = {
meta: { menu: 'child3' },
children: [{ name: 'child1' }, { name: 'child2' }],
};
const parent = [];
vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).not.toHaveBeenCalled();
});
it.skip('should handle empty parent array', () => {
const module = 'testModule';
const route = {
meta: { menu: 'child1' },
children: [{ name: 'child1' }, { name: 'child2' }],
};
const parent = [];
vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalledWith(
module,
{ name: 'child1' },
parent
);
});
});