fix 0 prop usecase, implement FormNumber test

client/src/components/Form/Elements/FormNumber.test.js

@@ -0,0 +1,110 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import FormNumber from "./FormNumber";
+import flushPromises from "flush-promises";
+
+const localVue = getLocalVue();
+
+describe("FormInput", () => {
+    const mountFormNumber = async (props) =>
+        await mount(FormNumber, {
+            propsData: props,
+            localVue,
+        });
+
+    const getInput = async (wrapper) => await wrapper.find("input[type='number']");
+    const getInputRange = async (wrapper) => await wrapper.find("input[type='range']");
+    const getAlert = async (wrapper) => await wrapper.find("[role='alert']");
+
+    it("input should be rendered with number type", async () => {
+        const wrapper = await mountFormNumber({ value: 1, type: "float" });
+        await flushPromises();
+        const input = await getInput(wrapper);
+        expect(input.exists()).toBe(true);
+    });
+
+    it("input range should exist", async () => {
+        const assertRange = async (props, shoudExist) => {
+            const wrapper = await mountFormNumber(props);
+
+            const inputRange = await getInputRange(wrapper);
+            expect(inputRange.exists()).toBe(shoudExist);
+            wrapper.destroy();
+        };
+
+        const props = { value: 50, type: "float" };
+        // if min or max is not defined, range shouldn't be rendered
+        await assertRange(props, false);
+        props.min = 1;
+        await assertRange(props, false);
+        props.max = 100;
+        await assertRange(props, true);
+        // test usecase: range should be rendered on 0
+        props.min = 0;
+        await assertRange(props, true);
+        // test usecase: if max < min range shouldn't be rendered
+        props.max = -100;
+        await assertRange(props, false);
+    });
+
+    it("range should be respected", async () => {
+        const checkOutOfRangeAlert = async (number) => {
+            const wrapper = await mountFormNumber(props);
+            const input = await getInput(wrapper);
+            input.setValue(number);
+            input.trigger("change");
+            await flushPromises();
+            const alert = await getAlert(wrapper);
+            expect(alert.exists()).toBeTruthy();
+            expect(alert.text().includes(`${number} is out`)).toBeTruthy();
+            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) {
+            await checkOutOfRangeAlert(value);
+        }
+        for (const value of numberBiggerThanRange) {
+            await checkOutOfRangeAlert(value);
+        }
+    });
+
+    it("type should be expected", async () => {
+        const checkFractionsAlert = async (key) => {
+            const wrapper = await mountFormNumber(props);
+            const input = await getInput(wrapper);
+
+            await input.trigger("keydown", {
+                keyCode: key,
+            });
+
+            await flushPromises();
+
+            const alert = await getAlert(wrapper);
+            expect(alert.exists()).toBeTruthy();
+            wrapper.destroy();
+        };
+
+        const props = { value: 50, type: "integer", min: 10, max: 100 };
+        const keycodes = [190, 110];
+
+        for (const key of keycodes) {
+            await checkFractionsAlert(key);
+        }
+    });
+});

client/src/components/Form/Elements/FormNumber.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <b-row align-v="center">
-            <b-col :sm="isSliderVisible ? defaultInputSizeWithSlider : false">
+            <b-col :sm="isRangeValid ? defaultInputSizeWithSlider : false">
                 <!-- regular dot and dot on numpad have different codes -->
                 <b-form-input
                     @change="onInputChange"
@@ -12,7 +12,7 @@
                     type="number"
                 />
             </b-col>
-            <b-col class="pl-0" v-if="isSliderVisible">
+            <b-col class="pl-0" v-if="isRangeValid">
                 <b-form-input v-model="currentValue" :min="min" :max="max" type="range" />
             </b-col>
         </b-row>
@@ -39,7 +39,7 @@ export default {
         type: {
             type: String,
             required: true,
-            validator: (prop) => ["integer", "float"].includes(prop),
+            validator: (prop) => ["integer", "float"].includes(prop.toLowerCase()),
         },
         min: {
             type: Number,
@@ -63,8 +63,8 @@ export default {
         };
     },
     computed: {
-        isSliderVisible() {
-            return this.min && this.max && this.max > this.min;
+        isRangeValid() {
+            return !isNaN(this.min) && !isNaN(this.max) && this.max > this.min;
         },
         isInteger() {
             return this.type.toLowerCase() === "integer";
@@ -80,9 +80,9 @@ export default {
         onInputChange(value) {
             // hide error message after value has changed
             this.dismissCountDown = 0;
-            if (this.max && this.min && (value > this.max || value < this.min)) {
+            if (this.isRangeValid && (value > this.max || value < this.min)) {
                 const errorMessage = this.getOutOfRangeWarning(value);
-                value > this.max ? (this.currentValue = this.max) : (this.currentValue = this.min);
+                this.currentValue = value > this.max ? this.max : this.min;
                 this.showAlert(errorMessage);
             }
             this.$emit("input", this.currentValue);