Merge pull request #351 from JaneliaSciComp/mkitti-binary-file-display-tests

test: add unit tests for HexDump and useFileBinaryPreviewQuery

Author: allison-truhlar

frontend/src/__tests__/unitTests/fileBinaryPreviewQuery.test.tsx

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useFileBinaryPreviewQuery } from '@/queries/fileContentQueries';
+
+// Simplify buildUrl so we can intercept fetch without URL matching complexity
+vi.mock('@/utils', async () => {
+  const actual = await vi.importActual('@/utils');
+  return {
+    ...actual,
+    buildUrl: () => '/api/content/test_fsp?subpath=file.bin'
+  };
+});
+
+describe('useFileBinaryPreviewQuery', () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } }
+    });
+    vi.clearAllMocks();
+  });
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  it('returns a Uint8Array from a 206 Partial Content response', async () => {
+    const data = new Uint8Array([0x50, 0x4b, 0x03, 0x04]);
+    vi.spyOn(global, 'fetch').mockResolvedValueOnce({
+      ok: true,
+      status: 206,
+      arrayBuffer: async () => data.buffer
+    } as Response);
+
+    const { result } = renderHook(
+      () => useFileBinaryPreviewQuery('test_fsp', 'file.bin'),
+      { wrapper }
+    );
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toBeInstanceOf(Uint8Array);
+    expect(Array.from(result.current.data!)).toEqual([0x50, 0x4b, 0x03, 0x04]);
+  });
+
+  it('returns a Uint8Array from a 200 OK response (server ignores Range)', async () => {
+    const data = new Uint8Array([0x01, 0x02, 0x03]);
+    vi.spyOn(global, 'fetch').mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      arrayBuffer: async () => data.buffer
+    } as Response);
+
+    const { result } = renderHook(
+      () => useFileBinaryPreviewQuery('test_fsp', 'file.bin'),
+      { wrapper }
+    );
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toBeInstanceOf(Uint8Array);
+  });
+
+  it('sets error state when the response is not ok', async () => {
+    vi.spyOn(global, 'fetch').mockResolvedValueOnce({
+      ok: false,
+      status: 403,
+      statusText: 'Forbidden'
+    } as Response);
+
+    const { result } = renderHook(
+      () => useFileBinaryPreviewQuery('test_fsp', 'file.bin'),
+      { wrapper }
+    );
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+    expect(result.current.error?.message).toContain('Forbidden');
+  });
+
+  it('does not fetch when enabled is false', async () => {
+    const fetchSpy = vi.spyOn(global, 'fetch');
+
+    const { result } = renderHook(
+      () => useFileBinaryPreviewQuery('test_fsp', 'file.bin', false),
+      { wrapper }
+    );
+
+    await new Promise(r => setTimeout(r, 50));
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(result.current.isPending).toBe(true);
+  });
+
+  it('does not fetch when fspName is undefined', async () => {
+    const fetchSpy = vi.spyOn(global, 'fetch');
+
+    const { result } = renderHook(
+      () => useFileBinaryPreviewQuery(undefined, 'file.bin'),
+      { wrapper }
+    );
+
+    await new Promise(r => setTimeout(r, 50));
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(result.current.isPending).toBe(true);
+  });
+
+  it('sends a Range header requesting the first 512 bytes', async () => {
+    const fetchSpy = vi.spyOn(global, 'fetch').mockResolvedValueOnce({
+      ok: true,
+      status: 206,
+      arrayBuffer: async () => new Uint8Array(512).buffer
+    } as Response);
+
+    const { result } = renderHook(
+      () => useFileBinaryPreviewQuery('test_fsp', 'file.bin'),
+      { wrapper }
+    );
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(fetchSpy).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        headers: expect.objectContaining({ Range: 'bytes=0-511' })
+      })
+    );
+  });
+
+  it('includes credentials in the fetch request', async () => {
+    const fetchSpy = vi.spyOn(global, 'fetch').mockResolvedValueOnce({
+      ok: true,
+      status: 206,
+      arrayBuffer: async () => new Uint8Array(4).buffer
+    } as Response);
+
+    const { result } = renderHook(
+      () => useFileBinaryPreviewQuery('test_fsp', 'file.bin'),
+      { wrapper }
+    );
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(fetchSpy).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({ credentials: 'include' })
+    );
+  });
+});

frontend/src/__tests__/unitTests/hexDump.test.tsx

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import HexDump from '@/components/ui/BrowsePage/HexDump';
+
+describe('HexDump', () => {
+  it('renders offset, hex values, and ASCII representation', () => {
+    // 0x50 0x4B = "PK" — ZIP magic bytes
+    const bytes = new Uint8Array([0x50, 0x4b, 0x03, 0x04]);
+    const { container } = render(<HexDump bytes={bytes} />);
+    const pre = container.querySelector('pre')!;
+
+    expect(pre.textContent).toContain('0000:');
+    expect(pre.textContent).toContain('50');
+    expect(pre.textContent).toContain('4B');
+    expect(pre.textContent).toContain('PK');
+  });
+
+  it('uses uppercase hex for offset and byte values', () => {
+    const bytes = new Uint8Array([0xab, 0xcd]);
+    const { container } = render(<HexDump bytes={bytes} />);
+    const pre = container.querySelector('pre')!;
+
+    expect(pre.textContent).toContain('0000:');
+    expect(pre.textContent).toContain('AB');
+    expect(pre.textContent).toContain('CD');
+    expect(pre.textContent).not.toContain('ab');
+  });
+
+  it('shows byte count when totalFileSize is not provided', () => {
+    const bytes = new Uint8Array(4).fill(0);
+    render(<HexDump bytes={bytes} />);
+    expect(screen.getByText('4 bytes')).toBeInTheDocument();
+  });
+
+  it('shows byte count when totalFileSize equals bytes.length', () => {
+    const bytes = new Uint8Array(4).fill(0);
+    render(<HexDump bytes={bytes} totalFileSize={4} />);
+    expect(screen.getByText('4 bytes')).toBeInTheDocument();
+    expect(screen.queryByText(/Showing first/)).not.toBeInTheDocument();
+  });
+
+  it('shows truncation message when file is larger than the preview', () => {
+    const bytes = new Uint8Array(512).fill(0);
+    render(<HexDump bytes={bytes} totalFileSize={1024} />);
+    expect(screen.getByText(/Showing first 512 of/)).toBeInTheDocument();
+    expect(screen.getByText(/bytes/)).toBeInTheDocument();
+  });
+
+  it('replaces non-printable bytes with dots in the ASCII column', () => {
+    // 0x01 = non-printable control char; 0x41 = 'A'; 0x42 = 'B'
+    const bytes = new Uint8Array([0x01, 0x41, 0x42]);
+    const { container } = render(<HexDump bytes={bytes} />);
+    const pre = container.querySelector('pre')!;
+
+    expect(pre.textContent).toContain('.AB');
+  });
+
+  it('replaces null bytes with dots in the ASCII column', () => {
+    const bytes = new Uint8Array([0x00, 0x00]);
+    const { container } = render(<HexDump bytes={bytes} />);
+    const pre = container.querySelector('pre')!;
+
+    expect(pre.textContent).toContain('..');
+  });
+
+  it('handles an empty byte array', () => {
+    const bytes = new Uint8Array(0);
+    render(<HexDump bytes={bytes} />);
+    expect(screen.getByText('0 bytes')).toBeInTheDocument();
+  });
+
+  it('inserts a mid-row gap after the 8th byte', () => {
+    const bytes = new Uint8Array(16).fill(0xab);
+    const { container } = render(<HexDump bytes={bytes} />);
+    const pre = container.querySelector('pre')!;
+    const line = pre.textContent?.split('\n')[0] ?? '';
+
+    // Eight hex bytes, then triple space (join + gap element + join), then the 9th byte
+    expect(line).toContain('AB AB AB AB AB AB AB AB   AB');
+  });
+
+  it('produces the correct number of rows for multi-row input', () => {
+    // 17 bytes → two rows (16 + 1)
+    const bytes = new Uint8Array(17).fill(0);
+    const { container } = render(<HexDump bytes={bytes} />);
+    const pre = container.querySelector('pre')!;
+    const lines = (pre.textContent ?? '').split('\n').filter(Boolean);
+
+    expect(lines).toHaveLength(2);
+    expect(lines[0]).toContain('0000:');
+    expect(lines[1]).toContain('0010:');
+  });
+
+  it('pads the offset with leading zeros', () => {
+    // 32 bytes → second row offset is 0x10 = 16, displayed as "0010"
+    const bytes = new Uint8Array(32).fill(0);
+    const { container } = render(<HexDump bytes={bytes} />);
+    const pre = container.querySelector('pre')!;
+
+    expect(pre.textContent).toContain('0010:');
+  });
+});