From f900cf976535edae66982d739d53071f5ecf1893 Mon Sep 17 00:00:00 2001 From: yatinappsmith <84702014+yatinappsmith@users.noreply.github.com> Date: Thu, 7 Oct 2021 07:59:16 +0530 Subject: [PATCH] test: JSEditor Tests (#8068) * Added basic support for JSEditor * Added copy and delete test cases * Basic changes for js editor * Basic tests * JSEditor Binding tests --- .../Binding/Bind_JSObject_List_Widget_spec.js | 80 +++++++++++++++++++ .../Bind_JSObject_Postgress_Table_spec.js | 58 ++++++++++++++ .../Binding/Bind_JSObject_Widgets.js | 27 +++++++ .../Entity_Explorer_JSEditor_spec.js | 51 ++++++++++++ app/client/cypress/locators/JSEditor.json | 14 ++++ .../cypress/locators/explorerlocators.json | 1 + app/client/cypress/support/commands.js | 44 ++++++++++ 7 files changed, 275 insertions(+) create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_List_Widget_spec.js create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_Postgress_Table_spec.js create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_Widgets.js create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_JSEditor_spec.js create mode 100644 app/client/cypress/locators/JSEditor.json diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_List_Widget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_List_Widget_spec.js new file mode 100644 index 0000000000..114192cee2 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_List_Widget_spec.js @@ -0,0 +1,80 @@ +const commonlocators = require("../../../../locators/commonlocators.json"); +const dsl = require("../../../../fixtures/listwidgetdsl.json"); +const pages = require("../../../../locators/Pages.json"); +const apiPage = require("../../../../locators/ApiEditor.json"); +const publishPage = require("../../../../locators/publishWidgetspage.json"); + +describe("Test Create Api and Bind to Table widget via JSObject", function() { + let apiData; + let valueToTest; + before(() => { + cy.addDsl(dsl); + }); + + it("Test_Add users api and bind to JSObject", function() { + cy.createAndFillApi(this.data.userApi, "/users"); + cy.RunAPI(); + cy.get(apiPage.responseBody) + .contains("name") + .siblings("span") + .invoke("text") + .then((text) => { + valueToTest = `${text + .match(/"(.*)"/)[0] + .split('"') + .join("")}`; + cy.log(valueToTest); + apiData = valueToTest; + cy.log("val1:" + valueToTest); + }); + cy.createJSObject("return Api1.data.users;"); + }); + + it("Test_Validate the Api data is updated on List widget", function() { + cy.SearchEntityandOpen("List1"); + cy.testJsontext("items", "{{JSObject1.run()}}"); + cy.get(commonlocators.editPropCrossButton).click({ force: true }); + cy.get(".t--draggable-textwidget span").should("have.length", 8); + + cy.get(".t--draggable-textwidget span") + .first() + .invoke("text") + .then((text) => { + expect(text).to.equal(valueToTest); + }); + cy.PublishtheApp(); + cy.get(".t--widget-textwidget span").should("have.length", 8); + cy.get(".t--widget-textwidget span") + .first() + .invoke("text") + .then((text) => { + expect(text).to.equal(valueToTest); + }); + }); + + it("Test_Validate the list widget ", function() { + cy.get(publishPage.backToEditor).click({ force: true }); + cy.SearchEntityandOpen("List1"); + cy.testJsontext("itemspacing\\(px\\)", "50"); + cy.get(commonlocators.editPropCrossButton).click({ force: true }); + cy.get(".t--draggable-textwidget span").should("have.length", 6); + cy.get(".t--draggable-textwidget span") + .first() + .invoke("text") + .then((text) => { + expect(text).to.equal(valueToTest); + }); + cy.PublishtheApp(); + cy.get(".t--widget-textwidget span").should("have.length", 6); + cy.get(".t--widget-textwidget span") + .first() + .invoke("text") + .then((text) => { + expect(text).to.equal(valueToTest); + }); + }); + + afterEach(() => { + // put your clean up code if any + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_Postgress_Table_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_Postgress_Table_spec.js new file mode 100644 index 0000000000..923df09a14 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_Postgress_Table_spec.js @@ -0,0 +1,58 @@ +const queryLocators = require("../../../../locators/QueryEditor.json"); +const queryEditor = require("../../../../locators/QueryEditor.json"); +const dsl = require("../../../../fixtures/inputdsl.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"); +const commonlocators = require("../../../../locators/commonlocators.json"); + +let datasourceName; + +describe("Addwidget from Query and bind with other widgets", function() { + before(() => { + cy.addDsl(dsl); + }); + + beforeEach(() => { + cy.startRoutesForDatasource(); + }); + it("Create a query and populate response by choosing addWidget and validate in Table Widget", () => { + cy.createPostgresDatasource(); + cy.get("@createDatasource").then((httpResponse) => { + datasourceName = httpResponse.response.body.data.name; + cy.NavigateToQueryEditor(); + cy.contains(".t--datasource-name", datasourceName) + .find(queryLocators.createQuery) + .click(); + cy.get(queryLocators.templateMenu).click(); + cy.get(".CodeMirror textarea") + .first() + .focus() + .type("SELECT * FROM configs LIMIT 10;"); + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(500); + // Mock the response for this test + cy.intercept("/api/v1/actions/execute", { + fixture: "addWidgetTable-mock", + }); + cy.get(queryEditor.runQuery).click(); + cy.wait("@postExecute").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.get(queryEditor.suggestedTableWidget).click(); + cy.createJSObject("return Query1.data;"); + + cy.SearchEntityandOpen("Table1"); + cy.testJsontext("tabledata", "{{JSObject1.run()}}"); + cy.isSelectRow(1); + cy.readTabledataPublish("1", "0").then((tabData) => { + const tabValue = tabData; + cy.log("the value is" + tabValue); + expect(tabValue).to.be.equal("5"); + }); + }); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_Widgets.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_Widgets.js new file mode 100644 index 0000000000..c30738140f --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_JSObject_Widgets.js @@ -0,0 +1,27 @@ +const explorer = require("../../../../locators/explorerlocators.json"); +const jsEditorLocators = require("../../../../locators/JSEditor.json"); +const commonlocators = require("../../../../locators/commonlocators.json"); +const dsl = require("../../../../fixtures/formInputTableDsl.json"); +const widgetsPage = require("../../../../locators/Widgets.json"); +const publish = require("../../../../locators/publishWidgetspage.json"); +const testdata = require("../../../../fixtures/testdata.json"); + +const pageid = "Page1"; + +describe("Binding the Widgets with JSObject", function() { + before(() => { + cy.addDsl(dsl); + }); + + it("Bind Input widget test with JSObject", function() { + cy.createJSObject('return "Success";'); + cy.SearchEntityandOpen("Input2"); + cy.testJsontext("defaulttext", "{{JSObject1.run()}}"); + cy.get(commonlocators.editPropCrossButton).click({ force: true }); + cy.wait("@updateLayout").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_JSEditor_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_JSEditor_spec.js new file mode 100644 index 0000000000..78845127e4 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_JSEditor_spec.js @@ -0,0 +1,51 @@ +const explorer = require("../../../../locators/explorerlocators.json"); +const jsEditorLocators = require("../../../../locators/JSEditor.json"); +const commonlocators = require("../../../../locators/commonlocators.json"); + +const pageid = "Page1"; + +describe("Entity explorer JSEditor structure", function() { + beforeEach(() => { + cy.ClearSearch(); + }); + + it("Create and Run JSObject", function() { + cy.createJSObject('return "Hello World";'); + cy.get(jsEditorLocators.outputConsole).contains("Hello World"); + cy.get(`.t--entity.t--jsaction:contains(JSObject1)`).should( + "have.length", + 1, + ); + cy.get(`.t--entity.t--jsaction:contains(JSObject1)`) + .find(explorer.collapse) + .click({ multiple: true }); + cy.get(jsEditorLocators.propertyList).then(function($lis) { + expect($lis).to.have.length(2); + expect($lis.eq(0)).to.contain("{{JSObject1.run()}}"); + expect($lis.eq(1)).to.contain("{{JSObject1.results}}"); + }); + }); + + it("Rename JSObject", function() { + cy.get(jsEditorLocators.jsObjectName).click(); + cy.get(jsEditorLocators.editNameField) + .clear() + .type("NewNameJSObj"); + cy.get(jsEditorLocators.jsPage).click(); + cy.get(jsEditorLocators.jsObjectName).contains("NewNameJSObj"); + }); + + it("Copy JSObject", function() { + cy.xpath(jsEditorLocators.popover) + .last() + .should("be.hidden") + .invoke("show") + .click({ force: true }); + + cy.copyJSObjectToPage(pageid); + }); + + it("Delete JSObject", function() { + cy.deleteJSObject("NewNameJSObj"); + }); +}); diff --git a/app/client/cypress/locators/JSEditor.json b/app/client/cypress/locators/JSEditor.json new file mode 100644 index 0000000000..0a367dbec9 --- /dev/null +++ b/app/client/cypress/locators/JSEditor.json @@ -0,0 +1,14 @@ +{ + "runButton": ".run-button", + "editNameField": ".bp3-editable-text-input", + "outputConsole": ".CodeEditorTarget", + "jsObjectName": ".t--action-name-edit-field", + "jsPage": ".form-row-header", + "jsPageProperty": ".entity-context-menu", + "propertyList": ".t--entity-property", + "delete": ".single-select >div:contains('Delete')", + "popover": "//*[local-name()='g' and @id='Icon/Outline/more-vertical']" +} + + + diff --git a/app/client/cypress/locators/explorerlocators.json b/app/client/cypress/locators/explorerlocators.json index 3fb42353c2..bb5bb9b0ef 100644 --- a/app/client/cypress/locators/explorerlocators.json +++ b/app/client/cypress/locators/explorerlocators.json @@ -4,6 +4,7 @@ "NoWidgetsMsg": "p:contains('icon above to add widgets')", "AddPage": ".pages .t--entity-add-btn", "addEntityAPI": ".datasources .t--entity-add-btn", + "addEntityJSEditor": ".js_actions .t--entity-add-btn", "entityWidget": ".t--entity-name:contains('Widgets')", "entityTable": ".t--entity-name:contains('Table1')", "entityText": ".t--entity-name:contains('Text1')", diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 6c1042932a..c546f7d3c7 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -24,6 +24,7 @@ const explorer = require("../locators/explorerlocators.json"); const datasource = require("../locators/DatasourcesEditor.json"); const viewWidgetsPage = require("../locators/ViewWidgets.json"); const generatePage = require("../locators/GeneratePage.json"); +const jsEditorLocators = require("../locators/JSEditor.json"); let pageidcopy = " "; @@ -1109,6 +1110,21 @@ Cypress.Commands.add("DeleteAPI", (apiname) => { ); }); +Cypress.Commands.add("copyJSObjectToPage", (pageName) => { + cy.xpath(apiwidget.popover) + .last() + .click({ force: true }); + cy.get(apiwidget.copyTo).click({ force: true }); + cy.get(apiwidget.page) + .contains(pageName) + .click(); + cy.wait("@createNewJSCollection").should( + "have.nested.property", + "response.body.responseMeta.status", + 201, + ); +}); + Cypress.Commands.add("AddActionWithModal", () => { cy.get(commonlocators.dropdownSelectButton) .last() @@ -1931,6 +1947,10 @@ Cypress.Commands.add("NavigateToQueriesInExplorer", () => { cy.get(explorer.entityQuery).click({ force: true }); }); +Cypress.Commands.add("NavigateToJSEditor", () => { + cy.get(explorer.addEntityJSEditor).click({ force: true }); +}); + Cypress.Commands.add("testCreateApiButton", () => { cy.get(ApiEditor.createBlankApiCard).click({ force: true }); cy.wait("@createNewApi").should( @@ -2278,6 +2298,16 @@ Cypress.Commands.add("deleteQuery", () => { ); }); +Cypress.Commands.add("deleteJSObject", () => { + cy.hoverAndClick(); + cy.get(jsEditorLocators.delete).click({ force: true }); + cy.wait("@deleteJSCollection").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); +}); + Cypress.Commands.add("deleteDataSource", () => { cy.hoverAndClick(); cy.get(apiwidget.delete).click({ force: true }); @@ -2689,6 +2719,8 @@ Cypress.Commands.add("startServerAndRoutes", () => { cy.route("POST", "/api/v1/comments/threads").as("createNewThread"); cy.route("POST", "/api/v1/comments?threadId=*").as("createNewComment"); + cy.route("POST", "/api/v1/collections/actions").as("createNewJSCollection"); + cy.route("DELETE", "/api/v1/collections/actions/*").as("deleteJSCollection"); }); Cypress.Commands.add("alertValidate", (text) => { @@ -2869,3 +2901,15 @@ Cypress.Commands.add("createAmazonS3Datasource", () => { cy.testSaveDatasource(); }); + +Cypress.Commands.add("createJSObject", (JSCode) => { + cy.NavigateToJSEditor(); + cy.wait(1000); + cy.get(".CodeMirror textarea") + .first() + .focus() + .type("{downarrow}{downarrow}{downarrow} ") + .type(JSCode); + cy.wait(1000); + cy.get(jsEditorLocators.runButton).click(); +});