From d2b6da297fc2f93519340b5f0b58bb4d540b1125 Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 11:20:24 +0200
Subject: [PATCH] test(09-05): add tooltip hover behavior tests and
 helpTextPrefix rendering tests

- FieldRenderer: 4 new tests for hover show/hide, click-pin, click-unpin
- TextFieldMD3: 3 new tests for helpTextPrefix with helpText, without, and prefix-only
- Import fireEvent from @testing-library/react added to FieldRenderer.test.tsx
---
 src/components/ui/FieldRenderer.test.tsx | 56 +++++++++++++++++++++++-
 src/components/ui/TextFieldMD3.test.tsx  | 38 ++++++++++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/FieldRenderer.test.tsx b/src/components/ui/FieldRenderer.test.tsx
index be5d6b2..6c8c232 100644
--- a/src/components/ui/FieldRenderer.test.tsx
+++ b/src/components/ui/FieldRenderer.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { FieldRenderer } from './FieldRenderer';
 import type { UseFormRegister } from 'react-hook-form';
 
@@ -31,6 +31,60 @@ const selectFieldWithTooltip = {
   ],
 };
 
+describe('FieldRenderer - tooltip hover behavior', () => {
+  it('hovering tooltip button shows tooltip text', () => {
+    render(
+      <FieldRenderer
+        field={textFieldWithTooltip}
+        register={makeRegister()}
+      />
+    );
+    const tooltipBtn = screen.getByRole('button', { name: /more info about bucket name/i });
+    fireEvent.mouseEnter(tooltipBtn);
+    expect(screen.getByText('The name of your storage bucket')).toBeDefined();
+  });
+
+  it('mouse-leaving tooltip button hides tooltip text', () => {
+    render(
+      <FieldRenderer
+        field={textFieldWithTooltip}
+        register={makeRegister()}
+      />
+    );
+    const tooltipBtn = screen.getByRole('button', { name: /more info about bucket name/i });
+    fireEvent.mouseEnter(tooltipBtn);
+    expect(screen.getByText('The name of your storage bucket')).toBeDefined();
+    fireEvent.mouseLeave(tooltipBtn);
+    expect(screen.queryByText('The name of your storage bucket')).toBeNull();
+  });
+
+  it('clicking tooltip button pins it open through mouseLeave', () => {
+    render(
+      <FieldRenderer
+        field={textFieldWithTooltip}
+        register={makeRegister()}
+      />
+    );
+    const tooltipBtn = screen.getByRole('button', { name: /more info about bucket name/i });
+    fireEvent.click(tooltipBtn);
+    fireEvent.mouseLeave(tooltipBtn);
+    expect(screen.getByText('The name of your storage bucket')).toBeDefined();
+  });
+
+  it('clicking pinned tooltip button again dismisses it', () => {
+    render(
+      <FieldRenderer
+        field={textFieldWithTooltip}
+        register={makeRegister()}
+      />
+    );
+    const tooltipBtn = screen.getByRole('button', { name: /more info about bucket name/i });
+    fireEvent.click(tooltipBtn);
+    fireEvent.click(tooltipBtn);
+    expect(screen.queryByText('The name of your storage bucket')).toBeNull();
+  });
+});
+
 describe('FieldRenderer - DEBT-01 aria-label consistency', () => {
   it('Test 1: text-branch tooltip button has aria-label="More info about {field.label}"', () => {
     render(
diff --git a/src/components/ui/TextFieldMD3.test.tsx b/src/components/ui/TextFieldMD3.test.tsx
index f13c291..c0f8ab4 100644
--- a/src/components/ui/TextFieldMD3.test.tsx
+++ b/src/components/ui/TextFieldMD3.test.tsx
@@ -134,4 +134,42 @@ describe('TextFieldMD3', () => {
     const input = screen.getByLabelText('Field');
     expect(input.getAttribute('placeholder')).toBe(' ');
   });
+
+  it('Test 9: renders helpTextPrefix inline with helpText', () => {
+    render(
+      <TextFieldMD3
+        id="field"
+        label="Field"
+        registration={makeRegistration()}
+        helpText="Some help"
+        helpTextPrefix={<span data-testid="prefix">icon</span>}
+      />
+    );
+    expect(screen.getByTestId('prefix')).toBeDefined();
+    expect(screen.getByText('Some help')).toBeDefined();
+  });
+
+  it('Test 10: renders helpText without wrapper issues when helpTextPrefix is undefined', () => {
+    render(
+      <TextFieldMD3
+        id="field"
+        label="Field"
+        registration={makeRegistration()}
+        helpText="Some help"
+      />
+    );
+    expect(screen.getByText('Some help')).toBeDefined();
+  });
+
+  it('Test 11: renders helpTextPrefix alone when helpText is absent (tooltip-only field)', () => {
+    render(
+      <TextFieldMD3
+        id="field"
+        label="Field"
+        registration={makeRegistration()}
+        helpTextPrefix={<span data-testid="prefix-only">icon</span>}
+      />
+    );
+    expect(screen.getByTestId('prefix-only')).toBeDefined();
+  });
 });