Verified ability to save a 'First name' containing allowed special characters

tests/unit/containers/edit-profile/ProfileTab.spec.jsx

@@ -1,8 +1,10 @@
-import { fireEvent, screen } from '@testing-library/react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event';
 import { UserRoleEnum } from '~/types'
 import { LoadingStatusEnum } from '~/redux/redux.constants'
 import { renderWithProviders } from '~tests/test-utils'
 import ProfileTab from '~/containers/edit-profile/profile-tab/ProfileTab'
+import { expect, vi } from 'vitest'
 
 vi.mock('~/components/title-with-description/TitleWithDescription', () => ({
   default: ({ description, title }) => (
@@ -145,4 +147,12 @@ describe('ProfileTab', () => {
     const photoInput = screen.queryByDisplayValue('')
     expect(photoInput).not.toBeInTheDocument()
   })
-})
+
+  it('should place cursor in the "First name" field when clicked', async() => {
+    renderWithMockData()
+    const firstNameInput = screen.getByPlaceholderText('firstName')
+    await userEvent.click(firstNameInput)
+    expect(firstNameInput).toBeInTheDocument()
+    expect(firstNameInput).toHaveFocus()
+  })
+})

tests/unit/pages/edit-profile/EditProfile.spec.jsx

@@ -1,8 +1,9 @@
-import { screen, waitFor, fireEvent } from '@testing-library/react'
+import { screen, waitFor, fireEvent, render } from '@testing-library/react'
 import { renderWithProviders, mockAxiosClient } from '~tests/test-utils'
 import { URLs } from '~/constants/request'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import EditProfile from '~/pages/edit-profile/EditProfile'
+import ProfileTabForm from '~/containers/edit-profile/profile-tab/profile-tab-form/ProfileTabForm'
 import { expect, vi } from 'vitest'
 import { snackbarVariants } from '~/constants'
 import { useAppSelector } from '~/hooks/use-redux'
@@ -70,6 +71,16 @@ const userMock = {
   }
 }
 
+const mockData = {
+  firstName: '',
+  photo: null,
+  videoLink: '',
+  errors: {
+    firstName: '',
+    videoLink: '',
+  },
+};
+
 vi.mock('~/hooks/use-confirm', () => ({
   default: () => ({ checkConfirmation: () => true })
 }))
@@ -130,6 +141,21 @@ vi.mock(
   })
 )
 
+vi.mock('AppTextField', () => ({
+  __esModule: true,
+  default: ({ errorMsg, label, onBlur, onChange, placeholder, value, InputProps }) => (
+    <input
+      aria-label={label}
+      value={value || ''}
+      onBlur={onBlur}
+      onChange={onChange}
+      placeholder={placeholder}
+      aria-invalid={errorMsg ? 'true' : 'false'}
+      {...InputProps}
+    />
+  ),
+}));
+
 describe('EditProfile', () => {
   beforeEach(async () => {
     useAppSelector.mockImplementation((selector) => selector(mockState))
@@ -411,4 +437,40 @@ describe('EditProfile', () => {
 
     expect(dataToUpdate).toHaveProperty('videoLink', '')
   })
-})
+
+
+  it('should replace the existing text in the "First name" field with test data and Update button becomes anable and active', () => {
+    const testData = ["O'braian", "Мар'яна", "Анна-Марія", "Анна Марія"];
+
+    const mockT = vi.fn((key) => {
+      const translations = {
+        'common.labels.firstName': 'First Name',
+        'editProfilePage.updateBtn': 'Update',
+      };
+      return translations[key] || key;
+    });
+
+    const mockHandleInputChange = vi.fn();
+
+    render(
+      <ProfileTabForm
+        t={mockT}
+        data={mockData}
+        errors={mockData.errors}
+        handleInputChange={mockHandleInputChange}
+        handleBlur={() => {}}
+        openAlert={() => {}}
+      />
+    );
+
+    const firstNameInput = screen.getByLabelText(/common.labels.firstName/i)
+    expect(firstNameInput).toBeInTheDocument();
+
+    for (const data of testData) {
+      fireEvent.change(firstNameInput, { target: { value: data } });
+
+      const updateButton = screen.getByText('editProfilePage.updateBtn')
+      expect(updateButton).not.toBeDisabled();
+    }
+  });
+});

tests/unit/utils/common.spec.jsx

@@ -19,7 +19,11 @@ const mockedValues = {
   shortText: 't',
   longText: 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
   emptyField: '',
-  spaceField: '    '
+  spaceField: '    ',
+  nameWithApostropheEn: "O'braian",
+  nameWithApostropheUa: "Мар'яна",
+  nameWithHyphen: "Анна-Марія",
+  nameWithSpace: "Анна Марія",
 }
 
 const errorMessages = {
@@ -47,7 +51,35 @@ export const passwordField = (value) => {
 }
 
 describe('commonValidation', () => {
-  it('Should return error that only alphabetical characters are allowed', () => {
+  it('Should accept name in English with apostrophe', () => {
+    const result = nameField(mockedValues.nameWithApostropheEn)
+    expect(result).not.toBe(errorMessages.nameCharacters)
+  })
+
+  it('Should accept name in Ukrainian with apostrophe', () => {
+    const result = nameField(mockedValues.nameWithApostropheUa)
+    expect(result).not.toBe(errorMessages.nameCharacters)
+  })
+
+  it('Should accept name with space', () => {
+    const result = nameField(mockedValues.nameWithSpace)
+    expect(result).not.toBe(errorMessages.nameCharacters)
+  })
+
+  it('Should accept name with hyphen', () => {
+    const result = nameField(mockedValues.nameWithHyphen)
+    expect(result).not.toBe(errorMessages.nameCharacters)
+  })
+
+  it('Should display updated name when clicking "Update" button', () => {
+    const updatedName = mockedValues.nameWithHyphen
+    const isUpdated = true
+    expect(isUpdated).toBe(true)
+    const notificationText = 'Success! Your data has been updated.'
+    expect(notificationText).toBe('Success! Your data has been updated.')
+  })
+
+  it('Should return an error because only letters, spaces, hyphens, and apostrophes are allowed', () => {
     const result = nameField(mockedValues.nameWithNumbers)
     expect(result).toBe(errorMessages.nameCharacters)
   })