#7058 LeftMenu vitest #1153

Merged
jsegarra merged 26 commits from 7058_leftMenu_vitest into dev 2025-02-06 21:45:16 +00:00
2 changed files with 50 additions and 82 deletions
Showing only changes of commit 3c5b8d4fbf - Show all commits

View File

@ -33,18 +33,13 @@ const pinnedModules = computed(() => {
const search = ref(null); const search = ref(null);
const filteredItems = computed(() => { const filteredItems = computed(() => {
console.error('filterItems');
return filterItems();
});
function filterItems() {
console.error('filterItems');
if (!search.value) return items.value; if (!search.value) return items.value;
const normalizedSearch = normalize(search.value); const normalizedSearch = normalize(search.value);
return items.value.filter((item) => { return items.value.filter((item) => {
jsegarra marked this conversation as resolved Outdated

Solo se usa 1 vez

Solo se usa 1 vez

Lo sé, era la manera mas simple de probar la lógica de esa función.
Esto no debería haber subido así porque no haría falta poner las llaves y el return

Lo sé, era la manera mas simple de probar la lógica de esa función. Esto no debería haber subido así porque no haría falta poner las llaves y el return

Si no hay manera de poder testearlo vale, pero si se puede mejor poner dentro de computed, si se vuelve muy complicado quizá sería mejor testearlo con test unitario con cypress

Si no hay manera de poder testearlo vale, pero si se puede mejor poner dentro de computed, si se vuelve muy complicado quizá sería mejor testearlo con test unitario con cypress

Yo haría el test en un unitario con cypress. Queda feo crear una fn que solo vas a usar 1 vez y es simple.

Yo haría el test en un unitario con cypress. Queda feo crear una fn que solo vas a usar 1 vez y es simple.

He vuelto a probar y me ha funcionado dejandolo dentro del computed.
No se que pasó

He vuelto a probar y me ha funcionado dejandolo dentro del computed. No se que pasó
const locale = normalize(t(item.title)); const locale = normalize(t(item.title));
return locale.includes(normalizedSearch); return locale.includes(normalizedSearch);
}); });
} });
const filteredPinnedModules = computed(() => { const filteredPinnedModules = computed(() => {
if (!search.value) return pinnedModules.value; if (!search.value) return pinnedModules.value;
@ -108,38 +103,33 @@ function addChildren(module, route, parent) {
} }
function getRoutes() { function getRoutes() {
const handleRoutes = { if (props.source === 'main') {
main: getMainRoutes, const modules = Object.assign([], navigation.getModules().value);
card: getCardRoutes,
};
console.log(props.source);
handleRoutes[props.source]();
}
function getMainRoutes() {
const modules = Object.assign([], navigation.getModules().value);
for (const item of modules) { for (const item of modules) {
const moduleDef = routes.find( const moduleDef = routes.find(
(route) => toLowerCamel(route.name) === item.module (route) => toLowerCamel(route.name) === item.module
); );
if (!moduleDef) continue; if (!moduleDef) continue;
item.children = []; item.children = [];
addChildren(item.module, moduleDef, item.children); addChildren(item.module, moduleDef, item.children);
}
items.value = modules;
} }
items.value = modules; if (props.source === 'card') {
} const currentRoute = route.matched[1];
const currentModule = toLowerCamel(currentRoute.name);
let moduleDef = routes.find(
(route) => toLowerCamel(route.name) === currentModule
);
function getCardRoutes() { if (!moduleDef) return;
console.log('getCardRoutes'); if (!moduleDef?.menus) moduleDef = betaGetRoutes();
const currentRoute = route.matched[1]; addChildren(currentModule, moduleDef, items.value);
const currentModule = toLowerCamel(currentRoute.name); }
let moduleDef = routes.find((route) => toLowerCamel(route.name) === currentModule);
if (!moduleDef) return;
if (!moduleDef?.menus) moduleDef = betaGetRoutes();
addChildren(currentModule, moduleDef, items.value);
} }
function betaGetRoutes() { function betaGetRoutes() {

View File

@ -132,37 +132,40 @@ function mount(source) {
return wrapper; return wrapper;
} }
describe('getRoutes', () => { describe.only('getRoutes', () => {
afterEach(() => vi.clearAllMocks()); beforeEach(() => {});
const getRoutes = vi // afterEach(() => vi.clearAllMocks());
.fn() // const getRoutes = vi
.mockImplementation((props, getMainRoutes, getCardRoutes) => { // .fn()
const handleRoutes = { // .mockImplementation((props, getMainRoutes, getCardRoutes) => {
main: getMainRoutes, // const handleRoutes = {
card: getCardRoutes, // main: getMainRoutes,
}; // card: getCardRoutes,
console.log(props.source); // };
handleRoutes[props.source](); // console.log(props.source);
}); // handleRoutes[props.source]();
// });
const getMainRoutes = vi.fn(); // const getMainRoutes = vi.fn();
const getCardRoutes = vi.fn(); // const getCardRoutes = vi.fn();
it('should call getCardRoutes when source is card', () => { it('should call getCardRoutes when source is card', () => {
vm = mount('card').vm;
let props = { source: 'card' }; let props = { source: 'card' };
vi.spyOn(vm, 'getCardRoutes');
vm.getRoutes();
// getRoutes(props, getMainRoutes, getCardRoutes);
getRoutes(props, getMainRoutes, getCardRoutes); expect(vm.getCardRoutes).toHaveBeenCalled();
// expect(vm.getMainRoutes).not.toHaveBeenCalled();
expect(getCardRoutes).toHaveBeenCalled();
expect(getMainRoutes).not.toHaveBeenCalled();
}); });
it('should call getMainRoutes when source is main', () => { // it.skip('should call getMainRoutes when source is main', () => {
let props = { source: 'main' }; // let props = { source: 'main' };
getRoutes(props, getMainRoutes, getCardRoutes); // getRoutes(props, getMainRoutes, getCardRoutes);
expect(getMainRoutes).toHaveBeenCalled(); // expect(getMainRoutes).toHaveBeenCalled();
expect(getCardRoutes).not.toHaveBeenCalled(); // expect(getCardRoutes).not.toHaveBeenCalled();
}); // });
}); });
jsegarra marked this conversation as resolved Outdated

Poner otro nombre, está repetido.

Poner otro nombre, está repetido.

oh vaya

oh vaya

should not call getMethodA when method is undefined por ej.

should not call getMethodA when method is undefined por ej.
describe.skip('Leftmenu as card', () => { describe.skip('Leftmenu as card', () => {
beforeAll(() => { beforeAll(() => {
@ -372,11 +375,6 @@ describe.only('addChildren', () => {
vm.addChildren(module, route, parent); vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalled(); expect(useNavigationStore().addMenuItem).toHaveBeenCalled();
// expect(useNavigationStore().addMenuItem).toHaveBeenCalledWith(
// module,
// { name: 'child1' },
// parent
// );
}); });
it.only('should not add menu items if no matches are found', () => { it.only('should not add menu items if no matches are found', () => {
@ -389,24 +387,14 @@ describe.only('addChildren', () => {
vm.addChildren(module, route, parent); vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalled(); expect(useNavigationStore().addMenuItem).toHaveBeenCalled();
// expect(useNavigationStore().addMenuItem).not.toHaveBeenCalled();
}); });
it('should handle routes with no meta menu', () => { it('should handle routes with no meta menu', () => {
const module = 'testModule'; const module = 'testModule';
// const route = {
// menus: { main: 'child1' },
// children: [{ name: 'child1' }, { name: 'child2' }],
// };
const parent = []; const parent = [];
vm.addChildren(module, route, parent); vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalled(); expect(useNavigationStore().addMenuItem).toHaveBeenCalled();
// expect(useNavigationStore().addMenuItem).toHaveBeenCalledWith(
// module,
// { name: 'child1' },
// parent
// );
}); });
it('should handle routes with no matches', () => { it('should handle routes with no matches', () => {
@ -419,23 +407,13 @@ describe.only('addChildren', () => {
vm.addChildren(module, route, parent); vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalled(); expect(useNavigationStore().addMenuItem).toHaveBeenCalled();
// expect(useNavigationStore().addMenuItem).not.toHaveBeenCalled();
}); });
it('should handle empty parent array', () => { it('should handle empty parent array', () => {
const module = 'testModule'; const module = 'testModule';
// const route = {
// meta: { menu: 'child1' },
// children: [{ name: 'child1' }, { name: 'child2' }],
// };
const parent = []; const parent = [];
vm.addChildren(module, route, parent); vm.addChildren(module, route, parent);
expect(useNavigationStore().addMenuItem).toHaveBeenCalled(); expect(useNavigationStore().addMenuItem).toHaveBeenCalled();
// expect(useNavigationStore().addMenuItem).toHaveBeenCalledWith(
// module,
// { name: 'child1' },
// parent
// );
}); });
}); });