feat image-capture-compression still working on it(#293)

components/logistics/ImageCapture.tsx

@@ -96,7 +96,7 @@ export default function ImageCapture() {
 
       {compressedInfo && (
         <p className="text-sm text-gray-600 mb-2">
-          Original: {compressedInfo.name} — {compressedInfo.sizeKB} KB
+          Original: {compressedInfo.name} -- {compressedInfo.sizeKB} KB
         </p>
       )}
 

components/logistics/__tests__/ImageCapture.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import ImageCapture from '@/components/logistics/ImageCapture';
+import { useImageCompressor } from '@/hooks/useImageCompressor';
+import { uploadService } from '@/services/uploadService';
+
+jest.mock('@/hooks/useImageCompressor');
+jest.mock('@/services/uploadService');
+
+const mockUseImageCompressor = useImageCompressor as jest.MockedFunction<typeof useImageCompressor>;
+const mockedUploadService = uploadService as jest.Mocked<typeof uploadService>;
+
+function makeFile(sizeBytes: number, name = 'proof.jpg') {
+  return new File([new Uint8Array(sizeBytes)], name, { type: 'image/jpeg' });
+}
+
+describe('ImageCapture', () => {
+  const compress = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseImageCompressor.mockReturnValue({
+      compress,
+      isCompressing: false,
+    });
+    global.URL.createObjectURL = jest.fn(() => 'blob:mock-preview');
+    global.URL.revokeObjectURL = jest.fn();
+  });
+
+  it('renders the file picker and disables Upload Proof until a file is selected', () => {
+    render(<ImageCapture />);
+
+    expect(screen.getByText('Choose Photo')).toBeInTheDocument();
+    expect(screen.getByText('Upload Proof')).toBeDisabled();
+  });
+
+  it('shows a preview and original file size once a file is selected', async () => {
+    render(<ImageCapture />);
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const file = makeFile(1024 * 1024, 'delivery.jpg');
+
+    fireEvent.change(input, { target: { files: [file] } });
+
+    expect(await screen.findByAltText('preview')).toBeInTheDocument();
+    expect(screen.getByText(/delivery\.jpg/)).toBeInTheDocument();
+    expect(screen.getByText('Upload Proof')).not.toBeDisabled();
+  });
+
+  it('compresses the selected file to under 500KB before calling the upload API', async () => {
+    const compressedFile = makeFile(400 * 1024, 'delivery.jpg');
+    compress.mockResolvedValueOnce(compressedFile);
+    mockedUploadService.uploadFile.mockResolvedValueOnce({
+      success: true,
+      data: {
+        fileId: 'f-1',
+        fileName: 'delivery.jpg',
+        fileSize: compressedFile.size,
+        mimeType: 'image/jpeg',
+        uploadedAt: new Date().toISOString(),
+      },
+    });
+
+    render(<ImageCapture />);
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const originalFile = makeFile(3 * 1024 * 1024, 'delivery.jpg');
+    fireEvent.change(input, { target: { files: [originalFile] } });
+
+    fireEvent.click(screen.getByText('Upload Proof'));
+
+    await waitFor(() => expect(compress).toHaveBeenCalledWith(originalFile, 500));
+    await waitFor(() =>
+      expect(mockedUploadService.uploadFile).toHaveBeenCalledWith(compressedFile, 'proof')
+    );
+
+    expect(compressedFile.size).toBeLessThan(500 * 1024);
+    expect(await screen.findByText(/Uploaded/)).toBeInTheDocument();
+  });
+
+  it('surfaces an error message when compression cannot meet the size target', async () => {
+    compress.mockRejectedValueOnce(new Error('Unable to compress below 500KB'));
+
+    render(<ImageCapture />);
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [makeFile(8 * 1024 * 1024)] } });
+    fireEvent.click(screen.getByText('Upload Proof'));
+
+    expect(await screen.findByText(/Unable to compress below 500KB/)).toBeInTheDocument();
+    expect(mockedUploadService.uploadFile).not.toHaveBeenCalled();
+  });
+
+  it('surfaces a failure message when the backend upload rejects the file', async () => {
+    const compressedFile = makeFile(400 * 1024);
+    compress.mockResolvedValueOnce(compressedFile);
+    mockedUploadService.uploadFile.mockResolvedValueOnce({
+      success: false,
+      message: 'Server rejected file',
+    });
+
+    render(<ImageCapture />);
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [makeFile(2 * 1024 * 1024)] } });
+    fireEvent.click(screen.getByText('Upload Proof'));
+
+    expect(await screen.findByText(/Upload failed: Server rejected file/)).toBeInTheDocument();
+  });
+
+  it('shows a compressing indicator while isCompressing is true', () => {
+    mockUseImageCompressor.mockReturnValue({
+      compress,
+      isCompressing: true,
+    });
+
+    render(<ImageCapture />);
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [makeFile(1024 * 1024)] } });
+
+    expect(screen.getByText('Compressing...')).toBeInTheDocument();
+  });
+});

hooks/__tests__/useImageCompressor.test.ts

@@ -0,0 +1,88 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useImageCompressor } from '@/hooks/useImageCompressor';
+import { imageCompressionService } from '@/services/imageCompressionService';
+
+jest.mock('@/services/imageCompressionService');
+
+const mockedService = imageCompressionService as jest.Mocked<typeof imageCompressionService>;
+
+function makeFile(sizeBytes: number, name = 'proof.jpg'): File {
+  return new File([new Uint8Array(sizeBytes)], name, { type: 'image/jpeg' });
+}
+
+describe('useImageCompressor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('starts with isCompressing set to false', () => {
+    const { result } = renderHook(() => useImageCompressor());
+    expect(result.current.isCompressing).toBe(false);
+  });
+
+  it('delegates compression to imageCompressionService with a default target of 500KB', async () => {
+    const input = makeFile(2 * 1024 * 1024);
+    const compressed = makeFile(400 * 1024);
+    mockedService.compressImage.mockResolvedValueOnce(compressed);
+
+    const { result } = renderHook(() => useImageCompressor());
+
+    let output: File | undefined;
+    await act(async () => {
+      output = await result.current.compress(input);
+    });
+
+    expect(mockedService.compressImage).toHaveBeenCalledWith(input, 500);
+    expect(output).toBe(compressed);
+  });
+
+  it('respects a custom target size', async () => {
+    const input = makeFile(2 * 1024 * 1024);
+    mockedService.compressImage.mockResolvedValueOnce(makeFile(200 * 1024));
+
+    const { result } = renderHook(() => useImageCompressor());
+
+    await act(async () => {
+      await result.current.compress(input, 250);
+    });
+
+    expect(mockedService.compressImage).toHaveBeenCalledWith(input, 250);
+  });
+
+  it('toggles isCompressing to true during compression and back to false after', async () => {
+    let resolveCompression: (file: File) => void;
+    mockedService.compressImage.mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveCompression = resolve;
+      })
+    );
+
+    const { result } = renderHook(() => useImageCompressor());
+    const input = makeFile(1024 * 1024);
+
+    act(() => {
+      void result.current.compress(input);
+    });
+
+    await waitFor(() => expect(result.current.isCompressing).toBe(true));
+
+    await act(async () => {
+      resolveCompression(makeFile(300 * 1024));
+    });
+
+    await waitFor(() => expect(result.current.isCompressing).toBe(false));
+  });
+
+  it('resets isCompressing to false even when compression throws', async () => {
+    mockedService.compressImage.mockRejectedValueOnce(new Error('too large'));
+
+    const { result } = renderHook(() => useImageCompressor());
+    const input = makeFile(1024 * 1024);
+
+    await act(async () => {
+      await expect(result.current.compress(input)).rejects.toThrow('too large');
+    });
+
+    expect(result.current.isCompressing).toBe(false);
+  });
+});

lib/api.ts

@@ -26,7 +26,7 @@ api.interceptors.request.use(
   (error: AxiosError) => Promise.reject(error),
 );
 
-// Handle 401 Unauthorized — clear stored token and redirect to login
+// Handle 401 Unauthorized -- clear stored token and redirect to login
 api.interceptors.response.use(
   (response: AxiosResponse) => response,
   (error: AxiosError) => {