From 1bcc9bd070a0815288bf624c9de025c1fa52a564 Mon Sep 17 00:00:00 2001 From: YuliaRomanyk Date: Fri, 2 Aug 2024 20:41:47 +0300 Subject: [PATCH 1/2] Corrected pluralisation of offer counts --- .../popular-categories/PopularCategories.tsx | 6 +++--- src/constants/translations/en/categories-page.json | 3 ++- src/constants/translations/en/common.json | 2 ++ src/constants/translations/uk/categories-page.json | 7 +++++-- src/constants/translations/uk/common.json | 4 ++++ src/pages/categories/Categories.tsx | 6 +++--- src/pages/subjects/Subjects.tsx | 6 +++--- .../popular-categories/PopularCategories.spec.jsx | 7 +++++++ tests/unit/pages/categories/Categories.spec.jsx | 11 ++++++++++- tests/unit/pages/subjects/Subjects.spec.jsx | 7 +++++++ 10 files changed, 46 insertions(+), 13 deletions(-) diff --git a/src/components/popular-categories/PopularCategories.tsx b/src/components/popular-categories/PopularCategories.tsx index 96b5ce67f..6f01e5f0e 100644 --- a/src/components/popular-categories/PopularCategories.tsx +++ b/src/components/popular-categories/PopularCategories.tsx @@ -61,9 +61,9 @@ const PopularCategories: FC = ({ () => response.items.map((item) => ( { categories.map((item) => { return ( { subjects.map((item: SubjectInterface) => { return ( { expect(card).toBeInTheDocument() }) + + it('should render offer count descriptions for popularCategories', async () => { + await waitFor(() => { + const noOffers = screen.queryByText(/offers/) + expect(noOffers).not.toBeInTheDocument() + }) + }) }) diff --git a/tests/unit/pages/categories/Categories.spec.jsx b/tests/unit/pages/categories/Categories.spec.jsx index 9c58ebfc6..a2d867d40 100644 --- a/tests/unit/pages/categories/Categories.spec.jsx +++ b/tests/unit/pages/categories/Categories.spec.jsx @@ -1,5 +1,5 @@ import { vi } from 'vitest' -import { fireEvent, screen } from '@testing-library/react' +import { fireEvent, screen, waitFor } from '@testing-library/react' import { renderWithProviders } from '~tests/test-utils' import Categories from '~/pages/categories/Categories' @@ -30,6 +30,7 @@ describe('Categories page', () => { _id: '1', name: 'Languages', totalOffers: 0, + description: 'offers', appearance: { icon: 'Languages.svg', color: '#FF0000' @@ -39,6 +40,7 @@ describe('Categories page', () => { _id: '2', name: 'Music', totalOffers: 0, + description: 'offers', appearance: { icon: 'Music.svg', color: '#440fff' @@ -114,4 +116,11 @@ describe('Categories page with empty data', () => { const newNotFound = screen.getByText('errorMessages.resultsNotFound') expect(newNotFound).toBeInTheDocument() }) + + it('should render offer count descriptions for categories', async () => { + await waitFor(() => { + const noOffers = screen.queryByText(/offers/) + expect(noOffers).not.toBeInTheDocument() + }) + }) }) diff --git a/tests/unit/pages/subjects/Subjects.spec.jsx b/tests/unit/pages/subjects/Subjects.spec.jsx index d389d76a6..34e175bb0 100644 --- a/tests/unit/pages/subjects/Subjects.spec.jsx +++ b/tests/unit/pages/subjects/Subjects.spec.jsx @@ -99,4 +99,11 @@ describe('Subjects', () => { expect(autocomplete.value).toBe('') }) + + it('should render offer count descriptions for subjects', async () => { + await waitFor(() => { + const noOffers = screen.queryByText(/offers/) + expect(noOffers).not.toBeInTheDocument() + }) + }) }) From 77d48f0ca64d80aa9947d3daea7da134fd89a64d Mon Sep 17 00:00:00 2001 From: YuliaRomanyk Date: Mon, 5 Aug 2024 16:26:37 +0300 Subject: [PATCH 2/2] Added some tests --- tests/unit/pages/subjects/Subjects.spec.jsx | 144 ++++++++++---------- 1 file changed, 75 insertions(+), 69 deletions(-) diff --git a/tests/unit/pages/subjects/Subjects.spec.jsx b/tests/unit/pages/subjects/Subjects.spec.jsx index 34e175bb0..d80d955d5 100644 --- a/tests/unit/pages/subjects/Subjects.spec.jsx +++ b/tests/unit/pages/subjects/Subjects.spec.jsx @@ -1,103 +1,109 @@ import { vi } from 'vitest' -import Subjects from '~/pages/subjects/Subjects' import { fireEvent, screen, waitFor } from '@testing-library/react' import { renderWithProviders } from '~tests/test-utils' +import Subjects from '~/pages/subjects/Subjects' +import useLoadMore from '~/hooks/use-load-more' -vi.mock('~/hooks/use-categories-names', () => ({ - __esModule: true, - default: () => ({ - loading: false, - response: [ - { _id: '123', name: 'Category 1' }, - { _id: '456', name: 'Category 2' }, - { _id: '789', name: '' } - ] - }) -})) +const resetDataMock = vi.fn() +const loadMoreMock = vi.fn() vi.mock('~/hooks/use-subjects-names', () => ({ __esModule: true, default: () => ({ loading: false, - response: ['Subject 1', 'Subject 2'] + response: [{ name: 'Algebra' }, { name: 'Violin' }], + fetchData: vi.fn() }) })) -const route = '/categories/subjects?categoryId=123' - -const mockState = { - appMain: { userRole: 'tutor' } -} - -describe('Subjects', () => { - beforeEach(async () => { - await waitFor(() => { - renderWithProviders(, { - initialEntries: route, - preloadedState: mockState - }) - }) +vi.mock('~/hooks/use-load-more') + +describe('Subjects page', () => { + beforeAll(() => { + useLoadMore.mockImplementation(() => ({ + loading: false, + data: [ + { + _id: '1', + name: 'Algebra', + totalOffers: { student: 13, teacher: 8 }, + description: '13 offers', + category: { + appearance: { icon: 'Algebra.svg', color: '#FF0000' } + } + }, + { + _id: '2', + name: 'Violin', + totalOffers: { student: 6, teacher: 6 }, + description: '6 offers', + category: { + appearance: { icon: 'Violin.svg', color: '#440fff' } + } + } + ], + resetData: resetDataMock, + loadMore: loadMoreMock, + isExpandable: true + })) }) - afterEach(() => { + afterAll(() => { vi.clearAllMocks() }) - it('should render correctly', () => { - expect( - screen.getByText('subjectsPage.subjects.description') - ).toBeInTheDocument() - expect( - screen.getByText('subjectsPage.subjects.title', { - category: 'Category 1' - }) - ).toBeInTheDocument() - expect(screen.getByLabelText('breadCrumbs.categories')).toBeInTheDocument() - expect( - screen.getByLabelText('subjectsPage.subjects.searchLabel') - ).toBeInTheDocument() - expect( - screen.getByText('subjectsPage.subjects.backToAllCategories') - ).toBeInTheDocument() - expect( - screen.getByText('subjectsPage.subjects.showAllOffers') - ).toBeInTheDocument() + beforeEach(() => { + renderWithProviders() }) - it('should update search value when search input is changed', () => { - const searchLabel = screen.getByLabelText( - 'subjectsPage.subjects.searchLabel' - ) - - fireEvent.change(searchLabel, { target: { value: 'Subject' } }) - - const subject = screen.getByDisplayValue('Subject') + it('should render title with description', () => { + const title = screen.getByText(/subjectsPage.subjects.title/) + const description = screen.getByText(/subjectsPage.subjects.description/) - expect(subject).toBeInTheDocument() + expect(title).toBeInTheDocument() + expect(description).toBeInTheDocument() }) - it('should change autocomplete', () => { - const autocomplete = screen.getByLabelText('breadCrumbs.categories') - - expect(autocomplete).toBeInTheDocument() + it('should change autocomplete and fetch subjects', () => { + const autocomplete = screen.getByLabelText( + 'subjectsPage.subjects.searchLabel' + ) fireEvent.click(autocomplete) - fireEvent.change(autocomplete, { target: { value: 'Category 2' } }) + fireEvent.change(autocomplete, { target: { value: 'Violin' } }) fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) fireEvent.keyDown(autocomplete, { key: 'Enter' }) - expect(autocomplete.value).toBe('Category 2') + expect(autocomplete.value).toBe('Violin') + + const subjectName = screen.getByText(/Violin/) + + expect(subjectName).toBeInTheDocument() + }) +}) + +describe('Subjects page with empty data', () => { + beforeAll(() => { + useLoadMore.mockImplementation(() => ({ + loading: false, + data: [], + resetData: resetDataMock, + loadMore: loadMoreMock, + isExpandable: true + })) }) - it('should clear autocomplete', () => { - const autocomplete = screen.getByLabelText('breadCrumbs.categories') + afterAll(() => { + vi.clearAllMocks() + }) - fireEvent.click(autocomplete) - fireEvent.change(autocomplete, { target: { value: '' } }) - fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) - fireEvent.keyDown(autocomplete, { key: 'Enter' }) + beforeEach(() => { + renderWithProviders() + }) - expect(autocomplete.value).toBe('') + it('should render not found results when no subjects are found', () => { + const newNotFound = screen.getByText('errorMessages.resultsNotFound') + expect(newNotFound).toBeInTheDocument() }) it('should render offer count descriptions for subjects', async () => {