Add file upload tests

src/components/contexts/FileUploadContext.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import { uploadFile, getCancelToken } from "../../services/uploadFile";
 
 const FileUploadContext = React.createContext();
@@ -10,15 +10,23 @@ export const FileUploadProvider = ({ children }) => {
   const [status, setStatus] = useState(null);
   const [cancelUpload, setCancelUpload] = useState(null);
 
-  const cancel = async () => {
+  const done = () => {
-    console.log(`cancel`);
-    if (cancelUpload) cancelUpload.cancel();
     setCancelUpload(null);
     setUploading(false);
+    setProgress(0);
+  };
+
+  const cancel = async () => {
+    if (cancelUpload && progress < 100) {
+      cancelUpload.cancel();
+      setStatus("Upload cancelled");
+    }
+    done();
   };
 
   const upload = async (files) => {
-    if (files.length === 0) return;
+    try {
+      if (!files || files.length === 0) throw new Error("No file provided");
 
       const file = files[0].file;
       const filename = file.name;
@@ -27,15 +35,15 @@ export const FileUploadProvider = ({ children }) => {
       setProgress(0);
       setStatus(`Uploading ${filename}`);
       setCancelUpload(getCancelToken());
-    try {
+      
       const result = await uploadFile(file, setProgress, cancelUpload);
-      console.log(result);
+      const url = ((result && result.url) ? result.url : "No URL available");
-      setStatus(`Uploaded ${filename}`);
+      setStatus(`Uploaded ${filename}\n${url}`);
       setCancelUpload(null);
-      setProgress(101);
+      setProgress(100);
     }
     catch (e) {
-      setStatus(`Error occured ${e.message}`);
+      setStatus(`Error occured: ${e.message}`);
     }
   };
 

src/components/contexts/FileUploadContext.test.jsx

@@ -0,0 +1,61 @@
+jest.mock("../../services/uploadFile");
+
+import {uploadFile, getCancelToken, setUploadFileResponse, setUploadFileDelay, getIssuedCancelToken } from "../../services/uploadFile"
+import { FileUploadProvider, useFileUploadContext }  from "../Contexts/FileUploadContext";
+import {render, cleanup, screen, fireEvent, waitFor} from "@testing-library/react"
+
+describe("FileUploadContext", () => {
+
+  beforeEach(() => {
+    const TestComp = () => {
+      const { progress, uploading, status, upload, cancel } = useFileUploadContext();
+      return (
+        <>
+          <div data-testid="uploading">{uploading.toString()}</div>
+          <div data-testid="progress">{progress.toString()}</div>
+          <div data-testid="status">{status}</div>
+          <button data-testid="uploadNoFile" onClick={() => upload()}/>
+          <button data-testid="upload" onClick={() => upload([{ file: { name: "test.jpg" }}])}/>
+          <button data-testid="cancel" onClick={() => cancel()}/>
+        </>
+      );
+    };
+    render(<FileUploadProvider><TestComp /></FileUploadProvider>);  
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("Initial state", async () => {
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
+    expect(screen.getByTestId("progress").innerHTML).toEqual("0");
+    expect(screen.getByTestId("status").innerHTML).toEqual("");
+  })
+
+  it("Upload no file", async () => {
+    fireEvent.click(screen.getByTestId("uploadNoFile"));
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
+    expect(screen.getByTestId("progress").innerHTML).toEqual("0");
+    expect(screen.getByTestId("status").innerHTML).toEqual("Error occured: No file provided");
+  })
+
+  it("Upload file", async () => {
+    fireEvent.click(screen.getByTestId("upload"));
+    await waitFor(() => expect(screen.getByTestId("progress").innerHTML).toEqual("100"));
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("true");
+    expect(screen.getByTestId("status").innerHTML).toEqual("Uploaded test.jpg\nCLOUDFRONT_URL");
+  })
+
+  it("Cancel upload", async () => {
+    setUploadFileDelay(true);
+    fireEvent.click(screen.getByTestId("upload"));
+    await waitFor(() => expect(screen.getByTestId("progress").innerHTML).toEqual("50"));
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("true");
+    expect(screen.getByTestId("status").innerHTML).toEqual("Uploading test.jpg");
+    fireEvent.click(screen.getByTestId("cancel"));
+    await waitFor(() => expect(screen.getByTestId("progress").innerHTML).toEqual("0"));
+    expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
+    expect(screen.getByTestId("status").innerHTML).toEqual("Upload cancelled");
+  })
+})

src/services/__mocks__/uploadFile.js

@@ -0,0 +1,29 @@
+import delay from "../../utils/delay";
+
+let uploadFileResponse = { url: "CLOUDFRONT_URL" };
+let uploadFileDelay = false;
+let issuedCancelToken = null;
+
+export const getCancelToken = () => {
+  issuedCancelToken = {
+    cancel: jest.fn()
+  }
+  return issuedCancelToken;
+}
+
+export const uploadFile = async (file, onProgress, cancelToken) => {
+  if (!uploadFileDelay) return uploadFileResponse;
+  onProgress(50);
+  await delay(10000);
+  return {};
+};
+
+export const setUploadFileResponse = (value) => {
+  uploadFileResponse = value;
+}
+
+export const setUploadFileDelay = (value) => {
+  uploadFileDelay = value;
+}
+
+export const getIssuedCancelToken = () => issuedCancelToken;

src/utils/delay.js

@@ -0,0 +1,8 @@
+const delay = (duration) => new Promise((resolve) => {
+  const timer = setTimeout(() => {
+    clearTimeout(timer);
+    resolve();
+  }, duration);
+})
+
+export default delay;