chore: Enable Auto layout git cypress tests and using more module methods in Autolayout tests (#24324)

## Description
This PR fixes the final review comments in this
[PR](https://github.com/appsmithorg/appsmith/pull/23702).
And Enables Git connected Auto layout tests

#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)


## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
This commit is contained in:
rahulramesha 2023-06-10 12:31:39 +05:30 committed by GitHub
parent 1c06486bb5
commit c2edc8a37a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 127 additions and 128 deletions

View File

@ -1,4 +1,11 @@
import * as _ from "../../../../../support/Objects/ObjectsCore"; import {
homePage,
agHelper,
autoLayout,
gitSync,
entityExplorer,
draggableWidgets,
} from "../../../../../support/Objects/ObjectsCore";
let parentBranchKey = "ParentBranch", let parentBranchKey = "ParentBranch",
childBranchKey = "ChildBranch"; childBranchKey = "ChildBranch";
@ -6,77 +13,73 @@ let parentBranchKey = "ParentBranch",
let repoName; let repoName;
describe("Git sync:", function () { describe("Git sync:", function () {
before(() => { before(() => {
_.homePage.NavigateToHome(); homePage.NavigateToHome();
_.agHelper.GenerateUUID(); agHelper.GenerateUUID();
cy.get("@guid").then((uid) => { cy.get("@guid").then((uid) => {
_.homePage.CreateNewWorkspace("AutoLayoutGit" + uid); homePage.CreateNewWorkspace("AutoLayoutGit" + uid);
_.homePage.CreateAppInWorkspace("AutoLayoutGit" + uid); homePage.CreateAppInWorkspace("AutoLayoutGit" + uid);
}); });
_.gitSync.CreateNConnectToGit(); gitSync.CreateNConnectToGit();
cy.get("@gitRepoName").then((repName) => { cy.get("@gitRepoName").then((repName) => {
repoName = repName; repoName = repName;
}); });
cy.wait(3000); cy.wait(3000);
_.gitSync.CreateGitBranch(parentBranchKey, true); gitSync.CreateGitBranch(parentBranchKey, true);
cy.get("@gitbranchName").then((branName) => { cy.get("@gitbranchName").then((branName) => {
parentBranchKey = branName; parentBranchKey = branName;
}); });
_.gitSync.CreateGitBranch(childBranchKey, true); gitSync.CreateGitBranch(childBranchKey, true);
cy.get("@gitbranchName").then((branName) => { cy.get("@gitbranchName").then((branName) => {
childBranchKey = branName; childBranchKey = branName;
}); });
}); });
it("1. when snapshot is restored from a page created before Conversion, it should refresh in the same page", () => { it("1. when snapshot is restored from a page created before Conversion, it should refresh in the same page", () => {
_.entityExplorer.DragDropWidgetNVerify( entityExplorer.DragDropWidgetNVerify(draggableWidgets.CONTAINER, 100, 100);
_.draggableWidgets.CONTAINER,
100,
100,
);
_.entityExplorer.AddNewPage("New blank page"); entityExplorer.AddNewPage("New blank page");
_.autoLayout.ConvertToAutoLayoutAndVerify(); autoLayout.ConvertToAutoLayoutAndVerify();
_.autoLayout.UseSnapshotFromBanner(); autoLayout.UseSnapshotFromBanner();
_.entityExplorer.VerifyIsCurrentPage("Page2"); entityExplorer.VerifyIsCurrentPage("Page2");
_.entityExplorer.SelectEntityByName("Page1", "Pages"); entityExplorer.SelectEntityByName("Page1", "Pages");
cy.wait(1000); agHelper.Sleep();
_.entityExplorer.ActionContextMenuByEntityName("Page2"); entityExplorer.ActionContextMenuByEntityName("Page2");
}); });
//Skipped these tests as they seemed to have regressed again, will enable them once it is fixed. #22956 it("2. when snapshot is restored from a page created after Conversion, it should redirected to home page", () => {
it.skip("2. when snapshot is restored from a page created after Conversion, it should redirected to home page", () => { autoLayout.ConvertToAutoLayoutAndVerify();
_.autoLayout.ConvertToAutoLayoutAndVerify();
_.entityExplorer.AddNewPage("New blank page"); entityExplorer.AddNewPage("New blank page");
_.autoLayout.UseSnapshotFromBanner(); autoLayout.UseSnapshotFromBanner();
_.entityExplorer.VerifyIsCurrentPage("Page1"); entityExplorer.VerifyIsCurrentPage("Page1");
}); });
//Skipped these tests as they seemed to have regressed again, will enable them once it is fixed. #22956 it("3. Switch to parentBranch and when snapshot is restored from a page created after Conversion, it should redirected to home page", () => {
it.skip("3. Switch to parentBranch and when snapshot is restored from a page created after Conversion, it should redirected to home page", () => {
cy.switchGitBranch(parentBranchKey); cy.switchGitBranch(parentBranchKey);
_.autoLayout.ConvertToAutoLayoutAndVerify(); entityExplorer.DragDropWidgetNVerify(draggableWidgets.CONTAINER, 100, 100);
_.entityExplorer.AddNewPage("New blank page"); autoLayout.ConvertToAutoLayoutAndVerify();
_.autoLayout.useSnapshotFromBanner(); entityExplorer.AddNewPage("New blank page");
_.entityExplorer.VerifyIsCurrentPage("Page1"); autoLayout.UseSnapshotFromBanner();
entityExplorer.VerifyIsCurrentPage("Page1");
}); });
after(() => { after(() => {
_.gitSync.DeleteTestGithubRepo(repoName); gitSync.DeleteTestGithubRepo(repoName);
}); });
}); });

View File

@ -1,183 +1,179 @@
import * as _ from "../../../../support/Objects/ObjectsCore"; import {
autoLayout,
agHelper,
locators,
draggableWidgets,
} from "../../../../support/Objects/ObjectsCore";
describe("Copy paste widget related tests for Auto layout", () => { describe("Copy paste widget related tests for Auto layout", () => {
const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl"; const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl";
before(() => { before(() => {
_.autoLayout.ConvertToAutoLayoutAndVerify(false); autoLayout.ConvertToAutoLayoutAndVerify(false);
cy.wait(2000); agHelper.Sleep(2000);
cy.fixture("autoLayoutCopyPaste").then((val) => { cy.fixture("autoLayoutCopyPaste").then((val) => {
_.agHelper.AddDsl(val); agHelper.AddDsl(val);
}); });
}); });
it("1. Should paste at the bottom of the canvas that contains the selected widget", () => { it("1. Should paste at the bottom of the canvas that contains the selected widget", () => {
_.agHelper.GetNClick( agHelper.GetNClick(locators._widgetInDeployed(draggableWidgets.BUTTON), 0);
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), agHelper.AssertElementLength(locators._selectedWidget, 1);
0,
);
_.agHelper.AssertElementLength(_.locators._selectedWidget, 1);
//copying first button in first layer, which is center aligned //copying first button in first layer, which is center aligned
_.agHelper.GetElement("body").type(`{${modifierKey}}{c}`); agHelper.GetElement("body").type(`{${modifierKey}}{c}`);
_.agHelper.GetElement(_.locators._toastMsg).contains("Copied"); agHelper.GetElement(locators._toastMsg).contains("Copied");
//paste //paste
_.agHelper.GetElement("body").type(`{${modifierKey}}{v}`); agHelper.GetElement("body").type(`{${modifierKey}}{v}`);
cy.wait(1000); cy.wait(1000);
//verify button widget pastes inside the container, in layer index 3 and is center aligned //verify button widget pastes inside the container, in layer index 3 and is center aligned
_.autoLayout.VerifyIfChildWidgetPositionInFlexContainer( autoLayout.VerifyIfChildWidgetPositionInFlexContainer(
_.locators._widgetInDeployed(_.draggableWidgets.CONTAINER), locators._widgetInDeployed(draggableWidgets.CONTAINER),
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
3, 3,
"CENTER", "CENTER",
); );
//unselect all widgets //unselect all widgets
_.agHelper.GetNClick(_.locators._selectionCanvas("0"), 0, true); agHelper.GetNClick(locators._selectionCanvas("0"), 0, true);
}); });
it("2. Should paste at the bottom of the canvas of the selected Container", () => { it("2. Should paste at the bottom of the canvas of the selected Container", () => {
_.agHelper.GetNClick( agHelper.GetNClick(locators._widgetInDeployed(draggableWidgets.BUTTON), 1);
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), agHelper.AssertElementLength(locators._selectedWidget, 1);
1,
);
_.agHelper.AssertElementLength(_.locators._selectedWidget, 1);
//copying second button in first layer, which is end aligned //copying second button in first layer, which is end aligned
_.agHelper.GetElement("body").type(`{${modifierKey}}{c}`); agHelper.GetElement("body").type(`{${modifierKey}}{c}`);
_.agHelper.GetElement(_.locators._toastMsg).contains("Copied"); agHelper.GetElement(locators._toastMsg).contains("Copied");
_.agHelper.GetNClick( agHelper.GetNClick(
_.locators._widgetInDeployed(_.draggableWidgets.CONTAINER), locators._widgetInDeployed(draggableWidgets.CONTAINER),
0, 0,
); );
//paste //paste
_.agHelper.GetElement("body").type(`{${modifierKey}}{v}`); agHelper.GetElement("body").type(`{${modifierKey}}{v}`);
cy.wait(1000); agHelper.Sleep(1000);
//verify button widget pastes inside selected the container, in layer index 4 and is end aligned //verify button widget pastes inside selected the container, in layer index 4 and is end aligned
_.autoLayout.VerifyIfChildWidgetPositionInFlexContainer( autoLayout.VerifyIfChildWidgetPositionInFlexContainer(
_.locators._widgetInDeployed(_.draggableWidgets.CONTAINER), locators._widgetInDeployed(draggableWidgets.CONTAINER),
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
4, 4,
"END", "END",
); );
//unselect all widgets //unselect all widgets
_.agHelper.GetNClick(_.locators._selectionCanvas("0"), 0, true); agHelper.GetNClick(locators._selectionCanvas("0"), 0, true);
}); });
it("3. Should paste at the bottom of the main canvas when no widget is selected", () => { it("3. Should paste at the bottom of the main canvas when no widget is selected", () => {
_.agHelper.GetNClick( agHelper.GetNClick(locators._widgetInDeployed(draggableWidgets.BUTTON), 0);
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), agHelper.AssertElementLength(locators._selectedWidget, 1);
0,
);
_.agHelper.AssertElementLength(_.locators._selectedWidget, 1);
//copying first button in first layer, which is center aligned //copying first button in first layer, which is center aligned
_.agHelper.GetElement("body").type(`{${modifierKey}}{c}`); agHelper.GetElement("body").type(`{${modifierKey}}{c}`);
_.agHelper.GetElement(_.locators._toastMsg).contains("Copied"); agHelper.GetElement(locators._toastMsg).contains("Copied");
//unselect all widgets //unselect all widgets
_.agHelper.GetNClick(_.locators._selectionCanvas("0"), 0, true); agHelper.GetNClick(locators._selectionCanvas("0"), 0, true);
_.agHelper.AssertElementLength(_.locators._selectedWidget, 0); agHelper.AssertElementLength(locators._selectedWidget, 0);
//paste //paste
_.agHelper.GetElement("body").type(`{${modifierKey}}{v}`); agHelper.GetElement("body").type(`{${modifierKey}}{v}`);
cy.wait(1000); agHelper.Sleep();
//verify button widget pastes in main canvas, in layer index 1 and is center aligned //verify button widget pastes in main canvas, in layer index 1 and is center aligned
_.autoLayout.VerifyIfChildWidgetPositionInFlexContainer( autoLayout.VerifyIfChildWidgetPositionInFlexContainer(
_.locators._appsmithWidget("0"), locators._appsmithWidget("0"),
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
1, 1,
"CENTER", "CENTER",
); );
//unselect all widgets //unselect all widgets
_.agHelper.GetNClick(_.locators._selectionCanvas("0"), 0, true); agHelper.GetNClick(locators._selectionCanvas("0"), 0, true);
}); });
it("4. Should paste widgets in copied orientation, when multiple widgets are copied", () => { it("4. Should paste widgets in copied orientation, when multiple widgets are copied", () => {
//Select and copy widgets in, //Select and copy widgets in,
// button in layer index 0, end aligned // button in layer index 0, end aligned
_.agHelper.GetNClick( agHelper.GetNClick(
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
1, 1,
false, false,
500, 500,
true, true,
); );
// button in layer index 1, start aligned // button in layer index 1, start aligned
_.agHelper.GetNClick( agHelper.GetNClick(
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
2, 2,
false, false,
500, 500,
true, true,
); );
// icon button in layer index 1, end aligned // icon button in layer index 1, end aligned
_.agHelper.GetNClick( agHelper.GetNClick(
_.locators._widgetInDeployed(_.draggableWidgets.ICONBUTTON), locators._widgetInDeployed(draggableWidgets.ICONBUTTON),
0, 0,
false, false,
500, 500,
true, true,
); );
// button in layer index 2, center aligned // button in layer index 2, center aligned
_.agHelper.GetNClick( agHelper.GetNClick(
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
3, 3,
false, false,
500, 500,
true, true,
); );
_.agHelper.AssertElementLength(_.locators._selectedWidget, 4); agHelper.AssertElementLength(locators._selectedWidget, 4);
_.agHelper.GetElement("body").type(`{${modifierKey}}{c}`); agHelper.GetElement("body").type(`{${modifierKey}}{c}`);
_.agHelper.GetElement(_.locators._toastMsg).contains("Copied"); agHelper.GetElement(locators._toastMsg).contains("Copied");
//unselect all widgets //unselect all widgets
_.agHelper.GetNClick(_.locators._selectionCanvas("0"), 0, true); agHelper.GetNClick(locators._selectionCanvas("0"), 0, true);
_.agHelper.AssertElementLength(_.locators._selectedWidget, 0); agHelper.AssertElementLength(locators._selectedWidget, 0);
//paste //paste
_.agHelper.GetElement("body").type(`{${modifierKey}}{v}`); agHelper.GetElement("body").type(`{${modifierKey}}{v}`);
cy.wait(1000); agHelper.Sleep();
//verify widgets paste in copied orientation, //verify widgets paste in copied orientation,
// button in layer index 2, end aligned // button in layer index 2, end aligned
_.autoLayout.VerifyIfChildWidgetPositionInFlexContainer( autoLayout.VerifyIfChildWidgetPositionInFlexContainer(
_.locators._appsmithWidget("0"), locators._appsmithWidget("0"),
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
2, 2,
"END", "END",
); );
// button in layer index 3, start aligned // button in layer index 3, start aligned
_.autoLayout.VerifyIfChildWidgetPositionInFlexContainer( autoLayout.VerifyIfChildWidgetPositionInFlexContainer(
_.locators._appsmithWidget("0"), locators._appsmithWidget("0"),
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
3, 3,
"START", "START",
); );
// icon button in layer index 3, center aligned // icon button in layer index 3, center aligned
_.autoLayout.VerifyIfChildWidgetPositionInFlexContainer( autoLayout.VerifyIfChildWidgetPositionInFlexContainer(
_.locators._appsmithWidget("0"), locators._appsmithWidget("0"),
_.locators._widgetInDeployed(_.draggableWidgets.ICONBUTTON), locators._widgetInDeployed(draggableWidgets.ICONBUTTON),
3, 3,
"CENTER", "CENTER",
); );
// button in layer index 4, center aligned // button in layer index 4, center aligned
_.autoLayout.VerifyIfChildWidgetPositionInFlexContainer( autoLayout.VerifyIfChildWidgetPositionInFlexContainer(
_.locators._appsmithWidget("0"), locators._appsmithWidget("0"),
_.locators._widgetInDeployed(_.draggableWidgets.BUTTON), locators._widgetInDeployed(draggableWidgets.BUTTON),
4, 4,
"CENTER", "CENTER",
); );
//unselect all widgets //unselect all widgets
_.agHelper.GetNClick(_.locators._selectionCanvas("0"), 0, true); agHelper.GetNClick(locators._selectionCanvas("0"), 0, true);
}); });
}); });

View File

@ -224,6 +224,7 @@ describe("Auto conversion algorithm usecases for auto-layout", function () {
canvasTypeWidgets.forEach((canvasWidget, index) => { canvasTypeWidgets.forEach((canvasWidget, index) => {
_.entityExplorer.DragDropWidgetNVerify(canvasWidget, x, y); _.entityExplorer.DragDropWidgetNVerify(canvasWidget, x, y);
//Logic to add widgets without overlapping each other on the canvas
if (index % 2 === 0) { if (index % 2 === 0) {
x += 400; x += 400;
} else { } else {

View File

@ -1,11 +1,11 @@
import * as _ from "../../../../support/Objects/ObjectsCore"; import { agHelper, autoLayout } from "../../../../support/Objects/ObjectsCore";
let testHeight; let testHeight;
describe("Auto conversion algorithm usecases for fixed Layout", function () { describe("Auto conversion algorithm usecases for fixed Layout", function () {
it("1. Validate basic conversion algorithm usecases fixed layout usecase Mobile", function () { it("1. Validate basic conversion algorithm usecases fixed layout usecase Mobile", function () {
cy.fixture("conversionFrAutoLayoutDsl").then((val) => { cy.fixture("conversionFrAutoLayoutDsl").then((val) => {
_.agHelper.AddDsl(val); agHelper.AddDsl(val);
}); });
cy.wait(5000); //for dsl to settle cy.wait(5000); //for dsl to settle
//cy.openPropertyPane("containerwidget"); //cy.openPropertyPane("containerwidget");
@ -28,7 +28,7 @@ describe("Auto conversion algorithm usecases for fixed Layout", function () {
cy.log(dheight); cy.log(dheight);
cy.wait(3000); cy.wait(3000);
_.autoLayout.ConvertToAutoLayoutAndVerify(); autoLayout.ConvertToAutoLayoutAndVerify();
cy.get(".t--widget-audiorecorderwidget") cy.get(".t--widget-audiorecorderwidget")
.invoke("css", "height") .invoke("css", "height")
@ -43,9 +43,7 @@ describe("Auto conversion algorithm usecases for fixed Layout", function () {
expect(bheight).to.not.equal(b1height); expect(bheight).to.not.equal(b1height);
expect(dheight).to.not.equal(d1height); expect(dheight).to.not.equal(d1height);
_.autoLayout.ConvertToFixedLayoutAndVerify( autoLayout.ConvertToFixedLayoutAndVerify("MOBILE");
"MOBILE",
);
cy.get(".t--widget-audiorecorderwidget") cy.get(".t--widget-audiorecorderwidget")
.invoke("css", "height") .invoke("css", "height")

View File

@ -60,17 +60,19 @@ describe("Handle Cases while conversion", () => {
it("5. #23367 when app imports pages from a template, it should convert without any errors before refreshing the page after load", () => { it("5. #23367 when app imports pages from a template, it should convert without any errors before refreshing the page after load", () => {
_.entityExplorer.AddNewPage("Add page from template"); _.entityExplorer.AddNewPage("Add page from template");
_.agHelper.GetElement(template.templateDialogBox).should("be.visible"); _.agHelper.AssertElementVisible(template.templateDialogBox);
_.agHelper.GetElement("//h1[text()='Marketing Dashboard']").click(); _.agHelper.GetNClick("//h1[text()='Marketing Dashboard']");
cy.wait(10000); // for templates page to load fully cy.wait(10000); // for templates page to load fully
_.agHelper.GetElement(template.selectCheckbox).first().click(); _.agHelper.GetNClick(template.selectCheckbox);
cy.wait(1000); cy.wait(1000);
_.agHelper.GetElement(template.selectCheckbox).eq(1).click(); _.agHelper.GetNClick(template.selectCheckbox, 1);
_.agHelper.GetElement(template.templateViewForkButton).click(); _.agHelper.GetNClick(template.templateViewForkButton);
cy.wait(5000); cy.wait(5000);
_.agHelper _.agHelper.AssertContains(
.GetElement(widgetLocators.toastAction, 40000) "template added successfully",
.should("contain", "template added successfully"); "exist",
widgetLocators.toastAction,
);
_.autoLayout.ConvertToAutoLayoutAndVerify(); _.autoLayout.ConvertToAutoLayoutAndVerify();
}); });

View File

@ -56,7 +56,7 @@ export class AutoLayout {
} }
this.agHelper.GetNClick(this.refreshAppDialogButton, 0, true); this.agHelper.GetNClick(this.refreshAppDialogButton, 0, true);
cy.wait(2000); this.agHelper.Sleep(2000);
this.VerifyIsAutoLayout(); this.VerifyIsAutoLayout();
} }

View File

@ -44,8 +44,8 @@ export class EntityExplorer {
private _moreOptionsPopover = private _moreOptionsPopover =
"//*[local-name()='g' and @id='Icon/Outline/more-vertical']"; "//*[local-name()='g' and @id='Icon/Outline/more-vertical']";
private _pageClone = ".single-select >div:contains('Clone')"; private _pageClone = ".single-select >div:contains('Clone')";
private getPageLocator = (pageName: string) => private _pageNameDiv = (pageName: string) =>
`.t--entity-name:contains(${pageName})`; `.t--entity.page:contains('${pageName}')`;
private _visibleTextSpan = (spanText: string) => private _visibleTextSpan = (spanText: string) =>
"//span[text()='" + spanText + "']"; "//span[text()='" + spanText + "']";
_createNewPopup = ".bp3-overlay-content"; _createNewPopup = ".bp3-overlay-content";
@ -363,9 +363,8 @@ export class EntityExplorer {
} }
public VerifyIsCurrentPage(pageName: string) { public VerifyIsCurrentPage(pageName: string) {
cy.get(`.t--entity.page:contains('${pageName}')`).should( this.agHelper
"have.class", .GetElement(this._pageNameDiv(pageName))
"activePage", .should("have.class", "activePage");
);
} }
} }