diff --git a/src/fields/fieldCleave.vue b/src/fields/fieldCleave.vue index 13b6098a..ea18a565 100644 --- a/src/fields/fieldCleave.vue +++ b/src/fields/fieldCleave.vue @@ -43,6 +43,11 @@ export default { } else { console.warn("Cleave is missing. Please download from https://github.com/nosir/cleave.js/ and load the script in the HTML head section!"); } + }, + + beforeDestroy() { + if (this.cleave) + this.cleave.destroy(); } }; diff --git a/src/fields/fieldDateTime.vue b/src/fields/fieldDateTime.vue index d5934d5a..bf4bb4b8 100644 --- a/src/fields/fieldDateTime.vue +++ b/src/fields/fieldDateTime.vue @@ -9,6 +9,7 @@ /* global $ */ import abstractField from "./abstractField"; import moment from "moment"; + import { defaults } from "lodash"; let inputFormat = "YYYY-MM-DD HH:mm:ss"; @@ -46,11 +47,13 @@ }, ready() { - if ($.fn.datetimepicker) - $(this.$el).datetimepicker(this.schema.dateTimePickerOptions); + if ($.fn.datetimepicker) { + $(this.$el).datetimepicker(defaults(this.schema.dateTimePickerOptions || {}, { + format: inputFormat + })); + } else console.warn("Bootstrap datetimepicker library is missing. Please download from https://eonasdan.github.io/bootstrap-datetimepicker/ and load the script and CSS in the HTML head section!"); - } }; diff --git a/src/fields/fieldGoogleAddress.vue b/src/fields/fieldGoogleAddress.vue index 953b36df..f59c1638 100644 --- a/src/fields/fieldGoogleAddress.vue +++ b/src/fields/fieldGoogleAddress.vue @@ -23,7 +23,7 @@ //google inputs retrieved "inputs": { - "street_number": "long_name", + street_number: "long_name", route: "long_name", country: "long_name", administrative_area_level_1: "long_name", @@ -89,7 +89,7 @@ lng: position.coords.longitude }; - let circle = new google.maps.Circle({ + let circle = new window.google.maps.Circle({ center: geolocation, radius: position.coords.accuracy }); diff --git a/src/fields/fieldPikaday.vue b/src/fields/fieldPikaday.vue index 3c72a857..d1154594 100644 --- a/src/fields/fieldPikaday.vue +++ b/src/fields/fieldPikaday.vue @@ -7,7 +7,7 @@ import moment from "moment"; import { defaults } from "lodash"; - let inputFormat = "YYYY-MM-DD HH:mm:ss"; + let inputFormat = "YYYY-MM-DD"; export default { mixins: [ abstractField ], @@ -53,7 +53,7 @@ position: "bottom left", // preferred position of the datepicker relative to the form field, e.g.: `top right`, `bottom right` **Note:** automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see [positions example][] (default to "bottom left") reposition: true, // can be set to false to not reposition datepicker within the viewport, forcing it to take the configured `position` (default: true) // container: , // DOM node to render calendar into, see [container example][] (default: undefined) - // format: , // the default output format for `.toString()` and `field` value (requires [Moment.js][moment] for custom formatting) + format: inputFormat, // the default output format for `.toString()` and `field` value (requires [Moment.js][moment] for custom formatting) // formatStrict: , // the default flag for moment"s strict date parsing (requires [Moment.js][moment] for custom formatting) // defaultDate: , // the initial date to view when first opened // setDefaultDate: , // make the `defaultDate` the initial selected value @@ -88,7 +88,12 @@ console.warn("Pikaday is missing. Please download from https://github.com/dbushell/Pikaday/ and load the script and CSS in the HTML head section!"); } - } + }, + + beforeDestroy() { + if (this.picker) + this.picker.destroy(); + } }; diff --git a/src/fields/fieldSlider.vue b/src/fields/fieldSlider.vue index 8083537e..37a0f914 100644 --- a/src/fields/fieldSlider.vue +++ b/src/fields/fieldSlider.vue @@ -10,6 +10,12 @@ export default { mixins: [ abstractField ], + data() { + return { + slider: null + }; + }, + watch: { model: function() { if ($.fn.ionRangeSlider) { @@ -19,9 +25,8 @@ } else valueFrom = this.value; - let ionRangeSlider = $(this.$el).data("ionRangeSlider"); - if (ionRangeSlider) { - ionRangeSlider.update({ + if (this.slider) { + this.slider.update({ from: valueFrom, to: valueTo }); @@ -38,24 +43,31 @@ } else valueFrom = this.value; + let self = this; $(this.$el).ionRangeSlider(defaults(this.schema.sliderOptions || {}, { type: "single", grid: true, hide_min_max: true, from: valueFrom, to: valueTo, - onChange: (slider) => { - if (this.schema.sliderOptions.type == "double") { - this.value = [ slider.from, slider.to ]; + onChange(slider) { + if (self.slider.options.type == "double") { + self.value = [ slider.from, slider.to ]; } else { - this.value = slider.from; + self.value = slider.from; } } })); + this.slider = $(this.$el).data("ionRangeSlider"); } else console.warn("ion.rangeSlider library is missing. Please download from https://github.com/IonDen/ion.rangeSlider and load the script and CSS in the HTML head section!"); - } + }, + + beforeDestroy() { + if (this.slider) + this.slider.destroy(); + } }; diff --git a/src/fields/fieldSpectrum.vue b/src/fields/fieldSpectrum.vue index b969eb3a..2ad27a7a 100644 --- a/src/fields/fieldSpectrum.vue +++ b/src/fields/fieldSpectrum.vue @@ -9,17 +9,30 @@ export default { mixins: [ abstractField ], + data() { + return { + picker: null + }; + }, + watch: { model() { if ($.fn.spectrum) { - $(this.$el).spectrum("set", this.value); + this.picker.spectrum("set", this.value); } + }, + + disabled(val) { + if (val) + this.picker.spectrum("disable"); + else + this.picker.spectrum("enable"); } }, ready() { - if ($.fn.spectrum) - $(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, { + if ($.fn.spectrum) { + this.picker = $(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, { showInput: true, showAlpha: true, disabled: this.schema.disabled, @@ -29,8 +42,16 @@ this.value = color ? color.toString() : null; } })); - else + this.picker.spectrum("set", this.value); + + } else { console.warn("Spectrum color library is missing. Please download from http://bgrins.github.io/spectrum/ and load the script and CSS in the HTML head section!"); + } + }, + + beforeDestroy() { + if (this.picker) + this.picker.spectrum("destroy"); } }; diff --git a/src/formGenerator.vue b/src/formGenerator.vue index b70e83ef..41a3e5a2 100644 --- a/src/formGenerator.vue +++ b/src/formGenerator.vue @@ -163,6 +163,10 @@ $errorColor: lighten(#F00, 0%); fieldset.vue-form-generator { + + * { + box-sizing: border-box; + } .form-control { // Default Bootstrap .form-control style diff --git a/test/unit/index.js b/test/unit/index.js index 6a2f2a6e..0438b7e7 100644 --- a/test/unit/index.js +++ b/test/unit/index.js @@ -8,3 +8,5 @@ testsContext.keys().forEach(testsContext); // you want coverage for. var srcContext = require.context("src", true, /\.(js|vue)$/); srcContext.keys().forEach(srcContext); + +require("./style.scss"); \ No newline at end of file diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js index 0155ed6b..490b12fa 100644 --- a/test/unit/karma.conf.js +++ b/test/unit/karma.conf.js @@ -1,64 +1,65 @@ var wsConfig = require("./webpack.test.config"); module.exports = function(config) { - var settings = { - // base path that will be used to resolve all patterns (eg. files, exclude) - basePath: "", + var settings = { + // base path that will be used to resolve all patterns (eg. files, exclude) + basePath: "", - browsers: ["PhantomJS"], + browsers: ["PhantomJS"], - reporters: ["spec", "coverage"], + reporters: ["spec", "coverage"], - frameworks: ["mocha", "chai", "sinon-chai"], + frameworks: ["mocha", "chai", "sinon-chai"], - files: [ - "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js", - "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js", - "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js", - "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js", - "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js", - "https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js", - "https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js", - "https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js", - "https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js", - "https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js", - "https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js", - "https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js", - "https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js", + files: [ + "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js", + "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js", + "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js", + "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js", + "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js", + "https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js", + "https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js", + "https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js", + "https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js", + "https://rawgit.com/nosir/cleave.js/master/dist/cleave.js", + "https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js", + "https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js", + "https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.js", + "https://maps.googleapis.com/maps/api/js?key=AIzaSyCEz-sX9bRJorDS-D_JL0JkZVZe2gzoUMw&libraries=places", - "./index.js" - ], + "./index.js" + ], - exclude: [], + exclude: [], - preprocessors: { - "./index.js": ["webpack", "sourcemap"] - }, + preprocessors: { + "./index.js": ["webpack", "sourcemap"] + }, - webpack: wsConfig, + webpack: wsConfig, - webpackMiddleware: { - noInfo: true - }, + webpackMiddleware: { + noInfo: true + }, - port: 9876, + port: 9876, - colors: true, + colors: true, - logLevel: config.LOG_INFO, + logLevel: config.LOG_INFO, - autoWatch: false, + autoWatch: false, - singleRun: true, + singleRun: true, - coverageReporter: { - dir: "./coverage", - reporters: [ - { type: "lcov", subdir: "." }, - { type: "text-summary" } - ] - } - } + coverageReporter: { + dir: "./coverage", + reporters: [ + { type: "lcov", subdir: "." }, + { type: "text-summary" } + ] + } + } - config.set(settings); + config.set(settings); } \ No newline at end of file diff --git a/test/unit/specs/fields/abstractField.spec.js b/test/unit/specs/fields/abstractField.spec.js index 6b3d5b8b..e3e856e2 100644 --- a/test/unit/specs/fields/abstractField.spec.js +++ b/test/unit/specs/fields/abstractField.spec.js @@ -8,7 +8,7 @@ Vue.component("AbstractField", AbstractField); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { +function createField(test, schema = {}, model = null, disabled = false, options) { el = document.createElement("div"); // eslint-disable-next-line quotes @@ -29,7 +29,7 @@ function createField(schema = {}, model = null, disabled = false, options) { return [el, vm]; } -describe("abstractField.vue", () => { +describe("abstractField.vue", function() { describe("check static value", () => { let schema = { @@ -40,7 +40,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; beforeEach( () => { - createField(schema, model); + createField(this, schema, model); }); it("should give the model static value", () => { @@ -66,7 +66,7 @@ describe("abstractField.vue", () => { let model = {}; beforeEach( () => { - createField(schema, model); + createField(this, schema, model); }); it("should be called the schema.get function", () => { @@ -94,7 +94,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; beforeEach( () => { - createField(schema, model); + createField(this, schema, model); field.formatValueToField = function(value) { return "**" + value + "**"; }; @@ -125,7 +125,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; beforeEach( () => { - createField(schema, model); + createField(this, schema, model); }); it("should called once the schema.onChanged", (done) => { @@ -153,7 +153,7 @@ describe("abstractField.vue", () => { }; beforeEach( () => { - createField(schema, model, false, options); + createField(this, schema, model, false, options); field.validate = sinon.spy(); }); @@ -187,7 +187,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; beforeEach( () => { - createField(schema, model); + createField(this, schema, model); }); it("should call schema validator", () => { @@ -210,7 +210,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; beforeEach( () => { - createField(schema, model, true); + createField(this, schema, model, true); }); it("should not call schema validator", () => { @@ -233,7 +233,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; beforeEach( () => { - createField(schema, model); + createField(this, schema, model); }); it("should not call schema validator", () => { @@ -257,7 +257,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; beforeEach( () => { - createField(schema, model); + createField(this, schema, model); }); it("should call schema validator", () => { @@ -285,7 +285,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; beforeEach( () => { - createField(schema, model); + createField(this, schema, model); }); it("should called once the schema.onValidated", () => { @@ -311,7 +311,7 @@ describe("abstractField.vue", () => { let model = { name: "John Doe" }; before( () => { - createField(schema, model); + createField(this, schema, model); }); it("should be undefined", () => { diff --git a/test/unit/specs/fields/fieldCheckbox.spec.js b/test/unit/specs/fields/fieldCheckbox.spec.js index 049a5f6b..f11a89d5 100644 --- a/test/unit/specs/fields/fieldCheckbox.spec.js +++ b/test/unit/specs/fields/fieldCheckbox.spec.js @@ -8,12 +8,11 @@ Vue.component("FieldCheckbox", FieldCheckbox); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldCheckbox", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldCheckbox", schema, model, disabled, options); } - -describe("FieldCheckbox.vue", () => { +describe("FieldCheckbox.vue", function() { describe("check template", () => { let schema = { @@ -25,7 +24,7 @@ describe("FieldCheckbox.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldChecklist.spec.js b/test/unit/specs/fields/fieldChecklist.spec.js index b20e2074..8f3db983 100644 --- a/test/unit/specs/fields/fieldChecklist.spec.js +++ b/test/unit/specs/fields/fieldChecklist.spec.js @@ -8,11 +8,11 @@ Vue.component("FieldChecklist", FieldChecklist); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldChecklist", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldChecklist", schema, model, disabled, options); } -describe("fieldChecklist.vue", () => { +describe("fieldChecklist.vue", function() { describe("check listbox template", () => { @@ -41,7 +41,7 @@ describe("fieldChecklist.vue", () => { } before( () => { - createField(schema, model, false); + createField(this, schema, model, false); listbox = el.querySelector(".listbox"); checkboxes = listbox.querySelectorAll("input[type=checkbox]"); }); @@ -122,7 +122,7 @@ describe("fieldChecklist.vue", () => { } before( () => { - createField(schema, model, false); + createField(this, schema, model, false); listbox = el.querySelector(".listbox"); checkboxes = listbox.querySelectorAll("input[type=checkbox]"); }); @@ -188,7 +188,7 @@ describe("fieldChecklist.vue", () => { } before( () => { - createField(schema, model, false); + createField(this, schema, model, false); listbox = el.querySelector(".listbox"); checkboxes = listbox.querySelectorAll("input[type=checkbox]"); }); @@ -257,7 +257,7 @@ describe("fieldChecklist.vue", () => { } before( () => { - createField(schema, model, false); + createField(this, schema, model, false); combobox = el.querySelector(".combobox"); dropList = combobox.querySelector(".dropList"); mainRow = combobox.querySelector(".mainRow"); diff --git a/test/unit/specs/fields/fieldCleave.spec.js b/test/unit/specs/fields/fieldCleave.spec.js index 0b0f4ef6..b649b9b9 100644 --- a/test/unit/specs/fields/fieldCleave.spec.js +++ b/test/unit/specs/fields/fieldCleave.spec.js @@ -8,27 +8,29 @@ Vue.component("FieldCleave", FieldCleave); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldCleave", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldCleave", schema, model, disabled, options); } -describe("fieldCleave.vue", () => { +describe("fieldCleave.vue", function() { describe("check template", () => { let schema = { type: "masked", label: "Phone", model: "phone", - phone: true, - phoneRegionCode: "HU", readonly: false, - placeholder: "Field placeholder" + placeholder: "Field placeholder", + cleaveOptions: { + phone: true, + phoneRegionCode: "HU", + } }; - let model = { phone: "(30) 123-4567" }; + let model = { phone: "30 123 4567" }; let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); @@ -46,7 +48,7 @@ describe("fieldCleave.vue", () => { it("should contain the value", (done) => { vm.$nextTick( () => { - expect(input.value).to.be.equal("(30) 123-4567"); + expect(input.value).to.be.equal("30 123 4567"); done(); }); }); @@ -55,6 +57,7 @@ describe("fieldCleave.vue", () => { schema.readonly = true; vm.$nextTick( () => { expect(input.readOnly).to.be.true; + schema.readonly = false; done(); }); }); @@ -63,30 +66,43 @@ describe("fieldCleave.vue", () => { field.disabled = true; vm.$nextTick( () => { expect(input.disabled).to.be.true; + field.disabled = false; done(); }); }); it("input value should be the model value after changed", (done) => { - model.phone = "(70) 555-4433"; + model.phone = "70 555 4433"; vm.$nextTick( () => { - expect(input.value).to.be.equal("(70) 555-4433"); + 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"; + input.value = "21 888 6655"; trigger(input, "input"); vm.$nextTick( () => { - expect(model.phone).to.be.equal("(21) 888-6655"); + expect(model.phone).to.be.equal("21 888 6655"); done(); }); }); + it("should be formatted data in model", (done) => { + field.cleave.setRawValue("301234567"); + expect(input.value).to.be.equal("30 123 4567"); + trigger(input, "change"); + + vm.$nextTick( () => { + expect(model.phone).to.be.equal("30 123 4567"); + done(); + }); + + }); + }); }); \ No newline at end of file diff --git a/test/unit/specs/fields/fieldColor.spec.js b/test/unit/specs/fields/fieldColor.spec.js index 394c2263..f6b459b4 100644 --- a/test/unit/specs/fields/fieldColor.spec.js +++ b/test/unit/specs/fields/fieldColor.spec.js @@ -8,11 +8,11 @@ Vue.component("FieldColor", FieldColor); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldColor", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldColor", schema, model, disabled, options); } -describe("fieldColor.vue", () => { +describe("fieldColor.vue", function() { describe("check template", () => { let schema = { @@ -24,7 +24,7 @@ describe("fieldColor.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldDateTime.spec.js b/test/unit/specs/fields/fieldDateTime.spec.js index 3245fe9e..16c67a42 100644 --- a/test/unit/specs/fields/fieldDateTime.spec.js +++ b/test/unit/specs/fields/fieldDateTime.spec.js @@ -9,11 +9,11 @@ Vue.component("FieldDateTime", FieldDateTime); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldDateTime", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldDateTime", schema, model, disabled, options); } -describe("fieldDateTime.vue", () => { +describe("fieldDateTime.vue", function() { describe("check template", () => { let schema = { @@ -25,7 +25,7 @@ describe("fieldDateTime.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); @@ -50,7 +50,12 @@ describe("fieldDateTime.vue", () => { field.disabled = true; vm.$nextTick( () => { expect(input.disabled).to.be.true; - done(); + + // Rollback + field.disabled = false; + vm.$nextTick( () => { + done(); + }); }); }); @@ -90,7 +95,7 @@ describe("fieldDateTime.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldEmail.spec.js b/test/unit/specs/fields/fieldEmail.spec.js index 5858334a..bbaeb094 100644 --- a/test/unit/specs/fields/fieldEmail.spec.js +++ b/test/unit/specs/fields/fieldEmail.spec.js @@ -8,12 +8,12 @@ Vue.component("FieldEmail", FieldEmail); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldEmail", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldEmail", schema, model, disabled, options); } -describe("fieldEmail.vue", () => { +describe("fieldEmail.vue", function() { describe("check template", () => { let schema = { @@ -27,7 +27,7 @@ describe("fieldEmail.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldGoogleAddress.spec.js b/test/unit/specs/fields/fieldGoogleAddress.spec.js new file mode 100644 index 00000000..7686d602 --- /dev/null +++ b/test/unit/specs/fields/fieldGoogleAddress.spec.js @@ -0,0 +1,99 @@ +import { expect } from "chai"; +import { createVueField, trigger } from "../util"; + +import Vue from "vue"; +import FieldGoogleAddress from "src/fields/fieldGoogleAddress.vue"; + +Vue.component("FieldGoogleAddress", FieldGoogleAddress); + +let el, vm, field; + +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldGoogleAddress", schema, model, disabled, options); +} + +describe("fieldGoogleAddress.vue", function() { + + describe("check template", () => { + let schema = { + type: "text", + label: "Address", + model: "address", + readonly: false, + placeholder: "Field placeholder" + }; + let model = { address: "Paris, France" }; + let input; + + before( () => { + createField(this, schema, model, false); + input = el.getElementsByTagName("input")[0]; + }); + + 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.readOnly).to.be.false; + expect(input.disabled).to.be.false; + }); + + it("should contain the value", (done) => { + vm.$nextTick( () => { + expect(input.value).to.be.equal("Paris, France"); + done(); + }); + }); + + it("should set readOnly", (done) => { + schema.readonly = true; + vm.$nextTick( () => { + expect(input.readOnly).to.be.true; + schema.readonly = false; + done(); + }); + }); + + it("should set disabled", (done) => { + field.disabled = true; + vm.$nextTick( () => { + expect(input.disabled).to.be.true; + field.disabled = false; + done(); + }); + }); + + it("input value should be the model value after changed", (done) => { + model.address = "Rome, Italy"; + vm.$nextTick( () => { + expect(input.value).to.be.equal("Rome, Italy"); + done(); + }); + + }); + + it("model value should be the input value if changed", (done) => { + input.value = "Budapest, Hungary"; + trigger(input, "change"); + + vm.$nextTick( () => { + expect(model.address).to.be.equal("Budapest, Hungary"); + done(); + }); + + }); + + /* + TODO: + 1. check HTML list if typing + 2. check geolocate called if input got focus + 3. check onPlaceChanged called + */ + + }); + +}); \ No newline at end of file diff --git a/test/unit/specs/fields/fieldImage.spec.js b/test/unit/specs/fields/fieldImage.spec.js index 2a37c7f3..ddf189a5 100644 --- a/test/unit/specs/fields/fieldImage.spec.js +++ b/test/unit/specs/fields/fieldImage.spec.js @@ -10,11 +10,11 @@ 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); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldImage", schema, model, disabled, options); } -describe("fieldImage.vue", () => { +describe("fieldImage.vue", function() { describe("check template without preview", () => { let schema = { @@ -28,7 +28,7 @@ describe("fieldImage.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.querySelector("input[type=text]"); }); diff --git a/test/unit/specs/fields/fieldLabel.spec.js b/test/unit/specs/fields/fieldLabel.spec.js index 35fec471..a0e6c5ae 100644 --- a/test/unit/specs/fields/fieldLabel.spec.js +++ b/test/unit/specs/fields/fieldLabel.spec.js @@ -8,11 +8,11 @@ Vue.component("FieldLabel", FieldLabel); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldLabel", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldLabel", schema, model, disabled, options); } -describe("fieldLabel.vue", () => { +describe("fieldLabel.vue", function() { describe("check template", () => { let schema = { @@ -24,7 +24,7 @@ describe("fieldLabel.vue", () => { let span; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); span = el.getElementsByTagName("span")[0]; }); diff --git a/test/unit/specs/fields/fieldMasked.spec.js b/test/unit/specs/fields/fieldMasked.spec.js index f71c5710..9aa7d400 100644 --- a/test/unit/specs/fields/fieldMasked.spec.js +++ b/test/unit/specs/fields/fieldMasked.spec.js @@ -8,11 +8,11 @@ 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); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldMasked", schema, model, disabled, options); } -describe("fieldMasked.vue", () => { +describe("fieldMasked.vue", function() { describe("check template", () => { let schema = { @@ -27,8 +27,7 @@ describe("fieldMasked.vue", () => { let input; before( () => { - createField(schema, model, false); - vm.$appendTo(document.body); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldNoUiSlider.spec.js b/test/unit/specs/fields/fieldNoUiSlider.spec.js index cb0ded40..bea2f83d 100644 --- a/test/unit/specs/fields/fieldNoUiSlider.spec.js +++ b/test/unit/specs/fields/fieldNoUiSlider.spec.js @@ -9,11 +9,11 @@ Vue.component("fieldNoUiSlider", fieldNoUiSlider); // eslint-disable-next-line let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldNoUiSlider", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldNoUiSlider", schema, model, disabled, options); } -describe("fieldNoUiSlider.vue", () => { +describe("fieldNoUiSlider.vue", function() { describe("check template", () => { let schema = { @@ -27,8 +27,7 @@ describe("fieldNoUiSlider.vue", () => { let input; before( () => { - createField(schema, model, false); - vm.$appendTo(document.body); + createField(this, schema, model, false); input = el.getElementsByClassName("slider")[0]; }); diff --git a/test/unit/specs/fields/fieldNumber.spec.js b/test/unit/specs/fields/fieldNumber.spec.js index 258cb732..8dd2e275 100644 --- a/test/unit/specs/fields/fieldNumber.spec.js +++ b/test/unit/specs/fields/fieldNumber.spec.js @@ -8,13 +8,12 @@ Vue.component("FieldNumber", FieldNumber); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldNumber", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldNumber", schema, model, disabled, options); } -describe("fieldNumber.vue", () => { - +describe("fieldNumber.vue", function() { describe("check template", () => { let schema = { type: "number", @@ -29,7 +28,7 @@ describe("fieldNumber.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldPassword.spec.js b/test/unit/specs/fields/fieldPassword.spec.js index b63a4145..b1823997 100644 --- a/test/unit/specs/fields/fieldPassword.spec.js +++ b/test/unit/specs/fields/fieldPassword.spec.js @@ -8,12 +8,12 @@ Vue.component("FieldPassword", FieldPassword); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldPassword", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldPassword", schema, model, disabled, options); } -describe("fieldPassword.vue", () => { +describe("fieldPassword.vue", function() { describe("check template", () => { let schema = { @@ -27,7 +27,7 @@ describe("fieldPassword.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldPikaday.spec.js b/test/unit/specs/fields/fieldPikaday.spec.js index 5baf6e57..779672ca 100644 --- a/test/unit/specs/fields/fieldPikaday.spec.js +++ b/test/unit/specs/fields/fieldPikaday.spec.js @@ -1,5 +1,5 @@ import { expect } from "chai"; -import { createVueField, trigger } from "../util"; +import { createVueField } from "../util"; import moment from "moment"; import Vue from "vue"; @@ -9,11 +9,11 @@ Vue.component("FieldPikaday", FieldPikaday); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldPikaday", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldPikaday", schema, model, disabled, options); } -describe("fieldPikaday.vue", () => { +describe("fieldPikaday.vue", function() { describe("check template", () => { let schema = { @@ -25,7 +25,7 @@ describe("fieldPikaday.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); @@ -41,7 +41,7 @@ describe("fieldPikaday.vue", () => { it("should contain the value", (done) => { vm.$nextTick( () => { - expect(input.value).to.be.equal( moment(1462799081231).format("YYYY-MM-DD HH:mm:ss") ); + expect(input.value).to.be.equal( moment(1462799081231).format("YYYY-MM-DD") ); done(); }); }); @@ -50,6 +50,7 @@ describe("fieldPikaday.vue", () => { field.disabled = true; vm.$nextTick( () => { expect(input.disabled).to.be.true; + field.disabled = false; done(); }); }); @@ -57,18 +58,19 @@ describe("fieldPikaday.vue", () => { it("input value should be the model value after changed", (done) => { model.event = 1234567890123; vm.$nextTick( () => { - expect(input.value).to.be.equal( moment(1234567890123).format("YYYY-MM-DD HH:mm:ss") ); + expect(input.value).to.be.equal( moment(1234567890123).format("YYYY-MM-DD") ); done(); }); }); it("model value should be the input value if changed", (done) => { - input.value = moment(1420194153000).format("YYYY-MM-DD HH:mm:ss"); - trigger(input, "input"); + let day = moment(1420070400000).format("YYYY-MM-DD"); + field.picker.setDate(day); vm.$nextTick( () => { - expect(model.event).to.be.equal(1420194153000); + expect(input.value).to.be.equal(day); + expect(moment(model.event).format("YYYY-MM-DD")).to.be.equal(day); done(); }); diff --git a/test/unit/specs/fields/fieldRange.spec.js b/test/unit/specs/fields/fieldRange.spec.js index 66727ce8..2036b493 100644 --- a/test/unit/specs/fields/fieldRange.spec.js +++ b/test/unit/specs/fields/fieldRange.spec.js @@ -8,11 +8,11 @@ Vue.component("FieldRange", FieldRange); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldRange", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldRange", schema, model, disabled, options); } -describe("fieldRange.vue", () => { +describe("fieldRange.vue", function() { describe("check template", () => { let schema = { @@ -27,7 +27,7 @@ describe("fieldRange.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldSelect.spec.js b/test/unit/specs/fields/fieldSelect.spec.js index c8e3fcec..21c71383 100644 --- a/test/unit/specs/fields/fieldSelect.spec.js +++ b/test/unit/specs/fields/fieldSelect.spec.js @@ -8,12 +8,12 @@ Vue.component("FieldSelect", FieldSelect); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldSelect", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldSelect", schema, model, disabled, options); } -describe("fieldSelect.vue", () => { +describe("fieldSelect.vue", function() { describe("check template", () => { let schema = { @@ -32,7 +32,7 @@ describe("fieldSelect.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("select")[0]; }); @@ -123,7 +123,7 @@ describe("fieldSelect.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("select")[0]; }); @@ -184,7 +184,7 @@ describe("fieldSelect.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("select")[0]; }); diff --git a/test/unit/specs/fields/fieldSelectEx.spec.js b/test/unit/specs/fields/fieldSelectEx.spec.js index 857c6521..d9397be4 100644 --- a/test/unit/specs/fields/fieldSelectEx.spec.js +++ b/test/unit/specs/fields/fieldSelectEx.spec.js @@ -8,11 +8,11 @@ Vue.component("FieldSelectEx", FieldSelectEx); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldSelectEx", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldSelectEx", schema, model, disabled, options); } -describe("fieldSelectEx.vue", () => { +describe("fieldSelectEx.vue", function() { describe("check template", () => { let schema = { @@ -32,7 +32,7 @@ describe("fieldSelectEx.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("select")[0]; }); @@ -41,7 +41,6 @@ describe("fieldSelectEx.vue", () => { expect(field.$el).to.be.exist; expect(input).to.be.defined; - expect(input.classList.contains("selectpicker")).to.be.true; expect(input.disabled).to.be.false; expect(input.multiple).to.be.false; }); @@ -135,7 +134,7 @@ describe("fieldSelectEx.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("select")[0]; }); @@ -196,7 +195,7 @@ describe("fieldSelectEx.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("select")[0]; }); diff --git a/test/unit/specs/fields/fieldSlider.spec.js b/test/unit/specs/fields/fieldSlider.spec.js index 077ea00c..32fb2c0d 100644 --- a/test/unit/specs/fields/fieldSlider.spec.js +++ b/test/unit/specs/fields/fieldSlider.spec.js @@ -8,11 +8,11 @@ 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); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldSlider", schema, model, disabled, options); } -describe("fieldSlider.vue", () => { +describe("fieldSlider.vue", function() { describe("check template", () => { let schema = { @@ -26,7 +26,7 @@ describe("fieldSlider.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); @@ -41,14 +41,43 @@ describe("fieldSlider.vue", () => { expect(input.getAttribute("data-disable")).to.be.null; }); + it("should contain the value", (done) => { + vm.$nextTick( () => { + let origin = el.querySelector(".irs-slider.single"); + expect(origin.style.left).to.be.within("70%", "90%"); + done(); + }); + }); + it("should set disabled", (done) => { field.disabled = true; vm.$nextTick( () => { expect(input.getAttribute("data-disable")).to.be.equal(""); + field.disabled = false; + done(); + }); + }); + + it("input value should be the model value after changed", (done) => { + field.model = { rating: 3 }; + vm.$nextTick( () => { + let origin = el.querySelector(".irs-slider.single"); + expect(origin.style.left).to.be.within("20%", "40%"); done(); }); + }); + it("model value should be the input value if changed", (done) => { + field.slider.update({ from: 6 }); + field.slider.callOnChange(field.slider); // trigger changes + vm.$nextTick( () => { + expect(field.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 index b62d064e..6c885d07 100644 --- a/test/unit/specs/fields/fieldSpectrum.spec.js +++ b/test/unit/specs/fields/fieldSpectrum.spec.js @@ -1,5 +1,5 @@ import { expect } from "chai"; -import { createVueField } from "../util"; +import { createVueField, trigger } from "../util"; import Vue from "vue"; import FieldSpectrum from "src/fields/fieldSpectrum.vue"; @@ -9,11 +9,11 @@ Vue.component("FieldSpectrum", FieldSpectrum); // eslint-disable-next-line let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldSpectrum", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldSpectrum", schema, model, disabled, options); } -describe("fieldSpectrum.vue", () => { +describe("fieldSpectrum.vue", function() { describe("check template", () => { let schema = { @@ -25,7 +25,7 @@ describe("fieldSpectrum.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); @@ -38,10 +38,10 @@ describe("fieldSpectrum.vue", () => { //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"); + expect(field.picker.spectrum("get").toHexString()).to.be.equal("#ff8822"); done(); }); }); @@ -50,29 +50,31 @@ describe("fieldSpectrum.vue", () => { field.disabled = true; vm.$nextTick( () => { expect(input.disabled).to.be.true; + expect(el.querySelectorAll(".sp-disabled").length).to.be.equal(1); + field.disabled = false; done(); }); }); it("input value should be the model value after changed", (done) => { - model.color = "#ffff00"; + field.model = { color: "#ffff00" }; vm.$nextTick( () => { - expect(input.value).to.be.equal("#ffff00"); + expect(field.picker.spectrum("get").toHexString()).to.be.equal("#ffff00"); done(); }); }); it("model value should be the input value if changed", (done) => { - input.value = "#123456"; - trigger(input, "change"); + field.picker.spectrum("set", "#123456"); + trigger(document.querySelector(".sp-input"), "change"); vm.$nextTick( () => { - expect(model.color).to.be.equal("#123456"); + expect(field.model.color).to.be.equal("#123456"); done(); }); - });*/ + }); }); diff --git a/test/unit/specs/fields/fieldStaticMap.spec.js b/test/unit/specs/fields/fieldStaticMap.spec.js index 4e50ec3e..a610156a 100644 --- a/test/unit/specs/fields/fieldStaticMap.spec.js +++ b/test/unit/specs/fields/fieldStaticMap.spec.js @@ -9,11 +9,11 @@ Vue.component("FieldStaticMap", FieldStaticMap); // eslint-disable-next-line let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldStaticMap", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldStaticMap", schema, model, disabled, options); } -describe("fieldStaticMap.vue", () => { +describe("fieldStaticMap.vue", function() { describe("check template", () => { let schema = { @@ -30,7 +30,7 @@ describe("fieldStaticMap.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("img")[0]; }); diff --git a/test/unit/specs/fields/fieldSubmit.spec.js b/test/unit/specs/fields/fieldSubmit.spec.js index 098a194c..23216caa 100644 --- a/test/unit/specs/fields/fieldSubmit.spec.js +++ b/test/unit/specs/fields/fieldSubmit.spec.js @@ -10,11 +10,11 @@ Vue.component("FieldSubmit", FieldSubmit); // eslint-disable-next-line let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldSubmit", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldSubmit", schema, model, disabled, options); } -describe("fieldSubmit.vue", () => { +describe("fieldSubmit.vue", function() { describe("check template", () => { let schema = { @@ -27,7 +27,7 @@ describe("fieldSubmit.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldSwitch.spec.js b/test/unit/specs/fields/fieldSwitch.spec.js index 064b7bad..db494896 100644 --- a/test/unit/specs/fields/fieldSwitch.spec.js +++ b/test/unit/specs/fields/fieldSwitch.spec.js @@ -8,11 +8,11 @@ Vue.component("FieldSwitch", FieldSwitch); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldSwitch", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldSwitch", schema, model, disabled, options); } -describe("FieldSwitch.vue", () => { +describe("FieldSwitch.vue", function() { describe("check template", () => { let schema = { @@ -24,7 +24,7 @@ describe("FieldSwitch.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.querySelector("input"); }); @@ -91,7 +91,7 @@ describe("FieldSwitch.vue", () => { let model = { status: true }; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); }); it("check attributes", () => { @@ -115,7 +115,7 @@ describe("FieldSwitch.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.querySelector("input"); }); diff --git a/test/unit/specs/fields/fieldText.spec.js b/test/unit/specs/fields/fieldText.spec.js index 7eee3c8d..371f1adb 100644 --- a/test/unit/specs/fields/fieldText.spec.js +++ b/test/unit/specs/fields/fieldText.spec.js @@ -8,11 +8,11 @@ Vue.component("FieldText", FieldText); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldText", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldText", schema, model, disabled, options); } -describe("fieldText.vue", () => { +describe("fieldText.vue", function() { describe("check template", () => { let schema = { @@ -26,7 +26,7 @@ describe("fieldText.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("input")[0]; }); diff --git a/test/unit/specs/fields/fieldTextArea.spec.js b/test/unit/specs/fields/fieldTextArea.spec.js index dfcb8fa4..de475870 100644 --- a/test/unit/specs/fields/fieldTextArea.spec.js +++ b/test/unit/specs/fields/fieldTextArea.spec.js @@ -8,12 +8,12 @@ Vue.component("FieldTextArea", FieldTextArea); let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldTextArea", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldTextArea", schema, model, disabled, options); } -describe("fieldTextArea.vue", () => { +describe("fieldTextArea.vue", function() { describe("check template", () => { let schema = { @@ -28,7 +28,7 @@ describe("fieldTextArea.vue", () => { let input; before( () => { - createField(schema, model, false); + createField(this, schema, model, false); input = el.getElementsByTagName("textarea")[0]; }); diff --git a/test/unit/specs/fields/fieldVueMultiSelect.spec.js b/test/unit/specs/fields/fieldVueMultiSelect.spec.js index 8fa1a389..5f4cda32 100644 --- a/test/unit/specs/fields/fieldVueMultiSelect.spec.js +++ b/test/unit/specs/fields/fieldVueMultiSelect.spec.js @@ -9,11 +9,11 @@ Vue.component("fieldVueMultiSelect", fieldVueMultiSelect); // eslint-disable-next-line let el, vm, field; -function createField(schema = {}, model = null, disabled = false, options) { - [ el, vm, field ] = createVueField("fieldVueMultiSelect", schema, model, disabled, options); +function createField(test, schema = {}, model = null, disabled = false, options) { + [ el, vm, field ] = createVueField(test, "fieldVueMultiSelect", schema, model, disabled, options); } -describe("fieldVueMultiSelect.vue", () => { +describe("fieldVueMultiSelect.vue", function() { describe("check template", () => { let schema = { @@ -34,8 +34,7 @@ describe("fieldVueMultiSelect.vue", () => { let input; before( () => { - createField(schema, model, false); - vm.$appendTo(document.body); + createField(this, schema, model, false); input = el.querySelector(".multiselect"); }); diff --git a/test/unit/specs/util.js b/test/unit/specs/util.js index d704f204..ab16d9c1 100644 --- a/test/unit/specs/util.js +++ b/test/unit/specs/util.js @@ -17,9 +17,20 @@ export function trigger (el, event, args) { } } -export function createVueField(type, schema = {}, model = null, disabled = false, options) { +export function createVueField(test, type, schema = {}, model = null, disabled = false, options) { let elName = Vue.util.hyphenate(type); - let el = document.createElement("div"); + + let container = document.createElement("div"); + container.className = "test-unit"; + document.body.appendChild(container); + + let h2 = document.createElement("h2"); + h2.textContent = test ? "Test: " + test.title : "Test case"; + container.appendChild(h2); + + let el = document.createElement("fieldset"); + el.className = "vue-form-generator"; + container.appendChild(el); el.innerHTML = `<${elName} :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field>`; let vm = new Vue({ el: el, @@ -31,6 +42,6 @@ export function createVueField(type, schema = {}, model = null, disabled = false } }); let field = vm.$refs.field; - + return [ el, vm, field ]; } \ No newline at end of file diff --git a/test/unit/style.scss b/test/unit/style.scss new file mode 100644 index 00000000..bbce1de0 --- /dev/null +++ b/test/unit/style.scss @@ -0,0 +1,36 @@ +html { + background: #CCC; + font-family: Arial, Tahoma; + font-size: 14px; + +} + +* { + box-sizing: border-box; +} + +.test-unit { + min-width: 22%; + display: inline-block; + vertical-align: top; + margin: 10px; + padding: 10px; + + border: 1px solid #888; + border-radius: 8px; + + background: #EEE; + + h2 { + margin: 0; + border-bottom: 1px solid #888; + margin-bottom: 10px; + font-size: 14px; + } + + fieldset { + margin: 0; + padding: 0; + border: 0; + } +} \ No newline at end of file