CEC-2752-Add-Mobile-Issue-Tracker (#250)

* first commit

* removed comments

* remove more comments

* fix build issues

* fix unused vars

* update snapshot

* fix test

* Fix connect ECONNREFUSED 127.0.0.1:80

* Test Magna side menu

* attempt to pass test

* fix test

* remove comments

* fix some code smells

* fix test

* resolve comments

* fix bug

* resolved comments

* resolve comments

* resolve comments

* update snapshot

* resolved comments

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>

src/components/Contexts/IssueContext.jsx

@@ -0,0 +1,55 @@
+import React, { useContext, useState, useMemo, useCallback } from "react";
+import api from "../../services/issueAPI";
+
+const IssueContext = React.createContext();
+
+export const IssueProvider = ({ children }) => {
+  const [issue, setIssue] = useState({});
+  const [issues, setIssues] = useState([]);
+  const [totalIssues, setTotalIssues] = useState(0);
+
+  const getIssue = useCallback(async (id, token) => {
+    const result = await api.getIssue(id, token);
+    if (result.error) throw new Error(`Get issue error. ${result.message}`);
+
+    setIssue(result.data ?? []);
+    return result;
+  }, []);
+
+  const getIssues = useCallback(async (search,token) => {
+    const result = await api.getIssues(search,token);
+    if (result.error) {
+      setIssues([]);
+      throw new Error(`Get issues error. ${result.message}`);
+    }
+    setIssues(result.data ?? []);
+    if (result.total) {
+      setTotalIssues(result.total);
+    }
+  }, []);
+
+  const deleteIssue = useCallback(async (id, token) => {
+    const result = await api.deleteIssue(id, token);
+    if (result.error)
+      throw new Error(`Delete issue error. ${result.message}`);
+    return result;
+  }, []);
+
+  const value = useMemo(() => ({
+    totalIssues,
+    issue,
+    issues,
+
+    deleteIssue,
+    getIssue,
+    getIssues,
+  }), [totalIssues, issue, issues, deleteIssue, getIssue, getIssues]);
+
+  return (
+    <IssueContext.Provider value={value}>
+      {children}
+    </IssueContext.Provider>
+  );
+};
+
+export const useIssueContext = () => useContext(IssueContext);

src/components/Contexts/IssueContext.test.jsx

@@ -0,0 +1,102 @@
+jest.mock("../../services/issueAPI");
+
+import {
+  render,
+  cleanup,
+  screen,
+  fireEvent,
+  waitFor,
+} from "@testing-library/react";
+import { IssueProvider, useIssueContext } from "./IssueContext";
+
+const checkIssueResult = (issue) => {
+  expect(screen.getByTestId("issue").innerHTML).toEqual(issue);
+};
+
+const checkIssuesResult = (issues) => {
+  expect(screen.getByTestId("issues").innerHTML).toEqual(issues);
+};
+
+describe("IssueContext", () => {
+  describe("getIssues", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { issues, getIssues } = useIssueContext();
+
+        return (
+          <>
+            <div data-testid="issues">{JSON.stringify(issues)}</div>
+            <button
+              data-testid="getIssues"
+              onClick={() => getIssues()}
+            />
+          </>
+        );
+      };
+      render(
+        <IssueProvider>
+          <TestComp />
+        </IssueProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("Initial state", () => {
+      checkIssuesResult("[]");
+    });
+
+    it("getIssues", async () => {
+      fireEvent.click(screen.getByTestId("getIssues"));
+      await waitFor(() =>
+        expect(screen.getByTestId("issues").innerHTML).not.toBe([])
+      );
+      checkIssuesResult(JSON.stringify(expectedIssuesData));
+    });
+  });
+
+  describe("getIssue", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { issue, getIssue } = useIssueContext();
+
+        return (
+          <>
+            <div data-testid="issue">{JSON.stringify(issue)}</div>
+            <button
+              data-testid="getIssue"
+              onClick={() => getIssue("1")}
+            />
+          </>
+        );
+      };
+      render(
+        <IssueProvider>
+          <TestComp />
+        </IssueProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("Initial state", () => {
+      checkIssueResult("{}");
+    });
+
+    it("getIssue", async () => {
+      fireEvent.click(screen.getByTestId("getIssue"));
+      await waitFor(() =>
+        expect(screen.getByTestId("issue").innerHTML).not.toBe("{}")
+      );
+      checkIssueResult(JSON.stringify(expectedIssueData));
+    });
+  });
+});
+
+const expectedIssuesData = [{ "id": 18, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" }, { "id": 19, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" }, { "id": 20, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" }, { "id": 21, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" }, { "id": 22, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" }, { "id": 25, "vin": "1GNGC26RXXJ407648", "title": "Example HMI Problem", "description": "HMI blue screen", "driver_id": "0b6b1930-b20a-4fce-967a-efac6a01fd10", "timestamp": "2022-12-19T22:25:03.848855Z" }, { "id": 26, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" }, { "id": 27, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" }, { "id": 28, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" }]
+
+const expectedIssueData = { "id": 18, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z", "images": [{ "id": 15, "image": "SGVsbG8x", "issue_id": 18 }] }

src/components/Contexts/__mocks__/IssueContext.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+
+let issue = {
+  "id": 1,
+  "vin": "1GNGC26RXXJ407648",
+  "title": "sometitle",
+  "description": "2343242",
+  "driver_id": "valid-cognito-id-1",
+  "timestamp": "2022-12-09T23:16:38.074858Z",
+  "images": [
+    {
+      "id": 1,
+      "image": "SGVsbG8x",
+      "issue_id": 1
+    }
+  ]
+}
+
+let issues = [
+  { "id": 15, "vin": "4Y1SL65848Z411439", "title": "sometitle", "description": "2343242", "driver_id": "12345", "timestamp": "2022-12-09T23:16:38.074858Z" },
+  { "id": 17, "vin": "1GNGC26RXXJ407648", "title": "sometitle", "description": "2343242", "driver_id": "valid-cognito-id-1", "timestamp": "2022-12-09T23:16:38.074858Z" },
+];
+
+export const IssueProvider = ({ children }) => {
+  return <div data-testid="mocked-issueprovider">{children}</div>;
+};
+
+export const useIssueContext = () => ({
+  issue,
+  issues,
+  deleteIssue: jest.fn(),
+  getIssues: jest.fn().mockReturnValue(issues),
+  getIssue: jest.fn(),
+});