github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

test/cypress: percent column validation 

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
test/percent
Raju Udava 2 years ago
parent
68c83c9d16
commit
94c3b263e7
2 changed files with 77 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 105
      packages/nc-gui/components/project/spreadsheet/components/editableCell/PercentCell.vue
  2. 29
      scripts/cypress/integration/common/3f_percent_column.js

105
packages/nc-gui/components/project/spreadsheet/components/editableCell/PercentCell.vue
Unescape View File

@ -6,9 +6,9 @@
type="number" type="number"
@blur="onBlur" @blur="onBlur"
@keypress="checkPercentFormat($event)" @keypress="checkPercentFormat($event)"
@keydown.enter="isEdited && $emit('input', percent)" @keydown.enter="onBlur"
v-on="parentListeners" v-on="parentListeners"
/> >
<div v-if="warningMessage" class="percent-warning"> <div v-if="warningMessage" class="percent-warning">
{{ warningMessage }} {{ warningMessage }}
</div> </div>
@ -16,14 +16,14 @@
</template> </template>
<script> <script>
import { isValidPercent, renderPercent } from '~/helpers/percentHelper'; import { isValidPercent, renderPercent } from '~/helpers/percentHelper'
export default { export default {
name: 'PercentCell', name: 'PercentCell',
props: { props: {
column: Object, column: Object,
value: [Number, String], value: [Number, String],
readOnly: Boolean, readOnly: Boolean
}, },
data: () => ({ data: () => ({
// flag to determine to show warning message or not // flag to determine to show warning message or not
@ -32,78 +32,91 @@ export default {
percent: null, percent: null,
// check if the cell is edited or not // check if the cell is edited or not
isEdited: false, isEdited: false,
localState: ''
}), }),
computed: { computed: {
localState: { // localState: {
get() { // get() {
return renderPercent(this.value, this.percentType, false); // return renderPercent(this.value, this.percentType, false);
}, // },
set(val) { // set(val) {
this.isEdited = true; // this.isEdited = true;
if (val === null) { // if (val === null) {
val = 0; // val = 0;
} // }
if (isValidPercent(val, this.column?.meta?.negative)) { // if (isValidPercent(val, this.column?.meta?.negative)) {
this.percent = val / 100; // this.percent = val / 100;
} // }
}, // },
}, // },
percentType() { percentType() {
return this.column?.meta?.precision || 0; return this.column?.meta?.precision || 0
}, },
parentListeners() { parentListeners() {
const $listeners = {}; const $listeners = {}
if (this.$listeners.blur) { if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur; $listeners.blur = this.$listeners.blur
} }
if (this.$listeners.focus) { 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: { methods: {
checkPercentFormat(evt) { checkPercentFormat(evt) {
evt = evt || window.event; evt = evt || window.event
const charCode = evt.which ? evt.which : evt.keyCode; const charCode = evt.which ? evt.which : evt.keyCode
// ref: http://www.columbia.edu/kermit/ascii.html // ref: http://www.columbia.edu/kermit/ascii.html
const PRINTABLE_CTL_RANGE = charCode > 31; const PRINTABLE_CTL_RANGE = charCode > 31
const NON_DIGIT = charCode < 48 || charCode > 57; const NON_DIGIT = charCode < 48 || charCode > 57
const NON_PERIOD = charCode !== 46; const NON_PERIOD = charCode !== 46
const CAPTIAL_LETTER_E = charCode === 69; const CAPTIAL_LETTER_E = charCode === 69
const SMALL_LETTER_E = charCode === 101; const SMALL_LETTER_E = charCode === 101
const NEGATIVE_SIGN = charCode === 45; const NEGATIVE_SIGN = charCode === 45
const NEGATIVE_SIGN_INVALID = !this.column?.meta?.negative && NEGATIVE_SIGN; const NEGATIVE_SIGN_INVALID = !this.column?.meta?.negative && NEGATIVE_SIGN
if (NEGATIVE_SIGN_INVALID) { if (NEGATIVE_SIGN_INVALID) {
this.warningMessage = 'Negative Number is not allowed. Please configure it in Column setting.'; this.warningMessage = 'Negative Number is not allowed. Please configure it in Column setting.'
evt.preventDefault(); evt.preventDefault()
} else if ( } else if (
(PRINTABLE_CTL_RANGE && NON_DIGIT && NEGATIVE_SIGN_INVALID && NON_PERIOD) || (PRINTABLE_CTL_RANGE && NON_DIGIT && NEGATIVE_SIGN_INVALID && NON_PERIOD) ||
CAPTIAL_LETTER_E || CAPTIAL_LETTER_E ||
SMALL_LETTER_E SMALL_LETTER_E
) { ) {
this.warningMessage = 'Please enter a number'; this.warningMessage = 'Please enter a number'
evt.preventDefault(); evt.preventDefault()
} else { } else {
this.warningMessage = null; this.warningMessage = null
// only allow: // only allow:
// 1. digits // 1. digits
// 2. '.' // 2. '.'
// 3. '-' if this.column?.meta?.negative is true // 3. '-' if this.column?.meta?.negative is true
return true; return true
} }
}, },
onBlur() { onBlur() {
if (this.isEdited) { // if (this.isEdited) {
this.$emit('input', this.percent); 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> </script>
<style scoped> <style scoped>

29
scripts/cypress/integration/common/3f_percent_column.js
Unescape View File

@ -108,9 +108,9 @@ export const genTest = (apiType, dbType) => {
cy.getActiveMenu().find('input[type="number"]').type(defaultNumber); cy.getActiveMenu().find('input[type="number"]').type(defaultNumber);
// Configure Negative // 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) { if ($val ^ negative) {
cy.getActiveModal() cy.getActiveMenu()
.find('[role="switch"][type="checkbox"]') .find('[role="switch"][type="checkbox"]')
.click({ force: true }); .click({ force: true });
} }
@ -141,12 +141,17 @@ export const genTest = (apiType, dbType) => {
} else { } else {
mainPage.getRow(index).find(".nc-row-expand-icon").click({ force: true }); 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) {
if (cellValue) { cy.getActiveModal().find('input[type="number"]').eq(parseInt(colName.slice(-1)))
targetPercentInput.focus().invoke('val', '').clear().type(cellValue).blur(); .should("exist")
cy.wait(1000); .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.getActiveModal().find("button").contains("Save row").click({ force: true });
cy.toastWait("Row updated successfully"); cy.toastWait("Row updated successfully");
isMatchedWithTargetValue(colName, index, expectedValue); isMatchedWithTargetValue(colName, index, expectedValue);
@ -170,10 +175,10 @@ export const genTest = (apiType, dbType) => {
it("Percent: Test base case", () => { it("Percent: Test base case", () => {
// ( colName, index, cellValue, expectedValue, isNew ) // ( colName, index, cellValue, expectedValue, isNew )
addPercentData("NC_PERCENT_0", 1, 1, '1%', true); addPercentData("NC_PERCENT_0", 1, 2, '2%', true);
addPercentData("NC_PERCENT_1", 1, 1, '1.0%'); addPercentData("NC_PERCENT_1", 1, 2, '2.0%');
addPercentData("NC_PERCENT_2", 1, 1, '1.00%'); addPercentData("NC_PERCENT_2", 1, 2, '2.00%');
addPercentData("NC_PERCENT_3", 1, 1, '1.000%'); addPercentData("NC_PERCENT_3", 1, 2, '2.000%');
// addPercentData("NC_PERCENT_4", 1, 1, '1.0000%'); // addPercentData("NC_PERCENT_4", 1, 1, '1.0000%');
// addPercentData("NC_PERCENT_5", 1, 1, '1.00000%'); // addPercentData("NC_PERCENT_5", 1, 1, '1.00000%');
// addPercentData("NC_PERCENT_6", 1, 1, '1.000000%'); // addPercentData("NC_PERCENT_6", 1, 1, '1.000000%');
@ -200,7 +205,7 @@ export const genTest = (apiType, dbType) => {
addPercentData("NC_PERCENT_0", 3, '2', '2%', true); 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_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_4", 3, 1.123456789, '1.1235%', false);
// addPercentData("NC_PERCENT_5", 3, 1.123456789, '1.12346%', false); // addPercentData("NC_PERCENT_5", 3, 1.123456789, '1.12346%', false);
// addPercentData("NC_PERCENT_6", 3, 1.123456789, '1.123457%', false); // addPercentData("NC_PERCENT_6", 3, 1.123456789, '1.123457%', false);

Write Preview
Loading…
Cancel
Save