Change main UI layout and add VINs to add and upload forms (#16)

* Add new upload update package form
Add new add vehicle form
Add new side menu layout
Add new toolbar layout
Update and add unit tests

* Enable add get and add vehicles

* Integration issues with ota_update service

* Update get vehicle JSON format

* Fix related unit test
Add release notes field

* Add StatusContext to display error and status messages
This commit is contained in:
John Wu
2021-03-11 12:53:29 -08:00
committed by GitHub
parent 39e779dc1d
commit 2e1f4a7a7c
31 changed files with 2666 additions and 377 deletions

View File

@@ -1,10 +1,5 @@
jest.mock("../../services/uploadFile");
import { setUploadFileDelay } from "../../services/uploadFile";
import {
FileUploadProvider,
useFileUploadContext,
} from "../Contexts/FileUploadContext";
import {
render,
cleanup,
@@ -13,11 +8,19 @@ import {
waitFor,
} from "@testing-library/react";
const checkState = (uploading, progress, status, linkURL) => {
import { setUploadFileDelay } from "../../services/uploadFile";
import {
FileUploadProvider,
useFileUploadContext,
} from "../Contexts/FileUploadContext";
import { StatusProvider, useStatusContext } from "../Contexts/StatusContext";
const checkState = (uploading, progress, status, linkURL, message) => {
expect(screen.getByTestId("uploading").innerHTML).toEqual(uploading);
expect(screen.getByTestId("progress").innerHTML).toEqual(progress);
expect(screen.getByTestId("status").innerHTML).toEqual(status);
expect(screen.getByTestId("linkURL").innerHTML).toEqual(linkURL);
expect(screen.getByTestId("message").innerHTML).toEqual(message);
};
describe("FileUploadContext", () => {
@@ -30,32 +33,63 @@ describe("FileUploadContext", () => {
linkURL,
upload,
cancel,
setFiles,
} = useFileUploadContext();
const TEST_FILE = [{ file: { name: "test.jpg", size: 0 } }];
const { message, setMessage } = useStatusContext();
const TEST_FILE = [{ name: "test.jpg", size: 0 }];
const TEST_ACCESSTOKEN = "ACCESSTOKEN";
const TEST_FORMDATA = {
packagename: "TEST",
version: "VERSION",
vehicles: ["VIN"],
};
const exec = async (form, token, file) => {
try {
await upload(form, token, file);
} catch (e) {
setMessage(e.message);
}
};
return (
<>
<div data-testid="uploading">{uploading.toString()}</div>
<div data-testid="progress">{progress.toString()}</div>
<div data-testid="status">{status}</div>
<div data-testid="message">{message}</div>
<div data-testid="linkURL">{linkURL}</div>
<button data-testid="uploadNoFile" onClick={() => upload()} />
<button
data-testid="uploadNoFile"
onClick={() => {
exec(TEST_FORMDATA, TEST_ACCESSTOKEN, null);
}}
/>
<button
data-testid="uploadNoToken"
onClick={() => upload(TEST_FILE)}
onClick={() => {
exec(TEST_FORMDATA, null, TEST_FILE);
}}
/>
<button
data-testid="uploadNoFormData"
onClick={() => {
exec({}, TEST_ACCESSTOKEN, TEST_FILE);
}}
/>
<button
data-testid="upload"
onClick={() => upload(TEST_FILE, TEST_ACCESSTOKEN)}
onClick={() => exec(TEST_FORMDATA, TEST_ACCESSTOKEN, TEST_FILE)}
/>
<button data-testid="cancel" onClick={() => cancel()} />
</>
);
};
render(
<FileUploadProvider>
<TestComp />
</FileUploadProvider>
<StatusProvider>
<FileUploadProvider>
<TestComp />
</FileUploadProvider>
</StatusProvider>
);
});
@@ -64,17 +98,31 @@ describe("FileUploadContext", () => {
});
it("Initial state", async () => {
checkState("false", "0", "", "");
checkState("false", "0", "", "", "");
});
it("Upload no file", async () => {
fireEvent.click(screen.getByTestId("uploadNoFile"));
checkState("false", "-1", "Error occured: File required", "");
await waitFor(() =>
expect(screen.getByTestId("message").innerHTML).not.toBe("")
);
checkState("false", "0", "", "", "File required");
});
it("Upload no access token", async () => {
fireEvent.click(screen.getByTestId("uploadNoToken"));
checkState("false", "-1", "Error occured: Access token required", "");
await waitFor(() =>
expect(screen.getByTestId("message").innerHTML).not.toBe("")
);
checkState("false", "0", "", "", "Access token required");
});
it("Upload no form data", async () => {
fireEvent.click(screen.getByTestId("uploadNoFormData"));
await waitFor(() =>
expect(screen.getByTestId("message").innerHTML).not.toBe("")
);
checkState("false", "0", "", "", "Package name required");
});
it("Upload file", async () => {
@@ -82,7 +130,7 @@ describe("FileUploadContext", () => {
await waitFor(() =>
expect(screen.getByTestId("progress").innerHTML).toEqual("100")
);
checkState("true", "100", "Uploaded test.jpg", "CLOUDFRONT_URL");
checkState("true", "100", "Uploaded test.jpg", "CLOUDFRONT_URL", "");
});
it("Cancel upload", async () => {
@@ -91,12 +139,12 @@ describe("FileUploadContext", () => {
await waitFor(() =>
expect(screen.getByTestId("progress").innerHTML).toEqual("50")
);
checkState("true", "50", "Uploading test.jpg", "");
checkState("true", "50", "Uploading test.jpg", "", "");
fireEvent.click(screen.getByTestId("cancel"));
await waitFor(() =>
expect(screen.getByTestId("progress").innerHTML).toEqual("0")
);
checkState("false", "0", "Upload cancelled", "");
checkState("false", "0", "Upload cancelled", "", "");
});
});