From d8bbccb63a20409c126d755555efc99199fea06f Mon Sep 17 00:00:00 2001
From: NandanAnantharamu <67676905+NandanAnantharamu@users.noreply.github.com>
Date: Tue, 8 Sep 2020 16:24:55 +0530
Subject: [PATCH] Drag And drop widget (#503)

* Drag And drop widget

* Updated cordinates
---
 .../Entity_Explorer_DragAndDropWidget_spec.js | 59 +++++++++++++++++++
 .../cypress/locators/explorerlocators.json    |  5 +-
 app/client/cypress/support/commands.js        | 19 ++++++
 3 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
new file mode 100644
index 0000000000..b9fc71360c
--- /dev/null
+++ b/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}}");
+    });
+  });
+});
diff --git a/app/client/cypress/locators/explorerlocators.json b/app/client/cypress/locators/explorerlocators.json
index 3a74403c37..a416dfa58d 100644
--- a/app/client/cypress/locators/explorerlocators.json
+++ b/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"
 }
\ No newline at end of file
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 7b4ca8a8c2..68a9a5bc19 100644
--- a/app/client/cypress/support/commands.js
+++ b/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)