Skip to content

Commit e7859b7

Browse files
zoul0813zoul0813
committed
added tests and fixed v-attributes binding on components
1 parent 25e7efb commit e7859b7

14 files changed

+387
-24
lines changed

‎src/fields/abstractField.js

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,17 @@ function convertValidator(validator) {
1313
return validator;
1414
}
1515

16+
function attributesDirective(el, binding, vnode) {
17+
let attrs = objGet(vnode.context, "schema.attributes", {});
18+
let container = binding.value || "input";
19+
if(isString(container)) {
20+
attrs = objGet(attrs, container) || attrs;
21+
}
22+
forEach(attrs, (val, key) => {
23+
el.setAttribute(key, val);
24+
});
25+
}
26+
1627
export default {
1728
props: ["model", "schema", "formOptions", "disabled"],
1829

@@ -26,17 +37,9 @@ export default {
2637

2738
directives: {
2839
attributes: {
29-
bind: function(el, binding, vnode) {
30-
let attrs = objGet(vnode.context, "schema.attributes", {});
31-
let container = binding.value || "input";
32-
if(isString(container)) {
33-
attrs = objGet(attrs, container, {});
34-
}
35-
forEach(attrs, (val, key) => {
36-
console.log("v-attributes", key, val);
37-
el.setAttribute(key, val);
38-
});
39-
}
40+
bind: attributesDirective,
41+
updated: attributesDirective,
42+
componentUpdated: attributesDirective,
4043
}
4144
},
4245

‎src/fields/core/fieldCheckbox.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
input(:id="getFieldID(schema)", type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :class="schema.fieldClasses", v-attributes="")
2+
input(:id="getFieldID(schema)", type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :class="schema.fieldClasses", v-attributes="'input'")
33
</template>
44

55
<script>

‎src/fields/core/fieldChecklist.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template lang="pug">
2-
.wrapper(v-attributes="wrapper")
2+
.wrapper(v-attributes="'wrapper'")
33
.listbox.form-control(v-if="schema.listBox", :disabled="disabled")
44
.list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
55
label
6-
input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)", v-attributes="input")
6+
input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)", v-attributes="'input'")
77
| {{ getItemName(item) }}
88

99
.combobox.form-control(v-if="!schema.listBox", :disabled="disabled")
@@ -14,7 +14,7 @@
1414
.dropList
1515
.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
1616
label
17-
input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)", v-attributes="input")
17+
input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)", v-attributes="'input'")
1818
| {{ getItemName(item) }}
1919
</template>
2020

‎src/fields/core/fieldLabel.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
span(:id="getFieldID(schema)", :class="schema.fieldClasses", v-attributes) {{ value }}
2+
span(:id="getFieldID(schema)", :class="schema.fieldClasses", v-attributes="'label'") {{ value }}
33
</template>
44

55
<script>

‎src/fields/core/fieldRadios.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template lang="pug">
2-
.radio-list(:disabled="disabled", v-attributes="wrapper")
3-
label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
4-
input(:id="getFieldID(schema)", type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses", v-attributes="input")
2+
.radio-list(:disabled="disabled", v-attributes="'wrapper'")
3+
label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}", v-attributes="'label'")
4+
input(:id="getFieldID(schema)", type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses", v-attributes="'input'")
55
| {{ getItemName(item) }}
66

77
</template>

‎src/fields/core/fieldSelect.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)", :class="schema.fieldClasses", v-attributes="input")
2+
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)", :class="schema.fieldClasses", v-attributes="'input'")
33
option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
44

55
template(v-for="item in items")

‎src/fields/core/fieldSubmit.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
input(:id="getFieldID(schema)", type="submit", :value="schema.buttonText", @click="onClick", :name="schema.inputName", :disabled="disabled", :class="schema.fieldClasses", v-attributes="")
2+
input(:id="getFieldID(schema)", type="submit", :value="schema.buttonText", @click="onClick", :name="schema.inputName", :disabled="disabled", :class="schema.fieldClasses", v-attributes="'input'")
33
</template>
44

55
<script>

‎src/fields/core/fieldTextArea.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
:readonly="schema.readonly",
1111
:rows="schema.rows || 2",
1212
:name="schema.inputName",
13-
v-attributes="input")
13+
v-attributes="'input'")
1414
</template>
1515

1616
<script>

‎src/fields/core/fieldUpload.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
.wrapper(v-attributes="wrapper")
2+
.wrapper(v-attributes="'wrapper'")
33
input.form-control(
44
id="getFieldID(schema)",
55
type="file",
@@ -11,7 +11,7 @@
1111
:readonly="schema.readonly",
1212
:required="schema.required",
1313
:disabled="disabled",
14-
v-attributes="input")
14+
v-attributes="'input'")
1515
</template>
1616

1717
<script>

‎test/unit/specs/fields/fieldCheckbox.spec.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,4 +76,60 @@ describe("FieldCheckbox.vue", () => {
7676
});
7777
});
7878
});
79+
80+
describe("check dynamic html attributes", () => {
81+
82+
describe("check input/wrapper attributes", () => {
83+
let schema = {
84+
type: "checkbox",
85+
label: "First Name",
86+
model: "user__model",
87+
inputName: "input_name",
88+
fieldClasses: ["applied-class", "another-class"],
89+
attributes: {
90+
wrapper: {
91+
"data-wrapper": "collapse"
92+
},
93+
input: {
94+
"data-input": "tooltip"
95+
}
96+
}
97+
};
98+
let model = {};
99+
let input, wrap;
100+
101+
before(() => {
102+
createField({ schema, model});
103+
input = wrapper.find('input');
104+
});
105+
106+
it("input should have data-* attribute", () => {
107+
expect(input.attributes()["data-input"]).to.be.equal("tooltip");
108+
});
109+
});
110+
111+
describe("check non-specific attributes", () => {
112+
let schema = {
113+
type: "checkbox",
114+
label: "First Name",
115+
model: "user__model",
116+
inputName: "input_name",
117+
fieldClasses: ["applied-class", "another-class"],
118+
attributes: {
119+
"data-input": "tooltip"
120+
}
121+
};
122+
let model = {};
123+
let input, wrap;
124+
125+
before(() => {
126+
createField({ schema, model});
127+
input = wrapper.find('input');
128+
});
129+
130+
it("input should have data-* attribute", () => {
131+
expect(input.attributes()["data-input"]).to.be.equal("tooltip");
132+
});
133+
});
134+
});
79135
});

‎test/unit/specs/fields/fieldChecklist.spec.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -616,4 +616,111 @@ describe("fieldChecklist.vue", () => {
616616
});
617617
});
618618
});
619+
620+
describe("check dynamic html attributes", () => {
621+
622+
describe("check listbox input/wrapper attributes", () => {
623+
let schema = {
624+
type: "checklist",
625+
listBox: true,
626+
label: "First Name",
627+
model: "user__model",
628+
inputName: "input_name",
629+
fieldClasses: ["applied-class", "another-class"],
630+
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
631+
attributes: {
632+
wrapper: {
633+
"data-wrapper": "collapse"
634+
},
635+
input: {
636+
"data-input": "tooltip"
637+
}
638+
}
639+
};
640+
let model = {};
641+
let input, wrap;
642+
643+
before(() => {
644+
createField2({ schema, model});
645+
input = wrapper.find('input');
646+
wrap = wrapper.find('.wrapper');
647+
});
648+
649+
it("wrapper should have data-* attribute", () => {
650+
expect(wrap.attributes()["data-wrapper"]).to.be.equal("collapse");
651+
});
652+
653+
it("input should have data-* attribute", () => {
654+
expect(input.attributes()["data-input"]).to.be.equal("tooltip");
655+
});
656+
});
657+
658+
describe("check combobox input/wrapper attributes", () => {
659+
let schema = {
660+
type: "checklist",
661+
listBox: false,
662+
label: "First Name",
663+
model: "user__model",
664+
inputName: "input_name",
665+
fieldClasses: ["applied-class", "another-class"],
666+
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
667+
attributes: {
668+
wrapper: {
669+
"data-wrapper": "collapse"
670+
},
671+
input: {
672+
"data-input": "tooltip"
673+
}
674+
}
675+
};
676+
let model = {};
677+
let input, wrap;
678+
679+
before(() => {
680+
createField2({ schema, model});
681+
input = wrapper.find('input');
682+
wrap = wrapper.find('.wrapper');
683+
});
684+
685+
it("wrapper should have data-* attribute", () => {
686+
expect(wrap.attributes()["data-wrapper"]).to.be.equal("collapse");
687+
});
688+
689+
it.skip("input should have data-* attribute", (done) => {
690+
// TODO: figure out how to get this test to work
691+
wrapper.setData({ comboExpanded: true });
692+
Vue.config.errorHandler = done;
693+
Vue.nextTick(() => {
694+
expect(input.attributes()["data-input"]).to.be.equal("tooltip");
695+
done();
696+
});
697+
});
698+
});
699+
700+
describe("check non-specific attributes", () => {
701+
let schema = {
702+
type: "checklist",
703+
listBox: true,
704+
label: "First Name",
705+
model: "user__model",
706+
inputName: "input_name",
707+
fieldClasses: ["applied-class", "another-class"],
708+
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
709+
attributes: {
710+
"data-input": "tooltip"
711+
}
712+
};
713+
let model = {};
714+
let input, wrap;
715+
716+
before(() => {
717+
createField2({ schema, model});
718+
input = wrapper.find('input');
719+
});
720+
721+
it("input should have data-* attribute", () => {
722+
expect(input.attributes()["data-input"]).to.be.equal("tooltip");
723+
});
724+
});
725+
});
619726
});

‎test/unit/specs/fields/fieldInput.spec.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,69 @@ describe("fieldInput.vue", () => {
116116
expect(input.classes()).to.include("another-class");
117117
});
118118
});
119+
120+
121+
describe("check dynamic html attributes", () => {
122+
123+
describe("check input/wrapper attributes", () => {
124+
let schema = {
125+
type: "input",
126+
inputType: "text",
127+
label: "First Name",
128+
model: "user__model",
129+
inputName: "input_name",
130+
fieldClasses: ["applied-class", "another-class"],
131+
attributes: {
132+
wrapper: {
133+
"data-toggle": "collapse"
134+
},
135+
input: {
136+
"data-toggle": "tooltip"
137+
}
138+
}
139+
};
140+
let model = {};
141+
let input, wrap;
142+
143+
before(() => {
144+
createField2({ schema, model});
145+
input = wrapper.find('input');
146+
wrap = wrapper.find('.wrapper');
147+
});
148+
149+
it("wrapper should have data-toggle attribute", () => {
150+
expect(wrap.attributes()["data-toggle"]).to.be.equal("collapse");
151+
});
152+
153+
it("input should have data-toggle attribute", () => {
154+
expect(input.attributes()["data-toggle"]).to.be.equal("tooltip");
155+
});
156+
});
157+
158+
describe("check non-specific attributes", () => {
159+
let schema = {
160+
type: "input",
161+
inputType: "text",
162+
label: "First Name",
163+
model: "user__model",
164+
inputName: "input_name",
165+
fieldClasses: ["applied-class", "another-class"],
166+
attributes: {
167+
"data-toggle": "tooltip"
168+
}
169+
};
170+
let model = {};
171+
let input, wrap;
172+
173+
before(() => {
174+
createField2({ schema, model});
175+
input = wrapper.find('input');
176+
wrap = wrapper.find('.wrapper');
177+
});
178+
179+
it("input should have data-toggle attribute", () => {
180+
expect(input.attributes()["data-toggle"]).to.be.equal("tooltip");
181+
});
182+
});
183+
});
119184
});

0 commit comments

Comments
 (0)