all files / tests/unit/ input.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
 
 
 
1×
 
 
 
 
 
1×
1×
1×
 
1×
1×
 
 
 
 
 
1×
1×
 
1×
1×
 
 
 
 
1×
1×
 
1×
1×
 
 
 
 
1×
1×
 
1×
1×
1×
1×
1×
1×
1×
 
 
 
 
 
 
 
 
 
 
 
 
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
 
 
1×
1×
1×
 
 
 
 
 
 
 
1×
1×
1×
1×
1×
 
 
1×
1×
 
 
 
 
1×
1×
 
1×
1×
 
 
 
 
1×
1×
 
1×
1×
 
 
 
 
 
1×
1×
1×
1×
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
1×
4×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import chai, { expect } from 'chai'
import sinon from 'sinon'
import sinonChai from 'sinon-chai'
chai.use(sinonChai)
import { mount } from '@vue/test-utils'
 
import Vue from 'vue'
import Input from '../../src/input/input'
 
describe('Input', () => {
  it('存在.', () => {
    expect(Input).to.be.ok
  })
  it('可以设置value.', () => {
    const wrapper = mount(Input, {
      propsData: {
        iconType: 'error',
        value: '123'
      }
    })
    const el = wrapper.vm.$el.querySelector('input')
    expect(el.value).to.eq('123')
  })
  it('可以设置disabled', () => {
    const wrapper = mount(Input, {
      propsData: {
        disabled: true
      }
    })
    const el = wrapper.vm.$el.querySelector('input')
    expect(el.disabled).to.be.true
  })
  it('可以设置readonly', () => {
    const wrapper = mount(Input, {
      propsData: {
        readonly: true
      }
    })
    const el = wrapper.vm.$el.querySelector('input')
    expect(el.readOnly).to.be.true
  })
  it('可以设置 clearable,监听 clear 事件', done => {
    const inputCall = sinon.fake()
    const changeCall = sinon.fake()
    const clearCall = sinon.fake()
    const blurCall = sinon.fake()
    const focusCall = sinon.fake()
    const wrapper = mount(Input, {
      propsData: {
        clearable: true,
        value: '123'
      },
      listeners: {
        input: inputCall,
        change: changeCall,
        blur: blurCall,
        clear: clearCall,
        focus: focusCall
      }
    })
    const input = wrapper.find('input')
    input.trigger('input')
    input.trigger('focus')
    expect(inputCall).to.have.been.called
    expect(focusCall).to.have.been.called
    const svg = wrapper.find('use')
    setTimeout(() => {
      svg.trigger('click')
      expect(inputCall).to.have.been.calledWith('')
      input.trigger('change')
      expect(changeCall).to.have.been.calledWith('')
      expect(clearCall.calledOnce).to.be.true
      input.trigger('blur')
      expect(blurCall).to.have.been.called
      expect(wrapper.find('use').element).to.not.exist
      done()
    })
  })
  it('可以监听 enter 事件', done => {
    const callback = sinon.fake()
    const wrapper = mount(Input, {
      propsData: {
        value: '123'
      },
      listeners: {
        'keyup-enter': callback
      }
    })
    const input = wrapper.find('input')
    setTimeout(() => {
      input.trigger('keyup.enter')
      expect(callback).to.have.been.called
      done()
    })
  })
  it('可以设置前面icon的名字 prefix', () => {
    const wrapper = mount(Input, {
      propsData: {
        prefix: 'error'
      }
    })
    const el = wrapper.vm.$el.querySelector('use')
    expect(el.getAttribute('xlink:href')).to.eq('#i-error')
  })
  it('可以设置后面icon的名字 suffix', () => {
    const wrapper = mount(Input, {
      propsData: {
        suffix: 'date'
      }
    })
    const el = wrapper.vm.$el.querySelector('use')
    expect(el.getAttribute('xlink:href')).to.eq('#i-date')
  })
  it('可以设置 type', () => {
    const wrapper = mount(Input, {
      propsData: {
        type: 'textarea',
        value: '123'
      }
    })
    const textarea = wrapper.find('textarea')
    const input = wrapper.find('input')
    expect(textarea.element).to.exist
    expect(input.element).to.not.exist
  })
  xit('调用 setRawValue 方法', () => {
    // const Component = {
    //   template: `
    //       < name="music">
    //         <div>nav 1</div>
    //       </>
    //     `
    // }
    const wrapper = mount(Input)
    const clickMethodStub = sinon.stub()
    const input = wrapper.find('input')
    console.log(wrapper.vm.$el)
    console.log(wrapper.vm.$refs.gInput)
    // wrapper.find('button').trigger('click')
    wrapper.vm.$refs.gInput.setRawValue('21')
    expect(clickMethodStub).to.have.been.calledWith('21')
  })
  it('支持 change/input/focus/blur ', () => {
    ;['change', 'input', 'focus', 'blur'].forEach(eventName => {
      it('点击 Input 输入内容触发 change 事件', eventName => {
        const callback = sinon.fake()
        const wrapper = mount(Input)
        wrapper.vm.$on(eventName, callback)
        let event = new Event(eventName)
        Object.defineProperty(event, 'target', {
          value: { value: 'hi' },
          enumerable: true
        })
        let inputElement = wrapper.vm.$el.querySelector('input')
        inputElement.dispatchEvent(event)
        expect(callback).to.have.been.calledWith(event)
        expect(callback).to.have.been.calledWith('hi')
      })
    })
  })
})