From 6a6299e8e289114404ad9f093e8bb5037fc453b0 Mon Sep 17 00:00:00 2001 From: Icebob Date: Sun, 8 May 2016 15:26:30 +0200 Subject: [PATCH] :white_check_mark: test: Cover 100% the VueFormGenerator.vue --- src/formGenerator.vue | 6 +- test/unit/specs/VueFormGenerator.spec.js | 264 ++++++++++++++++++++++- 2 files changed, 263 insertions(+), 7 deletions(-) diff --git a/src/formGenerator.vue b/src/formGenerator.vue index 2d9d1568..256b9e6d 100644 --- a/src/formGenerator.vue +++ b/src/formGenerator.vue @@ -66,16 +66,16 @@ watch: { // new model loaded model: function() { - if (this.options.validateAfterLoad === true && !this.isNewModel) + if (this.options.validateAfterLoad === true && this.isNewModel !== true) this.validate(); else this.clearValidationErrors(); } }, - ready() { + compiled() { // First load - if (this.options && this.options.validateAfterLoad === true && !this.isNewModel) + if (this.options && this.options.validateAfterLoad === true && this.isNewModel !== true) this.validate(); else this.clearValidationErrors(); diff --git a/test/unit/specs/VueFormGenerator.spec.js b/test/unit/specs/VueFormGenerator.spec.js index 47f34c38..24db3072 100644 --- a/test/unit/specs/VueFormGenerator.spec.js +++ b/test/unit/specs/VueFormGenerator.spec.js @@ -7,19 +7,20 @@ Vue.use(VueFormGenerator); let el, vm; -function createFormGenerator(schema = {}, model = null, options = {}) { +function createFormGenerator(schema = {}, model = null, options = {}, multiple = false) { el = document.createElement("div"); - el.innerHTML = ``; + el.innerHTML = ``; vm = new Vue({ el: el, data: { schema, model, - options + options, + multiple } }); - console.log(el); + // console.log(el); return [el, vm]; } @@ -213,5 +214,260 @@ describe("VueFormGenerator.vue", () => { }); + describe("check computed fields if multiple is true", () => { + let schema = { + fields: [ + { type: "text", label: "name", model: "name", multi: false }, + { type: "text", label: "phone", model: "phone", multi: true }, + { type: "text", label: "email", model: "email" } // multi is undefined + ] + }; + let form; + + before( () => { + createFormGenerator(schema, {}, {}, true); + form = vm.$refs.form; + }); + + it("should render only phone field", () => { + expect(form.fields.length).to.be.equal(1); + expect(el.getElementsByTagName("tr")[0].getElementsByTagName("td")[0].textContent).to.be.equal("phone"); + }); + }); + + describe("check fieldDisabled with function", () => { + let schema = { + fields: [ + { + type: "text", + label: "Name", + model: "name", + disabled(model) { return !model.status; } + } + ] + }; + let model = { + name: "John Doe", + status: true + } + + before( () => { + createFormGenerator(schema, model); + }); + + it("should be enabled the name field", () => { + let input = el.getElementsByTagName("input")[0]; + expect(input.disabled).to.be.false; + }); + + it("should be disabled the name field", (done) => { + model.status = false; + vm.$nextTick(() => { + let input = el.getElementsByTagName("input")[0]; + expect(input.disabled).to.be.true; + + done(); + }); + }); + + }); + + describe("check fieldDisabled with const", () => { + let schema = { + fields: [ + { + type: "text", + label: "Name", + model: "name", + disabled: false + } + ] + }; + + let model = { name: "John Doe" }; + + before( () => { + createFormGenerator(schema, model); + }); + + it("should be enabled the name field", () => { + let input = el.getElementsByTagName("input")[0]; + expect(input.disabled).to.be.false; + }); + + it("should be disabled the name field", (done) => { + schema.fields[0].disabled = true; + vm.$nextTick(() => { + let input = el.getElementsByTagName("input")[0]; + expect(input.disabled).to.be.true; + + done(); + }); + }); + + }); + + // TODO: wrong + describe("check fieldVisible with function", () => { + let schema = { + fields: [ + { + type: "text", + label: "Name", + model: "name", + visible(model) { return model.status; } + } + ] + }; + let model = { + name: "John Doe", + status: true + } + + before( () => { + createFormGenerator(schema, model); + }); + + it("should be visible the name field", () => { + expect(el.querySelector("input[type=text]")).to.be.defined; + }); + + it("should be hidden the name field", (done) => { + model.status = false; + vm.$nextTick(() => { + expect(el.querySelector("input[type=text]")).to.be.null; + done(); + }); + }); + + }); + + describe("check fieldVisible with const", () => { + let schema = { + fields: [ + { + type: "text", + label: "Name", + model: "name", + visible: true + } + ] + }; + + let model = { name: "John Doe" }; + + before( () => { + createFormGenerator(schema, model); + }); + + it("should be enabled the name field", () => { + expect(el.querySelector("input[type=text]")).to.be.defined; + }); + + it("should be disabled the name field", (done) => { + schema.fields[0].visible = false; + vm.$nextTick(() => { + expect(el.querySelector("input[type=text]")).to.be.null; + done(); + }); + }); + + }); + + describe("check validate", () => { + let schema = { + fields: [ + { + type: "text", + label: "Name", + model: "name", + min: 3, + validator: VueFormGenerator.validators.string + } + ] + }; + + let model = { name: "John Doe" }; + let form; + + before( () => { + createFormGenerator(schema, model); + form = vm.$refs.form; + }); + + it("should empty the errors", () => { + expect(form.errors).to.be.length(0); + expect(form.validate()).to.be.true; + expect(form.errors).to.be.length(0); + }); + + it("should give an validation error", () => { + model.name = "Ab"; + expect(form.validate()).to.be.false; + expect(form.errors).to.be.length(1); + }); + + it("should no validation error", () => { + model.name = "Abc"; + expect(form.validate()).to.be.true; + expect(form.errors).to.be.length(0); + }); + + }); + + describe("check validateAfterLoad option", () => { + let schema = { + fields: [ + { + type: "text", + label: "Name", + model: "name", + min: 3, + validator: VueFormGenerator.validators.string + } + ] + }; + + let model = { name: "Me" }; + let form; + + before( () => { + createFormGenerator(schema, model, { validateAfterLoad: true }); + form = vm.$refs.form; + }); + + it("should be validation error at ready()", (done) => { + vm.$nextTick( () => { + expect(form.errors).to.be.length(1); + done(); + }); + }); + + it("should be validation error if model is changed", (done) => { + form.model = { name: "Al" }; + vm.$nextTick( () => { + expect(form.errors).to.be.length(1); + done(); + }); + }); + + it("should be no errors if model is correct", (done) => { + form.model = { name: "Bob" }; + vm.$nextTick( () => { + expect(form.errors).to.be.length(0); + done(); + }); + }); + + it("should be no errors if validateAfterLoad is false", (done) => { + form.options.validateAfterLoad = false; + form.model = { name: "Ed" }; + vm.$nextTick( () => { + expect(form.errors).to.be.length(0); + done(); + }); + }); + + }); }); \ No newline at end of file