clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-02-01 23:58:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

test/cypress: percent column validation

Browse Source 
Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
This commit is contained in:
Raju Udava
2022-07-12 21:48:14 +05:30
parent 68c83c9d16
commit 94c3b263e7
2 changed files with 77 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

31
scripts/cypress/integration/common/3f_percent_column.js
View File

@@ -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);