Skip to content

Commit 2a10fc8

Browse files
matt-sandersmatt-sanders
committed
changed test layout to suit common tests
1 parent 7c95e47 commit 2a10fc8

File tree

2 files changed

+161
-105
lines changed

2 files changed

+161
-105
lines changed

‎src/fields/fieldSelect.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div class="form-group">
3+
<label v-if="form[key].label" :for="form[key].id ? form[key].id : null">{{form[key].label}}</label>
4+
<select class="form-control" :class="form[key].classes" :id="form[key].id ? form[key].id : null" v-model="form[key].value" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="form[key].atts">
5+
</select>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import baseField from './baseField';
11+
export default {
12+
mixins: [baseField]
13+
}
14+
</script>

‎test/unit/specs/index.spec.js‎

Lines changed: 147 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import sinon from 'sinon';
55
import Vue from 'vue';
66
import VueFormly from 'vue-formly';
77
import FormlyBootstrap from 'src/index';
8+
//import {blur} from './expectations';
89
Vue.use(VueFormly);
910
Vue.use(FormlyBootstrap);
1011
chai.use(sinonChai);
@@ -29,119 +30,159 @@ function trigger (target, event, process) {
2930
target.dispatchEvent(e);
3031
}
3132

32-
describe('Bootstrap Field Inputs', () => {
33-
33+
function describeFunctions(inputElement){
3434
beforeEach(() => {
35-
data = {
36-
form: {
37-
test: {
38-
label: 'Test'
39-
}
40-
}
35+
data.form.test.type = inputElement;
36+
data.form.test.inputType = 'text';
37+
spy = sinon.spy();
38+
});
39+
40+
it('dirty/active', () => {
41+
createForm();
42+
expect(vm.form.test.$dirty).to.be.false;
43+
expect(vm.form.test.$active).to.be.false;
44+
});
45+
46+
it('blur', ()=>{
47+
let copy = {};
48+
data.form.test.onBlur = function(e){
49+
copy = this.form;
4150
};
51+
createForm();
52+
trigger(vm.$el.querySelectorAll(inputElement)[0], 'blur');
53+
expect(vm.form.test.$active).to.be.false;
54+
expect(vm.form.test.$dirty).to.be.true;
55+
//check that "this" is the same
56+
//the deep equal of "this" seemed to time out
57+
expect(copy).to.deep.equal(vm.form);
4258
});
4359

44-
describe('functions', () => {
60+
it('focus', () => {
61+
data.form.test.onFocus = spy;
62+
createForm();
63+
trigger(vm.$el.querySelectorAll(inputElement)[0], 'focus');
64+
expect(spy.called).to.be.true;
65+
expect(vm.form.test.$active).to.be.true;
66+
});
4567

46-
beforeEach(() => {
47-
data.form.test.type = 'input';
48-
data.form.test.inputType = 'text';
49-
spy = sinon.spy();
50-
});
68+
it('click', () => {
69+
data.form.test.onClick = spy;
70+
createForm();
71+
trigger(vm.$el.querySelectorAll(inputElement)[0], 'click');
72+
expect(spy.called).to.be.true;
73+
});
5174

52-
it('dirty/active', () => {
53-
createForm();
54-
expect(vm.form.test.$dirty).to.be.false;
55-
expect(vm.form.test.$active).to.be.false;
56-
});
75+
it('change', () => {
76+
data.form.test.onChange = spy;
77+
createForm();
78+
trigger(vm.$el.querySelectorAll(inputElement)[0], 'change');
79+
expect(spy.called).to.be.true;
80+
expect(vm.form.test.$dirty).to.be.true;
81+
});
5782

58-
it('blur', () => {
59-
let copy = {};
60-
data.form.test.onBlur = function(e){
61-
copy = this.form;
62-
};
63-
createForm();
64-
trigger(vm.$el.querySelectorAll('input')[0], 'blur');
65-
expect(vm.form.test.$active).to.be.false;
66-
expect(vm.form.test.$dirty).to.be.true;
67-
//check that "this" is the same
68-
//the deep equal of "this" seemed to time out
69-
expect(copy).to.deep.equal(vm.form);
70-
});
71-
72-
it('focus', () => {
73-
data.form.test.onFocus = spy;
74-
createForm();
75-
trigger(vm.$el.querySelectorAll('input')[0], 'focus');
76-
expect(spy.called).to.be.true;
77-
expect(vm.form.test.$active).to.be.true;
78-
});
83+
it('keyup', () => {
84+
data.form.test.onKeyup = spy;
85+
createForm();
86+
trigger(vm.$el.querySelectorAll(inputElement)[0], 'keyup');
87+
expect(spy.called).to.be.true;
88+
});
7989

80-
it('click', () => {
81-
data.form.test.onClick = spy;
82-
createForm();
83-
trigger(vm.$el.querySelectorAll('input')[0], 'click');
84-
expect(spy.called).to.be.true;
85-
});
90+
it('keydown', () => {
91+
data.form.test.onKeydown = spy;
92+
createForm();
93+
trigger(vm.$el.querySelectorAll(inputElement)[0], 'keydown');
94+
expect(spy.called).to.be.true;
95+
});
96+
};
8697

87-
it('change', () => {
88-
data.form.test.onChange = spy;
89-
createForm();
90-
trigger(vm.$el.querySelectorAll('input')[0], 'change');
91-
expect(spy.called).to.be.true;
92-
expect(vm.form.test.$dirty).to.be.true;
93-
});
98+
function describeAttributes(inputElement, exclude = []){
99+
beforeEach(()=>{
100+
data.form.test.type = inputElement;
101+
data.form.test.inputType = 'text';
102+
});
103+
104+
it('attributes', () => {
105+
if ( exclude.indexOf('attributes') >= 0 ) return true;
106+
data.form.test.atts = {
107+
'data-foo': 'bar',
108+
'data-bar': 'foo'
109+
};
110+
createForm();
111+
let input = vm.$el.querySelectorAll(inputElement)[0];
112+
expect(input.dataset.foo).to.equal('bar');
113+
expect(input.dataset.bar).to.equal('foo');
114+
});
94115

95-
it('keyup', () => {
96-
data.form.test.onKeyup = spy;
97-
createForm();
98-
trigger(vm.$el.querySelectorAll('input')[0], 'keyup');
99-
expect(spy.called).to.be.true;
100-
});
116+
it('classes', () => {
117+
if ( exclude.indexOf('classes') >= 0 ) return true;
118+
data.form.test.classes = {
119+
'class-a': true,
120+
'class-b': false
121+
};
122+
createForm();
123+
let input = vm.$el.querySelectorAll(inputElement)[0];
124+
expect(input.className).to.equal('form-control class-a');
125+
});
101126

102-
it('keydown', () => {
103-
data.form.test.onKeydown = spy;
104-
createForm();
105-
trigger(vm.$el.querySelectorAll('input')[0], 'keydown');
106-
expect(spy.called).to.be.true;
107-
});
108-
127+
128+
129+
it('placeholder', () => {
130+
if ( exclude.indexOf('placeholder') >= 0 ) return;
131+
data.form.test.placeholder = 'holding';
132+
createForm();
133+
let input = vm.$el.querySelectorAll(inputElement)[0];
134+
expect(input.placeholder).to.equal('holding');
109135
});
110136

111-
describe('classes & attributes', () => {
112-
it('attributes', () => {
113-
data.form.test.type = 'input';
114-
data.form.test.inputType = 'text';
115-
data.form.test.atts = {
116-
'data-foo': 'bar',
117-
'data-bar': 'foo'
118-
};
119-
createForm();
120-
let input = vm.$el.querySelectorAll('input')[0];
121-
expect(input.dataset.foo).to.equal('bar');
122-
expect(input.dataset.bar).to.equal('foo');
123-
});
137+
it('id', () => {
138+
if ( exclude.indexOf('id') >= 0 ) return true;
139+
data.form.test.id = 'someId';
140+
createForm();
141+
let input = vm.$el.querySelectorAll(inputElement)[0];
142+
let label = vm.$el.querySelectorAll('label')[0];
143+
expect(input.id).to.equal(data.form.test.id);
144+
expect(label.htmlFor).to.equal(data.form.test.id);
145+
});
146+
};
124147

125-
it('classes', () => {
126-
data.form.test.type = 'input';
127-
data.form.test.inputType = 'text';
128-
data.form.test.classes = {
129-
'class-a': true,
130-
'class-b': false
131-
};
132-
createForm();
133-
let input = vm.$el.querySelectorAll('input')[0];
134-
expect(input.className).to.equal('form-control class-a');
135-
});
148+
function describeConditional(inputElement){
149+
it('label', () => {
150+
data.form.test.type = inputElement;
151+
data.form.test.inputType = 'text';
152+
data.form.test.label = '';
153+
createForm(data);
154+
155+
expect(vm.$el.querySelectorAll('label')).to.be.length(0);
136156
});
157+
};
158+
159+
describe('Bootstrap Field Inputs', () => {
137160

138-
describe('input', () => {
161+
beforeEach(() => {
162+
data = {
163+
form: {
164+
test: {
165+
label: 'Test'
166+
}
167+
}
168+
};
169+
});
139170

140-
it('basic functions', (done) => {
171+
describe('=== Input ===', () => {
172+
173+
describe('functions',() =>{
174+
describeFunctions('input');
175+
});
176+
describe('classes & attributes', () => {
177+
describeAttributes('input');
178+
});
179+
describe('conditional elements', ()=>{
180+
describeConditional('input');
181+
});
182+
183+
it('layout', (done) => {
141184
data.form.test.type = 'input';
142185
data.form.test.inputType = 'text';
143-
data.form.test.placeholder = 'holding';
144-
data.form.test.id = 'someId';
145186
createForm(data);
146187

147188
let inputs = vm.$el.querySelectorAll('input');
@@ -151,13 +192,10 @@ describe('Bootstrap Field Inputs', () => {
151192

152193
expect(inputs).to.be.length(1);
153194
expect(input.type).to.equal('text');
154-
expect(input.id).to.equal(data.form.test.id);
155-
expect(input.placeholder).to.equal('holding');
156195
expect(input.className).to.equal('form-control');
157196

158197
expect(labels).to.be.length(1);
159198
expect(label.textContent).to.equal(data.form.test.label);
160-
expect(label.htmlFor).to.equal(data.form.test.id);
161199

162200
vm.form.test.value = 'testing';
163201

@@ -167,17 +205,21 @@ describe('Bootstrap Field Inputs', () => {
167205
}, 0);
168206

169207
});
208+
});
170209

171-
it('conditional elements', () => {
172-
data.form.test.type = 'input';
173-
data.form.test.inputType = 'text';
174-
data.form.test.label = '';
175-
delete data.form.test.placeholder;
176-
createForm(data);
177210

178-
expect(vm.$el.querySelectorAll('label')).to.be.length(0);
179-
});
180211

212+
describe('=== Select ===', () => {
213+
describe('functions', ()=>{
214+
describeFunctions('select');
215+
});
216+
describe('classes & attributes', () => {
217+
describeAttributes('select', ['placeholder']);
218+
});
219+
describe('conditional elements', ()=>{
220+
describeConditional('select');
221+
});
222+
181223
});
182224

183225

0 commit comments

Comments
 (0)