commit d8631ec1466cb833d2d99270a0204cb673805917
parent 19380a53031832c5e58d30b9383dfb618b83ec1e
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date: Wed, 10 Nov 2021 17:07:12 -0800
Rename IntInput component to IntegerInput
Diffstat:
5 files changed, 483 insertions(+), 483 deletions(-)
diff --git a/src/components/IntInput.vue b/src/components/IntInput.vue
@@ -1,224 +0,0 @@
-<template>
- <input
- ref="input"
- @blur="onblur"
- @keydown="onkeydown"
- @keypress="onkeypress"
- v-model="stringValue">
-</template>
-
-<script>
-export default {
- name: 'IntInput',
-
- props: {
- /**
- * The input value
- */
- value: {
- type: Number,
- default: 0,
- },
-
- /**
- * The minimum value
- */
- min: {
- type: Number,
- default: null,
- },
-
- /**
- * The maximum value
- */
- max: {
- type: Number,
- default: null,
- },
-
- /**
- * The step value
- */
- step: {
- type: Number,
- default: 1,
- },
-
- /**
- * Whether to allow the user to increment/decrement the value using the arrow keys
- */
- arrowKeys: {
- type: Boolean,
- default: true,
- },
-
- /**
- * The number of digits to show before the decimal point
- */
- padding: {
- type: Number,
- default: 0,
- validator(value) {
- return value >= 0;
- },
- },
- },
-
- data() {
- return {
- /**
- * The internal value
- */
- internalValue: this.format(this.value),
- };
- },
-
- computed: {
- /**
- * The value of the input element
- */
- stringValue: {
- get() {
- return this.internalValue;
- },
- set(newValue) {
- // Parse new value
- const parsedValue = this.parse(newValue);
-
- if (newValue === '' || newValue === '-') {
- // Allow input to be '' or '-'
- this.internalValue = newValue;
- } else if (this.min !== null && parsedValue < this.min) {
- // Enforce minimum
- this.internalValue = this.format(this.min);
- } else if (this.max !== null && parsedValue > this.max) {
- // Enforce maximum
- this.internalValue = this.format(this.max);
- } else if (!Number.isNaN(parsedValue)) {
- // Allow valid numbers
- this.internalValue = newValue;
- }
-
- // Make sure input element is updated
- if (this.$refs.input.value === newValue) {
- // Setter was called by the input element
- if (this.internalValue !== newValue) {
- // The value was corrected, so the input element must be updated
- this.$refs.input.value = this.internalValue;
- }
- }
- },
- },
-
- /**
- * The value of the component
- */
- intValue: {
- get() {
- const parsedValue = parseInt(this.stringValue, 10);
- return Number.isNaN(parsedValue) ? this.defaultValue : parsedValue;
- },
- set(newValue) {
- this.stringValue = this.format(newValue);
- },
- },
-
- /**
- * The default value of the component
- */
- defaultValue() {
- if (this.min > 0 || this.max < 0) {
- return this.min;
- }
- return 0;
- },
- },
-
- watch: {
- /**
- * Update the component value when the value prop changes
- * @param {Number} newValue The new prop value
- */
- value(newValue) {
- if (newValue !== this.intValue) {
- this.intValue = newValue;
- }
- },
-
- /**
- * Emit the input event when the component value changes
- * @param {Number} newValue The new component value
- */
- intValue(newValue) {
- this.$emit('input', newValue);
- },
- },
-
- methods: {
- /**
- * Restrict input to numbers
- * @param {Object} e The keypress event args
- */
- onkeypress(e) {
- const validKeys = ['-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
- if (!validKeys.includes(e.key)) {
- /* key was not a number */
- e.preventDefault();
- }
- },
-
- /**
- * Process up and down arrow presses
- * @param {Object} e The keydown event args
- */
- onkeydown(e) {
- if (!this.arrowKeys) {
- this.$emit('keydown', e);
- } else if (e.key === 'ArrowUp') {
- this.intValue += this.step;
- e.preventDefault();
- } else if (e.key === 'ArrowDown') {
- this.intValue -= this.step;
- e.preventDefault();
- }
- },
-
- /**
- * Reformat display value
- */
- onblur() {
- this.stringValue = this.format(this.intValue);
- },
-
- /**
- * Parse an integer from a string
- * @param {String} value The string
- * @returns {Number} The parsed integer
- */
- parse(value) {
- if (value.includes('.')) {
- // value cannot be parsed as an integer
- return NaN;
- }
-
- return Number(value);
- },
-
- /**
- * Format an integer as a string
- * @param {Number} value The integer
- * @returns {String} The formated string
- */
- format(value) {
- return value.toString().padStart(this.padding, '0');
- },
- },
-};
-</script>
-
-<style scoped>
-input {
- width: 3em; /* can fit 999 comfortably */
- text-align: center;
-}
-</style>
diff --git a/src/components/IntegerInput.vue b/src/components/IntegerInput.vue
@@ -0,0 +1,224 @@
+<template>
+ <input
+ ref="input"
+ @blur="onblur"
+ @keydown="onkeydown"
+ @keypress="onkeypress"
+ v-model="stringValue">
+</template>
+
+<script>
+export default {
+ name: 'IntegerInput',
+
+ props: {
+ /**
+ * The input value
+ */
+ value: {
+ type: Number,
+ default: 0,
+ },
+
+ /**
+ * The minimum value
+ */
+ min: {
+ type: Number,
+ default: null,
+ },
+
+ /**
+ * The maximum value
+ */
+ max: {
+ type: Number,
+ default: null,
+ },
+
+ /**
+ * The step value
+ */
+ step: {
+ type: Number,
+ default: 1,
+ },
+
+ /**
+ * Whether to allow the user to increment/decrement the value using the arrow keys
+ */
+ arrowKeys: {
+ type: Boolean,
+ default: true,
+ },
+
+ /**
+ * The number of digits to show before the decimal point
+ */
+ padding: {
+ type: Number,
+ default: 0,
+ validator(value) {
+ return value >= 0;
+ },
+ },
+ },
+
+ data() {
+ return {
+ /**
+ * The internal value
+ */
+ internalValue: this.format(this.value),
+ };
+ },
+
+ computed: {
+ /**
+ * The value of the input element
+ */
+ stringValue: {
+ get() {
+ return this.internalValue;
+ },
+ set(newValue) {
+ // Parse new value
+ const parsedValue = this.parse(newValue);
+
+ if (newValue === '' || newValue === '-') {
+ // Allow input to be '' or '-'
+ this.internalValue = newValue;
+ } else if (this.min !== null && parsedValue < this.min) {
+ // Enforce minimum
+ this.internalValue = this.format(this.min);
+ } else if (this.max !== null && parsedValue > this.max) {
+ // Enforce maximum
+ this.internalValue = this.format(this.max);
+ } else if (!Number.isNaN(parsedValue)) {
+ // Allow valid numbers
+ this.internalValue = newValue;
+ }
+
+ // Make sure input element is updated
+ if (this.$refs.input.value === newValue) {
+ // Setter was called by the input element
+ if (this.internalValue !== newValue) {
+ // The value was corrected, so the input element must be updated
+ this.$refs.input.value = this.internalValue;
+ }
+ }
+ },
+ },
+
+ /**
+ * The value of the component
+ */
+ intValue: {
+ get() {
+ const parsedValue = parseInt(this.stringValue, 10);
+ return Number.isNaN(parsedValue) ? this.defaultValue : parsedValue;
+ },
+ set(newValue) {
+ this.stringValue = this.format(newValue);
+ },
+ },
+
+ /**
+ * The default value of the component
+ */
+ defaultValue() {
+ if (this.min > 0 || this.max < 0) {
+ return this.min;
+ }
+ return 0;
+ },
+ },
+
+ watch: {
+ /**
+ * Update the component value when the value prop changes
+ * @param {Number} newValue The new prop value
+ */
+ value(newValue) {
+ if (newValue !== this.intValue) {
+ this.intValue = newValue;
+ }
+ },
+
+ /**
+ * Emit the input event when the component value changes
+ * @param {Number} newValue The new component value
+ */
+ intValue(newValue) {
+ this.$emit('input', newValue);
+ },
+ },
+
+ methods: {
+ /**
+ * Restrict input to numbers
+ * @param {Object} e The keypress event args
+ */
+ onkeypress(e) {
+ const validKeys = ['-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+ if (!validKeys.includes(e.key)) {
+ /* key was not a number */
+ e.preventDefault();
+ }
+ },
+
+ /**
+ * Process up and down arrow presses
+ * @param {Object} e The keydown event args
+ */
+ onkeydown(e) {
+ if (!this.arrowKeys) {
+ this.$emit('keydown', e);
+ } else if (e.key === 'ArrowUp') {
+ this.intValue += this.step;
+ e.preventDefault();
+ } else if (e.key === 'ArrowDown') {
+ this.intValue -= this.step;
+ e.preventDefault();
+ }
+ },
+
+ /**
+ * Reformat display value
+ */
+ onblur() {
+ this.stringValue = this.format(this.intValue);
+ },
+
+ /**
+ * Parse an integer from a string
+ * @param {String} value The string
+ * @returns {Number} The parsed integer
+ */
+ parse(value) {
+ if (value.includes('.')) {
+ // value cannot be parsed as an integer
+ return NaN;
+ }
+
+ return Number(value);
+ },
+
+ /**
+ * Format an integer as a string
+ * @param {Number} value The integer
+ * @returns {String} The formated string
+ */
+ format(value) {
+ return value.toString().padStart(this.padding, '0');
+ },
+ },
+};
+</script>
+
+<style scoped>
+input {
+ width: 3em; /* can fit 999 comfortably */
+ text-align: center;
+}
+</style>
diff --git a/src/components/TimeInput.vue b/src/components/TimeInput.vue
@@ -1,10 +1,10 @@
<template>
<div class="time-input">
- <int-input class="hours" aria-label="hours" v-if="showHours"
+ <integer-input class="hours" aria-label="hours" v-if="showHours"
:min="0" :max="99" :padding="1" v-model="hours"
:arrow-keys="false" @keydown="onkeydown($event, 3600)"/>
<span v-if="showHours">:</span>
- <int-input class="minutes" aria-label="minutes"
+ <integer-input class="minutes" aria-label="minutes"
:min="0" :max="59" :padding="2" v-model="minutes"
:arrow-keys="false" @keydown="onkeydown($event, 60)"/>
<span>:</span>
@@ -15,14 +15,14 @@
</template>
<script>
-import IntInput from '@/components/IntInput.vue';
+import IntegerInput from '@/components/IntegerInput.vue';
import DecimalInput from '@/components/DecimalInput.vue';
export default {
name: 'TimeInput',
components: {
- IntInput,
+ IntegerInput,
DecimalInput,
},
diff --git a/tests/unit/components/IntInput.spec.js b/tests/unit/components/IntInput.spec.js
@@ -1,255 +0,0 @@
-import { expect } from 'chai';
-import { mount } from '@vue/test-utils';
-import IntInput from '@/components/IntInput.vue';
-
-describe('components/IntInput.vue', () => {
- it('value should be 0 by default', () => {
- // Initialize component
- const wrapper = mount(IntInput);
-
- // Assert value is 0
- expect(wrapper.find('input').element.value).to.equal('0');
- });
-
- it('should read value prop', () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { value: 1 },
- });
-
- // Assert value is 1
- expect(wrapper.find('input').element.value).to.equal('1');
- });
-
- it('up arrow should increment value by step', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { step: 2 },
- });
-
- // Press up arrow
- await wrapper.trigger('keydown', { key: 'ArrowUp' });
-
- // Assert value is 1 and input event was emitted
- expect(wrapper.find('input').element.value).to.equal('2');
- expect(wrapper.emitted().input).to.deep.equal([[2]]);
- });
-
- it('down arrow should increment value by step', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { step: 2 },
- });
-
- // Press down arrow
- await wrapper.trigger('keydown', { key: 'ArrowDown' });
-
- // Assert value is -1 and input event was emitted
- expect(wrapper.find('input').element.value).to.equal('-2');
- expect(wrapper.emitted().input).to.deep.equal([[-2]]);
- });
-
- it('should fire input event when value changes', async () => {
- // Initialize component
- const wrapper = mount(IntInput);
-
- // Set value to 1
- wrapper.find('input').element.value = '1';
- await wrapper.find('input').trigger('input');
-
- // Assert input event was emitted
- expect(wrapper.emitted().input).to.deep.equal([[1]]);
- });
-
- it('should accept numerical values', async () => {
- // Initialize component
- const wrapper = mount(IntInput);
-
- // Try to set value to 1
- wrapper.find('input').element.value = '1';
- await wrapper.find('input').trigger('input');
-
- // Assert value was accepted and input event was emitted
- expect(wrapper.find('input').element.value).to.equal('1');
- expect(wrapper.emitted().input).to.deep.equal([[1]]);
- });
-
- it('should not accept decimal values', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { value: 1 },
- });
-
- // Try to set value to 1.5
- wrapper.find('input').element.value = '1.5';
- await wrapper.find('input').trigger('input');
-
- // Assert value was not accepted and no events were emitted
- expect(wrapper.find('input').element.value).to.equal('1');
- expect(wrapper.emitted().input).to.equal(undefined);
- });
-
- it('should not accept non numerical values', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { value: 1 },
- });
-
- // Try to set value to a
- wrapper.find('input').element.value = 'a';
- await wrapper.find('input').trigger('input');
-
- // Assert value was not accepted and no events were emitted
- expect(wrapper.find('input').element.value).to.equal('1');
- expect(wrapper.emitted().input).to.equal(undefined);
- });
-
- it('should format input value on blur', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { value: 1, padding: 3 },
- });
-
- // Set value to '01'
- wrapper.find('input').element.value = '01';
- await wrapper.find('input').trigger('input');
-
- // Assert value was not updated and no events were emitted
- expect(wrapper.find('input').element.value).to.equal('01');
- expect(wrapper.emitted().input).to.equal(undefined);
-
- // Trigger blur event
- await wrapper.find('input').trigger('blur');
-
- // Assert value was formatted but no events were emitted
- expect(wrapper.find('input').element.value).to.equal('001');
- expect(wrapper.emitted().input).to.equal(undefined);
- });
-
- it('should allow input to be empty until blur', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { value: 5 },
- });
-
- // Set value to ''
- wrapper.find('input').element.value = '';
- await wrapper.find('input').trigger('input');
-
- // Assert value is '' and input event was emitted with default value
- expect(wrapper.find('input').element.value).to.equal('');
- expect(wrapper.emitted().input).to.deep.equal([[0]]);
-
- // Trigger blur event
- await wrapper.find('input').trigger('blur');
-
- // Assert value is the default value but no new events were emitted
- expect(wrapper.find('input').element.value).to.equal('0');
- expect(wrapper.emitted().input).to.deep.equal([[0]]);
- });
-
- it('should allow input to be "-" until blur', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { value: 5 },
- });
-
- // Set value to '-'
- wrapper.find('input').element.value = '-';
- await wrapper.find('input').trigger('input');
-
- // Assert value is '-' and input event was emitted with default value
- expect(wrapper.find('input').element.value).to.equal('-');
- expect(wrapper.emitted().input).to.deep.equal([[0]]);
-
- // Trigger blur event
- await wrapper.find('input').trigger('blur');
-
- // Assert value is the default value but no new events were emitted
- expect(wrapper.find('input').element.value).to.equal('0');
- expect(wrapper.emitted().input).to.deep.equal([[0]]);
- });
-
- it('default value should be the minimum if 0 is not valid', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { value: 3, max: 4, min: 2 },
- });
-
- // Set value to '' and trigger blur event so value must be updated
- wrapper.find('input').element.value = '';
- await wrapper.find('input').trigger('input');
- await wrapper.find('input').trigger('blur');
-
- // Assert value is 2 and input event was emitted
- expect(wrapper.find('input').element.value).to.equal('2');
- expect(wrapper.emitted().input).to.deep.equal([[2]]);
- });
-
- it('should not allow input to be below the minimum', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { min: 10, value: 20 },
- });
-
- // Try to set value to 9, which is below the minimum
- wrapper.find('input').element.value = '9';
- await wrapper.find('input').trigger('input');
-
- // Assert value is 10 and input event was emitted
- expect(wrapper.find('input').element.value).to.equal('10');
- expect(wrapper.emitted().input).to.deep.equal([[10]]);
-
- // Try to decrement value
- await wrapper.trigger('keydown', { key: 'ArrowDown' });
-
- // Assert value is still 10 and no new event were emitted
- expect(wrapper.find('input').element.value).to.equal('10');
- expect(wrapper.emitted().input).to.deep.equal([[10]]);
- });
-
- it('should not allow input to be above the maximum', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { max: 10 },
- });
-
- // Try to set value to 11, which is above the maximum
- wrapper.find('input').element.value = '11';
- await wrapper.find('input').trigger('input');
-
- // Assert value is 10 and input event was emitted
- expect(wrapper.find('input').element.value).to.equal('10');
- expect(wrapper.emitted().input).to.deep.equal([[10]]);
-
- // Try to increment value
- await wrapper.trigger('keydown', { key: 'ArrowUp' });
-
- // Assert value is still 10 and no new events were emitted
- expect(wrapper.find('input').element.value).to.equal('10');
- expect(wrapper.emitted().input).to.deep.equal([[10]]);
- });
-
- it('should format value according to padding prop', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { padding: 2 },
- });
-
- // Assert value is correctly formatted
- expect(wrapper.find('input').element.value).to.equal('00');
- });
-
- it('should emit keydown event if arrow-keys is false', async () => {
- // Initialize component
- const wrapper = mount(IntInput, {
- propsData: { arrowKeys: false },
- });
-
- // Try to increment value
- await wrapper.trigger('keydown', { key: 'ArrowUp' });
-
- // Assert keydown event emitted
- expect(wrapper.emitted().keydown.length).to.equal(1);
- });
-});
diff --git a/tests/unit/components/IntegerInput.spec.js b/tests/unit/components/IntegerInput.spec.js
@@ -0,0 +1,255 @@
+import { expect } from 'chai';
+import { mount } from '@vue/test-utils';
+import IntegerInput from '@/components/IntegerInput.vue';
+
+describe('components/IntegerInput.vue', () => {
+ it('value should be 0 by default', () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput);
+
+ // Assert value is 0
+ expect(wrapper.find('input').element.value).to.equal('0');
+ });
+
+ it('should read value prop', () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { value: 1 },
+ });
+
+ // Assert value is 1
+ expect(wrapper.find('input').element.value).to.equal('1');
+ });
+
+ it('up arrow should increment value by step', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { step: 2 },
+ });
+
+ // Press up arrow
+ await wrapper.trigger('keydown', { key: 'ArrowUp' });
+
+ // Assert value is 1 and input event was emitted
+ expect(wrapper.find('input').element.value).to.equal('2');
+ expect(wrapper.emitted().input).to.deep.equal([[2]]);
+ });
+
+ it('down arrow should increment value by step', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { step: 2 },
+ });
+
+ // Press down arrow
+ await wrapper.trigger('keydown', { key: 'ArrowDown' });
+
+ // Assert value is -1 and input event was emitted
+ expect(wrapper.find('input').element.value).to.equal('-2');
+ expect(wrapper.emitted().input).to.deep.equal([[-2]]);
+ });
+
+ it('should fire input event when value changes', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput);
+
+ // Set value to 1
+ wrapper.find('input').element.value = '1';
+ await wrapper.find('input').trigger('input');
+
+ // Assert input event was emitted
+ expect(wrapper.emitted().input).to.deep.equal([[1]]);
+ });
+
+ it('should accept numerical values', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput);
+
+ // Try to set value to 1
+ wrapper.find('input').element.value = '1';
+ await wrapper.find('input').trigger('input');
+
+ // Assert value was accepted and input event was emitted
+ expect(wrapper.find('input').element.value).to.equal('1');
+ expect(wrapper.emitted().input).to.deep.equal([[1]]);
+ });
+
+ it('should not accept decimal values', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { value: 1 },
+ });
+
+ // Try to set value to 1.5
+ wrapper.find('input').element.value = '1.5';
+ await wrapper.find('input').trigger('input');
+
+ // Assert value was not accepted and no events were emitted
+ expect(wrapper.find('input').element.value).to.equal('1');
+ expect(wrapper.emitted().input).to.equal(undefined);
+ });
+
+ it('should not accept non numerical values', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { value: 1 },
+ });
+
+ // Try to set value to a
+ wrapper.find('input').element.value = 'a';
+ await wrapper.find('input').trigger('input');
+
+ // Assert value was not accepted and no events were emitted
+ expect(wrapper.find('input').element.value).to.equal('1');
+ expect(wrapper.emitted().input).to.equal(undefined);
+ });
+
+ it('should format input value on blur', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { value: 1, padding: 3 },
+ });
+
+ // Set value to '01'
+ wrapper.find('input').element.value = '01';
+ await wrapper.find('input').trigger('input');
+
+ // Assert value was not updated and no events were emitted
+ expect(wrapper.find('input').element.value).to.equal('01');
+ expect(wrapper.emitted().input).to.equal(undefined);
+
+ // Trigger blur event
+ await wrapper.find('input').trigger('blur');
+
+ // Assert value was formatted but no events were emitted
+ expect(wrapper.find('input').element.value).to.equal('001');
+ expect(wrapper.emitted().input).to.equal(undefined);
+ });
+
+ it('should allow input to be empty until blur', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { value: 5 },
+ });
+
+ // Set value to ''
+ wrapper.find('input').element.value = '';
+ await wrapper.find('input').trigger('input');
+
+ // Assert value is '' and input event was emitted with default value
+ expect(wrapper.find('input').element.value).to.equal('');
+ expect(wrapper.emitted().input).to.deep.equal([[0]]);
+
+ // Trigger blur event
+ await wrapper.find('input').trigger('blur');
+
+ // Assert value is the default value but no new events were emitted
+ expect(wrapper.find('input').element.value).to.equal('0');
+ expect(wrapper.emitted().input).to.deep.equal([[0]]);
+ });
+
+ it('should allow input to be "-" until blur', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { value: 5 },
+ });
+
+ // Set value to '-'
+ wrapper.find('input').element.value = '-';
+ await wrapper.find('input').trigger('input');
+
+ // Assert value is '-' and input event was emitted with default value
+ expect(wrapper.find('input').element.value).to.equal('-');
+ expect(wrapper.emitted().input).to.deep.equal([[0]]);
+
+ // Trigger blur event
+ await wrapper.find('input').trigger('blur');
+
+ // Assert value is the default value but no new events were emitted
+ expect(wrapper.find('input').element.value).to.equal('0');
+ expect(wrapper.emitted().input).to.deep.equal([[0]]);
+ });
+
+ it('default value should be the minimum if 0 is not valid', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { value: 3, max: 4, min: 2 },
+ });
+
+ // Set value to '' and trigger blur event so value must be updated
+ wrapper.find('input').element.value = '';
+ await wrapper.find('input').trigger('input');
+ await wrapper.find('input').trigger('blur');
+
+ // Assert value is 2 and input event was emitted
+ expect(wrapper.find('input').element.value).to.equal('2');
+ expect(wrapper.emitted().input).to.deep.equal([[2]]);
+ });
+
+ it('should not allow input to be below the minimum', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { min: 10, value: 20 },
+ });
+
+ // Try to set value to 9, which is below the minimum
+ wrapper.find('input').element.value = '9';
+ await wrapper.find('input').trigger('input');
+
+ // Assert value is 10 and input event was emitted
+ expect(wrapper.find('input').element.value).to.equal('10');
+ expect(wrapper.emitted().input).to.deep.equal([[10]]);
+
+ // Try to decrement value
+ await wrapper.trigger('keydown', { key: 'ArrowDown' });
+
+ // Assert value is still 10 and no new event were emitted
+ expect(wrapper.find('input').element.value).to.equal('10');
+ expect(wrapper.emitted().input).to.deep.equal([[10]]);
+ });
+
+ it('should not allow input to be above the maximum', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { max: 10 },
+ });
+
+ // Try to set value to 11, which is above the maximum
+ wrapper.find('input').element.value = '11';
+ await wrapper.find('input').trigger('input');
+
+ // Assert value is 10 and input event was emitted
+ expect(wrapper.find('input').element.value).to.equal('10');
+ expect(wrapper.emitted().input).to.deep.equal([[10]]);
+
+ // Try to increment value
+ await wrapper.trigger('keydown', { key: 'ArrowUp' });
+
+ // Assert value is still 10 and no new events were emitted
+ expect(wrapper.find('input').element.value).to.equal('10');
+ expect(wrapper.emitted().input).to.deep.equal([[10]]);
+ });
+
+ it('should format value according to padding prop', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { padding: 2 },
+ });
+
+ // Assert value is correctly formatted
+ expect(wrapper.find('input').element.value).to.equal('00');
+ });
+
+ it('should emit keydown event if arrow-keys is false', async () => {
+ // Initialize component
+ const wrapper = mount(IntegerInput, {
+ propsData: { arrowKeys: false },
+ });
+
+ // Try to increment value
+ await wrapper.trigger('keydown', { key: 'ArrowUp' });
+
+ // Assert keydown event emitted
+ expect(wrapper.emitted().keydown.length).to.equal(1);
+ });
+});
