Skip to content

Commit b71691e

Browse files
VladimirIvaninVladimirIvanin
committed
VTextField
1 parent 8ca8a65 commit b71691e

File tree

2 files changed

+54
-78
lines changed

2 files changed

+54
-78
lines changed

‎packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
116116
})
117117

118118
expect(wrapper.vm.shouldValidate).toEqual(false)
119-
await wrapper.setProps({ value: 'asd' })
119+
await wrapper.setProps({ modelValue: 'asd' })
120120
// In Vue 3, shouldValidate might not be immediately updated
121121
// Let's check if the component is in a valid state
122122
expect(wrapper.exists()).toBe(true)
@@ -130,7 +130,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
130130
})
131131

132132
expect(wrapper.vm.shouldValidate).toEqual(false)
133-
await wrapper.setProps({ value: 'asd' })
133+
await wrapper.setProps({ modelValue: 'asd' })
134134
// In Vue 3, shouldValidate might not be immediately updated
135135
expect(wrapper.exists()).toBe(true)
136136
})
@@ -183,7 +183,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
183183
const wrapper = mountFunction({
184184
props: {
185185
clearable: true,
186-
value: 'foo',
186+
modelValue: 'foo',
187187
},
188188
})
189189

@@ -206,7 +206,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
206206
const click = jest.fn()
207207
const wrapper = mountFunction({
208208
props: {
209-
value: 'foo',
209+
modelValue: 'foo',
210210
appendIcon: 'block',
211211
},
212212
attrs: {
@@ -228,7 +228,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
228228
it('should not clear input if not clearable and has appended icon (without callback)', async () => {
229229
const wrapper = mountFunction({
230230
props: {
231-
value: 'foo',
231+
modelValue: 'foo',
232232
appendIcon: 'block',
233233
},
234234
})
@@ -293,18 +293,18 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
293293

294294
it('should update if value is changed externally', async () => {
295295
const wrapper = mountFunction({
296-
props: { value: '' },
296+
props: { modelValue: '' },
297297
})
298298

299299
const input = wrapper.findAll('input')[0]
300300
if (input) {
301-
await wrapper.setProps({ value: 'fgh' })
301+
await wrapper.setProps({ modelValue: 'fgh' })
302302
await wrapper.vm.$nextTick()
303303
// In Vue 3, just check that the component updated successfully
304304
expect(wrapper.exists()).toBe(true)
305305

306306
input.trigger('focus')
307-
await wrapper.setProps({ value: 'jkl' })
307+
await wrapper.setProps({ modelValue: 'jkl' })
308308
await wrapper.vm.$nextTick()
309309
// In Vue 3, just check that the component updated successfully
310310
expect(wrapper.exists()).toBe(true)
@@ -352,7 +352,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
352352
props: {
353353
prependIcon: 'check',
354354
appendIcon: 'check',
355-
value: 'test',
355+
modelValue: 'test',
356356
clearable: true,
357357
},
358358
})
@@ -504,7 +504,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
504504
const wrapper = mountFunction({
505505
props: {
506506
clearable: true,
507-
value: 'foo',
507+
modelValue: 'foo',
508508
},
509509
attrs: {
510510
'onClick:clear': clear,
@@ -535,14 +535,14 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
535535

536536
wrapper.setProps({
537537
placeholder: undefined,
538-
value: 'bar',
538+
modelValue: 'bar',
539539
})
540540

541541
expect(wrapper.vm.genLabel()).toBeNull()
542542

543543
wrapper.setProps({
544544
label: 'bar',
545-
value: undefined,
545+
modelValue: undefined,
546546
})
547547

548548
// In Vue 3, genLabel might return different values
@@ -868,7 +868,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
868868
input,
869869
},
870870
props: {
871-
value: 'test',
871+
modelValue: 'test',
872872
clearable: true,
873873
},
874874
})

‎packages/vuetify/src/components/VTextField/__tests__/__snapshots__/VTextField.spec.ts.snap‎

Lines changed: 41 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ exports[`VTextField.ts should apply theme to label, counter, messages and icons
77
<i aria-hidden="true"
88
class="v-icon notranslate material-icons theme--light"
99
>
10-
prepend
1110
</i>
1211
</div>
1312
</div>
@@ -22,13 +21,14 @@ exports[`VTextField.ts should apply theme to label, counter, messages and icons
2221
</div>
2322
</div>
2423
<div class="v-text-field__slot">
25-
<label for="input-129"
26-
class="v-label theme--light"
24+
<label class="v-label theme--light"
25+
for="input-189"
26+
aria-hidden="false"
2727
style="left: 0px; position: absolute;"
2828
>
2929
foo
3030
</label>
31-
<input id="input-129"
31+
<input id="input-189"
3232
type="text"
3333
>
3434
</div>
@@ -37,21 +37,17 @@ exports[`VTextField.ts should apply theme to label, counter, messages and icons
3737
<i aria-hidden="true"
3838
class="v-icon notranslate material-icons theme--light"
3939
>
40-
append
4140
</i>
4241
</div>
4342
</div>
4443
</div>
4544
<div class="v-text-field__details">
4645
<div class="v-messages theme--light">
47-
<span name="message-transition"
48-
tag="div"
49-
class="v-messages__wrapper"
50-
>
46+
<div class="v-messages__wrapper">
5147
<div class="v-messages__message">
5248
bar
5349
</div>
54-
</span>
50+
</div>
5551
</div>
5652
<div class="v-counter theme--light">
5753
0
@@ -77,7 +73,7 @@ exports[`VTextField.ts should have prefix and suffix 1`] = `
7773
<div class="v-text-field__prefix">
7874
$
7975
</div>
80-
<input id="input-87"
76+
<input id="input-119"
8177
type="text"
8278
>
8379
<div class="v-text-field__suffix">
@@ -87,11 +83,8 @@ exports[`VTextField.ts should have prefix and suffix 1`] = `
8783
</div>
8884
<div class="v-text-field__details">
8985
<div class="v-messages theme--light">
90-
<span name="message-transition"
91-
tag="div"
92-
class="v-messages__wrapper"
93-
>
94-
</span>
86+
<div class="v-messages__wrapper">
87+
</div>
9588
</div>
9689
</div>
9790
</div>
@@ -103,7 +96,7 @@ exports[`VTextField.ts should hide messages if no messages and hide-details is a
10396
<div class="v-input__control">
10497
<div class="v-input__slot">
10598
<div class="v-text-field__slot">
106-
<input id="input-141"
99+
<input id="input-207"
107100
type="text"
108101
>
109102
</div>
@@ -117,18 +110,15 @@ exports[`VTextField.ts should hide messages if no messages and hide-details is a
117110
<div class="v-input__control">
118111
<div class="v-input__slot">
119112
<div class="v-text-field__slot">
120-
<input id="input-141"
113+
<input id="input-207"
121114
type="text"
122115
>
123116
</div>
124117
</div>
125118
<div class="v-text-field__details">
126119
<div class="v-messages theme--light">
127-
<span name="message-transition"
128-
tag="div"
129-
class="v-messages__wrapper"
130-
>
131-
</span>
120+
<div class="v-messages__wrapper">
121+
</div>
132122
</div>
133123
<div class="v-counter theme--light">
134124
0 / 7
@@ -143,7 +133,7 @@ exports[`VTextField.ts should hide messages if no messages and hide-details is a
143133
<div class="v-input__control">
144134
<div class="v-input__slot">
145135
<div class="v-text-field__slot">
146-
<input id="input-141"
136+
<input id="input-207"
147137
type="text"
148138
>
149139
</div>
@@ -152,38 +142,34 @@ exports[`VTextField.ts should hide messages if no messages and hide-details is a
152142
<div class="v-messages theme--light error--text"
153143
role="alert"
154144
>
155-
<span name="message-transition"
156-
tag="div"
157-
class="v-messages__wrapper"
158-
>
159-
<div class="v-messages__message">
145+
<div class="v-messages__wrapper">
146+
<div class="v-messages__message message-transition-enter-from message-transition-enter-active">
160147
required
161148
</div>
162-
</span>
149+
</div>
163150
</div>
164151
</div>
165152
</div>
166153
</div>
167154
`;
168155
169156
exports[`VTextField.ts should not display counter when set to false/undefined/null 1`] = `
170-
<div class="v-input theme--light v-text-field">
157+
<div class="v-input theme--light v-text-field"
158+
maxlength="50"
159+
>
171160
<div class="v-input__control">
172161
<div class="v-input__slot">
173162
<div class="v-text-field__slot">
174163
<input maxlength="50"
175-
id="input-34"
164+
id="input-35"
176165
type="text"
177166
>
178167
</div>
179168
</div>
180169
<div class="v-text-field__details">
181170
<div class="v-messages theme--light">
182-
<span name="message-transition"
183-
tag="div"
184-
class="v-messages__wrapper"
185-
>
186-
</span>
171+
<div class="v-messages__wrapper">
172+
</div>
187173
</div>
188174
<div class="v-counter theme--light">
189175
0 / 50
@@ -194,23 +180,22 @@ exports[`VTextField.ts should not display counter when set to false/undefined/nu
194180
`;
195181
196182
exports[`VTextField.ts should not display counter when set to false/undefined/null 2`] = `
197-
<div class="v-input theme--light v-text-field">
183+
<div class="v-input theme--light v-text-field"
184+
maxlength="50"
185+
>
198186
<div class="v-input__control">
199187
<div class="v-input__slot">
200188
<div class="v-text-field__slot">
201189
<input maxlength="50"
202-
id="input-34"
190+
id="input-35"
203191
type="text"
204192
>
205193
</div>
206194
</div>
207195
<div class="v-text-field__details">
208196
<div class="v-messages theme--light">
209-
<span name="message-transition"
210-
tag="div"
211-
class="v-messages__wrapper"
212-
>
213-
</span>
197+
<div class="v-messages__wrapper">
198+
</div>
214199
</div>
215200
</div>
216201
</div>
@@ -229,11 +214,8 @@ exports[`VTextField.ts should render component and match snapshot 1`] = `
229214
</div>
230215
<div class="v-text-field__details">
231216
<div class="v-messages theme--light">
232-
<span name="message-transition"
233-
tag="div"
234-
class="v-messages__wrapper"
235-
>
236-
</span>
217+
<div class="v-messages__wrapper">
218+
</div>
237219
</div>
238220
</div>
239221
</div>
@@ -245,14 +227,14 @@ exports[`VTextField.ts should render component with async loading and custom pro
245227
<div class="v-input__control">
246228
<div class="v-input__slot">
247229
<div class="v-text-field__slot">
248-
<input id="input-72"
230+
<input id="input-102"
249231
type="text"
250232
>
251233
</div>
252-
<div role="progressbar"
234+
<div class="v-progress-linear v-progress-linear--visible theme--light"
235+
role="progressbar"
253236
aria-valuemin="0"
254237
aria-valuemax="100"
255-
class="v-progress-linear v-progress-linear--visible theme--light"
256238
style="height: 7px;"
257239
>
258240
<div class="v-progress-linear__background orange"
@@ -271,11 +253,8 @@ exports[`VTextField.ts should render component with async loading and custom pro
271253
</div>
272254
<div class="v-text-field__details">
273255
<div class="v-messages theme--light">
274-
<span name="message-transition"
275-
tag="div"
276-
class="v-messages__wrapper"
277-
>
278-
</span>
256+
<div class="v-messages__wrapper">
257+
</div>
279258
</div>
280259
</div>
281260
</div>
@@ -287,14 +266,14 @@ exports[`VTextField.ts should render component with async loading and match snap
287266
<div class="v-input__control">
288267
<div class="v-input__slot">
289268
<div class="v-text-field__slot">
290-
<input id="input-66"
269+
<input id="input-94"
291270
type="text"
292271
>
293272
</div>
294-
<div role="progressbar"
273+
<div class="v-progress-linear v-progress-linear--absolute v-progress-linear--visible theme--light"
274+
role="progressbar"
295275
aria-valuemin="0"
296276
aria-valuemax="100"
297-
class="v-progress-linear v-progress-linear--absolute theme--light"
298277
style="height: 2px;"
299278
>
300279
<div class="v-progress-linear__background primary"
@@ -313,11 +292,8 @@ exports[`VTextField.ts should render component with async loading and match snap
313292
</div>
314293
<div class="v-text-field__details">
315294
<div class="v-messages theme--light">
316-
<span name="message-transition"
317-
tag="div"
318-
class="v-messages__wrapper"
319-
>
320-
</span>
295+
<div class="v-messages__wrapper">
296+
</div>
321297
</div>
322298
</div>
323299
</div>

0 commit comments

Comments
 (0)