Skip to content

Commit c1c57be

Browse files
icebobicebob
committed
✅ test: More fields test cases
1 parent b6f9f57 commit c1c57be

File tree

4 files changed

+403
-0
lines changed

4 files changed

+403
-0
lines changed

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

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { expect } from "chai";
2+
import { createVueField, trigger } from "../util";
3+
4+
import Vue from "vue";
5+
import FieldImage from "src/fields/fieldImage.vue";
6+
7+
Vue.component("FieldImage", FieldImage);
8+
9+
let el, vm, field;
10+
11+
function createField(schema = {}, model = null, disabled = false, options) {
12+
[ el, vm, field ] = createVueField("fieldImage", schema, model, disabled, options);
13+
}
14+
15+
describe("fieldImage.vue", () => {
16+
17+
describe("check template without preview", () => {
18+
let schema = {
19+
type: "image",
20+
label: "Avatar",
21+
model: "avatar",
22+
readonly: false,
23+
placeholder: "Field placeholder"
24+
};
25+
let model = { avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" };
26+
let input;
27+
28+
before( () => {
29+
createField(schema, model, false);
30+
input = el.querySelector("input[type=text]");
31+
});
32+
33+
it("should contain an input text element", () => {
34+
expect(field).to.be.exist;
35+
expect(field.$el).to.be.exist;
36+
37+
expect(input).to.be.defined;
38+
expect(input.classList.contains("form-control")).to.be.true;
39+
expect(input.classList.contains("link")).to.be.true;
40+
expect(input.placeholder).to.be.equal(schema.placeholder);
41+
expect(input.readOnly).to.be.false;
42+
expect(input.disabled).to.be.false;
43+
});
44+
45+
it("should contain a file input element", () => {
46+
let fileInput = el.querySelector("input[type=file]");
47+
expect(fileInput).to.be.defined;
48+
expect(fileInput.classList.contains("form-control")).to.be.true;
49+
expect(fileInput.classList.contains("file")).to.be.true;
50+
expect(fileInput.readOnly).to.be.false;
51+
expect(fileInput.disabled).to.be.false;
52+
});
53+
54+
it("should not visible the preview div", () => {
55+
let preview = el.querySelector(".preview");
56+
expect(preview.style.display).to.be.equal("block");
57+
});
58+
59+
60+
it("should contain the value", (done) => {
61+
vm.$nextTick( () => {
62+
expect(input.value).to.be.equal(model.avatar);
63+
done();
64+
});
65+
});
66+
67+
it("should set readOnly", (done) => {
68+
schema.readonly = true;
69+
vm.$nextTick( () => {
70+
expect(input.readOnly).to.be.true;
71+
done();
72+
});
73+
});
74+
75+
it("should set disabled", (done) => {
76+
field.disabled = true;
77+
vm.$nextTick( () => {
78+
expect(input.disabled).to.be.true;
79+
done();
80+
});
81+
});
82+
83+
it("input value should be the model value after changed", (done) => {
84+
model.avatar = "https://s3.amazonaws.com/uifaces/faces/twitter/felipebsb/128.jpg";
85+
vm.$nextTick( () => {
86+
expect(input.value).to.be.equal("https://s3.amazonaws.com/uifaces/faces/twitter/felipebsb/128.jpg");
87+
done();
88+
});
89+
90+
});
91+
92+
it("model value should be the input value if changed", (done) => {
93+
input.value = "https://s3.amazonaws.com/uifaces/faces/twitter/peterme/128.jpg";
94+
trigger(input, "change");
95+
96+
vm.$nextTick( () => {
97+
expect(model.avatar).to.be.equal("https://s3.amazonaws.com/uifaces/faces/twitter/peterme/128.jpg");
98+
done();
99+
});
100+
101+
});
102+
103+
it("should not contain a file input element if browse is false", (done) => {
104+
vm.$set("schema.browse", false);
105+
106+
vm.$nextTick( () => {
107+
let fileInput = el.querySelector("input[type=file]");
108+
expect(fileInput).to.be.null;
109+
done();
110+
});
111+
});
112+
113+
it("should not visible the preview div", (done) => {
114+
vm.$set("schema.preview", false);
115+
116+
vm.$nextTick( () => {
117+
let preview = el.querySelector(".preview");
118+
expect(preview.style.display).to.be.equal("none");
119+
done();
120+
});
121+
});
122+
123+
it("should not show base64 data in input field", (done) => {
124+
model.avatar = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ";
125+
126+
vm.$nextTick( () => {
127+
expect(input.value).to.be.equal("<inline base64 image>");
128+
done();
129+
});
130+
});
131+
132+
it("should clear input if press remove icon", (done) => {
133+
vm.$set("schema.preview", true);
134+
vm.$nextTick( () => {
135+
let remove = el.querySelector(".remove");
136+
expect(input.value).to.be.not.equal("");
137+
remove.click();
138+
139+
vm.$nextTick( () => {
140+
expect(input.value).to.be.equal("");
141+
done();
142+
});
143+
});
144+
});
145+
146+
});
147+
148+
});

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

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { expect } from "chai";
2+
import { createVueField, trigger } from "../util";
3+
4+
import Vue from "vue";
5+
import FieldMasked from "src/fields/fieldMasked.vue";
6+
7+
Vue.component("FieldMasked", FieldMasked);
8+
9+
let el, vm, field;
10+
11+
function createField(schema = {}, model = null, disabled = false, options) {
12+
[ el, vm, field ] = createVueField("fieldMasked", schema, model, disabled, options);
13+
}
14+
15+
describe("fieldMasked.vue", () => {
16+
17+
describe("check template", () => {
18+
let schema = {
19+
type: "masked",
20+
label: "Phone",
21+
model: "phone",
22+
mask: "(99) 999-9999",
23+
readonly: false,
24+
placeholder: "Field placeholder"
25+
};
26+
let model = { phone: "(30) 123-4567" };
27+
let input;
28+
29+
before( () => {
30+
createField(schema, model, false);
31+
input = el.getElementsByTagName("input")[0];
32+
});
33+
34+
it("should contain an masked input element", () => {
35+
expect(field).to.be.exist;
36+
expect(field.$el).to.be.exist;
37+
38+
expect(input).to.be.defined;
39+
expect(input.type).to.be.equal("text");
40+
expect(input.classList.contains("form-control")).to.be.true;
41+
expect(input.placeholder).to.be.equal(schema.placeholder);
42+
expect(input.readOnly).to.be.false;
43+
expect(input.disabled).to.be.false;
44+
});
45+
46+
it("should contain the value", (done) => {
47+
vm.$nextTick( () => {
48+
expect(input.value).to.be.equal("(30) 123-4567");
49+
done();
50+
});
51+
});
52+
53+
it("should set readOnly", (done) => {
54+
schema.readonly = true;
55+
vm.$nextTick( () => {
56+
expect(input.readOnly).to.be.true;
57+
done();
58+
});
59+
});
60+
61+
it("should set disabled", (done) => {
62+
field.disabled = true;
63+
vm.$nextTick( () => {
64+
expect(input.disabled).to.be.true;
65+
done();
66+
});
67+
});
68+
69+
it("input value should be the model value after changed", (done) => {
70+
model.phone = "(70) 555- 4433";
71+
vm.$nextTick( () => {
72+
expect(input.value).to.be.equal("(70) 555- 4433");
73+
done();
74+
});
75+
76+
});
77+
78+
it("model value should be the input value if changed", (done) => {
79+
input.value = "(21) 888-6655";
80+
trigger(input, "input");
81+
82+
vm.$nextTick( () => {
83+
expect(model.phone).to.be.equal("(21) 888-6655");
84+
done();
85+
});
86+
87+
});
88+
89+
});
90+
91+
});

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

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { expect } from "chai";
2+
import { createVueField, trigger } from "../util";
3+
4+
import Vue from "vue";
5+
import FieldSlider from "src/fields/fieldSlider.vue";
6+
7+
Vue.component("FieldSlider", FieldSlider);
8+
9+
let el, vm, field;
10+
11+
function createField(schema = {}, model = null, disabled = false, options) {
12+
[ el, vm, field ] = createVueField("fieldSlider", schema, model, disabled, options);
13+
}
14+
15+
describe("fieldSlider.vue", () => {
16+
17+
describe("check template", () => {
18+
let schema = {
19+
type: "range",
20+
label: "Rating",
21+
model: "rating",
22+
min: 1,
23+
max: 10,
24+
placeholder: "Field placeholder"
25+
};
26+
let model = { rating: 8 };
27+
let input;
28+
29+
before( () => {
30+
createField(schema, model, false);
31+
input = el.getElementsByTagName("input")[0];
32+
//console.log(input);
33+
});
34+
35+
it("should contain an input text element", () => {
36+
expect(field).to.be.exist;
37+
expect(field.$el).to.be.exist;
38+
39+
expect(input).to.be.defined;
40+
expect(input.type).to.be.equal("text");
41+
expect(input.classList.contains("form-control")).to.be.true;
42+
expect(input.placeholder).to.be.equal(schema.placeholder);
43+
expect(input.getAttribute("data-slider-min")).to.be.equal("1");
44+
expect(input.getAttribute("data-slider-max")).to.be.equal("10");
45+
expect(input.disabled).to.be.false;
46+
});
47+
48+
it("should contain the value", (done) => {
49+
vm.$nextTick( () => {
50+
expect(input.getAttribute("data-slider-value")).to.be.equal("8");
51+
expect(input.value).to.be.equal("8");
52+
done();
53+
});
54+
});
55+
56+
it("should set disabled", (done) => {
57+
field.disabled = true;
58+
vm.$nextTick( () => {
59+
expect(input.disabled).to.be.true;
60+
done();
61+
});
62+
});
63+
64+
it("input value should be the model value after changed", (done) => {
65+
model.rating = 3;
66+
vm.$nextTick( () => {
67+
expect(input.value).to.be.equal("3");
68+
done();
69+
});
70+
71+
});
72+
73+
it("model value should be the input value if changed", (done) => {
74+
input.value = "6";
75+
trigger(input, "input");
76+
77+
vm.$nextTick( () => {
78+
expect(model.rating).to.be.equal(6);
79+
done();
80+
});
81+
82+
});
83+
84+
});
85+
86+
});

0 commit comments

Comments
 (0)