From 1ed43fa2a035416c5e4ce9755970de56e4fadf4a Mon Sep 17 00:00:00 2001
From: jwu-fisker <jwu@fiskerinc.com>
Date: Thu, 7 Jan 2021 16:50:30 -0800
Subject: [PATCH] Add file upload tests

---
 src/components/contexts/FileUploadContext.jsx | 42 +++++++------
 .../contexts/FileUploadContext.test.jsx       | 61 +++++++++++++++++++
 src/services/__mocks__/uploadFile.js          | 29 +++++++++
 src/utils/delay.js                            |  8 +++
 4 files changed, 123 insertions(+), 17 deletions(-)
 create mode 100644 src/components/contexts/FileUploadContext.test.jsx
 create mode 100644 src/services/__mocks__/uploadFile.js
 create mode 100644 src/utils/delay.js

diff --git a/src/components/contexts/FileUploadContext.jsx b/src/components/contexts/FileUploadContext.jsx
index 046336a..acb70b1 100644
--- a/src/components/contexts/FileUploadContext.jsx
+++ b/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,32 +10,40 @@ export const FileUploadProvider = ({ children }) => {
   const [status, setStatus] = useState(null);
   const [cancelUpload, setCancelUpload] = useState(null);
 
-  const cancel = async () => {
-    console.log(`cancel`);
-    if (cancelUpload) cancelUpload.cancel();
+  const done = () => {
     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;
-
-    const file = files[0].file;
-    const filename = file.name;
-
-    setUploading(true);
-    setProgress(0);
-    setStatus(`Uploading ${filename}`);
-    setCancelUpload(getCancelToken());
     try {
+      if (!files || files.length === 0) throw new Error("No file provided");
+
+      const file = files[0].file;
+      const filename = file.name;
+  
+      setUploading(true);
+      setProgress(0);
+      setStatus(`Uploading ${filename}`);
+      setCancelUpload(getCancelToken());
+      
       const result = await uploadFile(file, setProgress, cancelUpload);
-      console.log(result);
-      setStatus(`Uploaded ${filename}`);
+      const url = ((result && result.url) ? result.url : "No URL available");
+      setStatus(`Uploaded ${filename}\n${url}`);
       setCancelUpload(null);
-      setProgress(101);
+      setProgress(100);
     }
     catch (e) {
-      setStatus(`Error occured ${e.message}`);
+      setStatus(`Error occured: ${e.message}`);
     }
   };
 
diff --git a/src/components/contexts/FileUploadContext.test.jsx b/src/components/contexts/FileUploadContext.test.jsx
new file mode 100644
index 0000000..3e8e8ef
--- /dev/null
+++ b/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");
+  })
+})
diff --git a/src/services/__mocks__/uploadFile.js b/src/services/__mocks__/uploadFile.js
new file mode 100644
index 0000000..a636ec5
--- /dev/null
+++ b/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;
diff --git a/src/utils/delay.js b/src/utils/delay.js
new file mode 100644
index 0000000..a57e8fd
--- /dev/null
+++ b/src/utils/delay.js
@@ -0,0 +1,8 @@
+const delay = (duration) => new Promise((resolve) => {
+  const timer = setTimeout(() => {
+    clearTimeout(timer);
+    resolve();
+  }, duration);
+})
+
+export default delay;
\ No newline at end of file