From 43ae0a8eab265ecbc166560f3ec054a7a3acabc7 Mon Sep 17 00:00:00 2001
From: Alexander Devitsky <alexander.devitsky@gmail.com>
Date: Thu, 12 May 2022 16:17:42 +0300
Subject: [PATCH 1/2] test: category-breadcrumbs component

---
 .../__tests__/CategoryBreadcrumbs.spec.ts     |  71 +++++++
 .../breadcrumbs/CategoryBreadcrumbs.vue       |   6 +-
 .../mocks/useTraverseCategoryMock.ts          | 193 ++++++++++++++++++
 3 files changed, 268 insertions(+), 2 deletions(-)
 create mode 100644 packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts
 create mode 100644 packages/theme/test-utils/mocks/useTraverseCategoryMock.ts

diff --git a/packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts b/packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts
new file mode 100644
index 000000000..7b4f8dce6
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts
@@ -0,0 +1,71 @@
+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');
+
+describe('CategoryBreadcrumbs.vue', () => {
+  beforeEach(() => {
+    const { useContext } = composables;
+    jest.resetAllMocks();
+    (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 || ''}`,
+      ),
+    });
+  });
+
+  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');
+  });
+});
diff --git a/packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue b/packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue
index e338741e5..d1390b7cf 100644
--- a/packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue
+++ b/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)),
       }));
     });
 
diff --git a/packages/theme/test-utils/mocks/useTraverseCategoryMock.ts b/packages/theme/test-utils/mocks/useTraverseCategoryMock.ts
new file mode 100644
index 000000000..3bac772b5
--- /dev/null
+++ b/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,
+});

From 2290fd918872f2a47ff6c96676445d32f18ae32d Mon Sep 17 00:00:00 2001
From: Alexander Devitsky <alexander.devitsky@gmail.com>
Date: Fri, 13 May 2022 13:54:43 +0300
Subject: [PATCH 2/2] refactor: category-breadcrumbs test refactoring

---
 .../__tests__/CategoryBreadcrumbs.spec.ts     | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts b/packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts
index 7b4f8dce6..98408f455 100644
--- a/packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts
+++ b/packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts
@@ -21,20 +21,16 @@ jest.mock('@nuxtjs/composition-api', () => {
 jest.mock('~/composables');
 jest.mock('~/modules/catalog/category/helpers/useTraverseCategory');
 
-describe('CategoryBreadcrumbs.vue', () => {
-  beforeEach(() => {
-    const { useContext } = composables;
-    jest.resetAllMocks();
-    (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 || ''}`,
-      ),
-    });
-  });
+(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);