N21-2052 adjust ctl autocomplete

src/components/external-tools/configuration/ExternalToolConfigurator.unit.ts

@@ -1,9 +1,14 @@
 import * as useExternalToolUtilsComposable from "@/composables/external-tool-mappings.composable";
-import { SchoolExternalTool } from "@/store/external-tool";
+import {
+	SchoolExternalTool,
+	ToolParameter,
+	ToolParameterLocation,
+} from "@/store/external-tool";
 import { BusinessError } from "@/store/types/commons";
 import {
 	schoolExternalToolConfigurationTemplateFactory,
 	schoolExternalToolFactory,
+	toolParameterFactory,
 } from "@@/tests/test-utils/factory";
 import {
 	createTestingI18n,
@@ -16,6 +21,7 @@ import {
 import { mount, VueWrapper } from "@vue/test-utils";
 import { VBtn } from "vuetify/lib/components/index.mjs";
 import ExternalToolConfigurator from "./ExternalToolConfigurator.vue";
+import { DeepPartial } from "fishery";
 
 describe("ExternalToolConfigurator", () => {
 	jest
@@ -47,7 +53,8 @@ describe("ExternalToolConfigurator", () => {
 		jest.clearAllMocks();
 	});
 
-	describe("autocomplete", () => {
+	// TODO: new tests for combobox
+	describe("combobox", () => {
 		describe("when selecting a new configuration", () => {
 			const setup = () => {
 				const template = schoolExternalToolConfigurationTemplateFactory.build({
@@ -129,44 +136,235 @@ describe("ExternalToolConfigurator", () => {
 			it("should display the edited tool in the selection", async () => {
 				const { wrapper, template } = setup();
 
-				const selectionRow = wrapper.find(".v-autocomplete .v-list-item-title");
+				const selectionRow = wrapper.find(".v-combobox .v-list-item-title");
 
 				expect(selectionRow.text()).toEqual(template.name);
 			});
 		});
-	});
 
-	describe("cancel button", () => {
-		describe("when clicking the cancel button", () => {
-			it("should emit the cancel event", async () => {
+		describe("when inputting an url which matches the baseUrl of a tool", () => {
+			const setup = () => {
+				const templates = [];
+				templates.push(schoolExternalToolConfigurationTemplateFactory.build());
+				templates.push(schoolExternalToolConfigurationTemplateFactory.build());
+
 				const { wrapper } = getWrapper({
-					templates:
-						schoolExternalToolConfigurationTemplateFactory.buildList(1),
+					templates: templates,
 				});
 
-				await wrapper
-					.findComponent<typeof VBtn>('[data-testId="cancel-button"]')
-					.trigger("click");
+				const openSelect = async (wrapper: VueWrapper) => {
+					await wrapper
+						.find('[data-testId="configuration-select"]')
+						.trigger("click");
+				};
+
+				return {
+					wrapper,
+					templates,
+					openSelect,
+				};
+			};
+
+			const getSelectionItems = (wrapper: VueWrapper) => {
+				return [];
+			};
+
+			it("should display only the matched tool in the selection", async () => {
+				const { wrapper, templates, openSelect } = setup();
+				await openSelect(wrapper);
+
+				const selectInputField = wrapper.get("input");
+				const inputUrl = templates[0].baseUrl;
+				await selectInputField.setValue(inputUrl);
+
+				const selectionItems = getSelectionItems(wrapper);
 
-				expect(wrapper.emitted("cancel")).toBeDefined();
+				expect(selectionItems).toEqual(1);
+				// 	TODO: precise baseURL expects
 			});
 		});
-	});
 
-	describe("save button", () => {
-		describe("when clicking the save button", () => {
-			it("should emit the save event", async () => {
+		describe("when inputting an url with path params", () => {
+			const createBaseUrlWithPathParams = (
+				template: ExternalToolConfigurationTemplate
+			): string => {
+				let url = template.baseUrl;
+				template.parameters.forEach((parameter) => {
+					url += `/:${parameter.name}`;
+				});
+				url += "/";
+				return url;
+			};
+
+			const setup = () => {
+				const pathParams = [];
+				const pathParamConfig: DeepPartial<ToolParameter> = {
+					location: ToolParameterLocation.PATH,
+				};
+				pathParams.push(toolParameterFactory.build(pathParamConfig));
+				pathParams.push(toolParameterFactory.build(pathParamConfig));
+
+				const templates = [];
+				const templateWithParam =
+					schoolExternalToolConfigurationTemplateFactory.build({
+						parameters: pathParams,
+					});
+				templateWithParam.baseUrl =
+					createBaseUrlWithPathParams(templateWithParam);
+				templates.push(templateWithParam);
+				templates.push(schoolExternalToolConfigurationTemplateFactory.build());
+
 				const { wrapper } = getWrapper({
-					templates:
-						schoolExternalToolConfigurationTemplateFactory.buildList(1),
+					templates: templates,
 					configuration: schoolExternalToolFactory.build(),
 				});
 
-				await wrapper
-					.findComponent<typeof VBtn>('[data-testId="save-button"]')
-					.trigger("click");
+				const openSelect = async (wrapper: VueWrapper) => {
+					await wrapper
+						.find('[data-testId="configuration-select"]')
+						.trigger("click");
+				};
+
+				return {
+					wrapper,
+					templates,
+					openSelect,
+				};
+			};
+
+			it("should set path parameters values from inputted url in the configuration fields", async () => {
+				const { wrapper, templates, openSelect } = setup();
+				await openSelect(wrapper);
+
+				const selectInputField = wrapper.get("input");
+				const testPathParams = ["test-2", "test-1"];
+				const baseUrlParts = templates[0].baseUrl.split("/");
+				const inputUrlParts: string[] = [];
+				baseUrlParts.forEach((part) => {
+					let inputPart = part;
+					if (part.startsWith(":")) {
+						inputPart = testPathParams.pop() ?? "test";
+					}
+					inputUrlParts.push(inputPart);
+				});
+				const inputUrl = inputUrlParts.join("/");
+				await selectInputField.setValue(inputUrl);
+
+				// somehow click on the selection?
 
-				expect(wrapper.emitted("save")).toBeDefined();
+				const configFields = wrapper.findAll(
+					'[data-testId="configuration-field"]'
+				);
+				configFields.forEach((field) => {
+					const input = field.find("v-field__input");
+					expect(input.text()).toEqual("test-1");
+				});
+			});
+		});
+
+		describe("when inputting an url with query parameters", () => {
+			const setup = () => {
+				const queryParams = [];
+				const queryParamConfig: DeepPartial<ToolParameter> = {
+					location: ToolParameterLocation.QUERY,
+				};
+				queryParams.push(toolParameterFactory.build(queryParamConfig));
+
+				const templates = [];
+				templates.push(
+					schoolExternalToolConfigurationTemplateFactory.build({
+						parameters: queryParams,
+					})
+				);
+				templates.push(schoolExternalToolConfigurationTemplateFactory.build());
+
+				const { wrapper } = getWrapper({
+					templates: templates,
+					configuration: schoolExternalToolFactory.build(),
+				});
+
+				const openSelect = async (wrapper: VueWrapper) => {
+					await wrapper
+						.find('[data-testId="configuration-select"]')
+						.trigger("click");
+				};
+
+				const createInputUrlFromTemplate = (
+					template: ExternalToolConfigurationTemplate
+				) => {
+					const testPathParams = ["test-2", "test-1"];
+					let queryString = "";
+					template.parameters.forEach((parameter, index) => {
+						if (index > 0) {
+							queryString += "&";
+						}
+						queryString += `${parameter.name}=${testPathParams[index]}`;
+					});
+					return template.baseUrl + "?" + queryString;
+				};
+
+				return {
+					wrapper,
+					templates,
+					openSelect,
+					createInputUrlFromTemplate,
+				};
+			};
+
+			it("should set query parameters values from inputted url in the configuration fields", async () => {
+				const { wrapper, templates, openSelect, createInputUrlFromTemplate } =
+					setup();
+				await openSelect(wrapper);
+
+				const inputUrl = createInputUrlFromTemplate(templates[0]);
+
+				const selectInputField = wrapper.get("input");
+				await selectInputField.setValue(inputUrl);
+
+				// somehow click on the selection?
+
+				const configFields = wrapper.findAll(
+					'[data-testId="configuration-field"]'
+				);
+				configFields.forEach((field) => {
+					const input = field.find("v-field__input");
+					expect(input.text()).toEqual("test-1");
+				});
+			});
+		});
+
+		describe("cancel button", () => {
+			describe("when clicking the cancel button", () => {
+				it("should emit the cancel event", async () => {
+					const { wrapper } = getWrapper({
+						templates:
+							schoolExternalToolConfigurationTemplateFactory.buildList(1),
+					});
+
+					await wrapper
+						.findComponent<typeof VBtn>('[data-testId="cancel-button"]')
+						.trigger("click");
+
+					expect(wrapper.emitted("cancel")).toBeDefined();
+				});
+			});
+		});
+
+		describe("save button", () => {
+			describe("when clicking the save button", () => {
+				it("should emit the save event", async () => {
+					const { wrapper } = getWrapper({
+						templates:
+							schoolExternalToolConfigurationTemplateFactory.buildList(1),
+						configuration: schoolExternalToolFactory.build(),
+					});
+
+					await wrapper
+						.findComponent<typeof VBtn>('[data-testId="save-button"]')
+						.trigger("click");
+
+					expect(wrapper.emitted("save")).toBeDefined();
+				});
 			});
 		});
 	});