frontend: add component tests for the alert component

Author: ffreddow

frontend/src/components/__tests__/alert.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/preact';
+import { fireEvent } from '@testing-library/preact';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Helper to flush timers when using setTimeout
+const advanceTimers = async (ms: number) => {
+  await vi.advanceTimersByTimeAsync(ms);
+};
+
+describe('Alert component & showAlert', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    window.scrollTo = vi.fn();
+  });
+
+  it('renders an alert with heading and text', async () => {
+    const real = await vi.importActual<typeof import('../Alert')>('../Alert');
+    real.showAlert('Some text', 'danger', 'abc', 'Heading Text');
+    render(<real.ErrorAlert />);
+    expect(screen.getByText('Some text')).toBeTruthy();
+    expect(screen.getByTestId('alert-heading')).toHaveTextContent('Heading Text');
+  });
+
+  it('suppresses alert containing Failed to fetch', async () => {
+    const real = await vi.importActual<typeof import('../Alert')>('../Alert');
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    real.showAlert('Failed to fetch resource', 'danger');
+    render(<real.ErrorAlert />);
+    expect(screen.queryByText('Failed to fetch resource')).toBeNull();
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('auto dismisses alert after timeout', async () => {
+    const real = await vi.importActual<typeof import('../Alert')>('../Alert');
+    real.showAlert('Autoclose', 'success', 'auto', 'Auto Heading', 2000);
+    const { rerender } = render(<real.ErrorAlert />);
+    expect(screen.getByText('Autoclose')).toBeTruthy();
+    await advanceTimers(2000);
+    rerender(<real.ErrorAlert />);
+    expect(screen.queryByText('Autoclose')).toBeNull();
+  });
+
+  it('replaces alert with same id and clears previous timeout', async () => {
+    const real = await vi.importActual<typeof import('../Alert')>('../Alert');
+    const clearSpy = vi.spyOn(window, 'clearTimeout');
+    real.showAlert('First', 'warning', 'same', 'First Heading', 5000);
+    const utils = render(<real.ErrorAlert />);
+    expect(screen.getByText('First')).toBeTruthy();
+    real.showAlert('Second', 'warning', 'same', 'Second Heading');
+    utils.rerender(<real.ErrorAlert />);
+    expect(screen.getByText('Second')).toBeTruthy();
+    expect(screen.queryByText('First')).toBeNull();
+    expect(clearSpy).toHaveBeenCalled();
+    clearSpy.mockRestore();
+  });
+
+  it('manual dismiss via close button triggers onClose and removes alert', async () => {
+    const real = await vi.importActual<typeof import('../Alert')>('../Alert');
+    real.showAlert('Dismiss me', 'danger', 'dismiss', 'Dismiss Heading');
+    const { rerender } = render(<real.ErrorAlert />);
+    expect(screen.getByText('Dismiss me')).toBeTruthy();
+    const closeButtons = screen.getAllByTestId('close-alert');
+    fireEvent.click(closeButtons[closeButtons.length - 1]);
+    rerender(<real.ErrorAlert />);
+    expect(screen.queryByText('Dismiss me')).toBeNull();
+  });
+});

frontend/src/test-setup.ts

@@ -61,6 +61,8 @@ interface TabProps extends MockComponentProps {
 
 interface AlertProps extends MockComponentProps {
   variant?: string;
+  dismissible?: boolean;
+  onClose?: () => void;
 }
 
 interface ButtonProps extends MockComponentProps {
@@ -207,7 +209,16 @@ vi.mock('react-bootstrap', () => {
     h('div', { ...props, className: 'tab-pane' }, children);
 
   const Alert = ({ children, variant, ...props }: AlertProps) =>
-    h('div', { ...props, className: `alert alert-${variant || 'primary'}` }, children);
+    h('div', { ...props, className: `alert alert-${variant || 'primary'}` }, [
+      children,
+      // Provide a close button when dismissible to simulate react-bootstrap behaviour
+      props.dismissible && h('button', { 'data-testid': 'close-alert', onClick: props.onClose }, '×')
+    ]);
+
+  // Support <Alert.Heading> used by the component under test
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (Alert as any).Heading = ({ children, ...props }: MockComponentProps) =>
+    h('h4', { ...props, 'data-testid': 'alert-heading' }, children);
 
   const Spinner = ({ ...props }: MockComponentProps) =>
     h('div', { ...props, className: 'spinner' }, 'Loading...');
@@ -242,6 +253,18 @@ vi.mock('react-bootstrap', () => {
   };
 });
 
+// Separate mock for direct 'react-bootstrap/Alert' import used in Alert component
+vi.mock('react-bootstrap/Alert', () => {
+  const { h } = require('preact');
+  const Alert = ({ children, variant, dismissible, onClose }: { children?: any; variant?: string; dismissible?: boolean; onClose?: () => void; }) =>
+    h('div', { className: `alert alert-${variant || 'primary'}` }, [
+      children,
+      dismissible && h('button', { 'data-testid': 'close-alert', onClick: onClose }, '×')
+    ]);
+  (Alert as any).Heading = ({ children }: { children?: any }) => h('h4', { 'data-testid': 'alert-heading' }, children);
+  return { default: Alert };
+});
+
 // Mock react-feather icons
 vi.mock('react-feather', () => ({
   ChevronDown: () => h('svg', { 'data-testid': 'chevron-down' }),
@@ -317,11 +340,6 @@ vi.mock('./utils', () => ({
   isDebugMode: { value: false },
 }));
 
-// Mock Alert component
-vi.mock('./components/Alert', () => ({
-  showAlert: vi.fn(),
-}));
-
 // Mock preact-iso
 vi.mock('preact-iso', () => ({
   useLocation: () => ({
@@ -417,4 +435,10 @@ beforeAll(() => {
     },
     writable: true,
   });
+
+  window.scrollTo = vi.fn();
 });
+
+vi.mock('./components/Alert', () => ({
+  showAlert: vi.fn(),
+}));