Skip to content

Commit 29aa4a3

Browse files
koesie10koesie10
committed
Add tests for multiple modeled methods panel
1 parent 3a494df commit 29aa4a3

File tree

5 files changed

+320
-6
lines changed

5 files changed

+320
-6
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ export const CodiconButton = ({
3939
onClick={onClick}
4040
className={className}
4141
disabled={disabled}
42+
aria-label={label}
43+
title={label}
4244
>
4345
<span
4446
role="img"
45-
aria-label={label}
46-
title={label}
4747
className={classNames("codicon", `codicon-${name}`, className)}
4848
/>
4949
</StyledButton>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Method } from "../../model-editor/method";
55
import { styled } from "styled-components";
66
import { MultipleModeledMethodsPanel } from "./MultipleModeledMethodsPanel";
77

8-
type Props = {
8+
export type ModeledMethodsPanelProps = {
99
method: Method;
1010
modeledMethods: ModeledMethod[];
1111
showMultipleModels: boolean;
@@ -21,7 +21,7 @@ export const ModeledMethodsPanel = ({
2121
modeledMethods,
2222
showMultipleModels,
2323
onChange,
24-
}: Props) => {
24+
}: ModeledMethodsPanelProps) => {
2525
if (!showMultipleModels) {
2626
return (
2727
<SingleMethodModelingInputs

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { styled } from "styled-components";
66
import { MethodModelingInputs } from "./MethodModelingInputs";
77
import { CodiconButton } from "../common";
88

9-
type Props = {
9+
export type MultipleModeledMethodsPanelProps = {
1010
method: Method;
1111
modeledMethods: ModeledMethod[];
1212
onChange: (modeledMethod: ModeledMethod) => void;
@@ -36,7 +36,7 @@ export const MultipleModeledMethodsPanel = ({
3636
method,
3737
modeledMethods,
3838
onChange,
39-
}: Props) => {
39+
}: MultipleModeledMethodsPanelProps) => {
4040
const [selectedIndex, setSelectedIndex] = useState<number>(0);
4141

4242
const handlePreviousClick = useCallback(() => {

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import * as React from "react";
2+
import { render as reactRender, screen } from "@testing-library/react";
3+
import { createMethod } from "../../../../test/factories/model-editor/method-factories";
4+
import { createModeledMethod } from "../../../../test/factories/model-editor/modeled-method-factories";
5+
import {
6+
ModeledMethodsPanel,
7+
ModeledMethodsPanelProps,
8+
} from "../ModeledMethodsPanel";
9+
10+
describe(ModeledMethodsPanel.name, () => {
11+
const render = (props: ModeledMethodsPanelProps) =>
12+
reactRender(<ModeledMethodsPanel {...props} />);
13+
14+
const method = createMethod();
15+
const modeledMethods = [createModeledMethod(), createModeledMethod()];
16+
const onChange = jest.fn();
17+
18+
describe("when show multiple models is disabled", () => {
19+
const showMultipleModels = false;
20+
21+
it("renders the method modeling inputs", () => {
22+
render({
23+
method,
24+
modeledMethods,
25+
onChange,
26+
showMultipleModels,
27+
});
28+
29+
expect(screen.getAllByRole("combobox")).toHaveLength(4);
30+
});
31+
32+
it("does not render the pagination", () => {
33+
render({
34+
method,
35+
modeledMethods,
36+
onChange,
37+
showMultipleModels,
38+
});
39+
40+
expect(
41+
screen.queryByLabelText("Previous modeling"),
42+
).not.toBeInTheDocument();
43+
expect(screen.queryByLabelText("Next modeling")).not.toBeInTheDocument();
44+
});
45+
});
46+
47+
describe("when show multiple models is enabled", () => {
48+
const showMultipleModels = true;
49+
50+
it("renders the method modeling inputs once", () => {
51+
render({
52+
method,
53+
modeledMethods,
54+
onChange,
55+
showMultipleModels,
56+
});
57+
58+
expect(screen.getAllByRole("combobox")).toHaveLength(4);
59+
});
60+
61+
it("renders the pagination", () => {
62+
render({
63+
method,
64+
modeledMethods,
65+
onChange,
66+
showMultipleModels,
67+
});
68+
69+
expect(screen.getByLabelText("Previous modeling")).toBeInTheDocument();
70+
expect(screen.getByLabelText("Next modeling")).toBeInTheDocument();
71+
expect(screen.getByText("1/2")).toBeInTheDocument();
72+
});
73+
});
74+
});

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

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
import * as React from "react";
2+
import { render as reactRender, screen } from "@testing-library/react";
3+
import { createMethod } from "../../../../test/factories/model-editor/method-factories";
4+
import { createModeledMethod } from "../../../../test/factories/model-editor/modeled-method-factories";
5+
import {
6+
MultipleModeledMethodsPanel,
7+
MultipleModeledMethodsPanelProps,
8+
} from "../MultipleModeledMethodsPanel";
9+
import userEvent from "@testing-library/user-event";
10+
import { ModeledMethod } from "../../../model-editor/modeled-method";
11+
12+
describe(MultipleModeledMethodsPanel.name, () => {
13+
const render = (props: MultipleModeledMethodsPanelProps) =>
14+
reactRender(<MultipleModeledMethodsPanel {...props} />);
15+
16+
const method = createMethod();
17+
const onChange = jest.fn();
18+
19+
describe("with no modeled methods", () => {
20+
const modeledMethods: ModeledMethod[] = [];
21+
22+
it("renders the method modeling inputs once", () => {
23+
render({
24+
method,
25+
modeledMethods,
26+
onChange,
27+
});
28+
29+
expect(screen.getAllByRole("combobox")).toHaveLength(4);
30+
expect(
31+
screen.getByRole("combobox", {
32+
name: "Model type",
33+
}),
34+
).toHaveValue("none");
35+
});
36+
37+
it("disables all pagination", () => {
38+
render({
39+
method,
40+
modeledMethods,
41+
onChange,
42+
});
43+
44+
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
45+
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
46+
expect(screen.queryByText("0/0")).not.toBeInTheDocument();
47+
expect(screen.queryByText("1/0")).not.toBeInTheDocument();
48+
});
49+
});
50+
51+
describe("with one modeled method", () => {
52+
const modeledMethods = [
53+
createModeledMethod({
54+
...method,
55+
type: "sink",
56+
input: "Argument[this]",
57+
output: "",
58+
kind: "path-injection",
59+
}),
60+
];
61+
62+
it("renders the method modeling inputs once", () => {
63+
render({
64+
method,
65+
modeledMethods,
66+
onChange,
67+
});
68+
69+
expect(screen.getAllByRole("combobox")).toHaveLength(4);
70+
expect(
71+
screen.getByRole("combobox", {
72+
name: "Model type",
73+
}),
74+
).toHaveValue("sink");
75+
});
76+
77+
it("disables all pagination", () => {
78+
render({
79+
method,
80+
modeledMethods,
81+
onChange,
82+
});
83+
84+
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
85+
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
86+
expect(screen.queryByText("1/1")).not.toBeInTheDocument();
87+
});
88+
});
89+
90+
describe("with two modeled methods", () => {
91+
const modeledMethods = [
92+
createModeledMethod({
93+
...method,
94+
type: "sink",
95+
input: "Argument[this]",
96+
output: "",
97+
kind: "path-injection",
98+
}),
99+
createModeledMethod({
100+
...method,
101+
type: "source",
102+
input: "",
103+
output: "ReturnValue",
104+
kind: "remote",
105+
}),
106+
];
107+
108+
it("renders the method modeling inputs once", () => {
109+
render({
110+
method,
111+
modeledMethods,
112+
onChange,
113+
});
114+
115+
expect(screen.getAllByRole("combobox")).toHaveLength(4);
116+
expect(
117+
screen.getByRole("combobox", {
118+
name: "Model type",
119+
}),
120+
).toHaveValue("sink");
121+
});
122+
123+
it("renders the pagination", () => {
124+
render({
125+
method,
126+
modeledMethods,
127+
onChange,
128+
});
129+
130+
expect(screen.getByLabelText("Previous modeling")).toBeInTheDocument();
131+
expect(screen.getByLabelText("Next modeling")).toBeInTheDocument();
132+
expect(screen.getByText("1/2")).toBeInTheDocument();
133+
});
134+
135+
it("disables the correct pagination", async () => {
136+
render({
137+
method,
138+
modeledMethods,
139+
onChange,
140+
});
141+
142+
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
143+
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
144+
});
145+
146+
it("can use the pagination", async () => {
147+
render({
148+
method,
149+
modeledMethods,
150+
onChange,
151+
});
152+
153+
await userEvent.click(screen.getByLabelText("Next modeling"));
154+
155+
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
156+
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
157+
expect(screen.getByText("2/2")).toBeInTheDocument();
158+
159+
expect(
160+
screen.getByRole("combobox", {
161+
name: "Model type",
162+
}),
163+
).toHaveValue("source");
164+
});
165+
});
166+
167+
describe("with three modeled methods", () => {
168+
const modeledMethods = [
169+
createModeledMethod({
170+
...method,
171+
type: "sink",
172+
input: "Argument[this]",
173+
output: "",
174+
kind: "path-injection",
175+
}),
176+
createModeledMethod({
177+
...method,
178+
type: "source",
179+
input: "",
180+
output: "ReturnValue",
181+
kind: "remote",
182+
}),
183+
createModeledMethod({
184+
...method,
185+
type: "source",
186+
input: "",
187+
output: "ReturnValue",
188+
kind: "local",
189+
}),
190+
];
191+
192+
it("can use the pagination", async () => {
193+
render({
194+
method,
195+
modeledMethods,
196+
onChange,
197+
});
198+
199+
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
200+
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
201+
expect(screen.getByText("1/3")).toBeInTheDocument();
202+
203+
await userEvent.click(screen.getByLabelText("Next modeling"));
204+
205+
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
206+
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
207+
expect(screen.getByText("2/3")).toBeInTheDocument();
208+
209+
expect(
210+
screen.getByRole("combobox", {
211+
name: "Model type",
212+
}),
213+
).toHaveValue("source");
214+
215+
await userEvent.click(screen.getByLabelText("Next modeling"));
216+
217+
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
218+
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
219+
expect(screen.getByText("3/3")).toBeInTheDocument();
220+
221+
expect(
222+
screen.getByRole("combobox", {
223+
name: "Kind",
224+
}),
225+
).toHaveValue("local");
226+
227+
await userEvent.click(screen.getByLabelText("Previous modeling"));
228+
229+
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
230+
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
231+
expect(screen.getByText("2/3")).toBeInTheDocument();
232+
233+
expect(
234+
screen.getByRole("combobox", {
235+
name: "Kind",
236+
}),
237+
).toHaveValue("remote");
238+
});
239+
});
240+
});

0 commit comments

Comments
 (0)