diff --git a/app/client/cypress/fixtures/tableWidgetDsl.json b/app/client/cypress/fixtures/tableWidgetDsl.json new file mode 100644 index 0000000000..d195d15d08 --- /dev/null +++ b/app/client/cypress/fixtures/tableWidgetDsl.json @@ -0,0 +1,84 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1254, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 4, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container3", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 23, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "transparent", + "widgetName": "8muuok24ny", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 1204, + "topRow": 0, + "bottomRow": 532, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "isVisible": true, + "label": "Data", + "widgetName": "Table1", + "tableData": "[\n {\n \"id\": 2381224,\n \"email\": \"michael.lawson@reqres.in\",\n \"userName\": \"Michael Lawson\",\n \"productName\": \"Chicken Sandwich\",\n \"orderAmount\": 4.99\n },\n {\n \"id\": 2736212,\n \"email\": \"lindsay.ferguson@reqres.in\",\n \"userName\": \"Lindsay Ferguson\",\n \"productName\": \"Tuna Salad\",\n \"orderAmount\": 9.99\n },\n {\n \"id\": 6788734,\n \"email\": \"tobias.funke@reqres.in\",\n \"userName\": \"Tobias Funke\",\n \"productName\": \"Beef steak\",\n \"orderAmount\": 19.99\n },\n {\n \"id\": 7434532,\n \"email\": \"byron.fields@reqres.in\",\n \"userName\": \"Byron Fields\",\n \"productName\": \"Chicken Sandwich\",\n \"orderAmount\": 4.99\n },\n {\n \"id\": 7434532,\n \"email\": \"ryan.holmes@reqres.in\",\n \"userName\": \"Ryan Holmes\",\n \"productName\": \"Avocado Panini\",\n \"orderAmount\": 7.99\n }\n]", + "type": "TABLE_WIDGET", + "isLoading": false, + "parentColumnSpace": 71.75, + "parentRowSpace": 38, + "leftColumn": 4, + "rightColumn": 12, + "topRow": 4, + "bottomRow": 11, + "parentId": "tyiwk4xuq0", + "widgetId": "3okigoupoo", + "dynamicBindings": { + "selectedRow": true + } + } + ], + "widgetId": "tyiwk4xuq0", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "3oe1ka7jon" + } + ] + } + } \ No newline at end of file diff --git a/app/client/cypress/fixtures/uibindingdsl.json b/app/client/cypress/fixtures/uibindingdsl.json new file mode 100644 index 0000000000..56a5f97104 --- /dev/null +++ b/app/client/cypress/fixtures/uibindingdsl.json @@ -0,0 +1,394 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1254, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 3, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container1", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 1, + "rightColumn": 15, + "topRow": 0, + "bottomRow": 15, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "utncsu66ty", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 602, + "topRow": 0, + "bottomRow": 342, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "isVisible": true, + "isDisabled": false, + "datePickerType": "DATE_PICKER", + "dateFormat": "DD/MM/YYYY", + "label": "Date", + "widgetName": "DatePicker1", + "defaultDate": "2020-04-25T13:33:46.277+05:30", + "type": "DATE_PICKER_WIDGET", + "isLoading": false, + "parentColumnSpace": 34.6875, + "parentRowSpace": 38, + "leftColumn": 1, + "rightColumn": 9, + "topRow": 1, + "bottomRow": 2, + "parentId": "acizsl94my", + "widgetId": "o87a4mf3lq", + "dynamicProperties": {}, + "dynamicBindings": { + "isValid": true + }, + "dynamicTriggers": { + "onDateSelected": true + }, + "onDateSelected": "{{showModal('Modal1')}}" + }, + { + "isVisible": true, + "isDisabled": false, + "datePickerType": "DATE_PICKER", + "dateFormat": "DD/MM/YYYY", + "label": "Date", + "widgetName": "DatePicker2", + "defaultDate": "2020-04-24T13:03:46.277+05:30", + "type": "DATE_PICKER_WIDGET", + "isLoading": false, + "parentColumnSpace": 34.6875, + "parentRowSpace": 38, + "leftColumn": 1, + "rightColumn": 9, + "topRow": 3, + "bottomRow": 4, + "parentId": "acizsl94my", + "widgetId": "tq86uzjesl" + }, + { + "isVisible": true, + "text": "{{DatePicker1.defaultDate}}", + "textStyle": "LABEL", + "widgetName": "Text5", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 34.6875, + "parentRowSpace": 38, + "leftColumn": 4, + "rightColumn": 8, + "topRow": 5, + "bottomRow": 6, + "parentId": "acizsl94my", + "widgetId": "dodyn4d4qd", + "dynamicBindings": { + "text": true + } + } + ], + "widgetId": "acizsl94my", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "mp429a7dl3" + }, + { + "isVisible": false, + "size": "MODAL_SMALL", + "canEscapeKeyClose": true, + "detachFromLayout": true, + "canOutsideClickClose": true, + "shouldScrollContents": true, + "widgetName": "Modal1", + "children": [ + { + "isVisible": true, + "widgetName": "Canvas1", + "detachFromLayout": true, + "canExtend": true, + "isDisabled": false, + "shouldScrollContents": false, + "children": [ + { + "isVisible": true, + "widgetName": "Icon1", + "iconName": "cross", + "iconSize": 24, + "color": "#040627", + "type": "ICON_WIDGET", + "isLoading": false, + "leftColumn": 15, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 1, + "parentId": "cwamdbv44c", + "widgetId": "t3sjfihdb1", + "onClick": "{{closeModal('Modal1')}}" + }, + { + "isVisible": true, + "text": "Modal Title", + "textStyle": "HEADING", + "widgetName": "Text4", + "type": "TEXT_WIDGET", + "isLoading": false, + "leftColumn": 0, + "rightColumn": 15, + "topRow": 0, + "bottomRow": 1, + "parentId": "cwamdbv44c", + "widgetId": "x893ud3zjh", + "dynamicBindings": {} + }, + { + "isVisible": true, + "text": "Cancel", + "buttonStyle": "SECONDARY_BUTTON", + "widgetName": "Button2", + "isDisabled": false, + "isDefaultClickDisabled": true, + "type": "BUTTON_WIDGET", + "isLoading": false, + "leftColumn": 10, + "rightColumn": 13, + "topRow": 4, + "bottomRow": 5, + "parentId": "cwamdbv44c", + "widgetId": "q9snwskqan" + }, + { + "isVisible": true, + "text": "Confirm", + "buttonStyle": "PRIMARY_BUTTON", + "widgetName": "Button3", + "isDisabled": false, + "isDefaultClickDisabled": true, + "type": "BUTTON_WIDGET", + "isLoading": false, + "leftColumn": 13, + "rightColumn": 16, + "topRow": 4, + "bottomRow": 5, + "parentId": "cwamdbv44c", + "widgetId": "tufuj2kdpz" + } + ], + "blueprint": { + "view": [ + { + "type": "ICON_WIDGET", + "position": { + "left": 15, + "top": 0 + }, + "size": { + "rows": 1, + "cols": 1 + }, + "props": { + "iconName": "cross", + "iconSize": 24, + "color": "#040627" + } + }, + { + "type": "TEXT_WIDGET", + "position": { + "left": 0, + "top": 0 + }, + "size": { + "rows": 1, + "cols": 15 + }, + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "type": "BUTTON_WIDGET", + "position": { + "left": 10, + "top": 4 + }, + "size": { + "rows": 1, + "cols": 3 + }, + "props": { + "text": "Cancel", + "buttonStyle": "SECONDARY_BUTTON" + } + }, + { + "type": "BUTTON_WIDGET", + "position": { + "left": 13, + "top": 4 + }, + "size": { + "rows": 1, + "cols": 3 + }, + "props": { + "text": "Confirm", + "buttonStyle": "PRIMARY_BUTTON" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "minHeight": 0, + "type": "CANVAS_WIDGET", + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 0, + "topRow": 0, + "bottomRow": 0, + "parentId": "bx9a2jg08o", + "widgetId": "cwamdbv44c" + } + ], + "blueprint": { + "view": [ + { + "type": "CANVAS_WIDGET", + "position": { + "left": 0, + "top": 0 + }, + "props": { + "detachFromLayout": true, + "canExtend": true, + "isVisible": true, + "isDisabled": false, + "shouldScrollContents": false, + "children": [], + "blueprint": { + "view": [ + { + "type": "ICON_WIDGET", + "position": { + "left": 15, + "top": 0 + }, + "size": { + "rows": 1, + "cols": 1 + }, + "props": { + "iconName": "cross", + "iconSize": 24, + "color": "#040627" + } + }, + { + "type": "TEXT_WIDGET", + "position": { + "left": 0, + "top": 0 + }, + "size": { + "rows": 1, + "cols": 15 + }, + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "type": "BUTTON_WIDGET", + "position": { + "left": 10, + "top": 4 + }, + "size": { + "rows": 1, + "cols": 3 + }, + "props": { + "text": "Cancel", + "buttonStyle": "SECONDARY_BUTTON" + } + }, + { + "type": "BUTTON_WIDGET", + "position": { + "left": 13, + "top": 4 + }, + "size": { + "rows": 1, + "cols": 3 + }, + "props": { + "text": "Confirm", + "buttonStyle": "PRIMARY_BUTTON" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + } + } + } + ] + }, + "type": "MODAL_WIDGET", + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 0, + "topRow": 0, + "bottomRow": 0, + "parentId": "0", + "widgetId": "bx9a2jg08o" + } + ] + } +} diff --git a/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_DatePicker_Text_spec.js b/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_DatePicker_Text_spec.js new file mode 100644 index 0000000000..5712db5d26 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_DatePicker_Text_spec.js @@ -0,0 +1,34 @@ +const commonlocators = require("../../../locators/commonlocators.json"); +const formWidgetsPage = require("../../../locators/FormWidgets.json"); +const widgetsPage = require("../../../locators/Widgets.json"); +const dsl = require("../../../fixtures/uibindingdsl.json"); + +describe("Binding the Datepicker and Text Widget", function() { + before(() => { + cy.addDsl(dsl); + }); + + it("Bind the date picker in text widget", function() { + cy.openPropertyPane("textwidget"); + + //Changing the text on the text widget + cy.testCodeMirror("{{DatePicker1.defaultDate}}"); + cy.get(commonlocators.editPropCrossButton).click(); + }); + + it("Change the date in datePicker1 and validate the same in text widget", function() { + // changing the date to today + cy.SetDateToToday(); + + //Changing date on date picker1 to current date +1 + cy.get(".DayPicker-Day[aria-selected='true'] + div").click(); + cy.get(".t--property-control-ondateselected").click(); + cy.get(commonlocators.editPropCrossButton).click(); + + //Validate the changes in text widget + const nd = Cypress.moment() + .add(1, "days") + .format("YYYY-MM-DD"); + cy.get(commonlocators.labelTextStyle).should("contain", nd); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_tableApi_spec.js b/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_tableApi_spec.js new file mode 100644 index 0000000000..305e7947a8 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_tableApi_spec.js @@ -0,0 +1,47 @@ +const commonlocators = require("../../../locators/commonlocators.json"); +const dsl = require("../../../fixtures/tableWidgetDsl.json"); +const pages = require("../../../locators/Pages.json"); +let apiData; + +describe("Test Create Api and Bind to Table widget", function() { + before(() => { + cy.addDsl(dsl); + }); + + beforeEach(() => { + cy.server(); + cy.route("PUT", "/api/v1/layouts/*/pages/*").as("updateLayout"); + }); + + it("Test Add users api api and execute api", function() { + localStorage.setItem("ApiPaneV2", "ApiPaneV2"); + cy.NavigateToApiEditor(); + cy.testCreateApiButton(); + cy.createApi("http://postgrest.appsmith.com:3000", "users"); + cy.get(".CodeMirror-code span.cm-string.cm-property") + .contains("name") + .siblings("span") + .invoke("text") + .then(text => { + cy.log(text); + apiData = text; + cy.log("val1:" + apiData); + }); + }); + + it("Bind the User Api to Table widget", function() { + // cy.log(value) + cy.get(pages.pagesIcon).click({ force: true }); + cy.openPropertyPane("tablewidget"); + cy.testCodeMirror("{{Api1.data}}"); + cy.wait("@updateLayout"); + cy.get(commonlocators.editPropCrossButton).click(); + cy.readTabledata("0", "1").then(tabData => { + expect(apiData).to.eq(`\"${tabData}\"`); + }); + }); + + afterEach(() => { + // put your clean up code if any + }); +}); diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 3071fbd716..3b2855ebc8 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -376,20 +376,15 @@ Cypress.Commands.add("testCodeMirror", value => { parseSpecialCharSequences: false, }); // cy.wait("@updateLayout"); - cy.get(".CodeMirror textarea") + // commenting below line's, hence which effets the text area which is having js fun + /*cy.get(".CodeMirror textarea") .first() - .should("have.value", value); + .should("have.value", value); */ }); }); Cypress.Commands.add("SetDateToToday", () => { - cy.get(formWidgetsPage.datepickerWidget) - .first() - .trigger("mouseover"); - cy.get(formWidgetsPage.datepickerWidget) - .children(commonlocators.editicon) - .first() - .click({ force: true }); + cy.openPropertyPane("datepickerwidget"); cy.get(".t--property-control-defaultdate input").click(); cy.get(".bp3-datepicker-footer span") .contains("Today") @@ -649,3 +644,24 @@ Cypress.Commands.add("openPropertyPane", widgetType => { .first() .click(); }); + +Cypress.Commands.add("createApi", (url, parameters) => { + cy.get(ApiEditor.dataSourceField).click(); + cy.contains(url).click({ + force: true, + }); + cy.get(".CodeMirror.CodeMirror-empty textarea") + .first() + .click({ force: true }) + .type(parameters, { force: true }); + cy.get(ApiEditor.ApiRunBtn).click(); + cy.SaveAPI(); + cy.get(ApiEditor.formActionButtons).should("be.visible"); + cy.get(ApiEditor.ApiRunBtn).should("not.be.disabled"); +}); + +Cypress.Commands.add("readTabledata", (rowNum, colNum) => { + const selector = `.t--draggable-tablewidget .e-gridcontent.e-lib.e-droppable td[index=${rowNum}][aria-colindex=${colNum}]`; + const tabVal = cy.get(selector).invoke("text"); + return tabVal; +});