Corrected pluralisation of offer counts

src/components/popular-categories/PopularCategories.tsx

@@ -61,9 +61,9 @@ const PopularCategories: FC<PopularCategoriesProps> = ({
     () =>
       response.items.map((item) => (
         <CardWithLink
-          description={`${item.totalOffers[oppositeRole]} ${t(
-            'common.offers'
-          )}`}
+          description={t('common.offerCount', {
+            count: item.totalOffers[oppositeRole]
+          })}
           icon={item.appearance.icon}
           iconColor={item.appearance.color}
           key={item._id}

src/constants/translations/en/categories-page.json

@@ -5,7 +5,8 @@
   "showAllOffers": "Show all offers",
   "searchLabel": "What would you like to learn?",
   "viewMore": "View more",
-  "offers": "offers",
+  "offerCount_one": "{{count}} offer",
+  "offerCount_other": "{{count}} offers",
   "newSubject": {
     "successMessage": "Request send successfully",
     "title": "Request a new study",

src/constants/translations/en/common.json

@@ -23,6 +23,8 @@
   "uahSlashHour": "UAH/hour",
   "beginner": "Beginner",
   "offers": "offers",
+  "offerCount_one": "{{count}} offer",
+  "offerCount_other": "{{count}} offers",
   "goToCategories": "Go to categories",
   "popularCategories": "Popular Categories",
   "aboutOffer": "About Offer",

src/constants/translations/uk/categories-page.json

@@ -5,7 +5,10 @@
   "showAllOffers": "Показати всі пропозиції",
   "searchLabel": "Чого б ви хотіли навчитися?",
   "viewMore": "Переглянути більше",
-  "offers": "пропозиції",
+  "offerCount_one": "{{count}} пропозиція",
+  "offerCount_few": "{{count}} пропозиції",
+  "offerCount_many": "{{count}} пропозицій",
+  "offerCount_other": "{{count}} пропозицій",
   "newSubject": {
     "successMessage": "Запит успішно відправлено",
     "title": "Запросити новий предмет",
@@ -14,5 +17,5 @@
     "category": "Додати предмет до існуючої категорії або створити нову.",
     "info": "Надати короткий опис того, чому ви вважаєте, що цей предмет або категорію слід додати.",
     "labels": { "subject": "Новий предмет" }
-    }
+  }
 }

src/constants/translations/uk/common.json

@@ -23,6 +23,10 @@
   "uahSlashHour": "ГРН/годину",
   "beginner": "Початковий",
   "offers": "Пропозиції",
+  "offerCount_one": "{{count}} пропозиція",
+  "offerCount_few": "{{count}} пропозиції",
+  "offerCount_many": "{{count}} пропозицій",
+  "offerCount_other": "{{count}} пропозицій",
   "goToCategories": "Перейти до категорій",
   "popularCategories": "Популярні категорії",
   "aboutOffer": "Про пропозицію",

src/pages/categories/Categories.tsx

@@ -75,9 +75,9 @@ const Categories = () => {
       categories.map((item) => {
         return (
           <CardWithLink
-            description={`${item.totalOffers[oppositeRole]} ${t(
-              'categoriesPage.offers'
-            )}`}
+            description={t('categoriesPage.offerCount', {
+              count: item.totalOffers[oppositeRole]
+            })}
             icon={item.appearance.icon}
             iconColor={item.appearance.color}
             key={item._id}

src/pages/subjects/Subjects.tsx

@@ -101,9 +101,9 @@ const Subjects = () => {
       subjects.map((item: SubjectInterface) => {
         return (
           <CardWithLink
-            description={`${item.totalOffers[oppositeRole]} ${t(
-              'categoriesPage.offers'
-            )}`}
+            description={t('categoriesPage.offerCount', {
+              count: item.totalOffers[oppositeRole]
+            })}
             icon={item.category.appearance.icon}
             iconColor={item.category.appearance.color}
             key={item._id}

tests/unit/components/popular-categories/PopularCategories.spec.jsx

@@ -51,4 +51,11 @@ describe('PopularCategories', () => {
 
     expect(card).toBeInTheDocument()
   })
+
+  it('should render offer count descriptions for popularCategories', async () => {
+    await waitFor(() => {
+      const noOffers = screen.queryByText(/offers/)
+      expect(noOffers).not.toBeInTheDocument()
+    })
+  })
 })

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()
+    })
+  })
 })

tests/unit/pages/subjects/Subjects.spec.jsx

@@ -1,102 +1,115 @@
 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(<Subjects />, {
-        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(<Subjects />)
   })
 
-  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()
   })
+})
 
-  it('should clear autocomplete', () => {
-    const autocomplete = screen.getByLabelText('breadCrumbs.categories')
+describe('Subjects page with empty data', () => {
+  beforeAll(() => {
+    useLoadMore.mockImplementation(() => ({
+      loading: false,
+      data: [],
+      resetData: resetDataMock,
+      loadMore: loadMoreMock,
+      isExpandable: true
+    }))
+  })
 
-    fireEvent.click(autocomplete)
-    fireEvent.change(autocomplete, { target: { value: '' } })
-    fireEvent.keyDown(autocomplete, { key: 'ArrowDown' })
-    fireEvent.keyDown(autocomplete, { key: 'Enter' })
+  afterAll(() => {
+    vi.clearAllMocks()
+  })
+
+  beforeEach(() => {
+    renderWithProviders(<Subjects />)
+  })
 
-    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 () => {
+    await waitFor(() => {
+      const noOffers = screen.queryByText(/offers/)
+      expect(noOffers).not.toBeInTheDocument()
+    })
   })
 })