From 42107a359e75f37330303c878283d24e7bc338af Mon Sep 17 00:00:00 2001 From: Diego Alba Date: Thu, 5 May 2022 19:19:59 +0000 Subject: [PATCH] test: categorynavbar component --- .../theme/components/SkeletonLoader/index.vue | 1 + .../navbar/__tests__/CategoryNavbar.spec.js | 80 +++++++++++++++++++ .../test-utils/mocks/categoryNavbarMock.ts | 35 ++++++++ .../test-utils/mocks/useUiHelpersMock.ts | 1 + packages/theme/test-utils/mocks/useUiState.js | 3 + 5 files changed, 120 insertions(+) create mode 100644 packages/theme/modules/catalog/category/components/navbar/__tests__/CategoryNavbar.spec.js create mode 100644 packages/theme/test-utils/mocks/categoryNavbarMock.ts diff --git a/packages/theme/components/SkeletonLoader/index.vue b/packages/theme/components/SkeletonLoader/index.vue index e6e0afe00..991e2dd12 100644 --- a/packages/theme/components/SkeletonLoader/index.vue +++ b/packages/theme/components/SkeletonLoader/index.vue @@ -2,6 +2,7 @@
diff --git a/packages/theme/modules/catalog/category/components/navbar/__tests__/CategoryNavbar.spec.js b/packages/theme/modules/catalog/category/components/navbar/__tests__/CategoryNavbar.spec.js new file mode 100644 index 000000000..f2ac5230d --- /dev/null +++ b/packages/theme/modules/catalog/category/components/navbar/__tests__/CategoryNavbar.spec.js @@ -0,0 +1,80 @@ +import userEvent from '@testing-library/user-event'; +import { render } from '~/test-utils'; +import CategoryNavbar from '../CategoryNavbar.vue'; +import { paginationData, sortByData } from '~/test-utils/mocks/categoryNavbarMock'; +import { useUiHelpers, useUiState } from '~/composables'; +import useUiHelpersMock from '~/test-utils/mocks/useUiHelpersMock'; +import useUiStateMock from '~/test-utils/mocks/useUiState'; + +jest.mock('~/composables', () => ({ + ...jest.requireActual('~/composables'), + useUiHelpers: jest.fn(), + useUiState: jest.fn(), +})); + +const categoryNavbarProps = { props: { pagination: paginationData, sortBy: sortByData } }; +const loadingCategoryNavbarProps = { props: { pagination: paginationData, sortBy: sortByData, isLoading: true } }; + +describe('CategoryNavbar.vue', () => { + it('Should render Skeleton when loading is true', () => { + const uiStateMock = useUiStateMock(); + useUiState.mockReturnValue(uiStateMock); + const { getAllByTestId } = render(CategoryNavbar, loadingCategoryNavbarProps); + + const skeletonLoaders = getAllByTestId('skeletonLoader'); + + skeletonLoaders.forEach((skeletonLoader) => { + expect(skeletonLoader).toBeInTheDocument(); + }); + }); + + it('Should render "Filters" button and call "toggleFilterSidebar" when clicked', async () => { + const uiStateMock = useUiStateMock(); + useUiState.mockReturnValue(uiStateMock); + const { getByText } = render(CategoryNavbar, categoryNavbarProps); + const button = getByText('Filters'); + + await userEvent.click(button); + + expect(uiStateMock.toggleFilterSidebar).toHaveBeenCalledTimes(1); + }); + + it('Should render "sort by" select and change selection and select has all expected options based on its data', async () => { + const uiHelperMock = useUiHelpersMock(); + useUiHelpers.mockReturnValue(uiHelperMock); + + const { + getByRole, getByText, getAllByRole, emitted, + } = render(CategoryNavbar, categoryNavbarProps); + const sortSelect = getByRole('combobox'); + const options = getAllByRole('option'); + expect(options).toHaveLength(categoryNavbarProps.props.sortBy.options.length); + + await userEvent.selectOptions(sortSelect, ['name_ASC']); + expect(getByText('Sort: Name A-Z').value).toBe(sortSelect.value); + expect(emitted().reloadProducts).toHaveProperty('length', 1); + }); + + it('Should render list view icon and change to "List view" when clicked.', async () => { + const uiStateMock = useUiStateMock(); + useUiState.mockReturnValue(uiStateMock); + + const { getByLabelText } = render(CategoryNavbar, categoryNavbarProps); + const listViewIcon = getByLabelText(/change to list view/i); + + await userEvent.click(listViewIcon); + expect(uiStateMock.changeToCategoryListView).toHaveBeenCalledTimes(1); + }); + + it('Should render grid view icon and change to "Grid view" when clicked.', async () => { + const uiStateMock = useUiStateMock(); + useUiState.mockReturnValue(uiStateMock); + + const { getByLabelText } = render(CategoryNavbar, categoryNavbarProps); + const gridViewIcon = getByLabelText(/change to grid view/i); + + await userEvent.click(gridViewIcon); + + expect(uiStateMock.changeToCategoryGridView).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/theme/test-utils/mocks/categoryNavbarMock.ts b/packages/theme/test-utils/mocks/categoryNavbarMock.ts new file mode 100644 index 000000000..46d058e10 --- /dev/null +++ b/packages/theme/test-utils/mocks/categoryNavbarMock.ts @@ -0,0 +1,35 @@ +import { AgnosticPagination } from '~/composables/types'; + +export const paginationData: AgnosticPagination = { + currentPage: 1, + totalPages: 2, + totalItems: 11, + itemsPerPage: 10, + pageOptions: [10, 50, 100], +}; + +export const sortByData = { + options: [ + { + label: 'Sort: Default', + value: '', + }, + { + label: 'Sort: Name A-Z', + value: 'name_ASC', + }, + { + label: 'Sort: Name Z-A', + value: 'name_DESC', + }, + { + label: 'Sort: Price from low to high', + value: 'price_ASC', + }, + { + label: 'Sort: Price from high to low', + value: 'price_DESC', + }, + ], + selected: 'name_DESC', +}; diff --git a/packages/theme/test-utils/mocks/useUiHelpersMock.ts b/packages/theme/test-utils/mocks/useUiHelpersMock.ts index cf9f2493f..35b177541 100644 --- a/packages/theme/test-utils/mocks/useUiHelpersMock.ts +++ b/packages/theme/test-utils/mocks/useUiHelpersMock.ts @@ -1,5 +1,6 @@ export const useUiHelpersMock = (extend = {}) => ({ getCatLink: jest.fn((val) => val), + changeSorting: jest.fn(), ...extend, }); diff --git a/packages/theme/test-utils/mocks/useUiState.js b/packages/theme/test-utils/mocks/useUiState.js index 4a7b63542..d3786802e 100644 --- a/packages/theme/test-utils/mocks/useUiState.js +++ b/packages/theme/test-utils/mocks/useUiState.js @@ -1,6 +1,9 @@ export const useUiStateMock = (extend = {}) => ({ isCartSidebarOpen: false, + changeToCategoryGridView: jest.fn(), + changeToCategoryListView: jest.fn(), toggleCartSidebar: jest.fn(), + toggleFilterSidebar: jest.fn(), ...extend, });