Skip to content

Commit 57af446

Browse files
mosinvemosinve
authored
Fix(FormInput) Add native events listeners && tests (bootstrap-vue#1873)
fixes bootstrap-vue#1645
1 parent dd7ace3 commit 57af446

File tree

7 files changed

+771
-737
lines changed

7 files changed

+771
-737
lines changed

‎.babelrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
}
1414
]
1515
],
16+
"plugins": ["transform-object-rest-spread"],
1617
"env": {
1718
"test": {
1819
"presets": [

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,13 @@
7272
"devDependencies": {
7373
"@nuxtjs/google-analytics": "^2.0.2",
7474
"@nuxtjs/pwa": "^2.0.5",
75+
"@vue/test-utils": "^1.0.0-beta.16",
7576
"babel-cli": "^6.26.0",
7677
"babel-core": "^6.26.3",
78+
"babel-jest": "^23.0.1",
7779
"babel-plugin-external-helpers": "^6.22.0",
7880
"babel-plugin-istanbul": "^4.1.5",
81+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
7982
"clean-css": "^4.1.9",
8083
"codecov": "^3.0.2",
8184
"codemirror": "^5.37.0",

‎src/components/form-input/fixtures/form-input.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<div id="app">
2-
<b-form-input v-model="text" placeholder="Enter your name"></b-form-input>
2+
<b-form-input ref="simpleButton" v-model="text" placeholder="Enter your name"></b-form-input>
33

4-
<b-form-input v-model="textformatter" placeholder="Enter your name" :formatter="format"></b-form-input>
4+
<b-form-input ref="inputFormatter" v-model="textformatter" placeholder="Enter your name" :formatter="format"></b-form-input>
55

6-
<b-form-input v-model="textlazy" type="text" placeholder="Enter your name" :formatter="format" lazy-formatter></b-form-input>
6+
<b-form-input ref="lazyFormatter" v-model="textlazy" type="text" placeholder="Enter your name" :formatter="format" lazy-formatter></b-form-input>
77

8-
<b-form-input v-model="text" state="valid" placeholder="valid"></b-form-input>
8+
<b-form-input ref="valid" v-model="text" state="valid" placeholder="valid"></b-form-input>
99

10-
<b-form-input v-model="text" state="invalid" placeholder="invalid"></b-form-input>
10+
<b-form-input ref="invalid" v-model="text" state="invalid" placeholder="invalid"></b-form-input>
1111

12-
<b-form-input v-model="text" type="password" placeholder="password"></b-form-input>
12+
<b-form-input ref="password" v-model="text" type="password" placeholder="password"></b-form-input>
1313
</div>

‎src/components/form-input/form-input.js

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ const TYPES = [
1818
'search',
1919
'range',
2020
'color',
21-
`date`,
22-
`time`,
23-
`datetime`,
24-
`datetime-local`,
25-
`month`,
26-
`week`
21+
'date',
22+
'time',
23+
'datetime',
24+
'datetime-local',
25+
'month',
26+
'week'
2727
]
2828

2929
export default {
@@ -46,6 +46,7 @@ export default {
4646
value: this.value
4747
},
4848
on: {
49+
...this.$listeners,
4950
input: this.onInput,
5051
change: this.onChange
5152
}
@@ -155,11 +156,6 @@ export default {
155156
const fValue = this.format(evt.target.value, evt)
156157
this.setValue(fValue)
157158
this.$emit('change', fValue)
158-
},
159-
focus () {
160-
if (!this.disabled) {
161-
this.$el.focus()
162-
}
163159
}
164160
}
165161
}

‎src/components/form-input/form-input.spec.js

Lines changed: 73 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,76 @@
1-
import {loadFixture, testVM} from '../../../tests/utils'
1+
// import {loadFixture, testVM} from '../../../tests/utils'
2+
import Input from './form-input'
3+
import { mount } from 'vue-test-utils'
24

35
describe('form-input', async () => {
4-
beforeEach(loadFixture(__dirname, 'form-input'))
5-
testVM()
6+
it('emits an input event', async () => {
7+
const wrapper = mount(Input)
8+
9+
const input = wrapper.find('input')
10+
input.element.value = 'test'
11+
input.trigger('input')
12+
13+
expect(wrapper.emitted().input[0]).toEqual(['test'])
14+
})
15+
16+
it('emits a native focus event', async () => {
17+
const spy = jest.fn()
18+
const wrapper = mount(Input, {
19+
listeners: {
20+
focus: spy
21+
}
22+
})
23+
const input = wrapper.find('input')
24+
input.trigger('focus')
25+
26+
expect(wrapper.emitted()).toMatchObject({})
27+
expect(spy).toHaveBeenCalled()
28+
})
29+
30+
it('emits a native blur event', async () => {
31+
const spy = jest.fn()
32+
const wrapper = mount(Input, {
33+
listeners: {
34+
blur: spy
35+
}
36+
})
37+
const input = wrapper.find('input')
38+
input.trigger('blur')
39+
40+
expect(wrapper.emitted()).toMatchObject({})
41+
expect(spy).toHaveBeenCalled()
42+
})
43+
44+
it('apply transform function', async () => {
45+
const wrapper = mount(Input, {
46+
propsData: {
47+
formatter (value) {
48+
return value.toLowerCase()
49+
}
50+
}
51+
})
52+
const input = wrapper.find('input')
53+
input.element.value = 'TEST'
54+
input.trigger('input')
55+
56+
expect(wrapper.emitted().input[0]).toEqual(['test'])
57+
})
58+
59+
it('lazy apply transform function', async () => {
60+
const wrapper = mount(Input, {
61+
propsData: {
62+
formatter (value) {
63+
return value.toLowerCase()
64+
},
65+
lazyFormatter: true
66+
}
67+
})
68+
const input = wrapper.find('input')
69+
input.element.value = 'TEST'
70+
input.trigger('input')
71+
expect(wrapper.emitted().input[0]).not.toEqual(['test'])
72+
73+
input.trigger('change')
74+
expect(wrapper.emitted().change[0]).toEqual(['test'])
75+
})
676
})

‎src/utils/array.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,6 @@ export const isArray = Array.isArray
135135

136136
// Instance
137137
export const arrayIncludes = (array, value) => array.indexOf(value) !== -1
138-
export const arrayFind = (array, fn, thisArg) => array.find(fn, thisArg)
139138
export function concat () {
140139
return Array.prototype.concat.apply([], arguments)
141140
}

0 commit comments

Comments
 (0)