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

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
+  });
+});

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");
+      });
+    });
+  });
+});

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,
+    );
+  });
+});

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");
+  });
+});

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']"
+}
+
+
+

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')",

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