From 269a90bf1f8452714ed3856a2c69af1c358b567d Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 28 Jan 2022 15:21:25 +0100
Subject: [PATCH 1/3] Notify value change on slider change
---
client/src/components/Form/Elements/FormNumber.vue | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/client/src/components/Form/Elements/FormNumber.vue b/client/src/components/Form/Elements/FormNumber.vue
index 4bcf6bcbb67..d1d43a261b5 100644
--- a/client/src/components/Form/Elements/FormNumber.vue
+++ b/client/src/components/Form/Elements/FormNumber.vue
@@ -21,7 +21,13 @@
type="number" />
-
+
@@ -103,7 +109,7 @@ export default {
if (!this.isInteger) {
this.decimalPlaces = this.getNumberOfDecimals(this.currentValue);
}
- this.$emit("input", this.currentValue);
+ this.notifyValueChange();
},
showAlert(error) {
if (error) {
@@ -133,6 +139,9 @@ export default {
(match[2] ? +match[2] : 0)
);
},
+ notifyValueChange() {
+ this.$emit("input", this.currentValue);
+ },
},
};
From 402f89a85ccc239f04a8c82556ffc66cdd97dcca Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 28 Jan 2022 16:53:50 +0100
Subject: [PATCH 2/3] Use computed get/set for currentValue
+ refactoring
---
.../components/Form/Elements/FormNumber.vue | 54 ++++++++++---------
1 file changed, 28 insertions(+), 26 deletions(-)
diff --git a/client/src/components/Form/Elements/FormNumber.vue b/client/src/components/Form/Elements/FormNumber.vue
index d1d43a261b5..c201582a2c2 100644
--- a/client/src/components/Form/Elements/FormNumber.vue
+++ b/client/src/components/Form/Elements/FormNumber.vue
@@ -1,11 +1,6 @@
-
+
{{ errorMessage }}
@@ -21,13 +16,7 @@
type="number" />
-
+
@@ -62,17 +51,29 @@ export default {
dismissCountDown: 0,
errorMessage: "",
fractionWarning: "This output doesn't allow fractions!",
- currentValue: this.value,
decimalPlaces: this.isInteger ? 0 : this.getNumberOfDecimals(this.value),
};
},
computed: {
+ currentValue: {
+ get() {
+ return this.value;
+ },
+ set(newVal, oldVal) {
+ if (newVal !== oldVal) {
+ this.$emit("input", newVal);
+ }
+ },
+ },
isRangeValid() {
return !isNaN(this.min) && !isNaN(this.max) && this.max > this.min;
},
isInteger() {
return this.type.toLowerCase() === "integer";
},
+ isFloat() {
+ return !this.isInteger;
+ },
/**
* Dynamically sets the step value depending on the
* current value precision when float number.
@@ -99,17 +100,14 @@ export default {
}
},
onInputChange(value) {
- // hide error message after value has changed
- this.dismissCountDown = 0;
- if (this.isRangeValid && (value > this.max || value < this.min)) {
- const errorMessage = this.getOutOfRangeWarning(value);
+ this.resetAlert();
+ if (this.isOutOfRange(value)) {
+ this.showOutOfRangeWarning(value);
this.currentValue = value > this.max ? this.max : this.min;
- this.showAlert(errorMessage);
}
- if (!this.isInteger) {
+ if (this.isFloat) {
this.decimalPlaces = this.getNumberOfDecimals(this.currentValue);
}
- this.notifyValueChange();
},
showAlert(error) {
if (error) {
@@ -117,8 +115,15 @@ export default {
this.dismissCountDown = this.dismissSecs;
}
},
- getOutOfRangeWarning(value) {
- return `${value} is out of ${this.min} - ${this.max} range!`;
+ isOutOfRange(value) {
+ return this.isRangeValid && (value > this.max || value < this.min);
+ },
+ showOutOfRangeWarning(value) {
+ const warningMessage = `${value} is out of ${this.min} - ${this.max} range!`;
+ this.showAlert(warningMessage);
+ },
+ resetAlert() {
+ this.dismissCountDown = 0;
},
/**
* https://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number
@@ -139,9 +144,6 @@ export default {
(match[2] ? +match[2] : 0)
);
},
- notifyValueChange() {
- this.$emit("input", this.currentValue);
- },
},
};
From eaa5bef1bbb754ec32022ddd28aa7b3f5f62a093 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 28 Jan 2022 17:55:58 +0100
Subject: [PATCH 3/3] Drop test for imput equality
This cannot be tested like this now, because instead of a real data property we relay on the emit event to modify the parents `value` prop.
The fact that we are using `v-model="currentValue"` in both inputs should guarantee that both inputs have the same value.
---
.../components/Form/Elements/FormNumber.test.js | 15 ++-------------
1 file changed, 2 insertions(+), 13 deletions(-)
diff --git a/client/src/components/Form/Elements/FormNumber.test.js b/client/src/components/Form/Elements/FormNumber.test.js
index dbf32d9be61..c4dafc03082 100644
--- a/client/src/components/Form/Elements/FormNumber.test.js
+++ b/client/src/components/Form/Elements/FormNumber.test.js
@@ -1,7 +1,7 @@
import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
import { getLocalVue } from "jest/helpers";
import FormNumber from "./FormNumber";
-import flushPromises from "flush-promises";
const localVue = getLocalVue();
@@ -49,6 +49,7 @@ describe("FormInput", () => {
it("range should be respected", async () => {
const checkOutOfRangeAlert = async (number) => {
+ const props = { value: 50, type: "float", min: 10, max: 100 };
const wrapper = await mountFormNumber(props);
const input = await getInput(wrapper);
input.setValue(number);
@@ -60,20 +61,8 @@ describe("FormInput", () => {
wrapper.destroy();
};
- const numberWithinRange = 75;
const numberBiggerThanRange = [110, Number.MAX_VALUE];
const numberSmallerThanRange = [1, 0, -1, Number.MIN_VALUE];
- const props = { value: 50, type: "float", min: 10, max: 100 };
-
- // const wrapper = await mountFormNumber(props);
- const wrapper = await mountFormNumber(props);
-
- const input = await getInput(wrapper);
-
- // both inputs should have the same value
- input.setValue(numberWithinRange);
- const inputRange = await getInputRange(wrapper);
- expect(parseFloat(inputRange.element.value)).toBe(numberWithinRange);
//alert should be shown
for (const value of numberSmallerThanRange) {