test(NetworkManagement): add tests for component

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("/");
+  });
+});

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

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NetworkManagement renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiPaper-root MuiAccordion-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+  >
+    <div
+      aria-disabled="false"
+      aria-expanded="false"
+      class="MuiButtonBase-root MuiAccordionSummary-root"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="MuiAccordionSummary-content"
+      >
+        <p
+          class="MuiTypography-root MuiTypography-body1"
+        >
+          Management
+        </p>
+      </div>
+      <div
+        aria-disabled="false"
+        aria-hidden="true"
+        class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </div>
+    </div>
+    <div
+      class="MuiCollapse-root MuiCollapse-hidden"
+      style="min-height: 0px;"
+    >
+      <div
+        class="MuiCollapse-wrapper"
+      >
+        <div
+          class="MuiCollapse-wrapperInner"
+        >
+          <div
+            role="region"
+          >
+            <div
+              class="MuiAccordionDetails-root"
+            >
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label"
+                >
+                  <span
+                    class="MuiButton-startIcon MuiButton-iconSizeMedium"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                  Delete Network
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

frontend/package.json

@@ -25,9 +25,9 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "axios-mock-adapter": "^1.21.2",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest": "26.6.0",
     "jest-transform-css": "^6.0.0",
     "source-map-explorer": "^2.5.2"
   },