test: categorynavbar component

Author: Diegoalbag

packages/theme/components/SkeletonLoader/index.vue

@@ -2,6 +2,7 @@
   <div
     :class="componentClass"
     :style="componentStyle"
+    data-testid="skeletonLoader"
   >
     <slot v-if="!isLoading" />
   </div>

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);
+  });
+});

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',
+};

packages/theme/test-utils/mocks/useUiHelpersMock.ts

@@ -1,5 +1,6 @@
 export const useUiHelpersMock = (extend = {}) => ({
   getCatLink: jest.fn((val) => val),
+  changeSorting: jest.fn(),
   ...extend,
 });
 

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,
 });