test: category-breadcrumbs component

packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts

@@ -0,0 +1,67 @@
+import { mount } from '@vue/test-utils';
+import * as composables from '@nuxtjs/composition-api';
+import {
+  categoryAncestorsFirstLevelMock,
+  categoryAncestorsSecondLevelMock,
+  categoryAncestorsThirdLevelMock,
+  useTraverseCategoryMock,
+} from '~/test-utils/mocks/useTraverseCategoryMock';
+import { useUiHelpers } from '~/composables';
+import { useTraverseCategory } from '~/modules/catalog/category/helpers/useTraverseCategory';
+import CategoryBreadcrumbs from '~/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue';
+import type { CategoryTree } from '~/modules/GraphQL/types';
+
+jest.mock('@nuxtjs/composition-api', () => {
+  const originalComposables = jest.requireActual('@nuxtjs/composition-api');
+  return {
+    ...originalComposables,
+    useContext: jest.fn(),
+  };
+});
+jest.mock('~/composables');
+jest.mock('~/modules/catalog/category/helpers/useTraverseCategory');
+
+(composables.useContext as jest.Mock).mockReturnValue({
+  localePath: jest.fn((path: string) => path),
+});
+(useUiHelpers as jest.Mock).mockReturnValue({
+  getCatLink: jest.fn(
+    (category: CategoryTree): string => `/c/${category.url_path}${category.url_suffix || ''}`,
+  ),
+});
+
+describe('CategoryBreadcrumbs.vue', () => {
+  it('Breadcrumbs should not render if there is only a first level category', () => {
+    (useTraverseCategory as jest.Mock).mockReturnValue(useTraverseCategoryMock(categoryAncestorsFirstLevelMock));
+    const wrapper = mount(CategoryBreadcrumbs);
+    expect(wrapper).toBeDefined();
+    expect(wrapper.find('li').exists()).toBeFalsy();
+  });
+
+  it('Breadcrumbs must have one item for the second level category', () => {
+    (useTraverseCategory as jest.Mock).mockReturnValue(useTraverseCategoryMock(categoryAncestorsSecondLevelMock));
+    const wrapper = mount(CategoryBreadcrumbs);
+    expect(wrapper.findAll('li')).toHaveLength(1);
+  });
+
+  it('Breadcrumbs must have two item for the third level category', () => {
+    (useTraverseCategory as jest.Mock).mockReturnValue(useTraverseCategoryMock(categoryAncestorsThirdLevelMock));
+    const wrapper = mount(CategoryBreadcrumbs);
+    expect(wrapper.findAll('li')).toHaveLength(2);
+  });
+
+  it('Breadcrumb must have link that should have href attribute', () => {
+    (useTraverseCategory as jest.Mock).mockReturnValue(useTraverseCategoryMock(categoryAncestorsSecondLevelMock));
+    const wrapper = mount(CategoryBreadcrumbs);
+    const link = wrapper.find('a');
+    expect(link).toBeDefined();
+    expect(link.attributes('href')).toBeDefined();
+  });
+
+  it('The last breadcrumb must have \'current\' class', () => {
+    (useTraverseCategory as jest.Mock).mockReturnValue(useTraverseCategoryMock(categoryAncestorsThirdLevelMock));
+    const wrapper = mount(CategoryBreadcrumbs);
+    const links = wrapper.findAll('a');
+    expect(links.at(-1).classes()).toContain('current');
+  });
+});

packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue

@@ -2,12 +2,13 @@
   <SfBreadcrumbs
     :breadcrumbs="breadcrumbs"
     class="breadcrumbs"
+    data-testid="breadcrumbs"
   />
 </template>
 
 <script lang="ts">
 import {
-  defineComponent, useFetch, ref,
+  defineComponent, useContext, useFetch, ref,
 } from '@nuxtjs/composition-api';
 import { SfBreadcrumbs } from '@storefront-ui/vue';
 import { useUiHelpers } from '~/composables';
@@ -19,6 +20,7 @@ export default defineComponent({
   components: { SfBreadcrumbs },
   setup() {
     const { getCatLink } = useUiHelpers();
+    const { localePath } = useContext();
 
     const {
       categoryAncestors, isCategoryTreeLoaded, loadCategoryTree,
@@ -32,7 +34,7 @@ export default defineComponent({
 
       breadcrumbs.value = categoryAncestors.value.slice(0, -1).map((category) => ({
         text: category.name,
-        link: getCatLink(category),
+        link: localePath(getCatLink(category)),
       }));
     });
 

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

@@ -0,0 +1,193 @@
+import { ref } from '@nuxtjs/composition-api';
+import type { CategoryTree } from '~/modules/GraphQL/types';
+
+export const categoryAncestorsFirstLevelMock: CategoryTree[] = [
+  {
+    is_anchor: 1,
+    name: 'Women',
+    position: 2,
+    product_count: 75,
+    uid: 'MjA=',
+    url_path: 'women',
+    url_suffix: '.html',
+    include_in_menu: 1,
+    redirect_code: 301,
+    children: [
+      {
+        is_anchor: 1,
+        name: 'Tops',
+        position: 1,
+        product_count: 50,
+        uid: 'MjE=',
+        url_path: 'women/tops-women',
+        url_suffix: '.html',
+        include_in_menu: 1,
+        redirect_code: 301,
+        children: [
+          {
+            is_anchor: 1,
+            name: 'Jackets',
+            position: 1,
+            product_count: 12,
+            uid: 'MjM=',
+            url_path: 'women/tops-women/jackets-women',
+            url_suffix: '.html',
+            include_in_menu: 1,
+            redirect_code: 301,
+          },
+          {
+            is_anchor: 1,
+            name: 'Hoodies & Sweatshirts',
+            position: 2,
+            product_count: 12,
+            uid: 'MjQ=',
+            url_path: 'women/tops-women/hoodies-and-sweatshirts-women',
+            url_suffix: '.html',
+            include_in_menu: 1,
+            redirect_code: 301,
+          },
+          {
+            is_anchor: 1,
+            name: 'Tees',
+            position: 3,
+            product_count: 12,
+            uid: 'MjU=',
+            url_path: 'women/tops-women/tees-women',
+            url_suffix: '.html',
+            include_in_menu: 1,
+            redirect_code: 301,
+          },
+          {
+            is_anchor: 1,
+            name: 'Bras & Tanks',
+            position: 4,
+            product_count: 14,
+            uid: 'MjY=',
+            url_path: 'women/tops-women/tanks-women',
+            url_suffix: '.html',
+            include_in_menu: 1,
+            redirect_code: 301,
+          },
+        ],
+      },
+      {
+        is_anchor: 1,
+        name: 'Bottoms',
+        position: 2,
+        product_count: 25,
+        uid: 'MjI=',
+        url_path: 'women/bottoms-women',
+        url_suffix: '.html',
+        include_in_menu: 1,
+        redirect_code: 301,
+        children: [
+          {
+            is_anchor: 1,
+            name: 'Pants',
+            position: 1,
+            product_count: 13,
+            uid: 'Mjc=',
+            url_path: 'women/bottoms-women/pants-women',
+            url_suffix: '.html',
+            include_in_menu: 1,
+            redirect_code: 301,
+          },
+          {
+            is_anchor: 1,
+            name: 'Shorts',
+            position: 2,
+            product_count: 12,
+            uid: 'Mjg=',
+            url_path: 'women/bottoms-women/shorts-women',
+            url_suffix: '.html',
+            include_in_menu: 1,
+            redirect_code: 301,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const categoryAncestorsSecondLevelMock = [
+  ...categoryAncestorsFirstLevelMock,
+  {
+    is_anchor: 1,
+    name: 'Tops',
+    position: 1,
+    product_count: 50,
+    uid: 'MjE=',
+    url_path: 'women/tops-women',
+    url_suffix: '.html',
+    include_in_menu: 1,
+    redirect_code: 301,
+    children: [
+      {
+        is_anchor: 1,
+        name: 'Jackets',
+        position: 1,
+        product_count: 12,
+        uid: 'MjM=',
+        url_path: 'women/tops-women/jackets-women',
+        url_suffix: '.html',
+        include_in_menu: 1,
+        redirect_code: 301,
+      },
+      {
+        is_anchor: 1,
+        name: 'Hoodies & Sweatshirts',
+        position: 2,
+        product_count: 12,
+        uid: 'MjQ=',
+        url_path: 'women/tops-women/hoodies-and-sweatshirts-women',
+        url_suffix: '.html',
+        include_in_menu: 1,
+        redirect_code: 301,
+      },
+      {
+        is_anchor: 1,
+        name: 'Tees',
+        position: 3,
+        product_count: 12,
+        uid: 'MjU=',
+        url_path: 'women/tops-women/tees-women',
+        url_suffix: '.html',
+        include_in_menu: 1,
+        redirect_code: 301,
+      },
+      {
+        is_anchor: 1,
+        name: 'Bras & Tanks',
+        position: 4,
+        product_count: 14,
+        uid: 'MjY=',
+        url_path: 'women/tops-women/tanks-women',
+        url_suffix: '.html',
+        include_in_menu: 1,
+        redirect_code: 301,
+      },
+    ],
+  } as CategoryTree,
+];
+
+export const categoryAncestorsThirdLevelMock = [
+  ...categoryAncestorsSecondLevelMock,
+  {
+    is_anchor: 1,
+    name: 'Jackets',
+    position: 1,
+    product_count: 12,
+    uid: 'MjM=',
+    url_path: 'women/tops-women/jackets-women',
+    url_suffix: '.html',
+    include_in_menu: 1,
+    redirect_code: 301,
+  } as CategoryTree,
+];
+
+export const useTraverseCategoryMock = (categoryAncestors = [], extend = []) => ({
+  loadCategoryTree: jest.fn(),
+  isCategoryTreeLoaded: ref(true),
+  categoryAncestors: ref(categoryAncestors),
+  ...extend,
+});