From 12d18fa46c81d2ddedcd825f61bea925d6472fd8 Mon Sep 17 00:00:00 2001 From: barredterra <14891507+barredterra@users.noreply.github.com> Date: Mon, 20 May 2024 15:54:26 +0200 Subject: [PATCH 1/3] perf: undebounce autocomplete --- .../js/frappe/form/controls/autocomplete.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/frappe/public/js/frappe/form/controls/autocomplete.js b/frappe/public/js/frappe/form/controls/autocomplete.js index 344320c468..beb951a567 100644 --- a/frappe/public/js/frappe/form/controls/autocomplete.js +++ b/frappe/public/js/frappe/form/controls/autocomplete.js @@ -90,16 +90,13 @@ frappe.ui.form.ControlAutocomplete = class ControlAutoComplete extends frappe.ui $(this.input_area).find(".awesomplete ul").css("min-width", "100%"); - this.$input.on( - "input", - frappe.utils.debounce((e) => { - if (this.get_query || this.df.get_query) { - this.execute_query_if_exists(e.target.value); - } else { - this.awesomplete.list = this.get_data(); - } - }, 500) - ); + this.$input.on("input", (e) => { + if (this.get_query || this.df.get_query) { + this.execute_query_if_exists(e.target.value); + } else { + this.awesomplete.list = this.get_data(); + } + }); this.$input.on("focus", () => { if (!this.$input.val()) { From cc4d369e3fb2ab5b7bc5b22fd941595558af583e Mon Sep 17 00:00:00 2001 From: barredterra <14891507+barredterra@users.noreply.github.com> Date: Fri, 24 May 2024 12:25:29 +0200 Subject: [PATCH 2/3] test: refactor autocomplete cypress test --- cypress/integration/control_autocomplete.js | 27 +++++++++------------ 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/cypress/integration/control_autocomplete.js b/cypress/integration/control_autocomplete.js index 6dc57fcf43..efb554ca5b 100644 --- a/cypress/integration/control_autocomplete.js +++ b/cypress/integration/control_autocomplete.js @@ -1,11 +1,13 @@ context("Control Autocomplete", () => { before(() => { cy.login(); - cy.visit("/app/website"); + cy.visit("/app"); }); function get_dialog_with_autocomplete(options) { - cy.visit("/app/website"); + cy.visit("/app"); + cy.wait(1000); // wait for the workspace to load + return cy.dialog({ title: "Autocomplete", fields: [ @@ -22,16 +24,14 @@ context("Control Autocomplete", () => { it("should set the valid value", () => { get_dialog_with_autocomplete().as("dialog"); - cy.get(".frappe-control[data-fieldname=autocomplete] input").focus().as("input"); - cy.wait(1000); - cy.get("@input").type("2", { delay: 300 }); + cy.get(".frappe-control[data-fieldname=autocomplete] input").as("input"); + cy.get("@input").focus(); cy.get(".frappe-control[data-fieldname=autocomplete]") .findByRole("listbox") .should("be.visible"); - cy.get(".frappe-control[data-fieldname=autocomplete] input").type("{enter}", { - delay: 300, - }); - cy.get(".frappe-control[data-fieldname=autocomplete] input").blur(); + cy.get("@input").type("2", { delay: 300 }).type("{enter}", { delay: 300 }); + cy.wait(500); + cy.get("@input").blur(); cy.get("@dialog").then((dialog) => { let value = dialog.get_value("autocomplete"); expect(value).to.eq("Option 2"); @@ -46,15 +46,12 @@ context("Control Autocomplete", () => { ]; get_dialog_with_autocomplete(options_with_label).as("dialog"); - cy.get(".frappe-control[data-fieldname=autocomplete] input").focus().as("input"); + cy.get(".frappe-control[data-fieldname=autocomplete] input").as("input"); + cy.get("@input").focus(); cy.get(".frappe-control[data-fieldname=autocomplete]") .findByRole("listbox") .should("be.visible"); - cy.get("@input").type("2", { delay: 300 }); - cy.get(".frappe-control[data-fieldname=autocomplete] input").type("{enter}", { - delay: 300, - }); - cy.get(".frappe-control[data-fieldname=autocomplete] input").blur(); + cy.get("@input").type("2{enter}", { delay: 300 }).blur(); cy.get("@dialog").then((dialog) => { let value = dialog.get_value("autocomplete"); expect(value).to.eq("option_2"); From c31cd09040744143f22db65aa0f29d335f0ca422 Mon Sep 17 00:00:00 2001 From: barredterra <14891507+barredterra@users.noreply.github.com> Date: Thu, 20 Jun 2024 17:22:58 +0200 Subject: [PATCH 3/3] test: awesomplete --- cypress/integration/control_autocomplete.js | 46 +++++++++------------ 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/cypress/integration/control_autocomplete.js b/cypress/integration/control_autocomplete.js index efb554ca5b..4fc825f80d 100644 --- a/cypress/integration/control_autocomplete.js +++ b/cypress/integration/control_autocomplete.js @@ -2,60 +2,52 @@ context("Control Autocomplete", () => { before(() => { cy.login(); cy.visit("/app"); + cy.wait(4000); }); - function get_dialog_with_autocomplete(options) { - cy.visit("/app"); - cy.wait(1000); // wait for the workspace to load - + const get_dialog_with_autocomplete = (fieldname, options) => { return cy.dialog({ title: "Autocomplete", fields: [ { label: "Select an option", - fieldname: "autocomplete", + fieldname: fieldname, fieldtype: "Autocomplete", - options: options || ["Option 1", "Option 2", "Option 3"], + options: options, }, ], }); - } + }; it("should set the valid value", () => { - get_dialog_with_autocomplete().as("dialog"); - - cy.get(".frappe-control[data-fieldname=autocomplete] input").as("input"); - cy.get("@input").focus(); - cy.get(".frappe-control[data-fieldname=autocomplete]") - .findByRole("listbox") - .should("be.visible"); - cy.get("@input").type("2", { delay: 300 }).type("{enter}", { delay: 300 }); + const fieldname = "autocomplete_1"; + get_dialog_with_autocomplete(fieldname, ["Option 1", "Option 2", "Option 3"]).as("dialog"); + cy.get(`.control-input > .awesomplete > input[data-fieldname=${fieldname}]`).as("input"); cy.wait(500); - cy.get("@input").blur(); + cy.get("@input").type("2{enter}", { delay: 300 }); cy.get("@dialog").then((dialog) => { - let value = dialog.get_value("autocomplete"); + let value = dialog.get_value(fieldname); expect(value).to.eq("Option 2"); dialog.clear(); + dialog.hide(); }); }); it("should set the valid value with different label", () => { - const options_with_label = [ + const fieldname = "autocomplete_2"; + get_dialog_with_autocomplete(fieldname, [ { label: "Option 1", value: "option_1" }, { label: "Option 2", value: "option_2" }, - ]; - get_dialog_with_autocomplete(options_with_label).as("dialog"); + ]).as("dialog"); - cy.get(".frappe-control[data-fieldname=autocomplete] input").as("input"); - cy.get("@input").focus(); - cy.get(".frappe-control[data-fieldname=autocomplete]") - .findByRole("listbox") - .should("be.visible"); - cy.get("@input").type("2{enter}", { delay: 300 }).blur(); + cy.get(`.control-input > .awesomplete > input[data-fieldname=${fieldname}]`).as("input"); + cy.wait(500); + cy.get("@input").type("2{enter}", { delay: 300 }); cy.get("@dialog").then((dialog) => { - let value = dialog.get_value("autocomplete"); + let value = dialog.get_value(fieldname); expect(value).to.eq("option_2"); dialog.clear(); + dialog.hide(); }); }); });