Add some simple model editor React unit tests

Author: koesie10

extensions/ql-vscode/src/model-editor/method.ts

@@ -30,6 +30,11 @@ export interface MethodSignature {
    * e.g. `org.sql2o.Connection#createQuery(String)`
    */
   signature: string;
+  /**
+   * The package name in Java, or the namespace in C#, e.g. `org.sql2o` or `System.Net.Http.Headers`.
+   *
+   * If the class is not in a package, the value should be an empty string.
+   */
   packageName: string;
   typeName: string;
   methodName: string;

extensions/ql-vscode/src/view/model-editor/__tests__/HiddenMethodsRow.spec.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { HiddenMethodsRow } from "../HiddenMethodsRow";
+
+describe(HiddenMethodsRow.name, () => {
+  it("does not render with 0 hidden methods", () => {
+    const { container } = render(
+      <HiddenMethodsRow numHiddenMethods={0} someMethodsAreVisible={true} />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders with 1 hidden methods and no visible methods", () => {
+    render(
+      <HiddenMethodsRow numHiddenMethods={1} someMethodsAreVisible={false} />,
+    );
+
+    expect(
+      screen.getByText("1 method modeled in other CodeQL packs"),
+    ).toBeVisible();
+  });
+
+  it("renders with 1 hidden methods and visible methods", () => {
+    render(
+      <HiddenMethodsRow numHiddenMethods={1} someMethodsAreVisible={true} />,
+    );
+
+    expect(
+      screen.getByText("And 1 method modeled in other CodeQL packs"),
+    ).toBeVisible();
+  });
+
+  it("renders with 3 hidden methods and no visible methods", () => {
+    render(
+      <HiddenMethodsRow numHiddenMethods={3} someMethodsAreVisible={false} />,
+    );
+
+    expect(
+      screen.getByText("3 methods modeled in other CodeQL packs"),
+    ).toBeVisible();
+  });
+
+  it("renders with 3 hidden methods and visible methods", () => {
+    render(
+      <HiddenMethodsRow numHiddenMethods={3} someMethodsAreVisible={true} />,
+    );
+
+    expect(
+      screen.getByText("And 3 methods modeled in other CodeQL packs"),
+    ).toBeVisible();
+  });
+});

extensions/ql-vscode/src/view/model-editor/__tests__/KindInput.spec.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { KindInput } from "../KindInput";
+import userEvent from "@testing-library/user-event";
+
+describe(KindInput.name, () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockReset();
+  });
+
+  it("allows changing the kind", async () => {
+    render(
+      <KindInput
+        kinds={["local", "remote"]}
+        value="local"
+        onChange={onChange}
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveValue("local");
+    await userEvent.selectOptions(screen.getByRole("combobox"), "remote");
+    expect(onChange).toHaveBeenCalledWith("remote");
+  });
+
+  it("resets the kind when changing the supported kinds", () => {
+    const { rerender } = render(
+      <KindInput
+        kinds={["local", "remote"]}
+        value={"local"}
+        onChange={onChange}
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveValue("local");
+    expect(onChange).not.toHaveBeenCalled();
+
+    rerender(
+      <KindInput
+        kinds={["sql-injection", "log-injection", "url-redirection"]}
+        value="local"
+        onChange={onChange}
+      />,
+    );
+    expect(screen.getByRole("combobox")).toHaveValue("sql-injection");
+    expect(onChange).toHaveBeenCalledWith("sql-injection");
+  });
+
+  it("sets the kind when value is undefined", () => {
+    render(
+      <KindInput
+        kinds={["local", "remote"]}
+        value={undefined}
+        onChange={onChange}
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveValue("local");
+    expect(onChange).toHaveBeenCalledWith("local");
+  });
+});

extensions/ql-vscode/src/view/model-editor/__tests__/MethodName.spec.tsx

@@ -14,4 +14,13 @@ describe(MethodName.name, () => {
     const name = `${method.packageName}.${method.typeName}.${method.methodName}${method.methodParameters}`;
     expect(screen.getByText(name)).toBeInTheDocument();
   });
+
+  it("renders method name without package name", () => {
+    const method = createMethod();
+    method.packageName = "";
+    render(method);
+
+    const name = `${method.typeName}.${method.methodName}${method.methodParameters}`;
+    expect(screen.getByText(name)).toBeInTheDocument();
+  });
 });

extensions/ql-vscode/src/view/model-editor/__tests__/ModelingStatusIndicator.spec.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { ModelingStatusIndicator } from "../ModelingStatusIndicator";
+
+describe(ModelingStatusIndicator.name, () => {
+  test.each([
+    {
+      status: "unmodeled",
+      text: "Method not modeled",
+    },
+    {
+      status: "unsaved",
+      text: "Changes have not been saved",
+    },
+    {
+      status: "saved",
+      text: "Method modeled",
+    },
+  ] as const)("renders %s status indicator", ({ status, text }) => {
+    render(<ModelingStatusIndicator status={status} />);
+    expect(screen.getByLabelText(text)).toBeVisible();
+  });
+});