test(components): add unit tests for shared components

Add tests for shared UI components including ARIA accessibility,
user interactions, and prop variations.

- LoadingState: spinner, message, ARIA attributes
- MiniPagination: navigation, disabled states, ARIA
- FlagStatusIndicator: enabled/disabled states
- FlagsmithLink: link rendering, iconOnly mode
- SearchInput: input, clear button, debounce

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: talissoncosta

src/components/shared/__tests__/FlagStatusIndicator.test.tsx

@@ -0,0 +1,95 @@
+
+import { render, screen } from '@testing-library/react';
+import { FlagStatusIndicator } from '../FlagStatusIndicator';
+
+describe('FlagStatusIndicator', () => {
+  it('renders enabled state with green dot', () => {
+    const { container } = render(<FlagStatusIndicator enabled />);
+
+    const dot = container.querySelector('[class*="enabled"]');
+    expect(dot).toBeInTheDocument();
+  });
+
+  it('renders disabled state with gray dot', () => {
+    const { container } = render(<FlagStatusIndicator enabled={false} />);
+
+    const dot = container.querySelector('[class*="disabled"]');
+    expect(dot).toBeInTheDocument();
+  });
+
+  it('does not show label by default', () => {
+    render(<FlagStatusIndicator enabled />);
+
+    expect(screen.queryByText('On')).not.toBeInTheDocument();
+    expect(screen.queryByText('Off')).not.toBeInTheDocument();
+  });
+
+  it('shows "On" label when enabled and showLabel is true', () => {
+    render(<FlagStatusIndicator enabled showLabel />);
+
+    expect(screen.getByText('On')).toBeInTheDocument();
+  });
+
+  it('shows "Off" label when disabled and showLabel is true', () => {
+    render(<FlagStatusIndicator enabled={false} showLabel />);
+
+    expect(screen.getByText('Off')).toBeInTheDocument();
+  });
+
+  it('renders smaller dot when size is small', () => {
+    const { container } = render(
+      <FlagStatusIndicator enabled size="small" />,
+    );
+
+    const dot = container.querySelector('[class*="dot"]');
+    expect(dot).toHaveStyle({ width: '8px', height: '8px' });
+  });
+
+  it('renders medium dot by default', () => {
+    const { container } = render(<FlagStatusIndicator enabled />);
+
+    const dot = container.querySelector('[class*="dot"]');
+    expect(dot).toHaveStyle({ width: '10px', height: '10px' });
+  });
+
+  it('renders tooltip when provided', () => {
+    render(
+      <FlagStatusIndicator
+        enabled
+        tooltip="Development: On • Production: Off"
+      />,
+    );
+
+    // Tooltip wrapper should be present
+    // Note: The actual tooltip text only appears on hover
+    const indicator = screen.getByText('', { selector: '[class*="container"]' });
+    expect(indicator).toBeInTheDocument();
+  });
+
+  it('does not render tooltip wrapper when tooltip is not provided', () => {
+    const { container } = render(<FlagStatusIndicator enabled />);
+
+    // Should not have Tooltip wrapper
+    const muiTooltip = container.querySelector('[class*="MuiTooltip"]');
+    // Without tooltip, there's no tooltip wrapper
+    expect(muiTooltip).toBeNull();
+  });
+
+  it('applies smaller font size for small size with label', () => {
+    render(
+      <FlagStatusIndicator enabled showLabel size="small" />,
+    );
+
+    const label = screen.getByText('On');
+    expect(label).toHaveStyle({ fontSize: '0.75rem' });
+  });
+
+  it('applies medium font size for medium size with label', () => {
+    render(
+      <FlagStatusIndicator enabled showLabel size="medium" />,
+    );
+
+    const label = screen.getByText('On');
+    expect(label).toHaveStyle({ fontSize: '0.875rem' });
+  });
+});

src/components/shared/__tests__/FlagsmithLink.test.tsx

@@ -0,0 +1,96 @@
+
+import { render, screen } from '@testing-library/react';
+import { FlagsmithLink } from '../FlagsmithLink';
+
+describe('FlagsmithLink', () => {
+  const defaultProps = {
+    href: 'https://app.flagsmith.com/project/123',
+  };
+
+  it('renders as a link with children', () => {
+    render(
+      <FlagsmithLink {...defaultProps}>
+        View in Flagsmith
+      </FlagsmithLink>,
+    );
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', defaultProps.href);
+    expect(link).toHaveTextContent('View in Flagsmith');
+  });
+
+  it('opens in new tab with security attributes', () => {
+    render(
+      <FlagsmithLink {...defaultProps}>
+        Link
+      </FlagsmithLink>,
+    );
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('renders with default tooltip', () => {
+    render(
+      <FlagsmithLink {...defaultProps}>
+        Link
+      </FlagsmithLink>,
+    );
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute(
+      'aria-label',
+      'Open in Flagsmith (opens in new tab)',
+    );
+  });
+
+  it('renders with custom tooltip', () => {
+    render(
+      <FlagsmithLink {...defaultProps} tooltip="View Dashboard">
+        Link
+      </FlagsmithLink>,
+    );
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute(
+      'aria-label',
+      'View Dashboard (opens in new tab)',
+    );
+  });
+
+  it('renders icon-only mode as button', () => {
+    render(<FlagsmithLink {...defaultProps} iconOnly />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('href', defaultProps.href);
+    expect(button).toHaveAttribute('aria-label', 'Open in Flagsmith');
+  });
+
+  it('renders icon-only mode with custom tooltip', () => {
+    render(<FlagsmithLink {...defaultProps} iconOnly tooltip="Open Dashboard" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'Open Dashboard');
+  });
+
+  it('renders external link icon', () => {
+    const { container } = render(
+      <FlagsmithLink {...defaultProps}>
+        Link
+      </FlagsmithLink>,
+    );
+
+    // LaunchIcon should be present and hidden from screen readers
+    const icon = container.querySelector('[aria-hidden="true"]');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('renders icon-only with correct security attributes', () => {
+    render(<FlagsmithLink {...defaultProps} iconOnly />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('target', '_blank');
+    expect(button).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+});

src/components/shared/__tests__/LoadingState.test.tsx

@@ -0,0 +1,45 @@
+
+import { render, screen } from '@testing-library/react';
+import { LoadingState } from '../LoadingState';
+
+describe('LoadingState', () => {
+  it('renders with default props', () => {
+    render(<LoadingState />);
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('renders with custom message', () => {
+    render(<LoadingState message="Fetching data..." />);
+
+    expect(screen.getByText('Fetching data...')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveAttribute(
+      'aria-label',
+      'Fetching data...',
+    );
+  });
+
+  it('has correct ARIA attributes', () => {
+    render(<LoadingState message="Loading feature flags..." />);
+
+    const status = screen.getByRole('status');
+    expect(status).toHaveAttribute('aria-label', 'Loading feature flags...');
+  });
+
+  it('hides spinner from screen readers', () => {
+    const { container } = render(<LoadingState />);
+
+    // CircularProgress should have aria-hidden
+    const spinner = container.querySelector('[aria-hidden="true"]');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('renders without message when empty string provided', () => {
+    render(<LoadingState message="" />);
+
+    // The status box should still render but without message text
+    expect(screen.getByRole('status')).toBeInTheDocument();
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+  });
+});

src/components/shared/__tests__/MiniPagination.test.tsx

@@ -0,0 +1,126 @@
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MiniPagination } from '../MiniPagination';
+
+describe('MiniPagination', () => {
+  const defaultProps = {
+    page: 0,
+    totalPages: 3,
+    totalItems: 25,
+    onPrevious: jest.fn(),
+    onNext: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders nothing when totalPages is 1', () => {
+    const { container } = render(
+      <MiniPagination {...defaultProps} totalPages={1} />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders nothing when totalPages is 0', () => {
+    const { container } = render(
+      <MiniPagination {...defaultProps} totalPages={0} totalItems={0} />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders pagination info correctly', () => {
+    render(<MiniPagination {...defaultProps} />);
+
+    expect(screen.getByText('Page 1 of 3 (25 items)')).toBeInTheDocument();
+  });
+
+  it('renders with custom item label', () => {
+    render(<MiniPagination {...defaultProps} itemLabel="flags" />);
+
+    expect(screen.getByText('Page 1 of 3 (25 flags)')).toBeInTheDocument();
+  });
+
+  it('has correct ARIA attributes', () => {
+    render(<MiniPagination {...defaultProps} itemLabel="flags" />);
+
+    const nav = screen.getByRole('navigation');
+    expect(nav).toHaveAttribute('aria-label', 'Pagination for flags');
+  });
+
+  it('disables previous button on first page', () => {
+    render(<MiniPagination {...defaultProps} page={0} />);
+
+    const prevButton = screen.getByRole('button', { name: /previous page/i });
+    expect(prevButton).toBeDisabled();
+  });
+
+  it('enables previous button on subsequent pages', () => {
+    render(<MiniPagination {...defaultProps} page={1} />);
+
+    const prevButton = screen.getByRole('button', { name: /previous page/i });
+    expect(prevButton).not.toBeDisabled();
+  });
+
+  it('disables next button on last page', () => {
+    render(<MiniPagination {...defaultProps} page={2} totalPages={3} />);
+
+    const nextButton = screen.getByRole('button', { name: /next page/i });
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('enables next button on non-last pages', () => {
+    render(<MiniPagination {...defaultProps} page={0} />);
+
+    const nextButton = screen.getByRole('button', { name: /next page/i });
+    expect(nextButton).not.toBeDisabled();
+  });
+
+  it('calls onPrevious when previous button is clicked', () => {
+    const onPrevious = jest.fn();
+    render(<MiniPagination {...defaultProps} page={1} onPrevious={onPrevious} />);
+
+    const prevButton = screen.getByRole('button', { name: /previous page/i });
+    fireEvent.click(prevButton);
+
+    expect(onPrevious).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onNext when next button is clicked', () => {
+    const onNext = jest.fn();
+    render(<MiniPagination {...defaultProps} page={0} onNext={onNext} />);
+
+    const nextButton = screen.getByRole('button', { name: /next page/i });
+    fireEvent.click(nextButton);
+
+    expect(onNext).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onPrevious when disabled', () => {
+    const onPrevious = jest.fn();
+    render(<MiniPagination {...defaultProps} page={0} onPrevious={onPrevious} />);
+
+    const prevButton = screen.getByRole('button', { name: /previous page/i });
+    fireEvent.click(prevButton);
+
+    expect(onPrevious).not.toHaveBeenCalled();
+  });
+
+  it('does not call onNext when disabled', () => {
+    const onNext = jest.fn();
+    render(<MiniPagination {...defaultProps} page={2} totalPages={3} onNext={onNext} />);
+
+    const nextButton = screen.getByRole('button', { name: /next page/i });
+    fireEvent.click(nextButton);
+
+    expect(onNext).not.toHaveBeenCalled();
+  });
+
+  it('displays correct page number (1-indexed)', () => {
+    render(<MiniPagination {...defaultProps} page={2} totalPages={5} />);
+
+    expect(screen.getByText('Page 3 of 5 (25 items)')).toBeInTheDocument();
+  });
+});