Add tests for multiple modeled methods panel

extensions/ql-vscode/src/view/common/icon/CodiconButton.tsx

@@ -39,11 +39,11 @@ export const CodiconButton = ({
     onClick={onClick}
     className={className}
     disabled={disabled}
+    aria-label={label}
+    title={label}
   >
     <span
       role="img"
-      aria-label={label}
-      title={label}
       className={classNames("codicon", `codicon-${name}`, className)}
     />
   </StyledButton>

extensions/ql-vscode/src/view/method-modeling/ModeledMethodsPanel.tsx

@@ -5,7 +5,7 @@ import { Method } from "../../model-editor/method";
 import { styled } from "styled-components";
 import { MultipleModeledMethodsPanel } from "./MultipleModeledMethodsPanel";
 
-type Props = {
+export type ModeledMethodsPanelProps = {
   method: Method;
   modeledMethods: ModeledMethod[];
   showMultipleModels: boolean;
@@ -21,7 +21,7 @@ export const ModeledMethodsPanel = ({
   modeledMethods,
   showMultipleModels,
   onChange,
-}: Props) => {
+}: ModeledMethodsPanelProps) => {
   if (!showMultipleModels) {
     return (
       <SingleMethodModelingInputs

extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx

@@ -6,7 +6,7 @@ import { styled } from "styled-components";
 import { MethodModelingInputs } from "./MethodModelingInputs";
 import { CodiconButton } from "../common";
 
-type Props = {
+export type MultipleModeledMethodsPanelProps = {
   method: Method;
   modeledMethods: ModeledMethod[];
   onChange: (modeledMethod: ModeledMethod) => void;
@@ -36,7 +36,7 @@ export const MultipleModeledMethodsPanel = ({
   method,
   modeledMethods,
   onChange,
-}: Props) => {
+}: MultipleModeledMethodsPanelProps) => {
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
   const handlePreviousClick = useCallback(() => {

extensions/ql-vscode/src/view/method-modeling/__tests__/ModeledMethodsPanel.spec.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { render as reactRender, screen } from "@testing-library/react";
+import { createMethod } from "../../../../test/factories/model-editor/method-factories";
+import { createModeledMethod } from "../../../../test/factories/model-editor/modeled-method-factories";
+import {
+  ModeledMethodsPanel,
+  ModeledMethodsPanelProps,
+} from "../ModeledMethodsPanel";
+
+describe(ModeledMethodsPanel.name, () => {
+  const render = (props: ModeledMethodsPanelProps) =>
+    reactRender(<ModeledMethodsPanel {...props} />);
+
+  const method = createMethod();
+  const modeledMethods = [createModeledMethod(), createModeledMethod()];
+  const onChange = jest.fn();
+
+  describe("when show multiple models is disabled", () => {
+    const showMultipleModels = false;
+
+    it("renders the method modeling inputs", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+        showMultipleModels,
+      });
+
+      expect(screen.getAllByRole("combobox")).toHaveLength(4);
+    });
+
+    it("does not render the pagination", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+        showMultipleModels,
+      });
+
+      expect(
+        screen.queryByLabelText("Previous modeling"),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByLabelText("Next modeling")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when show multiple models is enabled", () => {
+    const showMultipleModels = true;
+
+    it("renders the method modeling inputs once", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+        showMultipleModels,
+      });
+
+      expect(screen.getAllByRole("combobox")).toHaveLength(4);
+    });
+
+    it("renders the pagination", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+        showMultipleModels,
+      });
+
+      expect(screen.getByLabelText("Previous modeling")).toBeInTheDocument();
+      expect(screen.getByLabelText("Next modeling")).toBeInTheDocument();
+      expect(screen.getByText("1/2")).toBeInTheDocument();
+    });
+  });
+});

extensions/ql-vscode/src/view/method-modeling/__tests__/MultipleModeledMethodsPanel.spec.tsx

@@ -0,0 +1,240 @@
+import * as React from "react";
+import { render as reactRender, screen } from "@testing-library/react";
+import { createMethod } from "../../../../test/factories/model-editor/method-factories";
+import { createModeledMethod } from "../../../../test/factories/model-editor/modeled-method-factories";
+import {
+  MultipleModeledMethodsPanel,
+  MultipleModeledMethodsPanelProps,
+} from "../MultipleModeledMethodsPanel";
+import userEvent from "@testing-library/user-event";
+import { ModeledMethod } from "../../../model-editor/modeled-method";
+
+describe(MultipleModeledMethodsPanel.name, () => {
+  const render = (props: MultipleModeledMethodsPanelProps) =>
+    reactRender(<MultipleModeledMethodsPanel {...props} />);
+
+  const method = createMethod();
+  const onChange = jest.fn();
+
+  describe("with no modeled methods", () => {
+    const modeledMethods: ModeledMethod[] = [];
+
+    it("renders the method modeling inputs once", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      expect(screen.getAllByRole("combobox")).toHaveLength(4);
+      expect(
+        screen.getByRole("combobox", {
+          name: "Model type",
+        }),
+      ).toHaveValue("none");
+    });
+
+    it("disables all pagination", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
+      expect(screen.getByLabelText("Next modeling")).toBeDisabled();
+      expect(screen.queryByText("0/0")).not.toBeInTheDocument();
+      expect(screen.queryByText("1/0")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("with one modeled method", () => {
+    const modeledMethods = [
+      createModeledMethod({
+        ...method,
+        type: "sink",
+        input: "Argument[this]",
+        output: "",
+        kind: "path-injection",
+      }),
+    ];
+
+    it("renders the method modeling inputs once", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      expect(screen.getAllByRole("combobox")).toHaveLength(4);
+      expect(
+        screen.getByRole("combobox", {
+          name: "Model type",
+        }),
+      ).toHaveValue("sink");
+    });
+
+    it("disables all pagination", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
+      expect(screen.getByLabelText("Next modeling")).toBeDisabled();
+      expect(screen.queryByText("1/1")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("with two modeled methods", () => {
+    const modeledMethods = [
+      createModeledMethod({
+        ...method,
+        type: "sink",
+        input: "Argument[this]",
+        output: "",
+        kind: "path-injection",
+      }),
+      createModeledMethod({
+        ...method,
+        type: "source",
+        input: "",
+        output: "ReturnValue",
+        kind: "remote",
+      }),
+    ];
+
+    it("renders the method modeling inputs once", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      expect(screen.getAllByRole("combobox")).toHaveLength(4);
+      expect(
+        screen.getByRole("combobox", {
+          name: "Model type",
+        }),
+      ).toHaveValue("sink");
+    });
+
+    it("renders the pagination", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      expect(screen.getByLabelText("Previous modeling")).toBeInTheDocument();
+      expect(screen.getByLabelText("Next modeling")).toBeInTheDocument();
+      expect(screen.getByText("1/2")).toBeInTheDocument();
+    });
+
+    it("disables the correct pagination", async () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
+      expect(screen.getByLabelText("Next modeling")).toBeEnabled();
+    });
+
+    it("can use the pagination", async () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      await userEvent.click(screen.getByLabelText("Next modeling"));
+
+      expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
+      expect(screen.getByLabelText("Next modeling")).toBeDisabled();
+      expect(screen.getByText("2/2")).toBeInTheDocument();
+
+      expect(
+        screen.getByRole("combobox", {
+          name: "Model type",
+        }),
+      ).toHaveValue("source");
+    });
+  });
+
+  describe("with three modeled methods", () => {
+    const modeledMethods = [
+      createModeledMethod({
+        ...method,
+        type: "sink",
+        input: "Argument[this]",
+        output: "",
+        kind: "path-injection",
+      }),
+      createModeledMethod({
+        ...method,
+        type: "source",
+        input: "",
+        output: "ReturnValue",
+        kind: "remote",
+      }),
+      createModeledMethod({
+        ...method,
+        type: "source",
+        input: "",
+        output: "ReturnValue",
+        kind: "local",
+      }),
+    ];
+
+    it("can use the pagination", async () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+      });
+
+      expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
+      expect(screen.getByLabelText("Next modeling")).toBeEnabled();
+      expect(screen.getByText("1/3")).toBeInTheDocument();
+
+      await userEvent.click(screen.getByLabelText("Next modeling"));
+
+      expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
+      expect(screen.getByLabelText("Next modeling")).toBeEnabled();
+      expect(screen.getByText("2/3")).toBeInTheDocument();
+
+      expect(
+        screen.getByRole("combobox", {
+          name: "Model type",
+        }),
+      ).toHaveValue("source");
+
+      await userEvent.click(screen.getByLabelText("Next modeling"));
+
+      expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
+      expect(screen.getByLabelText("Next modeling")).toBeDisabled();
+      expect(screen.getByText("3/3")).toBeInTheDocument();
+
+      expect(
+        screen.getByRole("combobox", {
+          name: "Kind",
+        }),
+      ).toHaveValue("local");
+
+      await userEvent.click(screen.getByLabelText("Previous modeling"));
+
+      expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
+      expect(screen.getByLabelText("Next modeling")).toBeEnabled();
+      expect(screen.getByText("2/3")).toBeInTheDocument();
+
+      expect(
+        screen.getByRole("combobox", {
+          name: "Kind",
+        }),
+      ).toHaveValue("remote");
+    });
+  });
+});