diff --git a/packages/react/src/components/TextInput/__tests__/ControlledPasswordInput-test.js b/packages/react/src/components/TextInput/__tests__/ControlledPasswordInput-test.js new file mode 100644 index 000000000000..261495c7cf80 --- /dev/null +++ b/packages/react/src/components/TextInput/__tests__/ControlledPasswordInput-test.js @@ -0,0 +1,258 @@ +import { fireEvent, render, screen } from '@testing-library/react'; + +import ControlledPasswordInput from '../ControlledPasswordInput'; +import React from 'react'; + +describe('ControlledPasswordInput Component', () => { + beforeEach(() => { + // Mock console.warn before each test + jest.spyOn(console, 'warn').mockImplementation(() => {}); + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('renders the component properly', () => { + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + expect(input).toBeInTheDocument(); + }); + + it('renders the component with initial type as password', () => { + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + expect(input).toBeInTheDocument(); + expect(input).toHaveAttribute('type', 'password'); + }); + + it('allows user to enter text into the input field', () => { + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + fireEvent.change(input, { target: { value: 'mypassword' } }); + + expect(input).toHaveValue('mypassword'); + }); + + it('calls onChange handler when value changes', () => { + const handleChange = jest.fn(); + + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + fireEvent.change(input, { target: { value: 'newpassword' } }); + + expect(handleChange).toHaveBeenCalledTimes(1); + }); + + it('calls onBlur handler when input loses focus', () => { + const handleBlur = jest.fn(); + + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + input.focus(); + input.blur(); + + expect(handleBlur).toHaveBeenCalledTimes(1); + }); + + it('has a button with accessible role and label', () => { + render( + + ); + + const toggleButton = screen.getByRole('button', { name: /show password/i }); + expect(toggleButton).toBeInTheDocument(); + expect(toggleButton).toHaveAccessibleName('Show password'); + }); + + it('renders controlled input with value from props', () => { + const { rerender } = render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + expect(input).toHaveValue('initialValue'); + + rerender( + + ); + + expect(input).toHaveValue('newValue'); + }); + + it('does not toggle visibility when disabled', () => { + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + const toggleButton = screen.getByRole('button', { name: /show password/i }); + + fireEvent.click(toggleButton); + + expect(input).toHaveAttribute('type', 'password'); + expect(toggleButton).toHaveTextContent('Show password'); + }); + + it('handles input without value prop (uncontrolled)', () => { + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + fireEvent.change(input, { target: { value: 'uncontrolledValue' } }); + + expect(input).toHaveValue('uncontrolledValue'); + }); + + it('associates the label with the input field', () => { + render( + + ); + + const label = screen.getByText('Password'); + const input = screen.getByPlaceholderText('Enter password'); + + expect(label).toHaveAttribute('for', 'password-input'); + expect(input).toHaveAttribute('id', 'password-input'); + }); + + it('calls onFocus handler when input gains focus', () => { + const handleFocus = jest.fn(); + + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + input.focus(); + + expect(handleFocus).toHaveBeenCalledTimes(1); + }); + + it('renders correctly without show/hide password labels', () => { + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + expect(input).toBeInTheDocument(); + + const toggleButton = screen.getByRole('button'); + expect(toggleButton).toBeInTheDocument(); + }); + + it('does not call onChange when input is disabled', () => { + const handleChange = jest.fn(); + + render( + + ); + + const input = screen.getByPlaceholderText('Enter password'); + fireEvent.change(input, { target: { value: 'newpassword' } }); + + expect(handleChange).not.toHaveBeenCalled(); + }); +});