test: Add dependencies and more tests

package.json

@@ -45,9 +45,9 @@
     "zustand": "^4.4.4"
   },
   "devDependencies": {
-    "@faker-js/faker": "^8.2.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.2",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/lodash": "^4.14.201",
     "@types/node": "^20.8.9",
@@ -62,7 +62,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "husky": "^9.0.6",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.0",
     "prettier": "^3.2.5",
     "react-test-renderer": "^18.2.0",
     "ts-node": "^10.9.1",

src/components/Base/Input/PasswordInput.component.test.tsx

@@ -0,0 +1,18 @@
+import {fireEvent, render, screen} from '@testing-library/react';
+import {describe, expect, it} from 'vitest';
+
+import {PasswordInput} from './PasswordInput.component';
+
+describe('PasswordInput', () => {
+  it('toggles password visibility when the toggle button is clicked', () => {
+    render(<PasswordInput />);
+    const toggleButton = screen.getByLabelText('toggle password visibility');
+    const passwordInput = screen.getByPlaceholderText('Enter password');
+
+    fireEvent.click(toggleButton);
+    expect(passwordInput).toHaveAttribute('type', 'text');
+
+    fireEvent.click(toggleButton);
+    expect(passwordInput).toHaveAttribute('type', 'password');
+  });
+});