Skip to content

Commit 8a94e81

Browse files
author
Lionel Bijaoui
committed
Update unit test for radios 
1 parent 3facc08 commit 8a94e81

File tree

1 file changed

+127
-34
lines changed

1 file changed

+127
-34
lines changed

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

+127-34
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ describe("FieldRadios.vue", function() {
3232
let model = { skills: "Javascript" };
3333
let radioList;
3434
let radios;
35+
let labelList;
3536

3637
function isChecked(idx) {
3738
return(radios[idx].checked);
@@ -41,6 +42,7 @@ describe("FieldRadios.vue", function() {
4142
createField(this, schema, model, false);
4243
radioList = el.querySelector(".radio-list");
4344
radios = radioList.querySelectorAll("input[type=radio]");
45+
labelList = radioList.querySelectorAll("label");
4446
});
4547

4648
it("should contain a checkbox element", () => {
@@ -64,31 +66,77 @@ describe("FieldRadios.vue", function() {
6466
expect(isChecked(6)).to.be.false;
6567
});
6668

67-
it("radioList value should be the model value after changed", (done) => {
68-
model.skills = "ReactJS";
69-
vm.$nextTick( () => {
70-
expect(isChecked(0)).to.be.false;
71-
expect(isChecked(1)).to.be.false;
72-
expect(isChecked(2)).to.be.false;
73-
expect(isChecked(3)).to.be.false;
74-
expect(isChecked(4)).to.be.false;
75-
expect(isChecked(5)).to.be.true;
76-
expect(isChecked(6)).to.be.false;
77-
done();
69+
it("label with checked input should have a 'is-checked' class", () =>{
70+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
71+
expect(labelList[1].classList.contains("is-checked")).to.be.true;
72+
expect(labelList[2].classList.contains("is-checked")).to.be.false;
73+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
74+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
75+
expect(labelList[5].classList.contains("is-checked")).to.be.false;
76+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
77+
});
78+
79+
80+
describe("test values reactivity to changes", () => {
81+
82+
it("radioList value should be the model value after changed", (done) => {
83+
model.skills = "ReactJS";
84+
vm.$nextTick( () => {
85+
expect(isChecked(0)).to.be.false;
86+
expect(isChecked(1)).to.be.false;
87+
expect(isChecked(2)).to.be.false;
88+
expect(isChecked(3)).to.be.false;
89+
expect(isChecked(4)).to.be.false;
90+
expect(isChecked(5)).to.be.true;
91+
expect(isChecked(6)).to.be.false;
92+
done();
93+
});
7894
});
7995

80-
});
96+
it("model value should be the radioList value if changed", (done) => {
97+
radios[0].click();
8198

82-
it("model value should be the radioList value if changed", (done) => {
83-
radios[0].click();
99+
vm.$nextTick( () => {
100+
expect(model.skills).to.be.equal("HTML5");
101+
done();
102+
});
103+
});
104+
});
84105

85-
vm.$nextTick( () => {
86-
expect(model.skills).to.be.equal("HTML5");
87-
done();
106+
describe("test 'is-checked' class attribution reactivity to changes", () => {
107+
108+
it("label with checked input should have a 'is-checked' class after model value is changed", (done) =>{
109+
model.skills = "ReactJS";
110+
vm.$nextTick( () => {
111+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
112+
expect(labelList[1].classList.contains("is-checked")).to.be.false;
113+
expect(labelList[2].classList.contains("is-checked")).to.be.false;
114+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
115+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
116+
expect(labelList[5].classList.contains("is-checked")).to.be.true;
117+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
118+
done();
119+
});
88120
});
89121

122+
it("label with checked input should have a 'is-checked' class after radioList value is changed", (done) =>{
123+
radios[2].click();
124+
125+
vm.$nextTick( () => {
126+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
127+
expect(labelList[1].classList.contains("is-checked")).to.be.false;
128+
expect(labelList[2].classList.contains("is-checked")).to.be.true;
129+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
130+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
131+
expect(labelList[5].classList.contains("is-checked")).to.be.false;
132+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
133+
done();
134+
});
135+
});
90136
});
91137

138+
139+
92140
});
93141

94142
describe("check template with object array", () => {
@@ -113,6 +161,7 @@ describe("FieldRadios.vue", function() {
113161
let model = { skills: "CSS3-123" };
114162
let radioList;
115163
let radios;
164+
let labelList;
116165

117166
function isChecked(idx) {
118167
return(radios[idx].checked);
@@ -122,6 +171,7 @@ describe("FieldRadios.vue", function() {
122171
createField(this, schema, model, false);
123172
radioList = el.querySelector(".radio-list");
124173
radios = radioList.querySelectorAll("input[type=radio]");
174+
labelList = radioList.querySelectorAll("label");
125175
});
126176

127177
it("should contain a checkbox element", () => {
@@ -145,28 +195,71 @@ describe("FieldRadios.vue", function() {
145195
expect(isChecked(6)).to.be.false;
146196
});
147197

148-
it("radioList value should be the model value after changed", (done) => {
149-
model.skills = "ReactJS-123";
150-
vm.$nextTick( () => {
151-
expect(isChecked(0)).to.be.false;
152-
expect(isChecked(1)).to.be.false;
153-
expect(isChecked(2)).to.be.false;
154-
expect(isChecked(3)).to.be.false;
155-
expect(isChecked(4)).to.be.false;
156-
expect(isChecked(5)).to.be.true;
157-
expect(isChecked(6)).to.be.false;
158-
done();
159-
});
198+
it("label with checked input should have a 'is-checked' class", () =>{
199+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
200+
expect(labelList[1].classList.contains("is-checked")).to.be.false;
201+
expect(labelList[2].classList.contains("is-checked")).to.be.true;
202+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
203+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
204+
expect(labelList[5].classList.contains("is-checked")).to.be.false;
205+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
160206
});
207+
describe("test values reactivity to changes", () => {
208+
209+
it("radioList value should be the model value after changed", (done) => {
210+
model.skills = "ReactJS-123";
211+
vm.$nextTick( () => {
212+
expect(isChecked(0)).to.be.false;
213+
expect(isChecked(1)).to.be.false;
214+
expect(isChecked(2)).to.be.false;
215+
expect(isChecked(3)).to.be.false;
216+
expect(isChecked(4)).to.be.false;
217+
expect(isChecked(5)).to.be.true;
218+
expect(isChecked(6)).to.be.false;
219+
done();
220+
});
221+
});
222+
223+
it("model value should be the radioList value if changed", (done) => {
224+
radios[0].click();
161225

162-
it("model value should be the radioList value if changed", (done) => {
163-
radios[0].click();
226+
vm.$nextTick( () => {
227+
expect(model.skills).to.be.equal("HTML5-123");
228+
done();
229+
});
230+
});
231+
});
232+
233+
describe("test 'is-checked' class attribution reactivity to changes", () => {
164234

165-
vm.$nextTick( () => {
166-
expect(model.skills).to.be.equal("HTML5-123");
167-
done();
235+
it("label with checked input should have a 'is-checked' class after model value is changed", (done) =>{
236+
model.skills = "ReactJS-123";
237+
vm.$nextTick( () => {
238+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
239+
expect(labelList[1].classList.contains("is-checked")).to.be.false;
240+
expect(labelList[2].classList.contains("is-checked")).to.be.false;
241+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
242+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
243+
expect(labelList[5].classList.contains("is-checked")).to.be.true;
244+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
245+
done();
246+
});
168247
});
169248

249+
it("label with checked input should have a 'is-checked' class after radioList value is changed", (done) =>{
250+
radios[2].click();
251+
252+
vm.$nextTick( () => {
253+
expect(labelList[0].classList.contains("is-checked")).to.be.false;
254+
expect(labelList[1].classList.contains("is-checked")).to.be.false;
255+
expect(labelList[2].classList.contains("is-checked")).to.be.true;
256+
expect(labelList[3].classList.contains("is-checked")).to.be.false;
257+
expect(labelList[4].classList.contains("is-checked")).to.be.false;
258+
expect(labelList[5].classList.contains("is-checked")).to.be.false;
259+
expect(labelList[6].classList.contains("is-checked")).to.be.false;
260+
done();
261+
});
262+
});
170263
});
171264

172265
});

0 commit comments

Comments
 (0)