Skip to content

Commit

Permalink
test: category-breadcrumbs component
Browse files Browse the repository at this point in the history
  • Loading branch information
@bartoszherba
Alexander Devitsky authored and bartoszherba committed May 13, 2022
1 parent 38888de commit 4bce31b
Show file tree
Hide file tree
Showing 3 changed files with 268 additions and 2 deletions.
71 changes: 71 additions & 0 deletions packages/theme/modules/catalog/category/components/__tests__/CategoryBreadcrumbs.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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');
});
});
6 changes: 4 additions & 2 deletions packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -19,6 +20,7 @@ export default defineComponent({
components: { SfBreadcrumbs },
setup() {
const { getCatLink } = useUiHelpers();
const { localePath } = useContext();
const {
categoryAncestors, isCategoryTreeLoaded, loadCategoryTree,
Expand All @@ -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)),
}));
});
Expand Down
193 changes: 193 additions & 0 deletions packages/theme/test-utils/mocks/useTraverseCategoryMock.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
});

0 comments on commit 4bce31b

Please sign in to comment.