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 }] }