diff --git a/packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue b/packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue index 919cd5d95..ffe59354a 100644 --- a/packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue +++ b/packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue @@ -28,7 +28,7 @@ :key="category.uid" :label="category.name" class="mobile-menu-sidebar__item" - @click="category.children ? navigate(category) : onGoCategoryDown(category)" + @click="category.children && category.children.length > 0 ? onGoCategoryDown(category) : navigate(category)" /> @@ -66,7 +66,7 @@ export default defineComponent({ }; // A category with no child categories can't be entered into - it can only navigated to - const initialHistoryWithSnippedSubcategoryLessTail = initialHistory.value.at(-1)?.children.length + const initialHistoryWithSnippedSubcategoryLessTail = initialHistory.value.at(-1)?.children?.length ? initialHistory.value : initialHistory.value.slice(0, -1); diff --git a/packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/MobileCategorySidebar.spec.ts b/packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/MobileCategorySidebar.spec.ts index ab44fb986..4741ed68d 100644 --- a/packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/MobileCategorySidebar.spec.ts +++ b/packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/MobileCategorySidebar.spec.ts @@ -1,7 +1,6 @@ import userEvent from '@testing-library/user-event'; import { useRoute, useContext, useRouter } from '@nuxtjs/composition-api'; import { render } from '~/test-utils'; -import MobileCategorySidebar from '../MobileCategorySidebar.vue'; import { useUiHelpers, useUiState } from '~/composables'; import { useCategoryStore } from '~/modules/catalog/category/stores/category'; import useUiHelpersMock from '~/test-utils/mocks/useUiHelpersMock'; @@ -12,6 +11,7 @@ import useContextMock from '~/test-utils/mocks/useContext'; import { womanCategoryTreeData, defaultCategoryTreeData } from '~/test-utils/mocks/categoryTreeDataMock'; import useCategoryStoreMock from '~/test-utils/mocks/useCategoryStore'; import { useMobileCategoryTree } from '../logic'; +import MobileCategorySidebar from '../MobileCategorySidebar.vue'; jest.mock('~/composables', () => { const composables = jest.requireActual('~/composables'); @@ -92,19 +92,21 @@ describe('MobileCategorySidebar.vue', () => { (useUiHelpers as jest.Mock).mockReturnValue(UiHelpersMock); (useUiState as jest.Mock).mockReturnValue(uiStateMock); + const categoryTreeData = [...defaultCategoryTreeData]; + const onGoCategoryDownMock = jest.fn(() => categoryTreeData.pop()); + (useMobileCategoryTree as jest.Mock).mockReturnValue({ currentItems: { value: defaultCategoryTreeData, }, + onGoCategoryDown: onGoCategoryDownMock, }); const { getByText } = render(MobileCategorySidebar); const womenCategory = getByText('Women'); await user.click(womenCategory); - - expect(uiStateMock.toggleMobileMenu).toHaveBeenCalledTimes(1); - expect(UiHelpersMock.getCatLink).toHaveBeenCalledWith(defaultCategoryTreeData[0]); + expect(onGoCategoryDownMock).toHaveBeenCalled(); }); it('Should render sub categories when current category is selected and should render "Go back" button.', () => { @@ -138,6 +140,9 @@ describe('MobileCategorySidebar.vue', () => { it('if the user click on a category without children he will be redirected to that category', async () => { const onGoCategoryDownMock = jest.fn((val) => val); + const UiHelpersMock = useUiHelpersMock(); + + (useUiHelpers as jest.Mock).mockReturnValue(UiHelpersMock); (useMobileCategoryTree as jest.Mock).mockReturnValue({ currentItems: { @@ -148,11 +153,10 @@ describe('MobileCategorySidebar.vue', () => { const { getByText } = render(MobileCategorySidebar); - const bagsButton = getByText('Training'); + const trainingButton = getByText('Training'); - await userEvent.click(bagsButton); - expect(onGoCategoryDownMock).toHaveBeenCalledTimes(1); - expect(onGoCategoryDownMock).toHaveBeenCalledWith(defaultCategoryTreeData[3]); + await userEvent.click(trainingButton); + expect(UiHelpersMock.getCatLink).toHaveBeenCalledWith(defaultCategoryTreeData[3]); }); it('if the user click on the back arrow (not the go back button) menu will be hidden', async () => { diff --git a/packages/theme/test-utils/mocks/categoryTreeDataMock.ts b/packages/theme/test-utils/mocks/categoryTreeDataMock.ts index 15e250ef2..0e60dd9fc 100644 --- a/packages/theme/test-utils/mocks/categoryTreeDataMock.ts +++ b/packages/theme/test-utils/mocks/categoryTreeDataMock.ts @@ -571,6 +571,7 @@ export const defaultCategoryTreeData = [ url_path: 'training', url_suffix: '.html', include_in_menu: 1, + children: [], }, ];