-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
mask.spec.js
121 lines (115 loc) · 5.61 KB
/
mask.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
import { haveValue, html, test } from '../../utils'
test('x-mask',
[html`<input x-data x-mask="(999) 999-9999">`],
({ get }) => {
// Type a phone number:
get('input').type('12').should(haveValue('(12'))
get('input').type('3').should(haveValue('(123) '))
get('input').type('4567890').should(haveValue('(123) 456-7890'))
// Clear it & paste formatted version in:
get('input').type('{selectAll}{backspace}')
get('input').invoke('val', '(123) 456-7890').trigger('blur')
get('input').should(haveValue('(123) 456-7890'))
// Clear it & paste un-formatted version in:
get('input').type('{selectAll}{backspace}')
get('input').invoke('val', '1234567890').trigger('blur')
get('input').should(haveValue('(123) 456-7890'))
// Make sure backspace works.
get('input').type('{backspace}').should(haveValue('(123) 456-789'))
get('input').type('{backspace}').should(haveValue('(123) 456-78'))
get('input').type('{backspace}').should(haveValue('(123) 456-7'))
get('input').type('{backspace}').should(haveValue('(123) 456-'))
get('input').type('{backspace}').should(haveValue('(123) 456'))
get('input').type('{backspace}').should(haveValue('(123) 45'))
// Make sure you can't type other characters.
get('input').type('a').should(haveValue('(123) 45'))
get('input').type('-').should(haveValue('(123) 45'))
// Put cursor in other places in the input and make sure you can type.
get('input').type('67890').should(haveValue('(123) 456-7890'))
get('input').type('{leftArrow}{leftArrow}{leftArrow}{leftArrow}{leftArrow}')
get('input').type('123456').should(haveValue('(123) 456-1234'))
},
)
test('x-mask with x-model',
[html`
<div x-data="{ value: '' }">
<input x-mask="(999) 999-9999" x-model="value" id="1">
<input id="2" x-model="value">
</div>
`],
({ get }) => {
// Type a phone number:
get('#1').type('12').should(haveValue('(12'))
get('#2').should(haveValue('(12'))
get('#1').type('3').should(haveValue('(123) '))
get('#2').should(haveValue('(123) '))
get('#1').type('4567890').should(haveValue('(123) 456-7890'))
get('#2').should(haveValue('(123) 456-7890'))
// Clear it & paste formatted version in:
get('#1').type('{selectAll}{backspace}')
get('#1').invoke('val', '(123) 456-7890').trigger('input')
get('#1').should(haveValue('(123) 456-7890'))
get('#2').should(haveValue('(123) 456-7890'))
// Clear it & paste un-formatted version in:
get('#1').type('{selectAll}{backspace}')
get('#1').invoke('val', '1234567890').trigger('input')
get('#1').should(haveValue('(123) 456-7890'))
get('#2').should(haveValue('(123) 456-7890'))
},
)
test('x-mask with non wildcard alpha-numeric characters (b)',
[html`<input x-data x-mask="ba9*b">`],
({ get }) => {
get('input').type('a').should(haveValue('ba'))
get('input').type('a').should(haveValue('ba'))
get('input').type('3').should(haveValue('ba3'))
get('input').type('z').should(haveValue('ba3zb'))
get('input').type('{backspace}{backspace}4').should(haveValue('ba34b'))
},
)
test('x-mask:dynamic',
[html`<input x-data x-mask:dynamic="'(999)'">`],
({ get }) => {
get('input').type('123').should(haveValue('(123)'))
}
)
test('$money',
[html`<input x-data x-mask:function="$money">`],
({ get }) => {
get('input').type('30.00').should(haveValue('30.00'))
get('input').type('5').should(haveValue('30.00'))
get('input').type('{backspace}').should(haveValue('30.0'))
get('input').type('5').should(haveValue('30.05'))
get('input').type('{selectAll}{backspace}').should(haveValue(''))
get('input').type('123').should(haveValue('123'))
get('input').type('4').should(haveValue('1,234'))
get('input').type('567').should(haveValue('1,234,567'))
get('input').type('.89').should(haveValue('1,234,567.89'))
get('input').type('{leftArrow}7').should(haveValue('1,234,567.87'))
get('input').type('{leftArrow}{leftArrow}{leftArrow}89').should(haveValue('123,456,789.87'))
get('input').type('{leftArrow}{leftArrow}{leftArrow}{leftArrow}12').should(haveValue('12,345,612,789.87'))
get('input').type('{leftArrow}3').should(haveValue('123,456,123,789.87'))
// Clear it & paste formatted version in:
get('input').type('{selectAll}{backspace}')
get('input').invoke('val', '123,456,132,789.87').trigger('blur')
get('input').should(haveValue('123,456,132,789.87'))
// Clear it & paste un-formatted version in:
get('input').type('{selectAll}{backspace}')
get('input').invoke('val', '123456132789.87').trigger('blur')
get('input').should(haveValue('123,456,132,789.87'))
},
)
test('$money swapping commas and periods',
[html`<input x-data x-mask:function="$money($input, ',')">`],
({ get }) => {
get('input').type('30,00').should(haveValue('30,00'))
get('input').type('5').should(haveValue('30,00'))
get('input').type('{backspace}').should(haveValue('30,0'))
get('input').type('5').should(haveValue('30,05'))
get('input').type('{selectAll}{backspace}').should(haveValue(''))
get('input').type('123').should(haveValue('123'))
get('input').type('4').should(haveValue('1.234'))
get('input').type('567').should(haveValue('1.234.567'))
get('input').type(',89').should(haveValue('1.234.567,89'))
},
)