Test/front end tests

frontend/__tests__/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

frontend/__tests__/unit/components/Bar.test.jsx

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import Bar from "components/Bar";
+import { Router } from "react-router-dom";
+import { createMemoryHistory } from "history";
+
+// Useful reference: https://bholmes.dev/blog/mocking-browser-apis-fetch-localstorage-dates-the-easy-way-with-jest/
+
+let mockStorage = {};
+
+describe("Bar", () => {
+  beforeAll(() => {
+    global.Storage.prototype.getItem = jest.fn((key) => mockStorage[key]);
+  });
+
+  beforeEach(() => {
+    // make sure the fridge starts out empty for each test
+    mockStorage = {};
+  });
+
+  afterAll(() => {
+    global.Storage.prototype.getItem.mockReset();
+  });
+
+  it("renders Bar unchanged when logged out", () => {
+    const history = createMemoryHistory();
+    mockStorage["loggedIn"] = false;
+
+    const { container } = render(
+      <Router history={history}>
+        <Bar />
+      </Router>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders Bar unchanged when logged in", () => {
+    const history = createMemoryHistory();
+    mockStorage["loggedIn"] = true;
+
+    const { container } = render(
+      <Router history={history}>
+        <Bar />
+      </Router>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

frontend/__tests__/unit/components/HomeLoggedIn.test.jsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import HomeLoggedIn from "components/HomeLoggedIn";
+import { Router } from "react-router-dom";
+import { createMemoryHistory } from "history";
+import { testNetwork } from "../../data/network";
+import API from "utils/API";
+import MockAdapter from "axios-mock-adapter";
+
+describe("HomeLoggedIn", () => {
+  it("renders HomeLoggedIn unchanged (no network)", async () => {
+    const mock = new MockAdapter(API);
+    const history = createMemoryHistory();
+
+    mock.onGet("network").reply(200, []);
+
+    const { container } = render(
+      <Router history={history}>
+        <HomeLoggedIn />
+      </Router>
+    );
+
+    expect(
+      await screen.findByText(/Please create at least one network/i)
+    ).toBeInTheDocument();
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders HomeLoggedIn unchanged (with network)", async () => {
+    const mock = new MockAdapter(API);
+    const history = createMemoryHistory();
+
+    mock.onGet("network").reply(200, [testNetwork]);
+
+    const { container } = render(
+      <Router history={history}>
+        <HomeLoggedIn />
+      </Router>
+    );
+
+    expect(await screen.findByText(/0d303702cd0f1fc6/)).toBeInTheDocument();
+    expect(await screen.findByText(/new-net-11166/)).toBeInTheDocument();
+
+    expect(container).toMatchSnapshot();
+  });
+});

frontend/__tests__/unit/components/NetworkManagement.test.jsx

@@ -0,0 +1,198 @@
+import { render, screen } from "@testing-library/react";
+import NetworkManagement from "components/NetworkManagement";
+import { MemoryRouter, Route, Router } from "react-router-dom";
+import { createMemoryHistory } from "history";
+import userEvent from "@testing-library/user-event";
+import API from "utils/API";
+import MockAdapter from "axios-mock-adapter";
+
+describe("NetworkManagement", () => {
+  it("renders unchanged", () => {
+    const history = createMemoryHistory();
+
+    const { container } = render(
+      <Router history={history}>
+        <NetworkManagement />
+      </Router>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders with initial state (accordion not expanded)", () => {
+    const history = createMemoryHistory();
+
+    render(
+      <Router history={history}>
+        <NetworkManagement />
+      </Router>
+    );
+
+    const expandAccordionButton = screen.getByRole("button", {
+      name: "Management",
+    });
+
+    expect(expandAccordionButton).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Delete Network" })
+    ).toBeFalsy();
+  });
+
+  test("renders with accordion expanded (and dialog closed)", async () => {
+    const history = createMemoryHistory();
+    const user = userEvent.setup();
+
+    render(
+      <Router history={history}>
+        <NetworkManagement />
+      </Router>
+    );
+
+    const expandAccordionButton = screen.getByRole("button", {
+      name: "Management",
+    });
+
+    await user.click(expandAccordionButton);
+
+    expect(
+      screen.getByRole("button", {
+        name: "Delete Network",
+      })
+    ).toBeVisible();
+  });
+
+  test("renders with accordion expanded and dialog opened", async () => {
+    const history = createMemoryHistory();
+    const user = userEvent.setup();
+
+    render(
+      <Router history={history}>
+        <NetworkManagement />
+      </Router>
+    );
+
+    const expandAccordionButton = screen.getByRole("button", {
+      name: "Management",
+    });
+
+    await user.click(expandAccordionButton);
+
+    const deleteNetworkButton = screen.getByRole("button", {
+      name: "Delete Network",
+    });
+
+    await user.click(deleteNetworkButton);
+
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeVisible();
+    expect(screen.getByRole("button", { name: "Delete" })).toBeVisible();
+  });
+
+  test("renders with accordion closed after opening and closing it", async () => {
+    const history = createMemoryHistory();
+    const user = userEvent.setup();
+
+    render(
+      <Router history={history}>
+        <NetworkManagement />
+      </Router>
+    );
+
+    const expandAccordionButton = screen.getByRole("button", {
+      name: "Management",
+    });
+
+    await user.click(expandAccordionButton);
+
+    expect(
+      screen.getByRole("button", {
+        name: "Delete Network",
+      })
+    ).toBeVisible();
+
+    await user.click(expandAccordionButton);
+
+    expect(
+      screen.queryByRole("button", {
+        name: "Delete Network",
+      })
+    ).toBeFalsy();
+  });
+
+  test("renders with accordion expanded and dialog closed (after opening and closing the dialog)", async () => {
+    const history = createMemoryHistory();
+    const user = userEvent.setup();
+
+    render(
+      <Router history={history}>
+        <NetworkManagement />
+      </Router>
+    );
+
+    const expandAccordionButton = screen.getByRole("button", {
+      name: "Management",
+    });
+
+    await user.click(expandAccordionButton);
+
+    const deleteNetworkButton = screen.getByRole("button", {
+      name: "Delete Network",
+    });
+
+    await user.click(deleteNetworkButton);
+
+    const dialogCancelButton = screen.getByRole("button", { name: "Cancel" });
+    const dialogDeleteButton = screen.getByRole("button", { name: "Delete" });
+
+    expect(dialogCancelButton).toBeVisible();
+    expect(dialogDeleteButton).toBeVisible();
+
+    await user.click(dialogCancelButton);
+
+    expect(dialogCancelButton).not.toBeVisible();
+    expect(dialogDeleteButton).not.toBeVisible();
+  });
+
+  test("renders with network deleted (after expanding the acordion, opening the dialog and clicking the button to delete the network)", async () => {
+    const mock = new MockAdapter(API);
+    const user = userEvent.setup();
+    const nwid = "123";
+    let testLocation;
+
+    mock.onDelete("/network/" + nwid).reply(200);
+
+    render(
+      <MemoryRouter initialEntries={["/network/" + nwid]}>
+        <Route path="/network/:nwid">
+          <NetworkManagement />
+        </Route>
+        <Route
+          path="*"
+          render={({ location }) => {
+            testLocation = location;
+            return null;
+          }}
+        />
+      </MemoryRouter>
+    );
+
+    const expandAccordionButton = screen.getByRole("button", {
+      name: "Management",
+    });
+
+    await user.click(expandAccordionButton);
+
+    const deleteNetworkButton = screen.getByRole("button", {
+      name: "Delete Network",
+    });
+
+    await user.click(deleteNetworkButton);
+
+    const dialogCancelButton = screen.getByRole("button", { name: "Cancel" });
+    const dialogDeleteButton = screen.getByRole("button", { name: "Delete" });
+
+    expect(dialogCancelButton).toBeVisible();
+    expect(dialogDeleteButton).toBeVisible();
+
+    await user.click(dialogDeleteButton);
+    expect(testLocation.pathname).toBe("/");
+  });
+});