Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Focus retention on inputs #36770

Merged
merged 14 commits into from
Oct 9, 2024
Merged

fix: Focus retention on inputs #36770

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a45f423
fix: Focus Retention Inputs test
hetunandu Sep 30, 2024
0ef338d
Run limited test
hetunandu Sep 30, 2024
24aaad2
Merge branch 'release' into fix/maintain-focus-retention-test
hetunandu Sep 30, 2024
22af21d
Update limited-tests.txt
hetunandu Sep 30, 2024
121705b
Update with waituntil
sagar-qa007 Sep 30, 2024
6bcffd4
Merge remote-tracking branch 'origin/fix/maintain-focus-retention-tes…
hetunandu Sep 30, 2024
0fb823f
try with another assertion
hetunandu Oct 1, 2024
0299ace
Merge branch 'release' into fix/maintain-focus-retention-test
hetunandu Oct 1, 2024
e6dae22
change assertions to test
hetunandu Oct 1, 2024
e93db33
ready for merge
hetunandu Oct 2, 2024
43cc898
Merge branch 'release' into fix/maintain-focus-retention-test
hetunandu Oct 2, 2024
375ada5
Remove S3
hetunandu Oct 3, 2024
ef81c77
Merge branch 'release' into fix/maintain-focus-retention-test
hetunandu Oct 9, 2024
0638436
Avoid creating new workspace
hetunandu Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 46 additions & 61 deletions ...entSide/IDE/MaintainContext&Focus_spec.js → ...tSide/IDE/Focus_retentions_inputs_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import reconnectDatasourceModal from "../../../../locators/ReconnectLocators";
import {
agHelper,
apiPage,
dataSources,
homePage,
locators,
} from "../../../../support/Objects/ObjectsCore";
import EditorNavigation, {
PageLeftPane,
EntityType,
PagePaneSegment,
} from "../../../../support/Pages/EditorNavigation";

const apiwidget = require("../../../../locators/apiWidgetslocator.json");
const queryLocators = require("../../../../locators/QueryEditor.json");

describe("MaintainContext&Focus", { tags: ["@tag.IDE"] }, function () {
describe("Focus Retention of Inputs", { tags: ["@tag.IDE"] }, function () {
before("Import the test application", () => {
homePage.CreateNewWorkspace("MaintainContext&Focus", true);
homePage.ImportApp("ContextSwitching.json", "MaintainContext");
homePage.NavigateToHome();
homePage.ImportApp("ContextSwitching.json");
cy.wait("@importNewApplication").then((interception) => {
agHelper.Sleep();
const { isPartialImport } = interception.response.body.data;
Expand Down Expand Up @@ -46,26 +47,26 @@ describe("MaintainContext&Focus", { tags: ["@tag.IDE"] }, function () {

cy.focusCodeInput(".t--graphql-query-editor", { ch: 4, line: 1 });

EditorNavigation.SelectEntityByName("Rest_Api_1", EntityType.Api);
PageLeftPane.selectItem("Rest_Api_1");

cy.wait(1000);
cy.xpath("//span[contains(text(), 'Params')]").click();
cy.focusCodeInput(apiwidget.queryKey);
cy.wait("@saveAction");

EditorNavigation.SelectEntityByName("Rest_Api_2", EntityType.Api);
PageLeftPane.selectItem("Rest_Api_2");

cy.wait(1000);
cy.xpath("//span[contains(text(), 'Headers')]").click();
agHelper.GetNClick("//span[contains(text(), 'Headers')]", 0);
cy.updateCodeInput(apiwidget.headerValue, "test");
cy.wait("@saveAction");

EditorNavigation.SelectEntityByName("SQL_Query", EntityType.Query);
PageLeftPane.selectItem("SQL_Query");
cy.wait(1000);
cy.focusCodeInput(".t--actionConfiguration\\.body", { ch: 5, line: 0 });
cy.wait("@saveAction");

EditorNavigation.SelectEntityByName("S3_Query", EntityType.Query);
PageLeftPane.selectItem("S3_Query");

cy.wait(1000);
cy.focusCodeInput(".t--actionConfiguration\\.formData\\.bucket\\.data", {
Expand All @@ -75,25 +76,18 @@ describe("MaintainContext&Focus", { tags: ["@tag.IDE"] }, function () {
cy.wait(1000);
cy.wait("@saveAction");

EditorNavigation.SelectEntityByName("JSObject1", EntityType.JSObject);
PageLeftPane.switchSegment(PagePaneSegment.JS);

PageLeftPane.selectItem("JSObject1");

cy.wait(1000);
cy.focusCodeInput(".js-editor", { ch: 4, line: 4 });
cy.wait("@saveAction");

EditorNavigation.SelectEntityByName("JSObject2", EntityType.JSObject);
PageLeftPane.selectItem("JSObject2");

cy.wait(1000);
cy.focusCodeInput(".js-editor", { ch: 2, line: 2 });

EditorNavigation.SelectEntityByName("Mongo_Query", EntityType.Query);

cy.wait(1000);
dataSources.EnterJSContext({
fieldLabel: "Collection",
fieldValue: "TestCollection",
});
cy.wait("@saveAction");
});

it("2. Maintains focus on property/Api/Query/Js Pane", () => {
Expand All @@ -106,8 +100,14 @@ describe("MaintainContext&Focus", { tags: ["@tag.IDE"] }, function () {
line: 0,
});

PageLeftPane.switchSegment(PagePaneSegment.Queries);

//Maintains focus on the API pane
EditorNavigation.SelectEntityByName("Graphql_Query", EntityType.Api);
PageLeftPane.selectItem("Graphql_Query");

agHelper
.GetElement(locators._queryName)
.should("have.text", "Graphql_Query");

cy.xpath("//span[contains(text(), 'Body')]/parent::button").should(
"have.attr",
Expand All @@ -116,10 +116,20 @@ describe("MaintainContext&Focus", { tags: ["@tag.IDE"] }, function () {
);
cy.assertCursorOnCodeInput(".t--graphql-query-editor", { ch: 4, line: 1 });

EditorNavigation.SelectEntityByName("Rest_Api_1", EntityType.Api);
// cy.assertCursorOnCodeInput(apiwidget.headerValue);
PageLeftPane.selectItem("Rest_Api_1");

agHelper.GetElement(locators._queryName).should("have.text", "Rest_Api_1");

EditorNavigation.SelectEntityByName("Rest_Api_2", EntityType.Api);
cy.xpath("//span[contains(text(), 'Params')]/parent::button").should(
"have.attr",
"aria-selected",
"true",
);
cy.assertCursorOnCodeInput(apiwidget.queryKey, { ch: 0, line: 0 });

PageLeftPane.selectItem("Rest_Api_2");

agHelper.GetElement(locators._queryName).should("have.text", "Rest_Api_2");

cy.xpath("//span[contains(text(), 'Headers')]/parent::button").should(
"have.attr",
Expand All @@ -129,61 +139,35 @@ describe("MaintainContext&Focus", { tags: ["@tag.IDE"] }, function () {
cy.assertCursorOnCodeInput(apiwidget.headerValue);

//Maintains focus on Query panes
EditorNavigation.SelectEntityByName("SQL_Query", EntityType.Query);
PageLeftPane.selectItem("SQL_Query");

agHelper.GetElement(locators._queryName).should("have.text", "SQL_Query");

cy.assertCursorOnCodeInput(".t--actionConfiguration\\.body", {
ch: 5,
line: 0,
});

EditorNavigation.SelectEntityByName("S3_Query", EntityType.Query);
PageLeftPane.selectItem("S3_Query");

cy.assertCursorOnCodeInput(
".t--actionConfiguration\\.formData\\.bucket\\.data",
{ ch: 2, line: 0 },
);

// Removing as the Mongo collection is now converted to dropdown
// entityExplorer.SelectEntityByName("Mongo_Query");

// cy.assertCursorOnCodeInput(
// ".t--actionConfiguration\\.formData\\.collection\\.data",
// );
PageLeftPane.switchSegment(PagePaneSegment.JS);

//Maintains focus on JS Objects
EditorNavigation.SelectEntityByName("JSObject1", EntityType.JSObject);
PageLeftPane.selectItem("JSObject1");

cy.assertCursorOnCodeInput(".js-editor", { ch: 2, line: 4 });

EditorNavigation.SelectEntityByName("JSObject2", EntityType.JSObject);
PageLeftPane.selectItem("JSObject2");

cy.assertCursorOnCodeInput(".js-editor", { ch: 2, line: 2 });
});

it("3. Check if selected tab on right tab persists", () => {
EditorNavigation.SelectEntityByName("Rest_Api_1", EntityType.Api);
apiPage.SelectRightPaneTab("Connections");
EditorNavigation.SelectEntityByName("SQL_Query", EntityType.Query);
EditorNavigation.SelectEntityByName("Rest_Api_1", EntityType.Api);
apiPage.AssertRightPaneSelectedTab("Connections");

//Check if the URL is persisted while switching pages
cy.Createpage("Page2");

EditorNavigation.SelectEntityByName("Page1", EntityType.Page);
EditorNavigation.SelectEntityByName("Rest_Api_1", EntityType.Api);

EditorNavigation.SelectEntityByName("Page2", EntityType.Page);
cy.dragAndDropToCanvas("textwidget", { x: 300, y: 200 });

EditorNavigation.SelectEntityByName("Page1", EntityType.Page);
cy.get(".t--nameOfApi .bp3-editable-text-content").should(
"contain",
"Rest_Api_1",
);
});

it("4. Datasource edit mode has to be maintained", () => {
it("3. Datasource edit mode has to be maintained", () => {
EditorNavigation.SelectEntityByName("Appsmith", EntityType.Datasource);
dataSources.EditDatasource();
EditorNavigation.SelectEntityByName("Github", EntityType.Datasource);
Expand All @@ -192,7 +176,7 @@ describe("MaintainContext&Focus", { tags: ["@tag.IDE"] }, function () {
dataSources.AssertDSEditViewMode("Edit");
});

it("5. Maintain focus of form control inputs", () => {
it("4. Maintain focus of form control inputs", () => {
EditorNavigation.SelectEntityByName("SQL_Query", EntityType.Query);
dataSources.ToggleUsePreparedStatement(false);
EditorNavigation.SelectEntityByName("S3_Query", EntityType.Query);
Expand All @@ -202,14 +186,15 @@ describe("MaintainContext&Focus", { tags: ["@tag.IDE"] }, function () {

EditorNavigation.SelectEntityByName("SQL_Query", EntityType.Query);
cy.get(".bp3-editable-text-content").should("contain.text", "SQL_Query");
cy.get(".t--form-control-SWITCH input").should("be.focused");
cy.xpath(queryLocators.querySettingsTab).click();
agHelper.GetElement(dataSources._usePreparedStatement).should("be.focused");
EditorNavigation.SelectEntityByName("S3_Query", EntityType.Query);
agHelper.Sleep();
cy.xpath(queryLocators.querySettingsTab).click();
cy.xpath(queryLocators.queryTimeout).should("be.focused");
});

it("6. Bug 21999 Maintain focus of code editor when Escape is pressed with autcomplete open + Bug 22960", () => {
it("5. Bug 21999 Maintain focus of code editor when Escape is pressed with autcomplete open + Bug 22960", () => {
EditorNavigation.SelectEntityByName("JSObject1", EntityType.JSObject);

cy.assertCursorOnCodeInput(".js-editor", { ch: 2, line: 4 });
Expand Down
Loading