From b632c050077978b21972f3504808e7961e6b0d1a Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Thu, 13 Feb 2025 08:27:22 +0000
Subject: [PATCH] chore(react): fix text field prefix, suffix visible condition

---
 .../react/src/components/TextField/index.tsx  |  6 +-
 .../components/TextField/text-field.test.tsx  | 72 +++++++++++++++++++
 2 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/src/components/TextField/text-field.test.tsx

diff --git a/packages/react/src/components/TextField/index.tsx b/packages/react/src/components/TextField/index.tsx
index 7fb612795..a6d084a7e 100644
--- a/packages/react/src/components/TextField/index.tsx
+++ b/packages/react/src/components/TextField/index.tsx
@@ -108,9 +108,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           data-invalid={invalid === true}
           ref={containerRef}
         >
-          {prefix !== null && (
-            <div className="charcoal-text-field-prefix">{prefix}</div>
-          )}
+          {prefix && <div className="charcoal-text-field-prefix">{prefix}</div>}
           <input
             className="charcoal-text-field-input"
             aria-describedby={showAssistiveText ? describedbyId : undefined}
@@ -126,7 +124,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             value={value}
             {...props}
           />
-          {(suffix !== null || showCount) && (
+          {(suffix || showCount) && (
             <div className="charcoal-text-field-suffix">
               {suffix}
               {showCount && (
diff --git a/packages/react/src/components/TextField/text-field.test.tsx b/packages/react/src/components/TextField/text-field.test.tsx
new file mode 100644
index 000000000..dea0278b3
--- /dev/null
+++ b/packages/react/src/components/TextField/text-field.test.tsx
@@ -0,0 +1,72 @@
+import { render } from '@testing-library/react'
+import TextField from '.'
+
+import '@testing-library/jest-dom'
+
+describe('TextField component', () => {
+  it('should not render prefix and suffix when not provided', () => {
+    const { container } = render(<TextField />)
+
+    // prefix and suffix elements should not be rendered
+    const prefixElement = container.querySelector('.charcoal-text-field-prefix')
+    const suffixElement = container.querySelector('.charcoal-text-field-suffix')
+
+    expect(prefixElement).toBeNull()
+    expect(suffixElement).toBeNull()
+  })
+
+  test.each([
+    [null, 'null'],
+    [undefined, 'undefined'],
+    ['', 'empty string'],
+    [false, 'boolean false'],
+    [0, 'zero'],
+  ])(
+    'should not render prefix when value is falsy (%s: %s)',
+    (prefixValue, _desc) => {
+      const { container } = render(<TextField prefix={prefixValue} />)
+      const prefixElement = container.querySelector('.charcoal-text-prefix')
+      expect(prefixElement).toBeNull()
+    }
+  )
+
+  test.each([
+    [null, 'null'],
+    [undefined, 'undefined'],
+    ['', 'empty string'],
+    [false, 'boolean false'],
+    [0, 'zero'],
+  ])(
+    'should not render suffix when value is falsy (%s: %s) and showCount is false',
+    (suffixValue, _desc) => {
+      const { container } = render(
+        <TextField suffix={suffixValue} showCount={false} />
+      )
+      const suffixElement = container.querySelector(
+        '.charcoal-text-field-suffix'
+      )
+      expect(suffixElement).toBeNull()
+    }
+  )
+
+  it('should render prefix and suffix when provided as truthy values', () => {
+    const prefixContent = 'Test Prefix'
+    const suffixContent = 'Test Suffix'
+    const { container, getByText } = render(
+      <TextField
+        prefix={<span>{prefixContent}</span>}
+        suffix={<span>{suffixContent}</span>}
+      />
+    )
+
+    const prefixElement = container.querySelector('.charcoal-text-field-prefix')
+    const suffixElement = container.querySelector('.charcoal-text-field-suffix')
+
+    expect(prefixElement).not.toBeNull()
+    expect(suffixElement).not.toBeNull()
+
+    // Verify text content
+    expect(getByText(prefixContent)).toBeInTheDocument()
+    expect(getByText(suffixContent)).toBeInTheDocument()
+  })
+})