From e8c9d1da3e5e91c7edcb36656158a7c49148f35a Mon Sep 17 00:00:00 2001 From: Aishwarya-U-R <91450662+Aishwarya-U-R@users.noreply.github.com> Date: Fri, 6 May 2022 11:10:10 +0530 Subject: [PATCH] test: Automated tests to improve coverage for JSObjects-onPageLoad + Flaky fixes (#12904) * Adding theming spec * Removed theming spec * Reverted cypress.json changes * Adding more JSOnPage load validations * Added Theming - comment spec * Theming - new cases * JSOnload fix * JSOnPage load cases update * Bind_tabWidget fix * Name update to CommunityIssues * Flaky fixes * Flaky fix * Reverting postgress index addition * Failure fixes --- ...ration_Spec.ts => CommunityIssues_Spec.ts} | 13 +- .../Binding/Bind_TabWidget_Input_spec.js | 24 +- ...uttonWidgets_NavigateTo_validation_spec.js | 1 + .../DisplayWidgets/Canvas_scrolling_spec.js | 5 +- .../AuthenticatedApiDatasource_spec.js | 2 +- .../Datasources/RestApiDatasource_spec.js | 4 +- .../JSOnLoadActions_Spec.ts | 92 +- .../App_Theming_New_spec.js | 902 ++++++++++++++++++ .../cypress/support/Pages/AggregateHelper.ts | 22 +- app/client/cypress/support/Pages/HomePage.ts | 5 +- app/client/cypress/support/Pages/JSEditor.ts | 93 +- 11 files changed, 1065 insertions(+), 98 deletions(-) rename app/client/cypress/integration/Smoke_TestSuite/Application/{AForceMigration_Spec.ts => CommunityIssues_Spec.ts} (97%) create mode 100644 app/client/cypress/manual_TestSuite/CommentedScriptFiles/App_Theming_New_spec.js diff --git a/app/client/cypress/integration/Smoke_TestSuite/Application/AForceMigration_Spec.ts b/app/client/cypress/integration/Smoke_TestSuite/Application/CommunityIssues_Spec.ts similarity index 97% rename from app/client/cypress/integration/Smoke_TestSuite/Application/AForceMigration_Spec.ts rename to app/client/cypress/integration/Smoke_TestSuite/Application/CommunityIssues_Spec.ts index 1b89612643..e9e97492ce 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/Application/AForceMigration_Spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/Application/CommunityIssues_Spec.ts @@ -23,21 +23,18 @@ describe("AForce - Community Issues page validations", function () { agHelper.saveLocalStorageCache(); }); - let reconnect = true, selectedRow: number; + let selectedRow: number; it("1. Import application json and validate headers", () => { cy.visit("/applications"); - homePage.ImportApp("AForceMigrationExport.json", reconnect); - cy.wait("@importNewApplication").then((interception) => { - cy.wait(100); + homePage.ImportApp("AForceMigrationExport.json"); + cy.wait("@importNewApplication").then((interception: any) => { + agHelper.Sleep() const { isPartialImport } = interception.response.body.data; if (isPartialImport) { // should reconnect modal dataSources.ReconnectDataSourcePostgres("AForceDB") } else { - cy.get(homePage.toastMessage).should( - "contain", - "Application imported successfully", - ); + homePage.AssertImport() } //Validate table is not empty! table.WaitUntilTableLoad() diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TabWidget_Input_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TabWidget_Input_spec.js index 8ed2354d3c..ce7bcc6f32 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TabWidget_Input_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TabWidget_Input_spec.js @@ -1,8 +1,4 @@ -const commonlocators = require("../../../../locators/commonlocators.json"); -const formWidgetsPage = require("../../../../locators/FormWidgets.json"); const dsl = require("../../../../fixtures/tabInputDsl.json"); -const pages = require("../../../../locators/Pages.json"); -const widgetsPage = require("../../../../locators/Widgets.json"); const publish = require("../../../../locators/publishWidgetspage.json"); const testdata = require("../../../../fixtures/testdata.json"); @@ -24,21 +20,23 @@ describe("Binding the input Widget with tab Widget", function() { it("validation of data displayed in input widgets based on tab selected", function() { cy.PublishtheApp(); - cy.get(publish.tabWidget) - .contains("Tab 1") - .click({ force: true }) - .should("have.class", "is-selected"); - cy.get(publish.inputWidget + " " + "input") - .first() - .invoke("attr", "value") - .should("contain", "Tab 1"); cy.get(publish.tabWidget) .contains("Tab 2") - .click({ force: true }) + .click() + .wait(1000) .should("have.class", "is-selected"); cy.get(publish.inputWidget + " " + "input") .first() .invoke("attr", "value") .should("contain", "Tab 2"); + cy.get(publish.tabWidget) + .contains("Tab 1") + .click() + .wait(1000) + .should("have.class", "is-selected"); + cy.get(publish.inputWidget + " " + "input") + .first() + .invoke("attr", "value") + .should("contain", "Tab 1"); }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/ButtonWidgets_NavigateTo_validation_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/ButtonWidgets_NavigateTo_validation_spec.js index 633ba6588a..792ca8031e 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/ButtonWidgets_NavigateTo_validation_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/ButtonWidgets_NavigateTo_validation_spec.js @@ -28,6 +28,7 @@ describe("Binding the button Widgets and validating NavigateTo Page functionalit it("Button click should take the control to page link validation", function() { cy.PublishtheApp(); + cy.wait(2000); cy.get(publish.buttonWidget).click(); // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(500); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Canvas_scrolling_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Canvas_scrolling_spec.js index 7065c639d6..ce4db5d09e 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Canvas_scrolling_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Canvas_scrolling_spec.js @@ -9,9 +9,10 @@ describe("Modal Widget Functionality", function() { it("1. [Bug]- 11415 - Open Modal from button and test scroll", () => { cy.PublishtheApp(); - cy.get(widgetsPage.widgetBtn) + cy.wait(1000); + cy.get("span:contains('Submit')") .closest("div") - .click({ force: true }); + .click(); cy.get(".t--modal-widget").should("exist"); cy.get("span:contains('Close')") .closest("div") diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/AuthenticatedApiDatasource_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/AuthenticatedApiDatasource_spec.js index 3ed80c6448..b7a9c82c0d 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/AuthenticatedApiDatasource_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/AuthenticatedApiDatasource_spec.js @@ -7,7 +7,7 @@ describe("Authenticated API Datasource", function() { it("1. Bug: 12045 - No Blank screen diplay after New Authentication API datasource creation", function() { cy.NavigateToAPI_Panel(); - cy.get(apiwidget.createAuthApiDatasource).click({ force: true }); + cy.get(apiwidget.createAuthApiDatasource).click(); cy.wait("@createDatasource").should( "have.nested.property", "response.body.responseMeta.status", diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/RestApiDatasource_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/RestApiDatasource_spec.js index ec992b4c82..cd098cfc05 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/RestApiDatasource_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/RestApiDatasource_spec.js @@ -9,7 +9,9 @@ describe("Create a rest datasource", function() { cy.NavigateToAPI_Panel(); cy.CreateAPI("Testapi"); cy.enterDatasourceAndPath(testdata.baseUrl, testdata.methods); - cy.get(".t--store-as-datasource").click({ force: true }); + cy.get(".t--store-as-datasource") + .trigger("click") + .wait(500); cy.saveDatasource(); cy.contains(".datasource-highlight", "https://mock-api.appsmith.com"); cy.SaveAndRunAPI(); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/LayoutOnLoadActions/JSOnLoadActions_Spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/LayoutOnLoadActions/JSOnLoadActions_Spec.ts index 49f0f70efd..8460dffe29 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/LayoutOnLoadActions/JSOnLoadActions_Spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/LayoutOnLoadActions/JSOnLoadActions_Spec.ts @@ -7,13 +7,25 @@ const agHelper = ObjectsRegistry.AggregateHelper, jsEditor = ObjectsRegistry.JSEditor, table = ObjectsRegistry.Table; -describe("JSObjects OnLoad Actions tests", function() { +describe("JSObjects OnLoad Actions tests", function () { before(() => { ee.DragDropWidgetNVerify("tablewidget", 300, 300); }); - it("1. Verify OnPage Load & Before Function calling enabled for JSOBject", function() { + it("1. Create Postgress DS & the query", function () { ee.NavigateToSwitcher("explorer"); + agHelper.GenerateUUID(); + cy.get("@guid").then((uid) => { + dataSources.NavigateToDSCreateNew(); + dataSources.CreatePlugIn("PostgreSQL"); + guid = uid; + agHelper.RenameWithInPane(guid, false); + dataSources.FillPostgresDSForm(); + dataSources.TestSaveDatasource(); + }); + }); + + it("2. Verify User enables only 'Before Function calling' & OnPage Load is Automatically enable after mapping done on JSOBject", function () { jsEditor.CreateJSObject( `export default { getId: async () => { @@ -24,40 +36,60 @@ describe("JSObjects OnLoad Actions tests", function() { true, false, ); - jsEditor.AddJSFunctionSettings("getId", false, true); - agHelper.GenerateUUID(); - cy.get("@guid").then((uid) => { - dataSources.NavigateToDSCreateNew(); - dataSources.CreatePlugIn("PostgreSQL"); - guid = uid; - agHelper.RenameWithInPane(guid, false); - dataSources.FillPostgresDSForm(); - dataSources.TestSaveDatasource(); - dataSources.NavigateToActiveDSQueryPane(guid); - agHelper.GetNClick(dataSources._templateMenu); - agHelper.RenameWithInPane("GetUser"); - cy.get("@jsObjName").then((jsObjName) => { - jsName = jsObjName; - agHelper.EnterValue( - "SELECT * FROM public.users where id = {{" + - jsObjName + - ".getId.data}}", - ); - }); + jsEditor.EnableDisableOnPageLoad("getId", false, true); //Only before calling confirmation is enabled by User here + dataSources.NavigateToActiveDSQueryPane(guid); + agHelper.GetNClick(dataSources._templateMenu); + agHelper.RenameWithInPane("GetUser"); + cy.get("@jsObjName").then((jsObjName) => { + jsName = jsObjName; + agHelper.EnterValue( + "SELECT * FROM public.users where id = {{" + jsObjName + ".getId.data}}", + ); + ee.SelectEntityByName("Table1", 'WIDGETS'); + jsEditor.EnterJSContext("Table Data", "{{GetUser.data}}"); + agHelper.ValidateToastMessage("[" + jsName as string + ".getId, GetUser] will be executed automatically on page load") + agHelper.DeployApp(); + agHelper.AssertElementPresence(jsEditor._dialog("Confirmation Dialog")); + agHelper.AssertElementPresence(jsEditor._dialogBody(jsName as string + ".getId")) + agHelper.ClickButton("Yes"); + agHelper.Sleep(1000) }); - ee.SelectEntityByName("Table1", "WIDGETS"); - jsEditor.EnterJSContext("Table Data", "{{GetUser.data}}"); - - agHelper.DeployApp(); - agHelper.AssertElementPresence(jsEditor._dialog("Confirmation Dialog")); - agHelper.ClickButton("Yes"); - agHelper.Sleep(1000); agHelper.ValidateNetworkExecutionSuccess("@postExecute"); - table.ReadTableRowColumnData(0, 0).then((cellData) => { expect(cellData).to.be.equal("8"); }); + agHelper.NavigateBacktoEditor(); + }); + it("3. Verify OnPage Load - auto enabeld from above case for JSOBject", function () { + agHelper.AssertElementPresence(jsEditor._dialog("Confirmation Dialog")); + agHelper.AssertElementPresence(jsEditor._dialogBody(jsName as string + ".getId")) + agHelper.ClickButton("Yes"); + agHelper.Sleep(1000) + ee.SelectEntityByName(jsName as string, 'QUERIES/JS') + jsEditor.VerifyOnPageLoadSetting('getId', true, true) + }); + + it("4. Verify Error for OnPage Load - disable & Before Function calling enabled for JSOBject", function () { + ee.SelectEntityByName(jsName as string, 'QUERIES/JS') + jsEditor.EnableDisableOnPageLoad("getId", false, true); + agHelper.DeployApp(); + agHelper.ValidateToastMessage("The action \"GetUser\" has failed") + agHelper.NavigateBacktoEditor(); + }); + + it("5. Verify OnPage Load - Enabling back & Before Function calling disabled for JSOBject", function () { + ee.SelectEntityByName(jsName as string, 'QUERIES/JS') + jsEditor.EnableDisableOnPageLoad("getId", true, false); + agHelper.DeployApp(); + agHelper.AssertElementAbsence(jsEditor._dialog("Confirmation Dialog")); + agHelper.AssertElementAbsence(jsEditor._dialogBody(jsName as string + ".getId")) + // agHelper.ClickButton("Yes"); + // agHelper.Sleep(1000) + agHelper.ValidateNetworkExecutionSuccess("@postExecute"); + table.ReadTableRowColumnData(0, 0).then((cellData) => { + expect(cellData).to.be.equal("8"); + }); agHelper.NavigateBacktoEditor(); }); }); diff --git a/app/client/cypress/manual_TestSuite/CommentedScriptFiles/App_Theming_New_spec.js b/app/client/cypress/manual_TestSuite/CommentedScriptFiles/App_Theming_New_spec.js new file mode 100644 index 0000000000..8efd265a9f --- /dev/null +++ b/app/client/cypress/manual_TestSuite/CommentedScriptFiles/App_Theming_New_spec.js @@ -0,0 +1,902 @@ +// const commonlocators = require("../../../../locators/commonlocators.json"); +// const widgetsPage = require("../../../../locators/Widgets.json"); +// const explorer = require("../../../../locators/explorerlocators.json"); +// const publish = require("../../../../locators/publishWidgetspage.json"); +// const dsl = require("../../../../fixtures/replay.json"); +// import { ObjectsRegistry } from "../../../../support/Objects/Registry" + +// let ee = ObjectsRegistry.EntityExplorer; + +// describe("App Theming funtionality", function () { +// before(() => { +// cy.addDsl(dsl); +// }); + +// let themesSection = (sectionName, themeName) => "//*[text()='" + sectionName + "']/following-sibling::div//*[text()='" + themeName + "']" +// let applyTheme = (sectionName, themeName) => themesSection(sectionName, themeName) + "/parent::div/following-sibling::div[contains(@class, 't--theme-card')]//div[text()='Apply Theme']" +// let themesDeletebtn = (sectionName, themeName) => themesSection(sectionName, themeName) + "/following-sibling::button" + +// it("1. Checks if theme can be changed to one of the existing themes", function () { +// cy.get(commonlocators.changeThemeBtn).click({ force: true }); + +// // select a theme +// cy.get(commonlocators.themeCard) +// .last() +// .click({ force: true }); + +// // check for alert +// cy.get(`${commonlocators.themeCard}`) +// .last() +// .siblings("div") +// .first() +// .invoke("text") +// .then((text) => { +// cy.get(commonlocators.toastmsg).contains(`Theme ${text} Applied`); +// }); + +// // check if color of canvas is same as theme bg color +// cy.get(`${commonlocators.themeCard} > main`) +// .last() +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// cy.get(commonlocators.canvas).should( +// "have.css", +// "background-color", +// backgroudColor, +// ); +// }); +// }); + +// it("2. Checks if theme can be edited", function () { +// cy.get(commonlocators.selectThemeBackBtn).click({ force: true }); +// // drop a button widget and click on body +// cy.get(explorer.widgetSwitchId).click(); +// cy.dragAndDropToCanvas("buttonwidget", { x: 200, y: 200 });//iconbuttonwidget +// cy.assertPageSave(); +// cy.get("canvas") +// .first(0) +// .trigger("click", { force: true }); + +// //Click the back button +// //cy.get(commonlocators.selectThemeBackBtn).click({ force: true }); + +// //Click the border radius toggle +// cy.contains("Border") +// .click({ force: true }) +// .wait(500); + +// // change app border radius +// cy.get(commonlocators.themeAppBorderRadiusBtn) +// .eq(1) +// .click({ force: true }); + +// // check if border radius is changed on button +// cy.get(`${commonlocators.themeAppBorderRadiusBtn} > div`) +// .eq(1) +// .invoke("css", "border-top-left-radius") +// .then((borderRadius) => { +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "border-radius", +// borderRadius, +// ); + +// // publish the app +// // cy.PublishtheApp(); +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "border-radius", +// borderRadius, +// ); +// }); + +// //Change the color: +// cy.contains("Color").click({ force: true }); + +// //Change the primary color: +// cy.get(".border-2") +// .first() +// .click({ force: true }); +// cy.wait(500); +// cy.get(widgetsPage.colorPickerV2Popover) +// .click({ force: true }) +// .click(); +// cy.get(widgetsPage.colorPickerV2Color) +// .eq(-3) +// .then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "background-color", +// $elem.css("background-color"), +// ); +// }); + +// //Change the background color: +// cy.get(".border-2") +// .last() +// .click({ force: true }); +// cy.wait(500); +// cy.get(widgetsPage.colorPickerV2Popover) +// .click({ force: true }) +// .click(); +// cy.get(widgetsPage.colorPickerV2Color) +// .first() +// .then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.get(commonlocators.canvas).should( +// "have.css", +// "background-color", +// $elem.css("background-color"), +// ); +// }); + +// //Change the shadow +// cy.contains("Shadow").click({ force: true }); +// cy.contains("App Box Shadow") +// .siblings("div") +// .children("span") +// .last() +// .then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "box-shadow", +// $elem.css("box-shadow"), +// ); +// }); + +// //Change the font +// cy.contains("Font").click({ force: true }); + +// cy.get("span[name='expand-more']").then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.wait(250); +// cy.get(".ads-dropdown-options-wrapper div") +// .children() +// .eq(2) +// .then(($childElem) => { +// cy.get($childElem).click({ force: true }); +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "font-family", +// $childElem +// .children() +// .last() +// .text(), +// ); +// }); +// }); +// }); + +// it("3. Checks if the theme can be saved", () => { +// //Click on dropDown elipses +// cy.contains("Theme Properties") +// .closest("div") +// .siblings() +// .first() +// .find("button") +// .click({ force: true }); +// // .then(($elem) => { +// // cy.get(`${$elem} button`).click({ force: true }); +// // }) + +// cy.wait(300); + +// //Click on save theme dropdown option +// cy.contains("Save theme").click({ force: true }); + +// cy.wait(200); + +// //Type the name of the theme: +// cy.get("input[placeholder='My theme']").type("testtheme"); + +// //Click on save theme button +// cy.get("a[type='submit']").click({ force: true }); + +// cy.wait(200); +// cy.get(commonlocators.toastMsg).contains("Theme testtheme Applied"); +// }); + +// it("4. Verify Save Theme after changing all properties & widgets conform to the selected theme", () => { +// cy.get(explorer.widgetSwitchId).click(); +// cy.dragAndDropToCanvas("iconbuttonwidget", { x: 200, y: 300 }); +// cy.assertPageSave(); +// cy.get("canvas") +// .first(0) +// .trigger("click", { force: true }); + +// //#region Change Font & verify widgets: +// cy.contains("Font") +// .click({ force: true }) +// .wait(200); +// cy.get("span[name='expand-more']").then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.wait(250); +// cy.get(".ads-dropdown-options-wrapper div") +// .children() +// .eq(4) +// .then(($childElem) => { +// cy.get($childElem).click({ force: true }); +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "font-family", +// $childElem +// .children() +// .last() +// .text(), +// ); +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "font-family", +// $childElem +// .children() +// .last() +// .text(), +// ); +// }); +// }); + +// //#endregion + +// //#region Change Color & verify widgets: +// //Change the primary color: +// cy.contains("Color") +// .click({ force: true }) +// .wait(200); +// cy.get(".border-2") +// .first() +// .click({ force: true }); +// cy.wait(500); +// cy.get(widgetsPage.colorPickerV2Popover) +// .click({ force: true }) +// .click(); +// cy.get(widgetsPage.colorPickerV2Color) +// .eq(-15) +// .then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "background-color", +// $elem.css("background-color"), +// ); +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "background-color", +// $elem.css("background-color"), +// ); +// }); + +// //Change the background color: +// cy.get(".border-2") +// .last() +// .click({ force: true }); +// cy.wait(500); +// cy.get(widgetsPage.colorPickerV2Popover) +// .click({ force: true }) +// .click(); +// cy.get(widgetsPage.colorPickerV2Color) +// .eq(23) +// .then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.get(commonlocators.canvas).should( +// "have.css", +// "background-color", +// $elem.css("background-color"), +// ); +// }); + +// //#endregion + +// //#region Change Border radius & verify widgets +// cy.contains("Border") +// .click({ force: true }) +// .wait(200); +// cy.get(commonlocators.themeAppBorderRadiusBtn) +// .eq(2) +// .click({ force: true }); +// cy.get(`${commonlocators.themeAppBorderRadiusBtn} > div`) +// .eq(2) +// .invoke("css", "border-top-left-radius") +// .then((borderRadius) => { +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "border-radius", +// borderRadius, +// ); +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "border-radius", +// borderRadius, +// ); +// }); + +// //#endregion + +// //#region Change the shadow & verify widgets +// cy.contains("Shadow").click({ force: true }); +// cy.contains("App Box Shadow") +// .siblings("div") +// .children("span") +// .first() +// .then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "box-shadow", +// $elem.css("box-shadow"), +// ); +// cy.get(widgetsPage.widgetBtn).should( +// "have.css", +// "box-shadow", +// $elem.css("box-shadow"), +// ); +// }); + +// //#endregion + +// //#region Click on dropDown elipses +// cy.contains("Theme Properties") +// .closest("div") +// .siblings() +// .first() +// .find("button") +// .click({ force: true }); +// cy.wait(300); +// //#endregion + +// //Click on save theme dropdown option & close it +// cy.contains("Save theme").click({ force: true }); +// cy.wait(200); +// cy.xpath("//*[text()='Save Theme']/following-sibling::button").click() + +// //Click on save theme dropdown option & cancel it +// cy.contains("Theme Properties") +// .closest("div") +// .siblings() +// .first() +// .find("button") +// .click({ force: true }); +// cy.wait(300); +// cy.contains("Save theme").click({ force: true }); +// cy.wait(200); +// cy.xpath("//span[text()='Cancel']/parent::a").click() + +// //Click on save theme dropdown option, give duplicte name & save it +// cy.contains("Theme Properties") +// .closest("div") +// .siblings() +// .first() +// .find("button") +// .click({ force: true }); +// cy.wait(300); +// cy.contains("Save theme").click({ force: true }); +// cy.wait(200); +// //Type the name of the theme: +// cy.get("input[placeholder='My theme']").type("testtheme"); +// cy.contains("Name must be unique") + +// cy.get("input[placeholder='My theme']").clear().type("VioletYellowTheme"); + +// //Click on save theme button +// cy.xpath("//span[text()='Save theme']/parent::a").click({ force: true }); + +// cy.wait(200); +// cy.get(commonlocators.toastMsg).contains("Theme VioletYellowTheme Applied"); +// }); + +// it("5. Verify Themes exists under respective section when ChangeTheme button is cicked in properties with Apply Theme & Trash as applicable", () => { + +// //Click on change theme: +// cy.get(commonlocators.changeThemeBtn).click({ force: true }); +// cy.xpath(applyTheme("Your Themes", 'testtheme')).click({ force: true }).wait(1000) //Changing to testtheme + +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > main") +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(131, 24, 67)") +// }); + +// //Check if the saved theme is present under 'Yours Themes' section with Trash button +// cy.xpath(applyTheme("Your Themes", 'testtheme')).should('exist') +// cy.xpath(themesDeletebtn("Your Themes", 'testtheme')).should('exist') + +// cy.xpath(applyTheme("Your Themes", 'VioletYellowTheme')).should('exist') +// cy.xpath(themesDeletebtn("Your Themes", 'VioletYellowTheme')).should('exist') + +// cy.xpath(applyTheme("Featured Themes", 'Classic')).should('exist') +// cy.xpath(themesDeletebtn("Featured Themes", 'Classic')).should("not.exist") + +// cy.xpath(applyTheme("Featured Themes", 'Modern')).should('exist') +// cy.xpath(themesDeletebtn("Featured Themes", 'Modern')).should("not.exist") + +// cy.xpath(applyTheme("Featured Themes", 'Sharp')).should('exist') +// cy.xpath(themesDeletebtn("Featured Themes", 'Sharp')).should("not.exist") + +// cy.xpath(applyTheme("Featured Themes", 'Rounded')).should('exist') +// cy.xpath(themesDeletebtn("Featured Themes", 'Rounded')).should("not.exist") + +// // cy.contains("Featured Themes") +// // .siblings() +// // .find(".t--theme-card") +// // .siblings() +// // .should("contain.text", "Rounded").siblings() +// // .contains('Apply Theme'); +// }); + +// it("6. Verify the custom theme can be deleted", () => { + +// //Check if the saved theme is present under 'Yours Themes' section +// // cy.contains("Your Themes") +// // .siblings() +// // .find(".t--theme-card") +// // .parent() +// // .find("button").eq(0) +// // .click({ force: true }); +// // cy.wait(200); + +// cy.xpath(themesDeletebtn("Your Themes", 'testtheme')).click().wait(200) +// cy.contains("Do you really want to delete this theme? This process cannot be undone.") + +// //Click on Delete theme trash icon & close it +// cy.xpath("//*[text()='Are you sure?']/following-sibling::button").click() +// cy.get(commonlocators.toastMsg).should('not.exist') + +// //Click on Delete theme trash icon & cancel it +// cy.xpath(themesDeletebtn("Your Themes", 'testtheme')).click().wait(200) +// cy.xpath("//span[text()='Cancel']/parent::a").click() +// cy.get(commonlocators.toastMsg).should('not.exist') + +// //Click on Delete theme trash icon & delete it +// cy.xpath(themesDeletebtn("Your Themes", 'testtheme')).click().wait(200) +// cy.contains("Delete").click({ force: true }); + +// //check for delete alert +// cy.wait(500); +// cy.get(commonlocators.toastMsg).contains("Theme testtheme Deleted"); +// cy.xpath(applyTheme("Your Themes", 'testtheme')).should('not.exist') + +// }); + +// it("7. Verify user able to change between saved theme & already existing Featured themes", () => { +// //#region Modern +// cy.xpath(applyTheme("Featured Themes", 'Modern')).click({ force: true }).wait(1000) //Changing to one of featured themes +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(0) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(85, 61, 233)") +// }); + +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(1) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(246, 246, 246)") +// }); + +// //#endregion + +// //#region Classic +// cy.xpath(applyTheme("Featured Themes", 'Classic')).click({ force: true }).wait(1000) //Changing to one of featured themes +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(0) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(80, 175, 108)") +// }); + +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(1) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(246, 246, 246)") +// }); + +// //#endregion + +// //#region Sharp +// cy.xpath(applyTheme("Featured Themes", 'Sharp')).click({ force: true }).wait(1000) //Changing to one of featured themes +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(0) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(59, 125, 221)") +// }); + +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(1) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(255, 255, 255)") +// }); + +// //#endregion + +// //#region Rounded +// cy.xpath(applyTheme("Featured Themes", 'Rounded')).click({ force: true }).wait(1000) //Changing to one of featured themes +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(0) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(222, 21, 147)") +// }); + +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(1) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(246, 246, 246)") +// }); +// //#endregion + +// //#region VioletYellowTheme +// cy.xpath(applyTheme("Your Themes", 'VioletYellowTheme')).click({ force: true }).wait(1000) //Changing to created test theme + +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(0) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(126, 34, 206)") +// }); + +// cy.contains("Current Theme").click() +// .parent() +// .siblings() +// .find(".t--theme-card > main > section > div > main") +// .eq(1) +// .invoke("css", "background-color") +// .then((backgroudColor) => { +// expect(backgroudColor).to.eq("rgb(253, 224, 71)") +// }); + +// //#endregion +// }) + +// it("8. Verify widgets conform to the selected theme in Publish mode", () => { +// cy.PublishtheApp(); + +// cy.wait(2000)//for theme to settle + +// cy.get('body').should('have.css', "font-family", "Montserrat")//Font + +// cy.xpath("//div[@id='root']//section/parent::div").should('have.css', "background-color", "rgb(253, 224, 71)")//Background Color +// cy.get(widgetsPage.widgetBtn).should("have.css", "background-color", "rgb(126, 34, 206)");//Widget Color +// cy.get(publish.iconWidgetBtn).should("have.css", "background-color", "rgb(126, 34, 206)",);//Widget Color + +// cy.get(widgetsPage.widgetBtn).should("have.css", "border-radius", "24px",);//Border Radius +// cy.get(publish.iconWidgetBtn).should("have.css", "border-radius", "24px",);//Border Radius + +// cy.get(widgetsPage.widgetBtn).should("have.css", "box-shadow", "none");//Shadow +// cy.get(publish.iconWidgetBtn).should("have.css", "box-shadow", "none");//Shadow + +// //Verify Share button +// cy.contains('Share').should("have.css", "border-top-color", "rgb(126, 34, 206)")//Color +// cy.contains('Share').closest('div').should("have.css", "font-family", "Montserrat")//Font + +// //Verify Edit App button +// cy.contains('Edit App').should("have.css", "background-color", "rgb(126, 34, 206)")//Color +// cy.contains('Edit App').closest('div').should("have.css", "font-family", "Montserrat")//Font + +// cy.get(publish.backToEditor).click({ force: true }).wait(3000); + +// }) + +// it("9. Verify Adding new Individual widgets & it can change Color, Border radius, Shadow & can revert [Color/Border Radius] to already selected theme", () => { + +// cy.get(explorer.widgetSwitchId).click(); +// cy.dragAndDropToCanvas("buttonwidget", { x: 200, y: 400 });//another button widget +// cy.assertPageSave(); + +// //Change Color & verify +// cy.get(widgetsPage.colorPickerV2Popover) +// .click({ force: true }) +// .click(); +// cy.get(widgetsPage.colorPickerV2Color) +// .eq(35) +// .then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.get(widgetsPage.widgetBtn).eq(1).should( +// "have.css", +// "background-color", +// $elem.css("background-color"), //rgb(134, 239, 172) +// ); //new widget with its own color + +// cy.get(widgetsPage.widgetBtn).eq(0).should( +// "have.css", +// "background-color", +// "rgb(126, 34, 206)", +// ); //old widgets still conforming to theme color +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "background-color", +// "rgb(126, 34, 206)", +// ); +// }); + +// //Change Border & verify + +// cy.get(".t--button-tab-0px").click() +// cy.get(".t--button-tab-0px").eq(0) +// .invoke("css", "border-top-left-radius") +// .then((borderRadius) => { +// cy.get(widgetsPage.widgetBtn).eq(1).should( +// "have.css", +// "border-radius", +// borderRadius, //0px +// ); +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "border-radius", +// "24px", +// ); +// cy.get(widgetsPage.widgetBtn).eq(0).should( +// "have.css", +// "border-radius", +// "24px", +// ); +// }); + +// //Change Shadow & verify +// cy.get(".t--button-tab-0.10px").click() +// cy.get(".t--button-tab-0.10px div").eq(0) +// .invoke("css", "box-shadow") +// .then((boxshadow) => { +// cy.get(widgetsPage.widgetBtn).eq(1).should( +// "have.css", +// "box-shadow", +// boxshadow,//rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px +// ); +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "box-shadow", +// "none", +// ); +// cy.get(widgetsPage.widgetBtn).eq(0).should( +// "have.css", +// "box-shadow", +// "none", +// ); +// }) + +// cy.assertPageSave(); + +// //the new widget with changed styles is not showin in deploy mode - hence commenting below +// // cy.PublishtheApp(); + +// // //Verify Background color +// // cy.get(widgetsPage.widgetBtn).eq(1).should( +// // "have.css", +// // "background-color", +// // "rgb(134, 239, 172)", //rgb(134, 239, 172) +// // ); //new widget with its own color + +// // cy.get(widgetsPage.widgetBtn).eq(0).should( +// // "have.css", +// // "background-color", +// // "rgb(126, 34, 206)", +// // ); //old widgets still conforming to theme color +// // cy.get(widgetsPage.iconWidgetBtn).should( +// // "have.css", +// // "background-color", +// // "rgb(126, 34, 206)", +// // ); + +// // //Verify Border radius +// // cy.get(widgetsPage.widgetBtn).eq(1).should( +// // "have.css", +// // "border-radius", +// // "0px" +// // ); +// // cy.get(widgetsPage.iconWidgetBtn).should( +// // "have.css", +// // "border-radius", +// // "24px", +// // ); +// // cy.get(widgetsPage.widgetBtn).eq(0).should( +// // "have.css", +// // "border-radius", +// // "24px", +// // ); + +// // //Verify Box shadow +// // cy.get(widgetsPage.widgetBtn).eq(1).should( +// // "have.css", +// // "box-shadow", +// // "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px" +// // ); +// // cy.get(widgetsPage.iconWidgetBtn).should( +// // "have.css", +// // "box-shadow", +// // "none", +// // ); +// // cy.get(widgetsPage.widgetBtn).eq(0).should( +// // "have.css", +// // "box-shadow", +// // "none", +// // ); + +// // cy.get(publish.backToEditor).click({ force: true }).wait(1000); + +// //Resetting back to theme +// ee.NavigateToSwitcher('explorer') +// ee.expandCollapseEntity("WIDGETS")//to expand widgets +// ee.SelectEntityByName("Button2") +// cy.get(".t--property-control-buttoncolor .reset-button") +// .then($elem => { +// $elem[0].removeAttribute('display: none'); +// $elem[0].click(); +// }) + +// cy.get(widgetsPage.widgetBtn).eq(1).should( +// "have.css", +// "background-color", +// "rgb(126, 34, 206)", +// ); //verify widget reverted to theme color + +// cy.get(".t--property-control-borderradius .reset-button") +// .then($elem => { +// $elem[0].removeAttribute('display: none'); +// $elem[0].click(); +// }) +// cy.get(widgetsPage.widgetBtn).eq(1).should( +// "have.css", +// "border-radius", +// "24px", +// ); + +// //the new widget with reverted styles is not showin in deploy mode - hence commenting below +// // cy.PublishtheApp(); + +// // cy.wait(2000)//for theme to settle +// // cy.get('body').should('have.css', "font-family", "Montserrat")//Font + +// // cy.xpath("//div[@id='root']//section/parent::div").should('have.css', "background-color", "rgb(253, 224, 71)")//Background Color +// // cy.get(widgetsPage.widgetBtn).eq(0).should("have.css", "background-color", "rgb(126, 34, 206)");//Widget Color +// // cy.get(widgetsPage.widgetBtn).eq(1).should("have.css", "background-color", "rgb(126, 34, 206)");//Widget Color +// // cy.get(publish.iconWidgetBtn).should("have.css", "background-color", "rgb(126, 34, 206)",);//Widget Color + +// // cy.get(widgetsPage.widgetBtn).eq(0).should("have.css", "border-radius", "24px",);//Border Radius +// // cy.get(widgetsPage.widgetBtn).eq(1).should("have.css", "border-radius", "24px",);//Border Radius +// // cy.get(publish.iconWidgetBtn).should("have.css", "border-radius", "24px",);//Border Radius + +// // cy.get(widgetsPage.widgetBtn).eq(0).should("have.css", "box-shadow", "none");//Shadow +// // cy.get(widgetsPage.widgetBtn).eq(1).should("have.css", "box-shadow", "none");//Shadow +// // cy.get(publish.iconWidgetBtn).should("have.css", "box-shadow", "none");//Shadow + +// // //Verify Share button +// // cy.contains('Share').should("have.css", "border-top-color", "rgb(126, 34, 206)")//Color +// // cy.contains('Share').closest('div').should("have.css", "font-family", "Montserrat")//Font + +// // //Verify Edit App button +// // cy.contains('Edit App').should("have.css", "background-color", "rgb(126, 34, 206)")//Color +// // cy.contains('Edit App').closest('div').should("have.css", "font-family", "Montserrat")//Font + +// // cy.get(publish.backToEditor).click({ force: true }).wait(1000); + +// }); + +// it("10. Verify Chainging theme should not affect Individual widgets with changed Color, Border radius, Shadow & can revert to newly selected theme", () => { + +// cy.get("canvas") +// .first(0) +// .trigger("click", { force: true }); + +// cy.get(commonlocators.changeThemeBtn).click({ force: true }); + +// //Changing to one of featured themes & then changing individual widget properties +// cy.xpath(applyTheme("Featured Themes", 'Rounded')).click({ force: true }).wait(1000) + +// //Change individual widget properties for Button1 +// ee.SelectEntityByName("Button1") + +// //Change Color & verify +// cy.get(widgetsPage.colorPickerV2Popover) +// .click({ force: true }) +// .click(); +// cy.get(widgetsPage.colorPickerV2Color) +// .eq(17) +// .then(($elem) => { +// cy.get($elem).click({ force: true }); +// cy.get(widgetsPage.widgetBtn).eq(0).should( +// "have.css", +// "background-color", +// $elem.css("background-color"), //rgb(134, 239, 172) +// ); //new widget with its own color + +// cy.get(widgetsPage.widgetBtn).eq(1).should( +// "have.css", +// "background-color", +// "rgb(222, 21, 147)", +// ); //old widgets still conforming to theme color +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "background-color", +// "rgb(222, 21, 147)", +// ); +// }); + +// //Change Border & verify + +// cy.get(".t--button-tab-0\\.375rem").click().wait(500) +// cy.get(".t--button-tab-0\\.375rem div").eq(0) +// .invoke("css", "border-top-left-radius") +// .then((borderRadius) => { +// cy.get(widgetsPage.widgetBtn).eq(0).should( +// "have.css", +// "border-radius", +// borderRadius, //6px +// ); +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "border-radius", +// "24px", +// ); +// cy.get(widgetsPage.widgetBtn).eq(1).should( +// "have.css", +// "border-radius", +// "24px", +// ); +// }); + +// //Change Shadow & verify +// cy.get(".t--button-tab-0.1px").click().wait(500) +// cy.get(".t--button-tab-0.1px div") +// .invoke("css", "box-shadow") +// .then((boxshadow) => { +// cy.get(widgetsPage.widgetBtn).eq(0).should( +// "have.css", +// "box-shadow", +// boxshadow,//rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px +// ); +// cy.get(widgetsPage.iconWidgetBtn).should( +// "have.css", +// "box-shadow", +// "none", +// ); +// cy.get(widgetsPage.widgetBtn).eq(1).should( +// "have.css", +// "box-shadow", +// //same value as previous box shadow selection +// //since revertion is not possible for box shadow - hence this widget maintains the same value +// "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px", +// ); +// }) + +// cy.assertPageSave(); + +// //Add deploy mode verification here also! + +// }) + +// }); diff --git a/app/client/cypress/support/Pages/AggregateHelper.ts b/app/client/cypress/support/Pages/AggregateHelper.ts index ba82323f60..37187948d1 100644 --- a/app/client/cypress/support/Pages/AggregateHelper.ts +++ b/app/client/cypress/support/Pages/AggregateHelper.ts @@ -104,7 +104,7 @@ export class AggregateHelper { public DeployApp(eleToCheckInDeployPage: string = this.locator._backToEditor) { cy.intercept("POST", "/api/v1/applications/publish/*").as("publishApp"); // Wait before publish - this.Sleep(2000) + this.Sleep(2000)//wait for elements load! this.AssertAutoSave() // Stubbing window.open to open in the same tab cy.window().then((window) => { @@ -364,10 +364,22 @@ export class AggregateHelper { } public AssertExistingToggleState(propertyName: string, toggle: 'checked' | 'unchecked') { - cy.xpath(this.locator._propertyToggleValue(propertyName)).invoke("attr", "class") - .then((classes) => { - expect(classes).includes(toggle); - }); + let locator; + if (propertyName.startsWith("//")) { + locator = cy.xpath(propertyName); + locator.should("have.attr", toggle) + } + else if (propertyName.includes(' ')) { + locator = cy.get(propertyName); + locator.should("have.attr", toggle) + } + else { + locator = cy.xpath(this.locator._propertyToggleValue(propertyName)); + locator.invoke("attr", "class") + .then((classes) => { + expect(classes).includes(toggle); + }); + } } public NavigateBacktoEditor() { diff --git a/app/client/cypress/support/Pages/HomePage.ts b/app/client/cypress/support/Pages/HomePage.ts index 2d6e34e0e1..5e219f2a50 100644 --- a/app/client/cypress/support/Pages/HomePage.ts +++ b/app/client/cypress/support/Pages/HomePage.ts @@ -257,16 +257,13 @@ export class HomePage { this.NavigateToHome() } - public ImportApp(fixtureJson: string, reconnect = false) { + public ImportApp(fixtureJson: string) { cy.get(this._homeIcon).click(); cy.get(this._optionsIcon).first().click(); cy.get(this._orgImport).click({ force: true }); cy.get(this._orgImportAppModal).should("be.visible"); cy.xpath(this._uploadFile).attachFile(fixtureJson).wait(500); cy.get(this._orgImportAppModal).should("not.exist"); - if (!reconnect) { - this.AssertImport() - } } public AssertImport() { diff --git a/app/client/cypress/support/Pages/JSEditor.ts b/app/client/cypress/support/Pages/JSEditor.ts index ed78ec9ee0..cb6878d9e4 100644 --- a/app/client/cypress/support/Pages/JSEditor.ts +++ b/app/client/cypress/support/Pages/JSEditor.ts @@ -5,40 +5,43 @@ export class JSEditor { public locator = ObjectsRegistry.CommonLocators; public ee = ObjectsRegistry.EntityExplorer; + //#region Element locators private _runButton = "button.run-js-action"; private _settingsTab = ".tab-title:contains('Settings')"; private _codeTab = ".tab-title:contains('Code')"; private _onPageLoadRadioButton = (functionName: string, onLoad: boolean) => - `.${functionName}-on-page-load-setting label:contains(${ - onLoad ? "Yes" : "No" + `.${functionName}-on-page-load-setting label:contains(${onLoad ? "Yes" : "No" }) span.checkbox`; + private _onPageLoadRadioButtonStatus = (functionName: string, onLoad: boolean) => + `.${functionName}-on-page-load-setting label:contains(${onLoad ? "Yes" : "No" + })>input`; private _confirmBeforeExecuteRadioButton = ( functionName: string, shouldConfirm: boolean, ) => - `.${functionName}-confirm-before-execute label:contains(${ - shouldConfirm ? "Yes" : "No" + `.${functionName}-confirm-before-execute label:contains(${shouldConfirm ? "Yes" : "No" }) span.checkbox`; + private _confirmBeforeExecuteRadioButtonStatus = ( + functionName: string, + shouldConfirm: boolean, + ) => + `.${functionName}-confirm-before-execute label:contains(${shouldConfirm ? "Yes" : "No" + })>input`; private _outputConsole = ".CodeEditorTarget"; private _jsObjName = ".t--js-action-name-edit-field span"; private _jsObjTxt = ".t--js-action-name-edit-field input"; - private _newJSobj = "span:contains('New JS Object')"; - private _bindingsClose = ".t--entity-property-close"; - private _propertyList = ".t--entity-property"; - private _responseTabAction = (funName: string) => - "//div[@class='function-name'][text()='" + - funName + - "']/following-sibling::div//*[local-name()='svg']"; - private _functionSetting = (settingTxt: string) => - "//span[text()='" + - settingTxt + - "']/parent::div/following-sibling::input[@type='checkbox']"; - _dialog = (dialogHeader: string) => - "//div[contains(@class, 'bp3-dialog')]//h4[contains(text(), '" + - dialogHeader + - "')]"; - private _closeSettings = "span[icon='small-cross']"; + private _newJSobj = "span:contains('New JS Object')" + private _bindingsClose = ".t--entity-property-close" + private _propertyList = ".t--entity-property" + private _responseTabAction = (funName: string) => "//div[@class='function-name'][text()='" + funName + "']/following-sibling::div//*[local-name()='svg']" + private _functionSetting = (settingTxt: string) => "//span[text()='" + settingTxt + "']/parent::div/following-sibling::input[@type='checkbox']" + _dialog = (dialogHeader: string) => "//div[contains(@class, 'bp3-dialog')]//h4[contains(text(), '" + dialogHeader + "')]" + private _closeSettings = "span[icon='small-cross']" + _dialogBody = (jsFuncName: string) => "//div[@class='bp3-dialog-body']//*[contains(text(), '" + Cypress.env('MESSAGES').QUERY_CONFIRMATION_MODAL_MESSAGE() + "')]//*[contains(text(),'" + jsFuncName + "')]" + //#endregion + + //#region Page functions public NavigateToJSEditor() { cy.get(this.locator._createNew) .last() @@ -175,9 +178,9 @@ export class JSEditor { } else { cy.get( this.locator._propertyControl + - endp.replace(/ +/g, "").toLowerCase() + - " " + - this.locator._codeMirrorTextArea, + endp.replace(/ +/g, "").toLowerCase() + + " " + + this.locator._codeMirrorTextArea, ) .first() .then((el: any) => { @@ -224,9 +227,9 @@ export class JSEditor { public RemoveText(endp: string) { cy.get( this.locator._propertyControl + - endp + - " " + - this.locator._codeMirrorTextArea, + endp + + " " + + this.locator._codeMirrorTextArea, ) .first() .focus() @@ -263,7 +266,7 @@ export class JSEditor { public validateDefaultJSObjProperties(jsObjName: string) { this.ee.ActionContextMenuByEntityName(jsObjName, "Show Bindings"); - cy.get(this._propertyList).then(function($lis) { + cy.get(this._propertyList).then(function ($lis) { const bindingsLength = $lis.length; expect(bindingsLength).to.be.at.least(4); expect($lis.eq(0).text()).to.be.oneOf([ @@ -286,7 +289,31 @@ export class JSEditor { cy.get(this._bindingsClose).click({ force: true }); } - public AddJSFunctionSettings( + + // public EnableDisableOnPageLoad(funName: string, onLoad: 'enable' | 'disable' | '', bfrCalling: 'enable' | 'disable' | '') { + // this.agHelper.GetNClick(this._responseTabAction(funName)) + // this.agHelper.AssertElementPresence(this._dialog('Function settings')) + // if (onLoad) + // this.agHelper.CheckUncheck(this._functionSetting(Cypress.env("MESSAGES").JS_SETTINGS_ONPAGELOAD()), onLoad == 'enable' ? true : false) + // if (bfrCalling) + // this.agHelper.CheckUncheck(this._functionSetting(Cypress.env("MESSAGES").JS_SETTINGS_CONFIRM_EXECUTION()), bfrCalling == 'enable' ? true : false) + + // this.agHelper.GetNClick(this._closeSettings) + // } + + public VerifyOnPageLoadSetting(funName: string, onLoad = true, bfrCalling = true) { + // this.agHelper.GetNClick(this._responseTabAction(funName)) + // this.agHelper.AssertElementPresence(this._dialog('Function settings')) + // this.agHelper.AssertExistingToggleState(this._functionSetting(Cypress.env("MESSAGES").JS_SETTINGS_ONPAGELOAD()), onLoad) + // this.agHelper.AssertExistingToggleState(this._functionSetting(Cypress.env("MESSAGES").JS_SETTINGS_CONFIRM_EXECUTION()), bfrCalling) + // this.agHelper.GetNClick(this._closeSettings) + + this.agHelper.GetNClick(this._settingsTab); + this.agHelper.AssertExistingToggleState(this._onPageLoadRadioButtonStatus(funName, onLoad), onLoad == true ? 'checked' : 'unchecked') + this.agHelper.AssertExistingToggleState(this._confirmBeforeExecuteRadioButtonStatus(funName, bfrCalling), bfrCalling == true ? 'checked' : 'unchecked') + } + + public EnableDisableOnPageLoad( funName: string, onLoad = true, bfrCalling = true, @@ -294,14 +321,12 @@ export class JSEditor { // Navigate to Settings tab this.agHelper.GetNClick(this._settingsTab); // Set onPageLoad - cy.get(this._onPageLoadRadioButton(funName, onLoad)) - .first() - .click(); + this.agHelper.GetNClick(this._onPageLoadRadioButton(funName, onLoad)); // Set confirmBeforeExecute - cy.get(this._confirmBeforeExecuteRadioButton(funName, bfrCalling)) - .first() - .click(); + this.agHelper.GetNClick(this._confirmBeforeExecuteRadioButton(funName, bfrCalling)); // Return to code tab this.agHelper.GetNClick(this._codeTab); } + + //#endregion }