diff --git a/app/client/cypress/fixtures/example.json b/app/client/cypress/fixtures/example.json index 59b07776d6..626d24f331 100644 --- a/app/client/cypress/fixtures/example.json +++ b/app/client/cypress/fixtures/example.json @@ -271,5 +271,34 @@ "productName": "Tuna Salad", "orderAmount": 9.99 } - ] + ], + "ListItems": [ + { + "id": 1, + "email": "michael.lawson@reqres.in", + "first_name": "Michael", + "last_name": "Lawson", + "avatar": "https://reqres.in/img/faces/7-image.jpg" + }, + { + "id": 2, + "email": "lindsay.ferguson@reqres.in", + "first_name": "Lindsay", + "last_name": "Ferguson", + "avatar": "https://reqres.in/img/faces/8-image.jpg" + }, + { + "id": 3, + "email": "brock.lesnar@reqres.in", + "first_name": "Brock", + "last_name": "Lesnar", + "avatar": "https://reqres.in/img/faces/8-image.jpg" + }, + { + "id": 7, + "num": "007", + "name": "Charizard", + "img": "http://www.serebii.net/pokemongo/pokemon/006.png" + } + ] } diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/List_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/List_spec.js new file mode 100644 index 0000000000..12d613557d --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/List_spec.js @@ -0,0 +1,26 @@ +const dsl = require("../../../../fixtures/newFormDsl.json"); +const publishPage = require("../../../../locators/publishWidgetspage.json"); + +describe("Button Widget Functionality", function() { + before(() => { + cy.addDsl(dsl); + }); + + beforeEach(() => { + cy.openPropertyPane("buttonwidget"); + }); + + it("Button-Style Validation", function() { + //Changing the style of the button from the property pane and verify it's color. + // Change to Secondary button sytle + cy.changeButtonStyle(2, "rgb(254, 184, 17)", "rgba(0, 0, 0, 0)"); + cy.get(publishPage.backToEditor).click({ force: true }); + // Change to Danger button sytl + cy.openPropertyPane("buttonwidget"); + cy.changeButtonStyle(3, "rgb(242, 43, 43)", "rgb(139, 2, 43)"); + }); + + afterEach(() => { + cy.goToEditFromPublish(); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/List_spec.js b/app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/List_spec.js index 91ba25d7ed..bfdc92d91b 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/List_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/List_spec.js @@ -10,19 +10,62 @@ describe("Container Widget Functionality", function() { cy.addDsl(dsl); }); + it("List-Unckeck Visible field Validation", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + //Uncheck the disabled checkbox and validate + cy.UncheckWidgetProperties(commonlocators.visibleCheckbox); + cy.PublishtheApp(); + cy.get(widgetsPage.listWidget).should("not.exist"); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("List-Check Visible field Validation", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + //Check the disableed checkbox and Validate + cy.CheckWidgetProperties(commonlocators.visibleCheckbox); + cy.PublishtheApp(); + cy.get(widgetsPage.listWidget).should("be.visible"); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("Toggle JS - List-Unckeck Visible field Validation", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + //Uncheck the disabled checkbox using JS and validate + cy.get(widgetsPage.toggleVisible).click({ force: true }); + cy.testJsontext("visible", "false"); + cy.PublishtheApp(); + cy.get(widgetsPage.listWidget).should("not.exist"); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("Toggle JS - List-Check Visible field Validation", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + //Check the disabled checkbox using JS and Validate + cy.testJsontext("visible", "true"); + cy.PublishtheApp(); + cy.get(widgetsPage.listWidget).should("be.visible"); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + it("checks if list shows correct no. of items", function() { + // Verify the length of list cy.get(commonlocators.containerWidget).then(function($lis) { expect($lis).to.have.length(2); }); }); it("checks currentItem binding", function() { + // Open property pane cy.SearchEntityandOpen("Text1"); cy.testJsontext("text", `{{currentItem.first_name}}`); cy.wait(1000); cy.closePropertyPane(); - + // Verify Current Item Bindings cy.get(commonlocators.TextInside).then(function($lis) { expect($lis.eq(0)).to.contain(items[0].first_name); expect($lis.eq(1)).to.contain(items[1].first_name); @@ -30,31 +73,34 @@ describe("Container Widget Functionality", function() { }); it("checks button action", function() { + // Open property pane cy.SearchEntityandOpen("Button1"); cy.testJsontext("label", `{{currentItem.first_name}}`); cy.addAction("{{currentItem.first_name}}"); cy.PublishtheApp(); - + // Verify Widget Button by clicking on it cy.get(`${widgetsPage.widgetBtn}`) .first() .click(); - + // Verify the click on first button cy.get(commonlocators.toastmsg).contains(items[0].first_name); }); it("it checks onListItem click action", function() { + // Verify Clicking on list item shows message of first name cy.get(publishPage.backToEditor).click({ force: true }); - + // Open property pane cy.SearchEntityandOpen("List1"); + // Verify Action type and Message of List Item cy.addAction("{{currentItem.first_name}}"); cy.PublishtheApp(); - + // Click on list first item cy.get( "div[type='LIST_WIDGET'] .t--widget-containerwidget:first-child", ).click(); - + // Verify the click on first item cy.get(commonlocators.toastmsg).contains(items[0].first_name); }); @@ -66,6 +112,123 @@ describe("Container Widget Functionality", function() { cy.get(commonlocators.TextInside).then(function($lis) { expect($lis.eq(0)).to.contain(items[2].first_name); }); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("Chart-Copy Verification", function() { + const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl"; + //Copy Chart and verify all properties + cy.SearchEntityandOpen("List1"); + cy.copyWidget("List1Copy", commonlocators.containerWidget); + + // cy.PublishtheApp(); + }); + + it("Chart-Delete Verification", function() { + // Delete the Chart widget + cy.SearchEntityandOpen("List1Copy"); + cy.deleteWidget(); + cy.PublishtheApp(); + // Verify the cart is deleted + cy.get(commonlocators.containerWidget).should("not.exist"); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("List widget background colour and deploy ", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + // Scroll down to Styles and Add background colour + cy.selectColor("background"); + cy.wait(1000); + cy.selectColor("itembackground"); + // Click on Deploy and ensure it is deployed appropriately + cy.PublishtheApp(); + // Ensure List Background Color + cy.get(widgetsPage.listWidget).should( + "have.css", + "background-color", + "rgb(3, 179, 101)", + ); + // Verify List Item Background Color + cy.get(widgetsPage.itemContainerWidget).should( + "have.css", + "background-color", + "rgb(3, 179, 101)", + ); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("Toggle JS - List widget background colour and deploy ", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + // Scroll down to Styles and Add background colour + cy.get(widgetsPage.toggleBackground).click({ force: true }); + cy.testJsontext("background", "#FFC13D"); + cy.wait(1000); + cy.get(widgetsPage.toggleItemBackground).click({ force: true }); + cy.testJsontext("itembackground", "#38AFF4"); + // Click on Deploy and ensure it is deployed appropriately + cy.PublishtheApp(); + // Ensure List Background Color + cy.get(widgetsPage.listWidget).should( + "have.css", + "background-color", + "rgb(255, 193, 61)", + ); + // Verify List Item Background Color + cy.get(widgetsPage.itemContainerWidget).should( + "have.css", + "background-color", + "rgb(56, 175, 244)", + ); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("Add new item in the list widget array object", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + //Add the new item in the list + cy.testJsontext("items", JSON.stringify(this.data.ListItems)); + cy.wait(2000); + cy.PublishtheApp(); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("Adding large item Spacing for item card", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + // Scroll down to Styles and Add item spacing for item card + cy.testJsontext("itemspacing\\(" + "px" + "\\)", 12); + cy.wait(2000); + // Click on Deploy and ensure it is deployed appropriately + cy.PublishtheApp(); + cy.get(publishPage.backToEditor).click({ force: true }); + }); + + it("Renaming the widget from Property pane and Entity explorer ", function() { + // Open Property pane + cy.SearchEntityandOpen("List1"); + // Change the list widget name from property pane and Verify it + cy.widgetText( + "List2", + widgetsPage.listWidgetName, + widgetsPage.listWidgetName + " " + commonlocators.listWidgetNameTag, + ); + cy.closePropertyPane(); + // Change the list widget name from Entity Explorer + cy.SearchEntityandDblClick("List2").type("List1{enter}"); + // Mouse over to list name + cy.SearchEntityandOpen("List1"); + cy.get(widgetsPage.listWidgetName) + .first() + .trigger("mouseover", { force: true }); + // Verify the list name is changed + cy.contains( + widgetsPage.listWidgetName + " " + commonlocators.listWidgetNameTag, + "List1", + ); + cy.PublishtheApp(); + cy.get(publishPage.backToEditor).click({ force: true }); }); afterEach(() => { diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index 3151b9661e..a9c38ed79f 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/app/client/cypress/locators/Widgets.json @@ -91,6 +91,8 @@ "toggleTextSize": ".t--property-control-textsize .t--js-toggle", "toggleVerticalAlig": ".t--property-control-verticalalignment .t--js-toggle", "toggleVisible": ".t--property-control-visible .t--js-toggle", + "backgroundJSVisible":".t--property-control-background .t--js-toggle", + "itemBackgroundJSVisible":".t--property-control-itembackground .t--js-toggle", "inputToggleVisible": "div.t--property-control-visible div.CodeMirror-lines", "toggleDisable": ".t--property-control-disabled .t--js-toggle", "inputToggleDisable": "div.t--property-control-disabled div.CodeMirror-code pre span", @@ -111,6 +113,12 @@ "switchWidgetActive": ".t--switch-widget-active", "switchWidgetInactive": ".t--switch-widget-inactive", "switchWidgetLoading": ".t--switch-widget-loading", + "colorsAvailable": ".bp3-popover-dismiss", + "listWidget":"[type=LIST_WIDGET]", + "itemContainerWidget":"[type=CONTAINER_WIDGET]", + "listWidgetName":".t--propery-page-title", + "toggleBackground": ".t--property-control-background .t--js-toggle", + "toggleItemBackground": ".t--property-control-itembackground .t--js-toggle", "chartPlotGroup": "g.raphael-group-63-plot-group", "toggleEnableMultirowselection": ".t--property-control-enablemultirowselection .bp3-control-indicator", "formWidget": ".t--draggable-formwidget", diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index 8771645dcb..f01b3c05ed 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -113,6 +113,7 @@ "switchWidgetInActive": ".t--switch-widget-inactive", "switchWidgetLoading": ".t--switch-widget-loading", "tablePageSizeChangeAction": ".t--property-control-onpagesizechange .t--open-dropdown-Select-Action", + "listWidgetNameTag": ".bp3-editable-text-content", "currencyType": ".t--property-control-currency .bp3-popover-target", "decimalType": ".t--property-control-decimals .bp3-popover-target", "allowCurrencyChange": ".t--property-control-allowcurrencychange input[type='checkbox']", diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index eaaa0ee2e8..01662702f1 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -717,6 +717,19 @@ Cypress.Commands.add("SearchEntityandOpen", (apiname1) => { .last() .click({ force: true }); }); +Cypress.Commands.add("SearchEntityandDblClick", (apiname1) => { + cy.get(commonlocators.entityExplorersearch) + .clear({ force: true }) + .type(apiname1, { force: true }); + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(500); + cy.get( + commonlocators.entitySearchResult.concat(apiname1).concat("')"), + ).should("be.visible"); + cy.get(commonlocators.entitySearchResult.concat(apiname1).concat("')")) + .last() + .dblclick({ force: true }); +}); Cypress.Commands.add("enterDatasourceAndPath", (datasource, path) => { cy.enterDatasource(datasource + path); @@ -1213,6 +1226,13 @@ Cypress.Commands.add("widgetText", (text, inputcss, innercss) => { cy.contains(innercss, text); }); +Cypress.Commands.add("verifyWidgetText", (text, inputcss, innercss) => { + cy.get(inputcss) + .first() + .trigger("mouseover", { force: true }); + cy.contains(innercss, text); +}); + Cypress.Commands.add("editColName", (text) => { cy.get(commonlocators.editColTitle) .click({ force: true }) @@ -1397,6 +1417,18 @@ Cypress.Commands.add("testJsontext", (endp, value, paste = true) => { cy.wait(1000); }); +Cypress.Commands.add("selectColor", (GivenProperty) => { + // Property pane of the widget is opened, and click given property. + cy.get( + ".t--property-control-" + GivenProperty + " .bp3-input-group input", + ).click({ + force: true, + }); + cy.get(widgetsPage.colorsAvailable) + .first() + .click({ force: true }); +}); + Cypress.Commands.add("toggleJsAndUpdate", (endp, value) => { cy.get(".CodeMirror textarea") .last() @@ -2347,18 +2379,22 @@ Cypress.Commands.add("openPropertyPane", (widgetType) => { }); Cypress.Commands.add("openPropertyPaneCopy", (widgetType) => { - const selector = `.t--draggable-${widgetType}`; - cy.get(selector) - .last() - .trigger("mouseover", { force: true }) - .wait(500); - cy.get( - `${selector}:first-of-type .t--widget-propertypane-toggle > .t--widget-name`, - ) - .first() - .click({ force: true }); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(1000); + if (widgetType === "List1Copy") { + cy.SearchEntityandOpen(widgetType); + } else { + const selector = `.t--draggable-${widgetType}`; + cy.get(selector) + .last() + .trigger("mouseover", { force: true }) + .wait(500); + cy.get( + `${selector}:first-of-type .t--widget-propertypane-toggle > .t--widget-name`, + ) + .first() + .click({ force: true }); + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(1000); + } }); Cypress.Commands.add("changeButtonStyle", (index, buttonColor, hoverColor) => {