From 978faf689d934b2a734d1157dcc7b27c32e65616 Mon Sep 17 00:00:00 2001
From: Emil <32976134+emil-ep@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:35:31 +0530
Subject: [PATCH] test: increase coverage for ControlledPasswordInput (#17872)

* feat(ControlledPasswordInput): increase unit test coverage

* feat(controlledPasswordInput): moved the testfile to __tests__ folder

---------

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
---
 .../__tests__/ControlledPasswordInput-test.js | 258 ++++++++++++++++++
 1 file changed, 258 insertions(+)
 create mode 100644 packages/react/src/components/TextInput/__tests__/ControlledPasswordInput-test.js

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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+      />
+    );
+
+    const input = screen.getByPlaceholderText('Enter password');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('renders the component with initial type as password', () => {
+    render(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+      />
+    );
+
+    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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+      />
+    );
+
+    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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+        onChange={handleChange}
+      />
+    );
+
+    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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+        onBlur={handleBlur}
+      />
+    );
+
+    const input = screen.getByPlaceholderText('Enter password');
+    input.focus();
+    input.blur();
+
+    expect(handleBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('has a button with accessible role and label', () => {
+    render(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+      />
+    );
+
+    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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+        value="initialValue"
+      />
+    );
+
+    const input = screen.getByPlaceholderText('Enter password');
+    expect(input).toHaveValue('initialValue');
+
+    rerender(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+        value="newValue"
+      />
+    );
+
+    expect(input).toHaveValue('newValue');
+  });
+
+  it('does not toggle visibility when disabled', () => {
+    render(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+        disabled
+      />
+    );
+
+    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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+      />
+    );
+
+    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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+      />
+    );
+
+    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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+        onFocus={handleFocus}
+      />
+    );
+
+    const input = screen.getByPlaceholderText('Enter password');
+    input.focus();
+
+    expect(handleFocus).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders correctly without show/hide password labels', () => {
+    render(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+      />
+    );
+
+    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(
+      <ControlledPasswordInput
+        id="password-input"
+        labelText="Password"
+        placeholder="Enter password"
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
+        disabled
+        onChange={handleChange}
+      />
+    );
+
+    const input = screen.getByPlaceholderText('Enter password');
+    fireEvent.change(input, { target: { value: 'newpassword' } });
+
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+});