From 74031b3302fabe60de3a1186a44a15a740350237 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sat, 8 Oct 2022 17:11:39 +0530
Subject: [PATCH] test: survey form

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../form/[viewId]/index/survey.vue            |  38 +++-
 .../integration/common/4i_survey_form.js      | 191 ++++++++++++++++++
 .../cypress/integration/test/pg-restViews.js  |   2 +
 scripts/cypress/integration/test/restViews.js |   2 +
 .../integration/test/xcdb-restViews.js        |   2 +
 scripts/cypress/support/commands.js           |   3 +-
 6 files changed, 227 insertions(+), 11 deletions(-)
 create mode 100644 scripts/cypress/integration/common/4i_survey_form.js

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 5d31023b30..3efa85dc85 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -158,11 +158,12 @@ onMounted(() => {
       class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
     >
       <div class="px-4 md:px-0 flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+        <h1 class="prose-2xl font-bold self-center my-4" data-cy="nc-survey-form__heading">{{ sharedFormView.heading }}</h1>
 
         <h2
           v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
           class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
+          data-cy="nc-survey-form__sub-heading"
         >
           {{ sharedFormView?.subheading }}
         </h2>
@@ -197,7 +198,7 @@ onMounted(() => {
               <LazySmartsheetVirtualCell
                 v-if="isVirtualCol(field)"
                 class="mt-0 nc-input"
-                :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                :data-cy="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
               />
 
@@ -205,7 +206,7 @@ onMounted(() => {
                 v-else
                 v-model="formState[field.title]"
                 class="nc-input"
-                :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                :data-cy="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
                 :edit-enabled="true"
               />
@@ -215,7 +216,7 @@ onMounted(() => {
                   {{ error.$message }}
                 </div>
 
-                <div class="block text-[14px]">
+                <div class="block text-[14px]" data-cy="nc-survey-form__field-description">
                   {{ field.description }}
                 </div>
               </div>
@@ -225,7 +226,12 @@ onMounted(() => {
           <div class="ml-1 mt-4 flex w-full text-lg">
             <div class="flex-1 flex justify-center">
               <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
-                <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
+                <button
+                  type="submit"
+                  class="uppercase scaling-btn prose-sm"
+                  data-cy="nc-survey-form__btn-submit"
+                  @click="submitForm"
+                >
                   {{ $t('general.submit') }}
                 </button>
               </div>
@@ -238,6 +244,7 @@ onMounted(() => {
                 >
                   <button
                     class="bg-opacity-100 scaling-btn flex items-center gap-1"
+                    data-cy="nc-survey-form__btn-next"
                     :class="v$.localState[field.title]?.$error ? 'after:!bg-gray-100 after:!ring-red-500' : ''"
                     @click="goNext"
                   >
@@ -262,7 +269,7 @@ onMounted(() => {
 
           <Transition name="slide-left">
             <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
-              <div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded">
+              <div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded" data-cy="nc-survey-form__success-msg">
                 <template v-if="sharedFormView?.success_msg">
                   {{ sharedFormView?.success_msg }}
                 </template>
@@ -282,7 +289,14 @@ onMounted(() => {
                 </p>
 
                 <div v-if="sharedFormView?.submit_another_form" class="text-center">
-                  <button type="button" class="scaling-btn bg-opacity-100" @click="resetForm">Submit Another Form</button>
+                  <button
+                    type="button"
+                    class="scaling-btn bg-opacity-100"
+                    data-cy="nc-survey-form__btn-submit-another-form"
+                    @click="resetForm"
+                  >
+                    Submit Another Form
+                  </button>
                 </div>
               </div>
             </div>
@@ -292,7 +306,7 @@ onMounted(() => {
     </div>
 
     <template v-if="!submitted">
-      <div class="mb-24 md:my-4 select-none text-center text-gray-500 dark:text-slate-200">
+      <div class="mb-24 md:my-4 select-none text-center text-gray-500 dark:text-slate-200" data-cy="nc-survey-form__footer">
         {{ index + 1 }} / {{ formColumns?.length }}
       </div>
     </template>
@@ -304,7 +318,11 @@ onMounted(() => {
           class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
         >
           <a-tooltip :title="isFirst ? '' : 'Go to previous'" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
-            <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
+            <button
+              class="p-0.5 flex items-center group color-transition"
+              data-cy="nc-survey-form__icon-prev"
+              @click="goPrevious"
+            >
               <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
             </button>
           </a-tooltip>
@@ -314,7 +332,7 @@ onMounted(() => {
             :mouse-enter-delay="0.25"
             :mouse-leave-delay="0"
           >
-            <button class="p-0.5 flex items-center group color-transition" @click="goNext">
+            <button class="p-0.5 flex items-center group color-transition" data-cy="nc-survey-form__icon-next" @click="goNext">
               <MdiChevronRight
                 :class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
                 class="text-2xl md:text-md"
diff --git a/scripts/cypress/integration/common/4i_survey_form.js b/scripts/cypress/integration/common/4i_survey_form.js
new file mode 100644
index 0000000000..4d3b2a56e7
--- /dev/null
+++ b/scripts/cypress/integration/common/4i_survey_form.js
@@ -0,0 +1,191 @@
+// test suite
+//
+import { isTestSuiteActive } from "../../support/page_objects/projectConstants";
+import { mainPage } from "../../support/page_objects/mainPage";
+import { loginPage } from "../../support/page_objects/navigation";
+
+let linkText = "";
+const generateShareLink_surveyMode = () => {
+  mainPage.shareView().click();
+
+  // ensure modal is rendered and visible
+  cy.getActiveModal(".nc-modal-share-view")
+    .find(".ant-modal-title")
+    .contains("This view is shared via a private link")
+    .should("be.visible");
+
+  // enable survey mode
+  cy.get('[data-cy="nc-modal-share-view__survey-mode"]').click();
+
+  // copy link text, save URL
+  cy.get('[data-cy="nc-modal-share-view__link"]').then(($el) => {
+    linkText = $el.text();
+    cy.log(linkText);
+  });
+};
+
+// Options:
+//  footer
+//  btnSubmit
+//  fieldLabel
+//
+function validateFormPage(options) {
+  // header & description
+  cy.get('[data-cy="nc-survey-form__heading"]')
+    .contains("A B C D")
+    .should("be.visible");
+  cy.get('[data-cy="nc-survey-form__sub-heading"]')
+    .contains("Survey form for testing")
+    .should("be.visible");
+
+  // footer (page index)
+  cy.get('[data-cy="nc-survey-form__footer"]')
+    .contains(options.footer)
+    .should("be.visible");
+
+  // submit button: will be either OK or Submit
+  cy.get(`[data-cy="nc-survey-form__${options.btnSubmit}"]`).should(
+    "be.visible"
+  );
+
+  // field label
+  cy.get(
+    `[data-cy="nc-survey-form__input-${options.fieldLabel.replaceAll(
+      " ",
+      ""
+    )}"]`
+  ).should("be.visible");
+}
+
+// test suite
+//
+export const genTest = (apiType, dbType) => {
+  if (!isTestSuiteActive(apiType, dbType)) return;
+  let clear;
+
+  /**
+   * class names specific to survey mode
+   *    data-cy="nc-survey-form__heading"
+   *    data-cy="nc-survey-form__sub-heading"
+   *    data-cy="nc-survey-form__input-${fieldTitle}"
+   *    data-cy="nc-survey-form__field-description"
+   *    data-cy="nc-survey-form__btn-submit"
+   *    data-cy="nc-survey-form__btn-next"
+   *    data-cy="nc-survey-form__success-msg"
+   *    data-cy="nc-survey-form__btn-submit-another-form"
+   *    data-cy="nc-survey-form__footer"
+   *    data-cy="nc-survey-form__icon-next"
+   *    data-cy="nc-survey-form__icon-prev"
+   */
+
+  describe(`${apiType.toUpperCase()} api - Kanban`, () => {
+    before(() => {
+      cy.restoreLocalStorage();
+
+      // disable CY storage handling
+      clear = Cypress.LocalStorage.clear;
+      Cypress.LocalStorage.clear = () => {};
+    });
+
+    after(() => {
+      // re-enable CY storage handling
+      Cypress.LocalStorage.clear = clear;
+      cy.saveLocalStorage();
+    });
+
+    it("Create form view", () => {
+      cy.openTableTab("Country", 25);
+      cy.viewCreate("form");
+
+      // prepare form
+      // wait for input fields to be rendered as enabled
+      cy.wait(2000);
+
+      // Update header & add some description
+      cy.get(".nc-form")
+        .find('[placeholder="Form Title"]')
+        .clear()
+        .type("A B C D");
+      cy.get(".nc-form")
+        .find('[placeholder="Add form description"]')
+        .type("Survey form for testing");
+      cy.get(".nc-form").click();
+
+      // add success message
+      cy.get("textarea.nc-form-after-submit-msg").type("Congratulations!");
+
+      // enable "Submit another form" check box
+      cy.get("button.nc-form-checkbox-submit-another-form").click();
+
+      // show another form after 5 seconds
+      cy.get("button.nc-form-checkbox-show-blank-form").click();
+    });
+
+    it("Share form, enable survey mode", () => {
+      generateShareLink_surveyMode();
+      cy.signOut();
+    });
+
+    it("Visit link, validate form", () => {
+      cy.visit(linkText);
+
+      // validate form
+      validateFormPage({
+        footer: "1 / 3",
+        btnSubmit: "btn-next",
+        fieldLabel: "Country",
+      });
+      cy.get('[data-cy="nc-survey-form__input-Country"]').type("x{enter}");
+
+      validateFormPage({
+        footer: "2 / 3",
+        btnSubmit: "btn-next",
+        fieldLabel: "LastUpdate",
+      });
+      cy.get('[data-cy="nc-survey-form__input-LastUpdate"]').click();
+      cy.get(".ant-picker-now-btn:visible").contains("Now").click();
+      cy.get(".ant-btn-primary:visible").contains("Ok").click();
+      cy.get('[data-cy="nc-survey-form__btn-next"]').click();
+
+      // takes time for the link field to be rendered
+      cy.wait(2000);
+
+      validateFormPage({
+        footer: "3 / 3",
+        btnSubmit: "btn-submit",
+        fieldLabel: "City List",
+      });
+      cy.get('[data-cy="nc-survey-form__btn-submit"]').click();
+
+      // validate success message
+      cy.get('[data-cy="nc-survey-form__success-msg"]')
+        .should("be.visible")
+        .contains("Congratulations!")
+        .should("be.visible");
+
+      // validate "Submit another form" button
+      cy.get('[data-cy="nc-survey-form__btn-submit-another-form"]').should(
+        "be.visible"
+      );
+    });
+
+    it("Delete form view", () => {
+      loginPage.loginAndOpenProject(apiType, dbType);
+      cy.openTableTab("Country", 25);
+
+      // clean up newly added rows into Country table operations
+      // this auto verifies successfull addition of rows to table as well
+      mainPage.getPagination(5).click();
+
+      // wait for page rendering to complete
+      cy.get(".nc-grid-row").should("have.length", 10);
+
+      mainPage.getCell("Country", 10).rightclick();
+      cy.getActiveMenu(".nc-dropdown-grid-context-menu")
+        .contains("Delete Row")
+        .click();
+
+      cy.viewDelete(0);
+    });
+  });
+};
diff --git a/scripts/cypress/integration/test/pg-restViews.js b/scripts/cypress/integration/test/pg-restViews.js
index 0851861be6..453220fa22 100644
--- a/scripts/cypress/integration/test/pg-restViews.js
+++ b/scripts/cypress/integration/test/pg-restViews.js
@@ -8,6 +8,7 @@ let t4e = require("../common/4e_form_view_share");
 let t4f = require("../common/4f_pg_grid_view_share");
 let t4g = require("../common/4g_table_view_expanded_form");
 let t4h = require("../common/4h_kanban");
+let t4i = require("../common/4i_survey_form");
 const {
   setCurrentMode,
 } = require("../../support/page_objects/projectConstants");
@@ -25,6 +26,7 @@ const nocoTestSuite = (apiType, dbType) => {
   t4f.genTest(apiType, dbType);
   t4g.genTest(apiType, dbType);
   t4h.genTest(apiType, dbType);
+  t4i.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "postgres");
diff --git a/scripts/cypress/integration/test/restViews.js b/scripts/cypress/integration/test/restViews.js
index 4889b4f145..a66c36a002 100644
--- a/scripts/cypress/integration/test/restViews.js
+++ b/scripts/cypress/integration/test/restViews.js
@@ -8,6 +8,7 @@ let t4e = require("../common/4e_form_view_share");
 let t4f = require("../common/4f_grid_view_share");
 let t4g = require("../common/4g_table_view_expanded_form");
 let t4h = require("../common/4h_kanban");
+let t4i = require("../common/4i_survey_form");
 const {
   setCurrentMode,
 } = require("../../support/page_objects/projectConstants");
@@ -25,6 +26,7 @@ const nocoTestSuite = (apiType, dbType) => {
   t4f.genTest(apiType, dbType);
   t4g.genTest(apiType, dbType);
   t4h.genTest(apiType, dbType);
+  t4i.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "mysql");
diff --git a/scripts/cypress/integration/test/xcdb-restViews.js b/scripts/cypress/integration/test/xcdb-restViews.js
index f86df00adc..68676fa22a 100644
--- a/scripts/cypress/integration/test/xcdb-restViews.js
+++ b/scripts/cypress/integration/test/xcdb-restViews.js
@@ -7,6 +7,7 @@ let t4d = require("../common/4d_table_view_grid_locked");
 let t4e = require("../common/4e_form_view_share");
 let t4f = require("../common/4f_grid_view_share");
 let t4h = require("../common/4h_kanban");
+let t4i = require("../common/4i_survey_form");
 const {
   setCurrentMode,
 } = require("../../support/page_objects/projectConstants");
@@ -23,6 +24,7 @@ const nocoTestSuite = (apiType, dbType) => {
   // to be fixed t4e.genTest(apiType, dbType);
   t4f.genTest(apiType, dbType);
   t4h.genTest(apiType, dbType);
+  t4i.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "xcdb");
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 723def7732..fffbef33b3 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -315,7 +315,7 @@ Cypress.Commands.add("getActiveDrawer", (selector) => {
 
 Cypress.Commands.add("getActivePicker", (dropdownSelector) => {
   if (dropdownSelector) {
-    return cy.get(`${dropdownSelector}.ant-drawer-content:visible`).last();
+    return cy.get(`${dropdownSelector}.ant-picker-dropdown:visible`).last();
   }
   return cy.get(".ant-picker-dropdown :visible").last();
 });
@@ -535,6 +535,7 @@ function capitalizeFirstLetter(string) {
 // viewCreate
 //  : viewType: grid, gallery, kanban, form
 //  : creates view with default name
+//  : [fix-me] with name validation, works only first view creation of that category.
 //
 Cypress.Commands.add("viewCreate", (viewType) => {
   // click on 'Grid/Gallery/Form/Kanban' button on Views bar