Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

app/client/cypress/integration/Smoke_TestSuite/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js

@@ -0,0 +1,59 @@
+const testdata = require("../../../fixtures/testdata.json");
+const apiwidget = require("../../../locators/apiWidgetslocator.json");
+const explorer = require("../../../locators/explorerlocators.json");
+const commonlocators = require("../../../locators/commonlocators.json");
+const formWidgetsPage = require("../../../locators/FormWidgets.json");
+const publish = require("../../../locators/publishWidgetspage.json");
+
+const pageid = "MyPage";
+
+describe("Entity explorer Drag and Drop widgets testcases", function() {
+  it("Drag and drop form widget and validate", function() {
+    cy.log("Login Successful");
+    cy.get(explorer.addWidget).click();
+    cy.get(commonlocators.entityExplorersearch).should("be.visible");
+    cy.get(commonlocators.entityExplorersearch)
+      .clear()
+      .type("form");
+    cy.dragAndDropToCanvas("formwidget");
+    /**
+     * @param{Text} Random Text
+     * @param{FormWidget}Mouseover
+     * @param{FormPre Css} Assertion
+     */
+    cy.widgetText(
+      "FormTest",
+      formWidgetsPage.formWidget,
+      formWidgetsPage.formInner,
+    );
+    /**
+     * @param{Text} Random Colour
+     */
+    cy.testCodeMirror(this.data.colour);
+    cy.get(formWidgetsPage.formD)
+      .should("have.css", "background-color")
+      .and("eq", this.data.rgbValue);
+    /**
+     * @param{toggleButton Css} Assert to be checked
+     */
+    cy.togglebar(commonlocators.scrollView);
+    cy.get(formWidgetsPage.formD)
+      .scrollTo("bottom")
+      .should("be.visible");
+    cy.get(commonlocators.editPropCrossButton).click();
+    cy.get(explorer.closeWidgets).click();
+    cy.PublishtheApp();
+    cy.get(publish.backToEditor)
+      .first()
+      .click();
+    cy.SearchEntityandOpen("FormTest");
+    cy.get(explorer.property)
+      .last()
+      .click({ force: true });
+    cy.get(apiwidget.propertyList).then(function($lis) {
+      expect($lis).to.have.length(2);
+      expect($lis.eq(0)).to.contain("{{FormTest.isVisible}}");
+      expect($lis.eq(1)).to.contain("{{FormTest.data}}");
+    });
+  });
+});

app/client/cypress/locators/explorerlocators.json

@@ -16,5 +16,8 @@
     "property": ".language-appsmith-binding",
     "editNameField": ".editing input",
     "editEntityField": ".bp3-editable-text-input",
-    "entity":".t--entity-name"
+    "entity":".t--entity-name",
+    "addWidget":".widgets .t--entity-add-btn",
+    "dropHere":".appsmith_widget_0",
+    "closeWidgets":".t--close-widgets-sidebar"
 }

app/client/cypress/support/commands.js

@@ -34,6 +34,15 @@ Cypress.Commands.add("createOrg", orgName => {
   );
 });
 
+Cypress.Commands.add(
+  "dragTo",
+  { prevSubject: "element" },
+  (subject, targetEl) => {
+    cy.wrap(subject).trigger("dragstart");
+    cy.get(targetEl).trigger("drop");
+  },
+);
+
 Cypress.Commands.add("navigateToOrgSettings", orgName => {
   cy.get(homePage.orgList.concat(orgName).concat(")"))
     .scrollIntoView()
@@ -1387,6 +1396,16 @@ Cypress.Commands.add("runAndDeleteQuery", () => {
   );
 });
 
+Cypress.Commands.add("dragAndDropToCanvas", widgetType => {
+  const selector = `.t--widget-card-draggable-${widgetType}`;
+  cy.get(selector)
+    .trigger("mousedown", { button: 0 }, { force: true })
+    .trigger("mousemove", 300, -300, { force: true });
+  cy.get(explorer.dropHere)
+    .click()
+    .trigger("mouseup", { force: true });
+});
+
 Cypress.Commands.add("openPropertyPane", widgetType => {
   const selector = `.t--draggable-${widgetType}`;
   cy.get(selector)