-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: added tests for categoryfilters component (#1076)
* test(m2-438): wip * test: added tests for categoryfilters component Co-authored-by: Alex <[email protected]> Co-authored-by: Alexander Devitsky <[email protected]>
- Loading branch information
3 people
authored
May 31, 2022
1 parent
2b873bd
commit 467c842
Showing
8 changed files
with
184 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 125 additions & 0 deletions
125
packages/theme/modules/catalog/category/components/filters/__tests__/CategoryFilters.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { inject, ref, useContext } from '@nuxtjs/composition-api'; | ||
| import { render } from '~/test-utils'; | ||
| import CategoryFilters from '../CategoryFilters.vue'; | ||
| import { useUiHelpers } from '~/composables'; | ||
| import { Aggregation } from '~/modules/GraphQL/types'; | ||
| import { categoryFiltersData } from '~/test-utils/mocks/categoryFiltersMock'; | ||
| import { useUiHelpersMock } from '~/test-utils/mocks/useUiHelpersMock'; | ||
|
|
||
| jest.mock('@nuxtjs/composition-api', () => { | ||
| const compositionApi = jest.requireActual('@nuxtjs/composition-api'); | ||
| return { | ||
| ...compositionApi, | ||
| inject: jest.fn(), | ||
| useContext: jest.fn(), | ||
| }; | ||
| }); | ||
| jest.mock('~/composables'); | ||
| jest.mock('~/composables/useApi', () => ({ | ||
| useApi: jest.fn().mockReturnValue({ | ||
| query: jest.fn(), | ||
| }), | ||
| })); | ||
|
|
||
| (useContext as jest.Mock).mockReturnValue({ | ||
| app: { | ||
| i18n: { | ||
| t: jest.fn((text: string): string => text), | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| (inject as jest.Mock).mockReturnValue({ | ||
| isFilterSelected: jest.fn( | ||
| (id: string, optVal: string): boolean => id === optVal, | ||
| ), | ||
| }); | ||
|
|
||
| (useUiHelpers as jest.Mock).mockReturnValue(useUiHelpersMock()); | ||
|
|
||
| describe('CategoryFilters', () => { | ||
| it('Should render Skeleton when isLoading is true', () => { | ||
| const { queryByTestId } = render(CategoryFilters, { | ||
| props: { | ||
| catUid: '1', | ||
| }, | ||
| setup() { | ||
| return { | ||
| isLoading: ref(true), | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| expect(queryByTestId('skeleton-loader')).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('CategoryFilters Mobile sidebar should be hidden if isVisible false', () => { | ||
| const { queryByTestId } = render(CategoryFilters, { | ||
| props: { | ||
| catUid: '1', | ||
| isVisible: false, | ||
| }, | ||
| }); | ||
|
|
||
| expect(queryByTestId('mobile-sidebar').children).toHaveLength(0); | ||
| }); | ||
|
|
||
| it('Should render filters if these are exist', () => { | ||
| const { getAllByTestId } = render(CategoryFilters, { | ||
| props: { | ||
| catUid: '1', | ||
| isVisible: false, | ||
| }, | ||
| setup() { | ||
| return { | ||
| isLoading: ref(false), | ||
| filters: ref(categoryFiltersData as Aggregation[]), | ||
| }; | ||
| }, | ||
| }); | ||
| const filters = getAllByTestId('category-filter'); | ||
|
|
||
| expect(filters).toHaveLength(categoryFiltersData.length); | ||
| }); | ||
|
|
||
| it('CategoryFilters Mobile sidebar should be visible if isVisible true', () => { | ||
| const { queryByTestId } = render(CategoryFilters, { | ||
| props: { | ||
| catUid: '1', | ||
| isVisible: true, | ||
| }, | ||
| }); | ||
|
|
||
| expect(queryByTestId('mobile-sidebar').children).not.toHaveLength(0); | ||
| }); | ||
|
|
||
| it('"Apply filters" and "Clear all" buttons should be clickable', async () => { | ||
| const doApplyFilters = jest.fn(); | ||
| const doClearFilters = jest.fn(); | ||
| const { getByTestId } = render(CategoryFilters, { | ||
| props: { | ||
| catUid: '1', | ||
| isVisible: false, | ||
| }, | ||
| setup() { | ||
| return { | ||
| isLoading: ref(false), | ||
| filters: ref(categoryFiltersData as Aggregation[]), | ||
| doApplyFilters, | ||
| doClearFilters, | ||
| }; | ||
| }, | ||
| }); | ||
| const applyFiltersButton = getByTestId('apply-filters'); | ||
| const clearFiltersButton = getByTestId('clear-filters'); | ||
|
|
||
| await userEvent.click(applyFiltersButton); | ||
|
|
||
| expect(doApplyFilters).toHaveBeenCalledTimes(1); | ||
|
|
||
| await userEvent.click(clearFiltersButton); | ||
|
|
||
| expect(doClearFilters).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,44 @@ | ||
| import type { Aggregation } from '~/modules/GraphQL/types'; | ||
|
|
||
| export const categoryFiltersData: Aggregation = { | ||
| label: 'Pattern', | ||
| count: 2, | ||
| attribute_code: 'pattern', | ||
| position: 0, | ||
| options: [ | ||
| { | ||
| count: 11, | ||
| label: 'Solid', | ||
| value: '196', | ||
| }, | ||
| { | ||
| count: 1, | ||
| label: '194', | ||
| value: '194', | ||
| }, | ||
| ], | ||
| }; | ||
| export const categoryFiltersData: Aggregation[] = [ | ||
| { | ||
| label: 'Pattern', | ||
| count: 2, | ||
| attribute_code: 'pattern', | ||
| position: 0, | ||
| options: [ | ||
| { | ||
| count: 11, | ||
| label: 'Solid', | ||
| value: '196', | ||
| }, | ||
| { | ||
| count: 1, | ||
| label: '194', | ||
| value: '194', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| label: 'Category', | ||
| count: 7, | ||
| attribute_code: 'category_id', | ||
| position: 1, | ||
| options: [ | ||
| { | ||
| count: 12, | ||
| label: 'Women', | ||
| value: '20', | ||
| }, | ||
| { | ||
| count: 12, | ||
| label: 'Tops', | ||
| value: '21', | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| export const categoryFiltersDataWithOneOption: Aggregation = Object.assign(categoryFiltersData, { | ||
| options: [categoryFiltersData.options[0]], | ||
| export const categoryFiltersDataWithOneOption: Aggregation = Object.assign(categoryFiltersData[0], { | ||
| options: [categoryFiltersData[0].options[0]], | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters