Fixed translation of proficiency / preparation levels #1964 (#1975)

* Fixed translation of preparation levels #1964

* Added spec for CheckboxList & SpecializationBlock components

* Move labels to constants

* Refactoring

src/components/checkbox-list/CheckboxList.tsx

@@ -15,6 +15,7 @@ interface CheckboxListProps<T> extends Pick<TypographyProps, 'variant'> {
   error?: string
   fillRange?: boolean
   singleSelect?: boolean
+  labels?: ReadonlyMap<T, string>
   onChange: (checkbox: T[]) => void
 }
 
@@ -26,6 +27,7 @@ const CheckboxList = <T extends string>({
   fillRange,
   singleSelect = false,
   variant,
+  labels,
   onChange
 }: CheckboxListProps<T>) => {
   const { t } = useTranslation()
@@ -52,7 +54,11 @@ const CheckboxList = <T extends string>({
         />
       }
       key={checkbox}
-      label={<Typography variant={variant}>{t(checkbox)}</Typography>}
+      label={
+        <Typography variant={variant}>
+          {labels?.has(checkbox) ? t(labels.get(checkbox)!) : t(checkbox)}
+        </Typography>
+      }
       onChange={() => handleCheckbox(checkbox)}
     />
   ))

src/constants/labels.ts

@@ -0,0 +1,11 @@
+import { ProficiencyLevelEnum } from '~/types'
+
+export const proficiencyLevelLabels: ReadonlyMap<ProficiencyLevelEnum, string> =
+  new Map([
+    [ProficiencyLevelEnum.Beginner, 'common.levels.beginner'],
+    [ProficiencyLevelEnum.Intermediate, 'common.levels.intermediate'],
+    [ProficiencyLevelEnum.Advanced, 'common.levels.advanced'],
+    [ProficiencyLevelEnum.TestPreparation, 'common.levels.testPreparation'],
+    [ProficiencyLevelEnum.Professional, 'common.levels.professional'],
+    [ProficiencyLevelEnum.Specialized, 'common.levels.specialized']
+  ])

src/containers/offer-page/specialization-block/SpecializationBlock.tsx

@@ -17,8 +17,11 @@ import {
   ProficiencyLevelEnum,
   UserRoleEnum
 } from '~/types'
+import { proficiencyLevelLabels } from '~/constants/labels'
 import { styles } from '~/containers/offer-page/OfferPage.styles'
 
+const levelOptions = Object.values(ProficiencyLevelEnum)
+
 const SpecializationBlock = <T extends CreateOrUpdateOfferData>({
   data,
   errors,
@@ -45,7 +48,7 @@ const SpecializationBlock = <T extends CreateOrUpdateOfferData>({
   const handleCheckboxesChange = (value: ProficiencyLevelEnum[]) => {
     handleNonInputValueChange('proficiencyLevel', value)
   }
-  const levelOptions = Object.values(ProficiencyLevelEnum)
+
   const subjectError = data.category && errors.subject
 
   const checkboxListProps =
@@ -104,6 +107,7 @@ const SpecializationBlock = <T extends CreateOrUpdateOfferData>({
             error={t(errors.proficiencyLevel)}
             {...checkboxListProps}
             items={levelOptions}
+            labels={proficiencyLevelLabels}
             onChange={handleCheckboxesChange}
             value={data.proficiencyLevel}
           />

tests/unit/components/checkbox-list/CheckboxList.spec.jsx

@@ -1,11 +1,16 @@
-import { render , fireEvent, screen } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import { vi } from 'vitest'
 import CheckboxList from '~/components/checkbox-list/CheckboxList'
 
 const mockedItemChanged = 'Beginner'
 
-const mockedItems =  ['Beginner', 'Intermediate', 'Advanced']
+const mockedItems = ['Beginner', 'Intermediate', 'Advanced']
 const mockedValue = ['Advanced']
+const mockedLabels = new Map([
+  ['Beginner', 'Початковий'],
+  ['Intermediate', 'Середній'],
+  ['Advanced', 'Високий']
+])
 
 const mockedGetCheckbox = vi.fn()
 
@@ -15,24 +20,50 @@ describe('CheckboxList component', () => {
   it('should get checked state of checkbox on click', () => {
     render(
       <CheckboxList
-        items={ mockedItems } 
-        onChange={ mockedGetCheckbox }
+        items={mockedItems}
+        onChange={mockedGetCheckbox}
         title='Levels'
-        value={ mockedValue }
-      />)
-
+        value={mockedValue}
+      />
+    )
+
     const checkbox = screen.getByLabelText('Beginner')
     expect(checkbox.checked).toBe(false)
-    
+
     fireEvent.click(checkbox)
 
-    expect(mockedGetCheckbox).toHaveBeenCalledWith([...mockedValue, mockedItemChanged ])
+    expect(mockedGetCheckbox).toHaveBeenCalledWith([
+      ...mockedValue,
+      mockedItemChanged
+    ])
   })
+
   it('should not render title element if no title in props was inserted', () => {
-    render(<CheckboxList items={ mockedItems } onChange={ mockedGetCheckbox } value={ mockedValue } />)
-
+    render(
+      <CheckboxList
+        items={mockedItems}
+        onChange={mockedGetCheckbox}
+        value={mockedValue}
+      />
+    )
+
     const title = screen.queryByLabelText(titleId)
 
     expect(title).toBeNull()
   })
+
+  it('should render checkbox labels correctly based on provided labels map and translation function', () => {
+    render(
+      <CheckboxList
+        items={mockedItems}
+        labels={mockedLabels}
+        onChange={mockedGetCheckbox}
+      />
+    )
+
+    mockedItems.forEach((item) => {
+      const label = mockedLabels.get(item) || item
+      expect(screen.getByText(label)).toBeInTheDocument()
+    })
+  })
 })