-
Notifications
You must be signed in to change notification settings - Fork 4
/
IntegerInput.spec.js
169 lines (130 loc) · 3.98 KB
/
IntegerInput.spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
import { shallowMount } from '@vue/test-utils'
import IntegerInput from 'components/IntegerInput'
describe('IntegerInput Vue component', () => {
const validKeys = [
"Backspace",
"Delete",
"Enter",
"Tab",
"ArrowUp",
"ArrowDown",
"ArrowLeft",
"ArrowRight",
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
];
const invalidKeys = [
"Hello",
"&",
"a",
"-",
"+",
"=",
];
let wrapper;
beforeEach(() => {
wrapper = shallowMount(IntegerInput, {
propsData: {
inputName: 'test-input',
value: 5,
},
});
});
it('sets numericValue based on the value prop passed in', async () => {
const valueProps = [ 33, 99, 2808 ];
valueProps.forEach(async (value) => {
wrapper.setProps({ value });
await wrapper.vm.$nextTick()
expect(wrapper.vm.numericValue).toEqual(value);
});
});
it('sets the input name according to the input-name prop', async () => {
const inputName = 'this-is-a-test-input';
wrapper.setProps({ inputName });
await wrapper.vm.$nextTick()
expect(wrapper.find('input').attributes().name).toEqual(inputName);
})
describe('methods', () => {
describe('isValidKey', () => {
validKeys.forEach((validKey) => {
it (`returns true for valid key: ${validKey}`, () => {
const isValid = wrapper.vm.isValidKey(validKey);
expect(isValid).toBe(true);
});
});
invalidKeys.forEach((invalidKey) => {
it (`returns false for invalid key: ${invalidKey}`, () => {
const isValid = wrapper.vm.isValidKey(invalidKey);
expect(isValid).toBe(false);
});
});
});
describe('restrictValue', () => {
validKeys.forEach((validKey) => {
it (`returns true and does not prevent default for valid key: ${validKey}`, () => {
const event = {
key: validKey,
preventDefault: jest.fn(() => {}),
};
const returnValue = wrapper.vm.restrictValue(event);
expect(returnValue).toBe(true);
expect(event.preventDefault).not.toHaveBeenCalled();
});
});
invalidKeys.forEach((invalidKey) => {
it (`returns false and prevents default for invalid key: ${invalidKey}`, () => {
const event = {
key: invalidKey,
preventDefault: jest.fn(() => {}),
};
const returnValue = wrapper.vm.restrictValue(event);
expect(returnValue).toBe(false);
expect(event.preventDefault).toHaveBeenCalledTimes(1);
});
});
});
describe('recalculateValue', () => {
it('sets the numericValue to the maximum if it exceeds it', () => {
const maximum = 99;
wrapper.setProps({ maximum });
wrapper.vm.recalculateValue(2000);
expect(wrapper.vm.numericValue).toEqual(maximum);
});
it('sets the numericValue to the minimum if it is less than the minimum', () => {
const minimum = 99;
wrapper.setProps({ minimum });
wrapper.vm.recalculateValue(13);
expect(wrapper.vm.numericValue).toEqual(minimum);
});
it('sets the numericValue to the integer value of the input if between min and max', () => {
const minimum = 0;
const maximum = 99;
const expectedValue = 34;
wrapper.setProps({ minimum, maximum });
wrapper.vm.recalculateValue(expectedValue);
expect(wrapper.vm.numericValue).toEqual(expectedValue);
});
it('does not change numericValue if value passed is not a number', async () => {
const minimum = 0;
const maximum = 99;
const expectedValue = 34;
wrapper.setProps({
minimum,
maximum,
value: expectedValue,
});
await wrapper.vm.$nextTick()
wrapper.vm.recalculateValue('test');
expect(wrapper.vm.numericValue).toEqual(expectedValue);
});
});
});
});