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
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
// @vitest-environment jsdom
|
// @vitest-environment jsdom
|
||||||
import { describe, it, expect, vi } from 'vitest';
|
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 { FieldRenderer } from './FieldRenderer';
|
||||||
import type { UseFormRegister } from 'react-hook-form';
|
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', () => {
|
describe('FieldRenderer - DEBT-01 aria-label consistency', () => {
|
||||||
it('Test 1: text-branch tooltip button has aria-label="More info about {field.label}"', () => {
|
it('Test 1: text-branch tooltip button has aria-label="More info about {field.label}"', () => {
|
||||||
render(
|
render(
|
||||||
|
|||||||
@@ -134,4 +134,42 @@ describe('TextFieldMD3', () => {
|
|||||||
const input = screen.getByLabelText('Field');
|
const input = screen.getByLabelText('Field');
|
||||||
expect(input.getAttribute('placeholder')).toBe(' ');
|
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();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user