frontend: add tests for RecoveryDataComponent

Author: ffreddow

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

@@ -0,0 +1,91 @@
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/preact';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { signal } from '@preact/signals';
+
+// Use dynamic import so we can spy on named exports from the module
+const importComponent = () => import('../RecoveryDataComponent');
+
+describe('RecoveryDataComponent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders modal content when shown and triggers save', async () => {
+    const mod = await importComponent();
+    const { RecoveryDataComponent } = mod;
+
+    const show = signal(true);
+    const email = '[email protected]';
+    const secret = new Uint8Array([1, 2, 3]);
+
+    render(<RecoveryDataComponent email={email} secret={secret} show={show} />);
+
+    expect(screen.getByTestId('modal-title').textContent).toBe('save_recovery_data');
+    expect(screen.getByTestId('modal-body').textContent).toContain('save_recovery_data_text');
+    const footer = screen.getByTestId('modal-footer');
+    const closeButton = within(footer).getByRole('button', { name: 'close' });
+
+    expect(closeButton.className).toContain('btn-danger');
+
+    const saveButton = screen.getByRole('button', { name: 'save' });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(closeButton.className).toContain('btn-primary');
+    });
+
+    fireEvent.click(closeButton);
+    expect(show.value).toBe(false);
+  });
+
+  it('calls onHide and navigates on modal close', async () => {
+  const { RecoveryDataComponent } = await importComponent();
+
+    const show = signal(true);
+
+    render(<RecoveryDataComponent email={'[email protected]'} secret={new Uint8Array()} show={show} />);
+
+  const closeButtons = screen.getAllByTestId('modal-close');
+  const bottomClose = closeButtons[closeButtons.length - 1];
+  fireEvent.click(bottomClose);
+
+    await waitFor(() => {
+      expect(show.value).toBe(false);
+      expect(window.location.replace).toHaveBeenCalledWith('/');
+    });
+  });
+});
+
+describe('saveRecoveryData', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('creates a downloadable backup file and revokes URL', async () => {
+    const { saveRecoveryData } = await importComponent();
+
+  const email = '[email protected]';
+    const secret = new Uint8Array([9, 8, 7, 6]);
+
+    const createUrl = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:test-url');
+    const revokeUrl = vi.spyOn(URL, 'revokeObjectURL');
+
+    const clickSpy = vi
+      .spyOn(HTMLAnchorElement.prototype as unknown as { click: () => void }, 'click')
+      .mockImplementation(function (this: HTMLAnchorElement) {
+        expect(this.download).toBe('john_doe_at_example_com_my_warp_charger_com_recovery_data');
+      });
+
+    const hashBytes = new Uint8Array([1, 2, 3, 4]).buffer;
+    (window.crypto.subtle.digest as unknown as (algo: string, data: ArrayBufferView) => Promise<ArrayBuffer>) =
+      vi.fn().mockResolvedValue(hashBytes);
+
+    await saveRecoveryData(secret, email);
+
+    expect(createUrl).toHaveBeenCalledTimes(1);
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+    expect(revokeUrl).toHaveBeenCalledWith('blob:test-url');
+
+  expect(window.crypto.subtle.digest).toHaveBeenCalledWith('SHA-256', expect.anything());
+  });
+});

frontend/src/test-setup.ts

@@ -498,12 +498,47 @@ beforeAll(() => {
   Object.defineProperty(window, 'location', {
     value: {
       reload: vi.fn(),
+      replace: vi.fn(),
       href: 'http://localhost:3000',
     },
     writable: true,
   });
 
   window.scrollTo = vi.fn();
+
+  // Provide minimal Web Crypto mock used by components
+  if (!('crypto' in window)) {
+    // @ts-expect-error - define minimal crypto
+    window.crypto = {};
+  }
+  if (!('subtle' in window.crypto)) {
+    // @ts-expect-error - define minimal subtle
+    window.crypto.subtle = { digest: vi.fn().mockResolvedValue(new ArrayBuffer(0)) };
+  }
+
+  // URL.createObjectURL / revokeObjectURL in jsdom
+  if (!('createObjectURL' in URL)) {
+    // @ts-expect-error - add createObjectURL
+    URL.createObjectURL = vi.fn(() => 'blob:mock');
+  }
+  if (!('revokeObjectURL' in URL)) {
+    // @ts-expect-error - add revokeObjectURL
+    URL.revokeObjectURL = vi.fn();
+  }
+
+  // File polyfill for environments missing it
+  if (typeof (globalThis as unknown as { File?: unknown }).File === 'undefined') {
+    class PolyfillFile extends Blob {
+      name: string;
+      lastModified: number;
+      constructor(bits: BlobPart[], name: string, options?: FilePropertyBag) {
+        super(bits, options);
+        this.name = name;
+        this.lastModified = Date.now();
+      }
+    }
+    (globalThis as unknown as { File: unknown }).File = PolyfillFile;
+  }
 });
 
 vi.mock('./components/Alert', () => ({