From 10db9ccadf40cb3d05360667b1908fb0930ea4e1 Mon Sep 17 00:00:00 2001 From: Parthvi <80334441+Parthvi12@users.noreply.github.com> Date: Wed, 30 Aug 2023 18:26:36 +0530 Subject: [PATCH] test: Cypress -Divider widget automation (#26748) ## Description Adding cypress tests for divider widget as per this test plan: https://github.com/appsmithorg/TestSmith/issues/2480 and unskip git tests #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > #### How Has This Been Tested? locally #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 --- .../{Git_spec.js => MergeViaRemote_spec.ts} | 19 +-- .../Widgets/Divider/Divider_spec.ts | 145 ++++++++++++++++++ app/client/cypress/locators/WidgetLocators.ts | 3 + 3 files changed, 154 insertions(+), 13 deletions(-) rename app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/{Git_spec.js => MergeViaRemote_spec.ts} (94%) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/Divider/Divider_spec.ts diff --git a/app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/Git_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/MergeViaRemote_spec.ts similarity index 94% rename from app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/Git_spec.js rename to app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/MergeViaRemote_spec.ts index 246de7ec08..734890ec79 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/Git_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/MergeViaRemote_spec.ts @@ -26,7 +26,7 @@ let applicationId = null; let applicationName = null; let repoName; -describe.skip("Git sync:", function () { +describe("Git sync: Merge changes via remote", function () { before(() => { _.homePage.NavigateToHome(); cy.createWorkspace(); @@ -40,19 +40,13 @@ describe.skip("Git sync:", function () { ); }); }); - - // cy.generateUUID().then((uid) => { - // repoName = uid; _.gitSync.CreateNConnectToGit(repoName); - // cy.createTestGithubRepo(repoName); - // cy.connectToGitRepo(repoName); - //}); cy.get("@gitRepoName").then((repName) => { repoName = repName; }); }); - it("1. Shows remote is ahead warning and conflict error during commit and push", function () { + it.skip("1. Shows remote is ahead warning and conflict error during commit and push", function () { _.gitSync.CreateGitBranch(tempBranch, false); cy.get("@gitbranchName").then((branName) => { tempBranch = branName; @@ -104,7 +98,7 @@ describe.skip("Git sync:", function () { cy.get(gitSyncLocators.closeGitSyncModal).click(); }); - it("2. Detect conflicts when merging head to base branch", function () { + it.skip("2. Detect conflicts when merging head to base branch", function () { cy.switchGitBranch(mainBranch); _.entityExplorer.NavigateToSwitcher("Widgets"); cy.wait(2000); // wait for transition @@ -137,7 +131,7 @@ describe.skip("Git sync:", function () { }); it("3. Supports merging head to base branch", function () { - cy.switchGitBranch(mainBranch); + //cy.switchGitBranch(mainBranch); cy.createGitBranch(tempBranch2); _.entityExplorer.NavigateToSwitcher("Explorer"); cy.CheckAndUnfoldEntityItem("Pages"); @@ -151,7 +145,7 @@ describe.skip("Git sync:", function () { cy.contains("NewPage"); }); - it("4. Enables pulling remote changes from bottom bar", function () { + it.skip("4. Enables pulling remote changes from bottom bar", function () { _.gitSync.CreateGitBranch(tempBranch3, false); _.entityExplorer.NavigateToSwitcher("Widgets"); cy.wait(2000); // wait for transition @@ -234,7 +228,6 @@ describe.skip("Git sync:", function () { req.continue(); }).as("appAndPages"); cy.reload(); - //cy.pause(); cy.wait("@appAndPages").then((intercept2) => { const { application, pages } = intercept2.response.body.data; const defaultPage = pages.find((p) => p.isDefault); @@ -250,7 +243,7 @@ describe.skip("Git sync:", function () { applicationVersion: 1, }); - _.gitSync.CreateGitBranch(cleanUrlBranch, false); + _.gitSync.CreateGitBranch(cleanUrlBranch, true); cy.location().should((location) => { expect(location.pathname).includes(legacyPathname); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Divider/Divider_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Divider/Divider_spec.ts new file mode 100644 index 0000000000..79027b3c46 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Divider/Divider_spec.ts @@ -0,0 +1,145 @@ +import { + agHelper, + draggableWidgets, + entityExplorer, + deployMode, + propPane, + locators, + widgetLocators, +} from "../../../../../support/Objects/ObjectsCore"; + +describe("Divider Widget functionality tests", () => { + before(() => { + entityExplorer.DragDropWidgetNVerify(draggableWidgets.DIVIDER, 200, 200); + }); + + it("1. Divider widget Visiblity property verification", () => { + propPane.TogglePropertyState("Visible", "Off"); + // verify in deploy mode + deployMode.DeployApp(); + agHelper.AssertElementAbsence( + locators._widgetInCanvas(draggableWidgets.DIVIDER), + ); + deployMode.NavigateBacktoEditor(); + // verify in preview mode + agHelper.GetNClick(locators._enterPreviewMode); + //verify widget is not present + agHelper.AssertElementAbsence( + locators._widgetInCanvas(draggableWidgets.DIVIDER), + ); + //Exit preview mode + agHelper.GetNClick(locators._exitPreviewMode); + }); + + it("2. Divider widget style section verification", () => { + entityExplorer.SelectEntityByName("Divider1", "Widgets"); + propPane.TogglePropertyState("Visible", "On"); + propPane.MoveToTab("Style"); + propPane.EnterJSContext("Color", "Purple"); + //propPane.SelectColorFromColorPicker("iconcolor", -15); + agHelper.AssertCSS( + widgetLocators.dividerHorizontal, + "border-top-color", + "rgb(128, 0, 128)", + ); + propPane.EnterJSContext("Style", "Dotted"); + agHelper.AssertCSS( + widgetLocators.dividerHorizontal, + "border-top-style", + "dotted", + ); + propPane.UpdatePropertyFieldValue("Thickness", "4"); + agHelper.AssertCSS( + widgetLocators.dividerHorizontal, + "border-top-width", + "4px", + ); + propPane.EnterJSContext("Cap", "dot"); + propPane.EnterJSContext("Direction", "vertical"); + agHelper.AssertElementAbsence(widgetLocators.dividerHorizontal); + agHelper.Sleep(1000); + }); + + it("3. Bind style properties of divider to radio widget and verify ", () => { + entityExplorer.DragDropWidgetNVerify( + draggableWidgets.RADIO_GROUP, + 400, + 400, + ); + entityExplorer.SelectEntityByName("Divider1", "Widgets"); + propPane.EnterJSContext( + "Direction", + "{{RadioGroup1.selectedOptionValue==='Y'?'horizontal':'vertical'}}", + ); + propPane.EnterJSContext( + "Color", + "{{RadioGroup1.selectedOptionValue==='Y'?'#231F20':'#b91c1c'}}", + ); + + propPane.EnterJSContext( + "Style", + "{{RadioGroup1.selectedOptionValue==='Y'?'solid':'dotted'}}", + ); + propPane.EnterJSContext( + "Cap", + "{{RadioGroup1.selectedOptionValue==='Y'?'nc':'dot'}}", + ); + agHelper.AssertExistingCheckedState(locators._checkboxTypeByOption("Yes")); + agHelper.AssertElementAbsence(widgetLocators.dividerVertical); + entityExplorer.SelectEntityByName("Divider1", "Widgets"); + agHelper.AssertCSS( + widgetLocators.dividerHorizontal, + "border-top-color", + "rgb(35, 31, 32)", + ); + agHelper.AssertCSS( + widgetLocators.dividerHorizontal, + "border-top-style", + "solid", + ); + entityExplorer.SelectEntityByName("RadioGroup1", "Widgets"); + agHelper.CheckUncheck(locators._checkboxTypeByOption("No")); + agHelper.AssertElementAbsence(widgetLocators.dividerHorizontal); + agHelper.AssertCSS( + widgetLocators.dividerVertical, + "border-right-color", + "rgb(185, 28, 28)", + ); + agHelper.AssertCSS( + widgetLocators.dividerVertical, + "border-right-style", + "dotted", + ); + }); + + it("4. Verify bindings in preview and deploy mode", () => { + // verify in preview mode + agHelper.GetNClick(locators._enterPreviewMode); + agHelper.AssertElementAbsence(widgetLocators.dividerHorizontal); + agHelper.AssertCSS( + widgetLocators.dividerVertical, + "border-right-color", + "rgb(185, 28, 28)", + ); + agHelper.AssertCSS( + widgetLocators.dividerVertical, + "border-right-style", + "dotted", + ); + //Exit preview mode + agHelper.GetNClick(locators._exitPreviewMode); + // Enter view mode + deployMode.DeployApp(); + agHelper.AssertElementAbsence(widgetLocators.dividerVertical); + agHelper.AssertCSS( + widgetLocators.dividerHorizontal, + "border-top-color", + "rgb(35, 31, 32)", + ); + agHelper.AssertCSS( + widgetLocators.dividerHorizontal, + "border-top-style", + "solid", + ); + }); +}); diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts index b612c6446c..151a88e82d 100644 --- a/app/client/cypress/locators/WidgetLocators.ts +++ b/app/client/cypress/locators/WidgetLocators.ts @@ -79,6 +79,9 @@ export const WIDGETSKIT = { "//a[@data-testid='t--image-download']//parent::div/a[2]", styleResetBtn: ".reset-button", styleOrangeIcon: ".rounded-full", + dividerVertical: "[data-testid=dividerVertical]", + dividerHorizontal: "[data-testid=dividerHorizontal]", + }; type ValueOf = T[keyof T];