#7058 LeftMenu vitest #1153
|
@ -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);
|
||||
|
||||
|
||||
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();
|
||||
jorgep
commented
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
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue
Estaría bien crear un test que devuelva algún resultado, mockea otra para comprobar que solo te va a devolver esa.