Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

List widget UI test cases (#5535)

Browse Source 
* List Widget UI Test Cases

List Widget UI Test Cases:

Change the List Widget Name
Add or Modify items
Change the Background Color
Change the Item Background Color
Enable Disable Visible
Enable Disable Visible - JS
Adding Query/API
Copy Widget
Delete Widget
Change the list and item background color using JS Button

* Update List_spec.js
This commit is contained in:
arslanhaiderbuttar 2021-09-07 17:48:38 +05:00 committed by GitHub
parent 89b10b5520
commit c5503ee9e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 282 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/client/cypress/fixtures/example.json
View File

@ -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"
}
]
}

26
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/List_spec.js Normal file
View File

@ -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();
});
});

175
app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/List_spec.js
View File

@ -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(() => {

8
app/client/cypress/locators/Widgets.json
View File

@ -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",

1
app/client/cypress/locators/commonlocators.json
View File

@ -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']",

60
app/client/cypress/support/commands.js
View File

@ -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) => {