test: Form widget UI test (#6884)

* Form widget test cases

* Form widget Test Cases

- Form widget fixes

* Form widget Test Cases

Defult Form text,  Reset and Close button Validation
Add Multiple widgets in Form
Form_Widget Minimize and maximize General Validation
Rename Form widget from Entity Explorer
Toggle JS - Form-Unckeck Visible field Validationpassed
Toggle JS - Form-Check Visible field Validationpassed
Copy Paste Validation
Form Delete Validation

* Form_test_cases_Fix

* Form test cases fix

Author: arslanhaiderbuttar

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js

@@ -4,11 +4,49 @@ const publish = require("../../../../locators/publishWidgetspage.json");
 const dsl = require("../../../../fixtures/formdsl.json");
 const pages = require("../../../../locators/Pages.json");
 const widgetsPage = require("../../../../locators/Widgets.json");
+const explorer = require("../../../../locators/explorerlocators.json");
 
 describe("Form Widget Functionality", function() {
   before(() => {
     cy.addDsl(dsl);
   });
+  it("Defult Form text,  Reset and Close button Validation", function() {
+    cy.get(widgetsPage.textWidget).should("be.visible");
+    cy.get(widgetsPage.formButtonWidget)
+      .contains("Submit")
+      .scrollIntoView()
+      .should("be.visible");
+    cy.get(widgetsPage.formButtonWidget)
+      .contains("Reset")
+      .scrollIntoView()
+      .should("be.visible");
+  });
+  it("Add Multiple widgets in Form", function() {
+    cy.get(explorer.addWidget).click();
+    cy.get(commonlocators.entityExplorersearch).should("be.visible");
+    cy.dragAndDropToWidget("multiselectwidget", "formwidget", {
+      x: 100,
+      y: 100,
+    });
+    cy.dragAndDropToWidget("inputwidget", "formwidget", { x: 50, y: 200 });
+    cy.get(formWidgetsPage.multiselectWidget).should("be.visible");
+    cy.get(widgetsPage.inputWidget).should("be.visible");
+    cy.PublishtheApp();
+  });
+  it("Form_Widget Minimize and maximize General Validation", function() {
+    cy.openPropertyPane("formwidget");
+    cy.get(commonlocators.generalChevran).click({ force: true });
+    cy.get(commonlocators.generalSection).should("not.be.visible");
+    cy.get(commonlocators.generalChevran).click({ force: true });
+    cy.get(commonlocators.generalSection).should("be.visible");
+    cy.PublishtheApp();
+  });
+  it("Rename Form widget from Entity Explorer", function() {
+    cy.GlobalSearchEntity("Form1");
+    cy.RenameEntity("Form");
+    cy.wait(1000);
+    cy.get(".t--entity").should("contain", "Form");
+  });
   it("Form Widget Functionality", function() {
     cy.openPropertyPane("formwidget");
     /**
@@ -39,15 +77,14 @@ describe("Form Widget Functionality", function() {
       .scrollTo("bottom")
       .should("be.visible");
     cy.get(commonlocators.editPropCrossButton).click({ force: true });
-    cy.PublishtheApp();
   });
   it("Form Widget Functionality To Verify The Colour", function() {
+    cy.PublishtheApp();
     cy.get(formWidgetsPage.formD)
       .should("have.css", "background-color")
       .and("eq", "rgb(3, 179, 101)");
   });
   it("Form Widget Functionality To Unchecked Visible Widget", function() {
-    cy.get(publish.backToEditor).click();
     cy.openPropertyPane("formwidget");
     cy.togglebarDisable(commonlocators.visibleCheckbox);
     cy.PublishtheApp();
@@ -61,7 +98,51 @@ describe("Form Widget Functionality", function() {
     cy.get(publish.formWidget).should("be.visible");
     cy.get(publish.backToEditor).click();
   });
+  it("Toggle JS - Form-Unckeck Visible field Validation", function() {
+    cy.openPropertyPane("formwidget");
+    //Uncheck the disabled checkbox using JS and validate
+    cy.get(widgetsPage.toggleVisible).click({ force: true });
+    cy.testJsontext("visible", "false");
+    cy.PublishtheApp();
+    cy.get(publish.formWidget).should("not.exist");
+  });
+
+  it("Toggle JS - Form-Check Visible field Validation", function() {
+    cy.openPropertyPane("formwidget");
+    //Check the disabled checkbox using JS and Validate
+    cy.testJsontext("visible", "true");
+    cy.PublishtheApp();
+    cy.get(publish.formWidget).should("be.visible");
+  });
+  it("Explore Widget related documents Verification", function() {
+    // Open property pane
+    cy.openPropertyPane("formwidget");
+    // Click on "Explore widget related docs" button
+    cy.get(widgetsPage.exploreWidget).click();
+    // Verify the widget related document
+    cy.get(widgetsPage.widgetRelatedDocument).should("contain", "Form");
+    cy.wait(500);
+    cy.get(widgetsPage.header).click();
+    cy.PublishtheApp();
+  });
+  it("Form-Copy Verification", function() {
+    cy.openPropertyPane("formwidget");
+    const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl";
+    //Copy Form and verify all properties
+    cy.copyWidget("formwidget", widgetsPage.formWidget);
+
+    cy.PublishtheApp();
+  });
+
+  it("Form-Delete Verification", function() {
+    cy.openPropertyPane("formwidget");
+    // Delete the Form widget
+    cy.deleteWidget(widgetsPage.formWidget);
+    cy.PublishtheApp();
+    cy.get(widgetsPage.formWidget).should("not.exist");
+  });
 });
 afterEach(() => {
   // put your clean up code if any
+  cy.goToEditFromPublish();
 });

app/client/cypress/locators/Widgets.json

@@ -111,6 +111,7 @@
     "switchWidgetLoading": ".t--switch-widget-loading",
     "chartPlotGroup": "g.raphael-group-63-plot-group",
     "toggleEnableMultirowselection": ".t--property-control-enablemultirowselection .bp3-control-indicator",
+    "formWidget": ".t--draggable-formwidget",
     "searchField": "[type=search]",
     "defaultSelectedRowField":".t--property-control-defaultselectedrow .CodeMirror-line",
     "selectedRow":".selected-row",

app/client/cypress/locators/commonlocators.json

@@ -118,5 +118,7 @@
   "inputCurrencyChangeType": ".t--input-currency-change",
   "inputCountryCodeChangeType": ".t--input-country-code-change",
   "viewerPage": ".t--app-viewer-page",
-  "dropDownOptSelected": "//span[@type='p1']"
+  "dropDownOptSelected": "//span[@type='p1']",
+  "generalChevran":".t--property-pane-section-collapse-general  [icon=chevron-right]",
+  "generalSection":".t--property-pane-section-general"
 }

app/client/cypress/support/commands.js

@@ -2206,6 +2206,21 @@ Cypress.Commands.add("dragAndDropToCanvas", (widgetType, { x, y }) => {
     .trigger("mouseup", x, y, { eventConstructor: "MouseEvent" });
 });
 
+Cypress.Commands.add(
+  "dragAndDropToWidget",
+  (widgetType, destinationWidget, { x, y }) => {
+    const selector = `.t--widget-card-draggable-${widgetType}`;
+    cy.get(selector)
+      .trigger("dragstart", { force: true })
+      .trigger("mousemove", x, y, { force: true });
+    const selector2 = `.t--draggable-${destinationWidget}`;
+    cy.get(selector2)
+      .trigger("mousemove", x, y, { eventConstructor: "MouseEvent" })
+      .trigger("mousemove", x, y, { eventConstructor: "MouseEvent" })
+      .trigger("mouseup", x, y, { eventConstructor: "MouseEvent" });
+  },
+);
+
 Cypress.Commands.add("executeDbQuery", (queryName) => {
   cy.get(widgetsPage.buttonOnClick)
     .get(commonlocators.dropdownSelectButton)