1+ import { DOMWrapper , mount , VueWrapper } from "@vue/test-utils" ;
2+ import EmptyApp from "../components/EmptyApp.vue" ;
3+ import { defineComponent } from "vue" ;
4+ import { Form , FormField } from "../../../src/index" ;
5+ import STORE from "./../../../src/config/store" ;
6+
7+ const name = 'volume'
8+ const label = `Your ${ name }
9+ function defineRangeComponent ( bindProps = { } ) {
10+ return defineComponent ( {
11+ data : ( ) => ( { bindProps} ) ,
12+ template : `<div><form-field v-bind = "bindProps" type = "range" name = "${ name } ${ label } ,
13+ components : { FormField}
14+ } )
15+ }
16+ function defaultMount ( component = defineRangeComponent ( ) ) {
17+ return mount ( EmptyApp , {
18+ slots : { default : component } ,
19+ attachTo : document . body
20+ } )
21+ }
22+
23+ describe ( "Input range" , ( ) => {
24+ let app : VueWrapper < any > ;
25+ let form : Form
26+ let input : DOMWrapper < HTMLInputElement >
27+ beforeEach ( ( ) => {
28+ app = defaultMount ( )
29+ form = ( app . vm as any ) . form
30+ input = app . find ( 'input' )
31+ } )
32+
33+ test ( "Значение поля по умолчанию пустое" , async ( ) => {
34+ expect ( input . element . value ) . toBe ( "50" ) // по умолчанию на середине
35+ } )
36+ test ( "Для пустого поля должна отображаться только метка" , async ( ) => {
37+ console . log ( app . html ( ) )
38+ expect ( app . text ( ) ) . toBe ( label )
39+ } )
40+ test ( "При вводе значения в поле - форма должна меняться" , async ( ) => {
41+ await input . setValue ( 40 )
42+ expect ( form . getValueByName ( name ) ) . toBe ( "40" )
43+ } )
44+ test ( "При изменении формы - поле должно меняться" , async ( ) => {
45+ form . setValues ( { [ name ] : 13 } ) ;
46+ await app . vm . $nextTick ( )
47+ expect ( input . element . value ) . toBe ( "13" )
48+ } )
49+ test ( "Блокировка элемента изменяет его стилистику" , async ( ) => {
50+ form . disable ( )
51+ await app . vm . $nextTick ( )
52+ expect ( input . element . disabled ) . toBe ( true ) ;
53+ } )
54+ test ( "Блокировка элемента не даёт ввести значение" , async ( ) => {
55+ await input . setValue ( 20 )
56+ form . disable ( )
57+ await app . vm . $nextTick ( )
58+ await input . setValue ( 40 )
59+ expect ( form . getValueByName ( name ) ) . toBe ( "20" )
60+ } )
61+ test ( "Ошибка валидации отображается на поле" , async ( ) => {
62+ form . validate ( )
63+ await app . vm . $nextTick ( )
64+ expect ( app . text ( ) ) . toBe ( label + STORE . requiredMessage )
65+ } )
66+
67+
68+ test ( "Установка max" , async ( ) => {
69+ const app = defaultMount ( defineRangeComponent ( {
70+ max : 10
71+ } ) )
72+ const input = app . find ( 'input' ) ;
73+ const form = ( app . vm as any ) . form as Form ;
74+ expect ( input . element . value ) . toBe ( "5" ) ;
75+ await input . setValue ( 20 ) ;
76+ expect ( input . element . value ) . toBe ( "10" )
77+ expect ( form . getValueByName ( name ) ) . toBe ( "10" )
78+ } )
79+ test ( "Установка min" , async ( ) => {
80+ const app = defaultMount ( defineRangeComponent ( {
81+ min : 50
82+ } ) )
83+ const input = app . find ( 'input' ) ;
84+ const form = ( app . vm as any ) . form as Form ;
85+ expect ( input . element . value ) . toBe ( "75" ) ;
86+ await input . setValue ( 20 ) ;
87+ expect ( input . element . value ) . toBe ( "50" )
88+ expect ( form . getValueByName ( name ) ) . toBe ( "50" )
89+ } )
90+ test ( "Установка max/min" , async ( ) => {
91+ const app = defaultMount ( defineRangeComponent ( {
92+ min : 50 , max : 60
93+ } ) )
94+ const input = app . find ( 'input' ) ;
95+ expect ( input . element . value ) . toBe ( "55" ) ;
96+ } )
97+
98+ /*
99+ test("Поле должно реагировать на нажатие стрелок", async () =>{
100+ await input.trigger('keydown.down');
101+ expect(input.element.value).toBe("49");
102+ await input.trigger('keydown.down');
103+ expect(input.element.value).toBe("48");
104+
105+ await input.trigger('keydown.up');
106+ expect(input.element.value).toBe("49");
107+ expect(form.getValueByName(name)).toBe("49")
108+ })
109+ test("Установка step", async () => {
110+ const app = defaultMount(defineRangeComponent({
111+ step: 15
112+ }))
113+ const input = app.find('input');
114+ await input.trigger('keydown.down');
115+ expect(input.element.value).toBe("35");
116+ })
117+ */
118+ } )
0 commit comments