From c1c57be46f7848729298b009deff3b8918090dc3 Mon Sep 17 00:00:00 2001 From: Icebob Date: Mon, 9 May 2016 14:49:09 +0200 Subject: [PATCH] :white_check_mark: test: More fields test cases --- test/unit/specs/fields/fieldImage.spec.js | 148 +++++++++++++++++++ test/unit/specs/fields/fieldMasked.spec.js | 91 ++++++++++++ test/unit/specs/fields/fieldSlider.spec.js | 86 +++++++++++ test/unit/specs/fields/fieldSpectrum.spec.js | 78 ++++++++++ 4 files changed, 403 insertions(+) create mode 100644 test/unit/specs/fields/fieldImage.spec.js create mode 100644 test/unit/specs/fields/fieldMasked.spec.js create mode 100644 test/unit/specs/fields/fieldSlider.spec.js create mode 100644 test/unit/specs/fields/fieldSpectrum.spec.js diff --git a/test/unit/specs/fields/fieldImage.spec.js b/test/unit/specs/fields/fieldImage.spec.js new file mode 100644 index 00000000..c9a25bbd --- /dev/null +++ b/test/unit/specs/fields/fieldImage.spec.js @@ -0,0 +1,148 @@ +import { expect } from "chai"; +import { createVueField, trigger } from "../util"; + +import Vue from "vue"; +import FieldImage from "src/fields/fieldImage.vue"; + +Vue.component("FieldImage", FieldImage); + +let el, vm, field; + +function createField(schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField("fieldImage", schema, model, disabled, options); +} + +describe("fieldImage.vue", () => { + + describe("check template without preview", () => { + let schema = { + type: "image", + label: "Avatar", + model: "avatar", + readonly: false, + placeholder: "Field placeholder" + }; + let model = { avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" }; + let input; + + before( () => { + createField(schema, model, false); + input = el.querySelector("input[type=text]"); + }); + + it("should contain an input text element", () => { + expect(field).to.be.exist; + expect(field.$el).to.be.exist; + + expect(input).to.be.defined; + expect(input.classList.contains("form-control")).to.be.true; + expect(input.classList.contains("link")).to.be.true; + expect(input.placeholder).to.be.equal(schema.placeholder); + expect(input.readOnly).to.be.false; + expect(input.disabled).to.be.false; + }); + + it("should contain a file input element", () => { + let fileInput = el.querySelector("input[type=file]"); + expect(fileInput).to.be.defined; + expect(fileInput.classList.contains("form-control")).to.be.true; + expect(fileInput.classList.contains("file")).to.be.true; + expect(fileInput.readOnly).to.be.false; + expect(fileInput.disabled).to.be.false; + }); + + it("should not visible the preview div", () => { + let preview = el.querySelector(".preview"); + expect(preview.style.display).to.be.equal("block"); + }); + + + it("should contain the value", (done) => { + vm.$nextTick( () => { + expect(input.value).to.be.equal(model.avatar); + done(); + }); + }); + + it("should set readOnly", (done) => { + schema.readonly = true; + vm.$nextTick( () => { + expect(input.readOnly).to.be.true; + done(); + }); + }); + + it("should set disabled", (done) => { + field.disabled = true; + vm.$nextTick( () => { + expect(input.disabled).to.be.true; + done(); + }); + }); + + it("input value should be the model value after changed", (done) => { + model.avatar = "https://s3.amazonaws.com/uifaces/faces/twitter/felipebsb/128.jpg"; + vm.$nextTick( () => { + expect(input.value).to.be.equal("https://s3.amazonaws.com/uifaces/faces/twitter/felipebsb/128.jpg"); + done(); + }); + + }); + + it("model value should be the input value if changed", (done) => { + input.value = "https://s3.amazonaws.com/uifaces/faces/twitter/peterme/128.jpg"; + trigger(input, "change"); + + vm.$nextTick( () => { + expect(model.avatar).to.be.equal("https://s3.amazonaws.com/uifaces/faces/twitter/peterme/128.jpg"); + done(); + }); + + }); + + it("should not contain a file input element if browse is false", (done) => { + vm.$set("schema.browse", false); + + vm.$nextTick( () => { + let fileInput = el.querySelector("input[type=file]"); + expect(fileInput).to.be.null; + done(); + }); + }); + + it("should not visible the preview div", (done) => { + vm.$set("schema.preview", false); + + vm.$nextTick( () => { + let preview = el.querySelector(".preview"); + expect(preview.style.display).to.be.equal("none"); + done(); + }); + }); + + it("should not show base64 data in input field", (done) => { + model.avatar = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ"; + + vm.$nextTick( () => { + expect(input.value).to.be.equal(""); + done(); + }); + }); + + it("should clear input if press remove icon", (done) => { + vm.$set("schema.preview", true); + vm.$nextTick( () => { + let remove = el.querySelector(".remove"); + expect(input.value).to.be.not.equal(""); + remove.click(); + + vm.$nextTick( () => { + expect(input.value).to.be.equal(""); + done(); + }); + }); + }); + + }); + +}); diff --git a/test/unit/specs/fields/fieldMasked.spec.js b/test/unit/specs/fields/fieldMasked.spec.js new file mode 100644 index 00000000..f6e015f4 --- /dev/null +++ b/test/unit/specs/fields/fieldMasked.spec.js @@ -0,0 +1,91 @@ +import { expect } from "chai"; +import { createVueField, trigger } from "../util"; + +import Vue from "vue"; +import FieldMasked from "src/fields/fieldMasked.vue"; + +Vue.component("FieldMasked", FieldMasked); + +let el, vm, field; + +function createField(schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField("fieldMasked", schema, model, disabled, options); +} + +describe("fieldMasked.vue", () => { + + describe("check template", () => { + let schema = { + type: "masked", + label: "Phone", + model: "phone", + mask: "(99) 999-9999", + readonly: false, + placeholder: "Field placeholder" + }; + let model = { phone: "(30) 123-4567" }; + let input; + + before( () => { + createField(schema, model, false); + input = el.getElementsByTagName("input")[0]; + }); + + it("should contain an masked input element", () => { + expect(field).to.be.exist; + expect(field.$el).to.be.exist; + + expect(input).to.be.defined; + expect(input.type).to.be.equal("text"); + expect(input.classList.contains("form-control")).to.be.true; + expect(input.placeholder).to.be.equal(schema.placeholder); + expect(input.readOnly).to.be.false; + expect(input.disabled).to.be.false; + }); + + it("should contain the value", (done) => { + vm.$nextTick( () => { + expect(input.value).to.be.equal("(30) 123-4567"); + done(); + }); + }); + + it("should set readOnly", (done) => { + schema.readonly = true; + vm.$nextTick( () => { + expect(input.readOnly).to.be.true; + done(); + }); + }); + + it("should set disabled", (done) => { + field.disabled = true; + vm.$nextTick( () => { + expect(input.disabled).to.be.true; + done(); + }); + }); + + it("input value should be the model value after changed", (done) => { + model.phone = "(70) 555- 4433"; + vm.$nextTick( () => { + expect(input.value).to.be.equal("(70) 555- 4433"); + done(); + }); + + }); + + it("model value should be the input value if changed", (done) => { + input.value = "(21) 888-6655"; + trigger(input, "input"); + + vm.$nextTick( () => { + expect(model.phone).to.be.equal("(21) 888-6655"); + done(); + }); + + }); + + }); + +}); \ No newline at end of file diff --git a/test/unit/specs/fields/fieldSlider.spec.js b/test/unit/specs/fields/fieldSlider.spec.js new file mode 100644 index 00000000..46a9f672 --- /dev/null +++ b/test/unit/specs/fields/fieldSlider.spec.js @@ -0,0 +1,86 @@ +import { expect } from "chai"; +import { createVueField, trigger } from "../util"; + +import Vue from "vue"; +import FieldSlider from "src/fields/fieldSlider.vue"; + +Vue.component("FieldSlider", FieldSlider); + +let el, vm, field; + +function createField(schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField("fieldSlider", schema, model, disabled, options); +} + +describe("fieldSlider.vue", () => { + + describe("check template", () => { + let schema = { + type: "range", + label: "Rating", + model: "rating", + min: 1, + max: 10, + placeholder: "Field placeholder" + }; + let model = { rating: 8 }; + let input; + + before( () => { + createField(schema, model, false); + input = el.getElementsByTagName("input")[0]; + //console.log(input); + }); + + it("should contain an input text element", () => { + expect(field).to.be.exist; + expect(field.$el).to.be.exist; + + expect(input).to.be.defined; + expect(input.type).to.be.equal("text"); + expect(input.classList.contains("form-control")).to.be.true; + expect(input.placeholder).to.be.equal(schema.placeholder); + expect(input.getAttribute("data-slider-min")).to.be.equal("1"); + expect(input.getAttribute("data-slider-max")).to.be.equal("10"); + expect(input.disabled).to.be.false; + }); + + it("should contain the value", (done) => { + vm.$nextTick( () => { + expect(input.getAttribute("data-slider-value")).to.be.equal("8"); + expect(input.value).to.be.equal("8"); + done(); + }); + }); + + it("should set disabled", (done) => { + field.disabled = true; + vm.$nextTick( () => { + expect(input.disabled).to.be.true; + done(); + }); + }); + + it("input value should be the model value after changed", (done) => { + model.rating = 3; + vm.$nextTick( () => { + expect(input.value).to.be.equal("3"); + done(); + }); + + }); + + it("model value should be the input value if changed", (done) => { + input.value = "6"; + trigger(input, "input"); + + vm.$nextTick( () => { + expect(model.rating).to.be.equal(6); + done(); + }); + + }); + + }); + +}); \ No newline at end of file diff --git a/test/unit/specs/fields/fieldSpectrum.spec.js b/test/unit/specs/fields/fieldSpectrum.spec.js new file mode 100644 index 00000000..3005a544 --- /dev/null +++ b/test/unit/specs/fields/fieldSpectrum.spec.js @@ -0,0 +1,78 @@ +import { expect } from "chai"; +import { createVueField, trigger } from "../util"; + +import Vue from "vue"; +import FieldSpectrum from "src/fields/fieldSpectrum.vue"; + +Vue.component("FieldSpectrum", FieldSpectrum); + +let el, vm, field; + +function createField(schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField("fieldSpectrum", schema, model, disabled, options); +} + +describe("fieldSpectrum.vue", () => { + + describe("check template", () => { + let schema = { + type: "color", + label: "Color", + model: "color" + }; + let model = { color: "#ff8822" }; + let input; + + before( () => { + createField(schema, model, false); + input = el.getElementsByTagName("input")[0]; + }); + + it("should contain an input color element", () => { + expect(field).to.be.exist; + expect(field.$el).to.be.exist; + + expect(input).to.be.defined; + expect(input.type).to.be.equal("text"); + //expect(input.classList.contains("form-control")).to.be.true; + expect(input.disabled).to.be.false; + }); + /* TODO + it("should contain the value", (done) => { + vm.$nextTick( () => { + expect(input.value).to.be.equal("#ff8822"); + done(); + }); + }); + + it("should set disabled", (done) => { + field.disabled = true; + vm.$nextTick( () => { + expect(input.disabled).to.be.true; + done(); + }); + }); + + it("input value should be the model value after changed", (done) => { + model.color = "#ffff00"; + vm.$nextTick( () => { + expect(input.value).to.be.equal("#ffff00"); + done(); + }); + + }); + + it("model value should be the input value if changed", (done) => { + input.value = "#123456"; + trigger(input, "change"); + + vm.$nextTick( () => { + expect(model.color).to.be.equal("#123456"); + done(); + }); + + });*/ + + }); + +}); \ No newline at end of file