From 94c3b263e7430536e5f90dc237f51c848392f96e Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 12 Jul 2022 21:48:14 +0530
Subject: [PATCH] test/cypress: percent column validation

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/editableCell/PercentCell.vue   | 105 ++++++++++--------
 .../integration/common/3f_percent_column.js   |  31 +++---
 2 files changed, 77 insertions(+), 59 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/PercentCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/PercentCell.vue
index d19d4dc8b7..9b07083839 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/PercentCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/PercentCell.vue
@@ -6,9 +6,9 @@
       type="number"
       @blur="onBlur"
       @keypress="checkPercentFormat($event)"
-      @keydown.enter="isEdited && $emit('input', percent)"
+      @keydown.enter="onBlur"
       v-on="parentListeners"
-    />
+    >
     <div v-if="warningMessage" class="percent-warning">
       {{ warningMessage }}
     </div>
@@ -16,14 +16,14 @@
 </template>
 
 <script>
-import { isValidPercent, renderPercent } from '~/helpers/percentHelper';
+import { isValidPercent, renderPercent } from '~/helpers/percentHelper'
 
 export default {
   name: 'PercentCell',
   props: {
     column: Object,
     value: [Number, String],
-    readOnly: Boolean,
+    readOnly: Boolean
   },
   data: () => ({
     // flag to determine to show warning message or not
@@ -32,78 +32,91 @@ export default {
     percent: null,
     // check if the cell is edited or not
     isEdited: false,
+    localState: ''
   }),
   computed: {
-    localState: {
-      get() {
-        return renderPercent(this.value, this.percentType, false);
-      },
-      set(val) {
-        this.isEdited = true;
-        if (val === null) {
-          val = 0;
-        }
-        if (isValidPercent(val, this.column?.meta?.negative)) {
-          this.percent = val / 100;
-        }
-      },
-    },
+    // localState: {
+    //   get() {
+    //     return renderPercent(this.value, this.percentType, false);
+    //   },
+    //   set(val) {
+    //     this.isEdited = true;
+    //     if (val === null) {
+    //       val = 0;
+    //     }
+    //     if (isValidPercent(val, this.column?.meta?.negative)) {
+    //       this.percent = val / 100;
+    //     }
+    //   },
+    // },
     percentType() {
-      return this.column?.meta?.precision || 0;
+      return this.column?.meta?.precision || 0
     },
     parentListeners() {
-      const $listeners = {};
+      const $listeners = {}
 
       if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur;
+        $listeners.blur = this.$listeners.blur
       }
       if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus;
+        $listeners.focus = this.$listeners.focus
       }
 
-      return $listeners;
-    },
+      return $listeners
+    }
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.localState = renderPercent(v, this.percentType, false)
+      },
+      immediate: true
+    }
+  },
+  mounted() {
   },
-  mounted() {},
   methods: {
     checkPercentFormat(evt) {
-      evt = evt || window.event;
-      const charCode = evt.which ? evt.which : evt.keyCode;
+      evt = evt || window.event
+      const charCode = evt.which ? evt.which : evt.keyCode
       // ref: http://www.columbia.edu/kermit/ascii.html
-      const PRINTABLE_CTL_RANGE = charCode > 31;
-      const NON_DIGIT = charCode < 48 || charCode > 57;
-      const NON_PERIOD = charCode !== 46;
-      const CAPTIAL_LETTER_E = charCode === 69;
-      const SMALL_LETTER_E = charCode === 101;
-      const NEGATIVE_SIGN = charCode === 45;
-      const NEGATIVE_SIGN_INVALID = !this.column?.meta?.negative && NEGATIVE_SIGN;
+      const PRINTABLE_CTL_RANGE = charCode > 31
+      const NON_DIGIT = charCode < 48 || charCode > 57
+      const NON_PERIOD = charCode !== 46
+      const CAPTIAL_LETTER_E = charCode === 69
+      const SMALL_LETTER_E = charCode === 101
+      const NEGATIVE_SIGN = charCode === 45
+      const NEGATIVE_SIGN_INVALID = !this.column?.meta?.negative && NEGATIVE_SIGN
       if (NEGATIVE_SIGN_INVALID) {
-        this.warningMessage = 'Negative Number is not allowed. Please configure it in Column setting.';
-        evt.preventDefault();
+        this.warningMessage = 'Negative Number is not allowed. Please configure it in Column setting.'
+        evt.preventDefault()
       } else if (
         (PRINTABLE_CTL_RANGE && NON_DIGIT && NEGATIVE_SIGN_INVALID && NON_PERIOD) ||
         CAPTIAL_LETTER_E ||
         SMALL_LETTER_E
       ) {
-        this.warningMessage = 'Please enter a number';
-        evt.preventDefault();
+        this.warningMessage = 'Please enter a number'
+        evt.preventDefault()
       } else {
-        this.warningMessage = null;
+        this.warningMessage = null
         // only allow:
         // 1. digits
         // 2. '.'
         // 3. '-' if this.column?.meta?.negative is true
-        return true;
+        return true
       }
     },
     onBlur() {
-      if (this.isEdited) {
-        this.$emit('input', this.percent);
+      // if (this.isEdited) {
+      if (isValidPercent(this.localState, this.column?.meta?.negative)) {
+        this.percent = this.localState / 100
       }
-      this.isEdited = false;
-    },
-  },
-};
+      this.$emit('input', this.percent)
+      // }
+      // this.isEdited = false;
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/scripts/cypress/integration/common/3f_percent_column.js b/scripts/cypress/integration/common/3f_percent_column.js
index 429c4a8135..858cd36523 100644
--- a/scripts/cypress/integration/common/3f_percent_column.js
+++ b/scripts/cypress/integration/common/3f_percent_column.js
@@ -108,9 +108,9 @@ export const genTest = (apiType, dbType) => {
             cy.getActiveMenu().find('input[type="number"]').type(defaultNumber);
 
             // Configure Negative
-            cy.getActiveModal().find('[role="switch"][type="checkbox"]').invoke('val').then(($val) => {
+            cy.getActiveMenu().find('[role="switch"][type="checkbox"]').invoke('val').then(($val) => {
                 if ($val ^ negative) {
-                    cy.getActiveModal()
+                    cy.getActiveMenu()
                     .find('[role="switch"][type="checkbox"]')
                     .click({ force: true });
                 }
@@ -141,12 +141,17 @@ export const genTest = (apiType, dbType) => {
             } else {
                 mainPage.getRow(index).find(".nc-row-expand-icon").click({ force: true });
             }
-            const targetPercentInput = cy.getActiveModal().get('.percent-cell-wrapper > input[type="number"]').eq(parseInt(colName.slice(-1)))
-            targetPercentInput.should('exist');
-            if (cellValue) {
-                targetPercentInput.focus().invoke('val', '').clear().type(cellValue).blur();
-                cy.wait(1000);
+
+            if(cellValue) {
+                cy.getActiveModal().find('input[type="number"]').eq(parseInt(colName.slice(-1)))
+                  .should("exist")
+                  .click()
+                  .clear()
+                  .type(cellValue)
+                  .blur();
+                cy.getActiveModal().find('input[type="number"]').eq(parseInt(colName.slice(-1))).should('have.value', expectedValue.slice(0, -1));
             }
+
             cy.getActiveModal().find("button").contains("Save row").click({ force: true });
             cy.toastWait("Row updated successfully");
             isMatchedWithTargetValue(colName, index, expectedValue);
@@ -170,10 +175,10 @@ export const genTest = (apiType, dbType) => {
 
             it("Percent: Test base case", () => {
                 // ( colName, index, cellValue, expectedValue, isNew )
-                addPercentData("NC_PERCENT_0", 1, 1, '1%', true);
-                addPercentData("NC_PERCENT_1", 1, 1, '1.0%');
-                addPercentData("NC_PERCENT_2", 1, 1, '1.00%');
-                addPercentData("NC_PERCENT_3", 1, 1, '1.000%');
+                addPercentData("NC_PERCENT_0", 1, 2, '2%', true);
+                addPercentData("NC_PERCENT_1", 1, 2, '2.0%');
+                addPercentData("NC_PERCENT_2", 1, 2, '2.00%');
+                addPercentData("NC_PERCENT_3", 1, 2, '2.000%');
                 // addPercentData("NC_PERCENT_4", 1, 1, '1.0000%');
                 // addPercentData("NC_PERCENT_5", 1, 1, '1.00000%');
                 // addPercentData("NC_PERCENT_6", 1, 1, '1.000000%');
@@ -198,9 +203,9 @@ export const genTest = (apiType, dbType) => {
             it("Percent: Test percision", () => {
                 // ( colName, index, cellValue, expectedValue, isNew )
                 addPercentData("NC_PERCENT_0", 3, '2', '2%', true);
-                addPercentData("NC_PERCENT_1", 3, '2.1', '2.1%', false);    
+                addPercentData("NC_PERCENT_1", 3, '2.1', '2.1%', false);
                 addPercentData("NC_PERCENT_2", 3, '2.12', '2.12%', false);
-                addPercentData("NC_PERCENT_3", 3, '2.13', '2.123%', false);
+                addPercentData("NC_PERCENT_3", 3, '2.123', '2.123%', false);
                 // addPercentData("NC_PERCENT_4", 3, 1.123456789, '1.1235%', false);
                 // addPercentData("NC_PERCENT_5", 3, 1.123456789, '1.12346%', false);
                 // addPercentData("NC_PERCENT_6", 3, 1.123456789, '1.123457%', false);