Skip to content

Commit 1f6150f

Browse files
author
Lionel Bijaoui
committed
Update the unit test to reflect the changes and test for the new behavior. Fix lint error.
1 parent be09146 commit 1f6150f

File tree

4 files changed

+271
-22
lines changed

4 files changed

+271
-22
lines changed

‎src/fields/core/fieldChecklist.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
return item[this.schema.checklistOptions.value];
5656
} else {
5757
if (typeof item["value"] !== "undefined") {
58-
return item.value
58+
return item.value;
5959
} else {
6060
throw "value is not defined. If you want to use another key name, add a `value` property under `checklistOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/checklist.html#checklist-field-with-object-values";
6161
}
@@ -70,7 +70,7 @@
7070
return item[this.schema.checklistOptions.name];
7171
} else {
7272
if (typeof item["name"] !== "undefined") {
73-
return item.name
73+
return item.name;
7474
} else {
7575
throw "name is not defined. If you want to use another key name, add a `name` property under `checklistOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/checklist.html#checklist-field-with-object-values";
7676
}

‎src/fields/core/fieldRadios.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
return item[this.schema.radiosOptions.value];
3535
} else {
3636
if (typeof item["value"] !== "undefined") {
37-
return item.value
37+
return item.value;
3838
} else {
3939
throw "value is not defined. If you want to use another key name, add a `value` property under `radiosOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/radios.html#radios-field-with-object-values";
4040
}
@@ -49,7 +49,7 @@
4949
return item[this.schema.radiosOptions.name];
5050
} else {
5151
if (typeof item["name"] !== "undefined") {
52-
return item.name
52+
return item.name;
5353
} else {
5454
throw "name is not defined. If you want to use another key name, add a `name` property under `radiosOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/radios.html#radios-field-with-object-values";
5555
}

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

+143-15
Original file line numberDiff line numberDiff line change
@@ -141,20 +141,20 @@ describe("fieldChecklist.vue", function() {
141141

142142
});
143143

144-
describe("check static values with { id, name } objects", () => {
144+
describe("check static values with { value, name } objects (default key name)", () => {
145145
let schema = {
146146
type: "checklist",
147147
label: "Skills",
148148
model: "skills",
149149
listBox: true,
150150
values: [
151-
{ id: 1, name: "HTML5" },
152-
{ id: 2, name: "Javascript" },
153-
{ id: 3, name: "CSS3" },
154-
{ id: 4, name: "CoffeeScript" },
155-
{ id: 5, name: "AngularJS" },
156-
{ id: 6, name: "ReactJS" },
157-
{ id: 7, name: "VueJS" }
151+
{ value: 1, name: "HTML5" },
152+
{ value: 2, name: "Javascript" },
153+
{ value: 3, name: "CSS3" },
154+
{ value: 4, name: "CoffeeScript" },
155+
{ value: 5, name: "AngularJS" },
156+
{ value: 6, name: "ReactJS" },
157+
{ value: 7, name: "VueJS" }
158158
]
159159
};
160160
let model = { skills: [2, 7] };
@@ -265,6 +265,134 @@ describe("fieldChecklist.vue", function() {
265265

266266
});
267267

268+
describe("check static values with { id, label } objects (custom key name with `checklistOptions`)", () => {
269+
let schema = {
270+
type: "checklist",
271+
label: "Skills",
272+
model: "skills",
273+
listBox: true,
274+
values: [
275+
{ id: 1, label: "HTML5" },
276+
{ id: 2, label: "Javascript" },
277+
{ id: 3, label: "CSS3" },
278+
{ id: 4, label: "CoffeeScript" },
279+
{ id: 5, label: "AngularJS" },
280+
{ id: 6, label: "ReactJS" },
281+
{ id: 7, label: "VueJS" }
282+
],
283+
checklistOptions: {
284+
value: "id",
285+
name: "label"
286+
}
287+
};
288+
let model = { skills: [2, 7] };
289+
let listbox;
290+
let checkboxes;
291+
let listRowList;
292+
293+
function isChecked(idx) {
294+
return(checkboxes[idx].checked);
295+
}
296+
297+
before( () => {
298+
createField(this, schema, model, false);
299+
listbox = el.querySelector(".listbox");
300+
checkboxes = listbox.querySelectorAll("input[type=checkbox]");
301+
listRowList = listbox.querySelectorAll(".list-row");
302+
});
303+
304+
it("should contain items", () => {
305+
expect(checkboxes.length).to.be.equal(7);
306+
});
307+
308+
it("should checked the values", () => {
309+
expect(isChecked(0)).to.be.false;
310+
expect(isChecked(1)).to.be.true;
311+
expect(isChecked(2)).to.be.false;
312+
expect(isChecked(3)).to.be.false;
313+
expect(isChecked(4)).to.be.false;
314+
expect(isChecked(5)).to.be.false;
315+
expect(isChecked(6)).to.be.true;
316+
});
317+
318+
describe("test values reactivity to changes", () => {
319+
320+
it("listbox value should be the model value after changed", (done) => {
321+
model.skills = [3];
322+
vm.$nextTick( () => {
323+
expect(isChecked(0)).to.be.false;
324+
expect(isChecked(1)).to.be.false;
325+
expect(isChecked(2)).to.be.true;
326+
expect(isChecked(3)).to.be.false;
327+
expect(isChecked(4)).to.be.false;
328+
expect(isChecked(5)).to.be.false;
329+
expect(isChecked(6)).to.be.false;
330+
done();
331+
});
332+
333+
});
334+
335+
it("model value should be the listbox value if changed", (done) => {
336+
checkboxes[0].checked = true;
337+
trigger(checkboxes[0], "input");
338+
339+
vm.$nextTick( () => {
340+
expect(model.skills).to.be.deep.equal([3, 1]);
341+
done();
342+
});
343+
344+
});
345+
346+
});
347+
348+
describe("test 'is-checked' class attribution reactivity to changes", () => {
349+
350+
it(".list-row with checked input should have a 'is-checked' class", () => {
351+
expect(listRowList[0].classList.contains("is-checked")).to.be.true;
352+
expect(listRowList[1].classList.contains("is-checked")).to.be.false;
353+
expect(listRowList[2].classList.contains("is-checked")).to.be.true;
354+
expect(listRowList[3].classList.contains("is-checked")).to.be.false;
355+
expect(listRowList[4].classList.contains("is-checked")).to.be.false;
356+
expect(listRowList[5].classList.contains("is-checked")).to.be.false;
357+
expect(listRowList[6].classList.contains("is-checked")).to.be.false;
358+
});
359+
360+
it(".list-row with checked input should have a 'is-checked' class after model value is changed", (done) => {
361+
model.skills = [4];
362+
vm.$nextTick( () => {
363+
expect(listRowList[0].classList.contains("is-checked")).to.be.false;
364+
expect(listRowList[1].classList.contains("is-checked")).to.be.false;
365+
expect(listRowList[2].classList.contains("is-checked")).to.be.false;
366+
expect(listRowList[3].classList.contains("is-checked")).to.be.true;
367+
expect(listRowList[4].classList.contains("is-checked")).to.be.false;
368+
expect(listRowList[5].classList.contains("is-checked")).to.be.false;
369+
expect(listRowList[6].classList.contains("is-checked")).to.be.false;
370+
done();
371+
});
372+
373+
});
374+
375+
it(".list-row with checked input should have a 'is-checked' class after listbox value is changed", (done) => {
376+
checkboxes[0].checked = true;
377+
trigger(checkboxes[0], "input");
378+
379+
vm.$nextTick( () => {
380+
expect(listRowList[0].classList.contains("is-checked")).to.be.true;
381+
expect(listRowList[1].classList.contains("is-checked")).to.be.false;
382+
expect(listRowList[2].classList.contains("is-checked")).to.be.false;
383+
expect(listRowList[3].classList.contains("is-checked")).to.be.true;
384+
expect(listRowList[4].classList.contains("is-checked")).to.be.false;
385+
expect(listRowList[5].classList.contains("is-checked")).to.be.false;
386+
expect(listRowList[6].classList.contains("is-checked")).to.be.false;
387+
done();
388+
});
389+
390+
});
391+
392+
});
393+
394+
});
395+
268396
describe("check function values", () => {
269397
let schema = {
270398
type: "checklist",
@@ -273,13 +401,13 @@ describe("fieldChecklist.vue", function() {
273401
listBox: true,
274402
values() {
275403
return [
276-
{ id: 1, name: "HTML5" },
277-
{ id: 2, name: "Javascript" },
278-
{ id: 3, name: "CSS3" },
279-
{ id: 4, name: "CoffeeScript" },
280-
{ id: 5, name: "AngularJS" },
281-
{ id: 6, name: "ReactJS" },
282-
{ id: 7, name: "VueJS" }
404+
{ value: 1, name: "HTML5" },
405+
{ value: 2, name: "Javascript" },
406+
{ value: 3, name: "CSS3" },
407+
{ value: 4, name: "CoffeeScript" },
408+
{ value: 5, name: "AngularJS" },
409+
{ value: 6, name: "ReactJS" },
410+
{ value: 7, name: "VueJS" }
283411
];
284412
}
285413
};

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

+124-3
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ describe("FieldRadios.vue", function() {
139139

140140
});
141141

142-
describe("check template with object array", () => {
142+
describe("check static values with { value, name } objects (default key name)", () => {
143143
let schema = {
144144
type: "radios",
145145
label: "radios",
@@ -152,10 +152,131 @@ describe("FieldRadios.vue", function() {
152152
{name: "AngularJS", value:"AngularJS-123"},
153153
{name: "ReactJS", value:"ReactJS-123"},
154154
{name: "VueJS", value:"VueJS-123"}
155+
]
156+
};
157+
let model = { skills: "CSS3-123" };
158+
let radioList;
159+
let radios;
160+
let labelList;
161+
162+
function isChecked(idx) {
163+
return(radios[idx].checked);
164+
}
165+
166+
before( () => {
167+
createField(this, schema, model, false);
168+
radioList = el.querySelector(".radio-list");
169+
radios = radioList.querySelectorAll("input[type=radio]");
170+
labelList = radioList.querySelectorAll("label");
171+
});
172+
173+
it("should contain a checkbox element", () => {
174+
expect(field).to.be.exist;
175+
expect(field.$el).to.be.exist;
176+
177+
expect(radioList).to.be.defined;
178+
});
179+
180+
it("should contain 7 items", () => {
181+
expect(radios.length).to.be.equal(7);
182+
});
183+
184+
it("should checked the values", () => {
185+
expect(isChecked(0)).to.be.false;
186+
expect(isChecked(1)).to.be.false;
187+
expect(isChecked(2)).to.be.true;
188+
expect(isChecked(3)).to.be.false;
189+
expect(isChecked(4)).to.be.false;
190+
expect(isChecked(5)).to.be.false;
191+
expect(isChecked(6)).to.be.false;
192+
});
193+
194+
it("label with checked input should have a 'is-checked' class", () =>{
195+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
196+
expect(labelList[1].classList.contains("is-checked")).to.be.false;
197+
expect(labelList[2].classList.contains("is-checked")).to.be.true;
198+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
199+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
200+
expect(labelList[5].classList.contains("is-checked")).to.be.false;
201+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
202+
});
203+
describe("test values reactivity to changes", () => {
204+
205+
it("radioList value should be the model value after changed", (done) => {
206+
model.skills = "ReactJS-123";
207+
vm.$nextTick( () => {
208+
expect(isChecked(0)).to.be.false;
209+
expect(isChecked(1)).to.be.false;
210+
expect(isChecked(2)).to.be.false;
211+
expect(isChecked(3)).to.be.false;
212+
expect(isChecked(4)).to.be.false;
213+
expect(isChecked(5)).to.be.true;
214+
expect(isChecked(6)).to.be.false;
215+
done();
216+
});
217+
});
218+
219+
it("model value should be the radioList value if changed", (done) => {
220+
radios[0].click();
221+
222+
vm.$nextTick( () => {
223+
expect(model.skills).to.be.equal("HTML5-123");
224+
done();
225+
});
226+
});
227+
});
228+
229+
describe("test 'is-checked' class attribution reactivity to changes", () => {
230+
231+
it("label with checked input should have a 'is-checked' class after model value is changed", (done) =>{
232+
model.skills = "ReactJS-123";
233+
vm.$nextTick( () => {
234+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
235+
expect(labelList[1].classList.contains("is-checked")).to.be.false;
236+
expect(labelList[2].classList.contains("is-checked")).to.be.false;
237+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
238+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
239+
expect(labelList[5].classList.contains("is-checked")).to.be.true;
240+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
241+
done();
242+
});
243+
});
244+
245+
it("label with checked input should have a 'is-checked' class after radioList value is changed", (done) =>{
246+
radios[2].click();
247+
248+
vm.$nextTick( () => {
249+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
250+
expect(labelList[1].classList.contains("is-checked")).to.be.false;
251+
expect(labelList[2].classList.contains("is-checked")).to.be.true;
252+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
253+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
254+
expect(labelList[5].classList.contains("is-checked")).to.be.false;
255+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
256+
done();
257+
});
258+
});
259+
});
260+
261+
});
262+
263+
describe("check static values with { id, label } objects (custom key name with `radiosOptions`)", () => {
264+
let schema = {
265+
type: "radios",
266+
label: "radios",
267+
model: "skills",
268+
values: [
269+
{label: "HTML5", id:"HTML5-123"},
270+
{label: "Javascript", id:{id:"Javascript-123", deep:true}},
271+
{label: "CSS3", id:"CSS3-123"},
272+
{label: "CoffeeScript", id:"CoffeeScript-123"},
273+
{label: "AngularJS", id:"AngularJS-123"},
274+
{label: "ReactJS", id:"ReactJS-123"},
275+
{label: "VueJS", id:"VueJS-123"}
155276
],
156277
radiosOptions: {
157-
value:"value",
158-
name:"name"
278+
value: "id",
279+
name: "label"
159280
}
160281
};
161282
let model = { skills: "CSS3-123" };

0 commit comments

Comments
 (0)