From adb4f88674aa267e6903c248cda02f8ce05dd61b Mon Sep 17 00:00:00 2001
From: Icebob <mereg.norbert@gmail.com>
Date: Mon, 9 May 2016 13:03:16 +0200
Subject: [PATCH] :white_check_mark: test: Add field test cases

---
 src/fields/fieldCheckbox.vue                 |   2 +-
 src/fields/fieldEmail.vue                    |   2 +-
 src/fields/fieldNumber.vue                   |   2 +-
 src/fields/fieldTextArea.vue                 |   2 +-
 test/unit/specs/fields/abstractField.spec.js |   2 +-
 test/unit/specs/fields/fieldCheckbox.spec.js | 100 +++++++++
 test/unit/specs/fields/fieldEmail.spec.js    | 103 +++++++++
 test/unit/specs/fields/fieldNumber.spec.js   | 107 +++++++++
 test/unit/specs/fields/fieldPassword.spec.js | 103 +++++++++
 test/unit/specs/fields/fieldSelect.spec.js   | 215 +++++++++++++++++++
 test/unit/specs/fields/fieldText.spec.js     | 103 +++++++++
 test/unit/specs/fields/fieldTextArea.spec.js | 113 ++++++++++
 test/unit/specs/util.js                      |  14 ++
 13 files changed, 863 insertions(+), 5 deletions(-)
 create mode 100644 test/unit/specs/fields/fieldCheckbox.spec.js
 create mode 100644 test/unit/specs/fields/fieldEmail.spec.js
 create mode 100644 test/unit/specs/fields/fieldNumber.spec.js
 create mode 100644 test/unit/specs/fields/fieldPassword.spec.js
 create mode 100644 test/unit/specs/fields/fieldSelect.spec.js
 create mode 100644 test/unit/specs/fields/fieldText.spec.js
 create mode 100644 test/unit/specs/fields/fieldTextArea.spec.js
 create mode 100644 test/unit/specs/util.js

diff --git a/src/fields/fieldCheckbox.vue b/src/fields/fieldCheckbox.vue
index 6eb9eda3..6601ec01 100644
--- a/src/fields/fieldCheckbox.vue
+++ b/src/fields/fieldCheckbox.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="checkbox", :disabled="disabled", v-model="value")
+	input(type="checkbox", v-model="value", :readonly="schema.readonly", :disabled="disabled")
 </template>
 
 <script>
diff --git a/src/fields/fieldEmail.vue b/src/fields/fieldEmail.vue
index f0ce61c1..bd6f033f 100644
--- a/src/fields/fieldEmail.vue
+++ b/src/fields/fieldEmail.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="email", v-model="value", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="email", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
 </template>
 
 <script>
diff --git a/src/fields/fieldNumber.vue b/src/fields/fieldNumber.vue
index 8e68eeb3..6a041014 100644
--- a/src/fields/fieldNumber.vue
+++ b/src/fields/fieldNumber.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="number", v-model="value", number, :min="schema.min", :max="schema.max", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="number", v-model="value", number, :min="schema.min", :max="schema.max", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
 </template>
 
 <script>
diff --git a/src/fields/fieldTextArea.vue b/src/fields/fieldTextArea.vue
index 80e0e0d8..b84414c6 100644
--- a/src/fields/fieldTextArea.vue
+++ b/src/fields/fieldTextArea.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	textarea.form-control(v-model="value", :rows="schema.rows || 2", :placeholder="schema.placeholder", :disabled="disabled", :maxlength="schema.max")
+	textarea.form-control(v-model="value", :rows="schema.rows || 2", :readonly="schema.readonly", :placeholder="schema.placeholder", :disabled="disabled", :maxlength="schema.max")
 </template>
 
 <script>
diff --git a/test/unit/specs/fields/abstractField.spec.js b/test/unit/specs/fields/abstractField.spec.js
index 83ab7bc4..0136a9d4 100644
--- a/test/unit/specs/fields/abstractField.spec.js
+++ b/test/unit/specs/fields/abstractField.spec.js
@@ -27,7 +27,7 @@ function createField(schema = {}, model = null, disabled = false, options) {
 	return [el, vm];
 }
 
-describe("abstractField", () => {
+describe("abstractField.vue", () => {
 
 	describe("check static value", () => {
 		let schema = {
diff --git a/test/unit/specs/fields/fieldCheckbox.spec.js b/test/unit/specs/fields/fieldCheckbox.spec.js
new file mode 100644
index 00000000..d866a5ed
--- /dev/null
+++ b/test/unit/specs/fields/fieldCheckbox.spec.js
@@ -0,0 +1,100 @@
+import { expect } from "chai";
+import { trigger } from "../util";
+
+import Vue from "vue";
+import FieldCheckbox from "src/fields/fieldCheckbox.vue";
+
+Vue.component("FieldCheckbox", FieldCheckbox);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	el = document.createElement("div");		
+	el.innerHTML = `<field-checkbox :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-checkbox>`;
+	vm = new Vue({
+		el: el,
+		data: {
+			schema,
+			model,
+			disabled,
+			options
+		}
+	});
+
+	field = vm.$refs.field;
+	//console.log(el);
+}
+
+describe("FieldCheckbox.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "checkbox",
+			label: "Status",
+			model: "status",
+			readonly: false
+		};
+		let model = { status: true };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("input")[0];
+		});
+
+		it("should contain az 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("checkbox");
+			expect(input.readOnly).to.be.false;	
+			expect(input.disabled).to.be.false;	
+		});
+
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				expect(input.checked).to.be.true;	
+				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.status = false;
+			vm.$nextTick( () => {
+				expect(input.checked).to.be.false;	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.checked = true;
+			trigger(input, "change");
+
+			vm.$nextTick( () => {
+				expect(model.status).to.be.true;	
+				done();
+			});
+
+		});
+
+	});
+
+});
\ No newline at end of file
diff --git a/test/unit/specs/fields/fieldEmail.spec.js b/test/unit/specs/fields/fieldEmail.spec.js
new file mode 100644
index 00000000..86196250
--- /dev/null
+++ b/test/unit/specs/fields/fieldEmail.spec.js
@@ -0,0 +1,103 @@
+import { expect } from "chai";
+import { trigger } from "../util";
+
+import Vue from "vue";
+import FieldEmail from "src/fields/fieldEmail.vue";
+
+Vue.component("FieldEmail", FieldEmail);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	el = document.createElement("div");		
+	el.innerHTML = `<field-email :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-email>`;
+	vm = new Vue({
+		el: el,
+		data: {
+			schema,
+			model,
+			disabled,
+			options
+		}
+	});
+
+	field = vm.$refs.field;
+	//console.log(el);
+}
+
+describe("fieldEmail.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "text",
+			label: "E-mail",
+			model: "email",
+			readonly: false,
+			placeholder: "Field placeholder"
+		};
+		let model = { email: "john.doe@company.org" };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("input")[0];
+		});
+
+		it("should contain az input email element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(input).to.be.defined;
+			expect(input.type).to.be.equal("email");
+			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("john.doe@company.org");	
+				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.email = "john.doe@gmail.com";
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("john.doe@gmail.com");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "john.smith@company.org";
+			trigger(input, "input");
+
+			vm.$nextTick( () => {
+				expect(model.email).to.be.equal("john.smith@company.org");	
+				done();
+			});
+
+		});
+
+	});
+
+});
\ No newline at end of file
diff --git a/test/unit/specs/fields/fieldNumber.spec.js b/test/unit/specs/fields/fieldNumber.spec.js
new file mode 100644
index 00000000..af952ab5
--- /dev/null
+++ b/test/unit/specs/fields/fieldNumber.spec.js
@@ -0,0 +1,107 @@
+import { expect } from "chai";
+import { trigger } from "../util";
+
+import Vue from "vue";
+import FieldNumber from "src/fields/fieldNumber.vue";
+
+Vue.component("FieldNumber", FieldNumber);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	el = document.createElement("div");		
+	el.innerHTML = `<field-number :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-number>`;
+	vm = new Vue({
+		el: el,
+		data: {
+			schema,
+			model,
+			disabled,
+			options
+		}
+	});
+
+	field = vm.$refs.field;
+	//console.log(el);
+}
+
+describe("fieldNumber.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "number",
+			label: "Age",
+			model: "age",
+			readonly: false,
+			min: 18,
+			max: 100,
+			placeholder: "Field placeholder"
+		};
+		let model = { age: 27 };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("input")[0];
+		});
+
+		it("should contain az input number element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(input).to.be.defined;
+			expect(input.type).to.be.equal("number");
+			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.min).to.be.equal("18");	
+			expect(input.max).to.be.equal("100");	
+			expect(input.disabled).to.be.false;	
+		});
+
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("27");	
+				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.age = 35;
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("35");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "50";
+			trigger(input, "input");
+
+			vm.$nextTick( () => {
+				expect(model.age).to.be.equal(50);	
+				done();
+			});
+
+		});
+
+	});
+
+});
\ No newline at end of file
diff --git a/test/unit/specs/fields/fieldPassword.spec.js b/test/unit/specs/fields/fieldPassword.spec.js
new file mode 100644
index 00000000..a141ffd2
--- /dev/null
+++ b/test/unit/specs/fields/fieldPassword.spec.js
@@ -0,0 +1,103 @@
+import { expect } from "chai";
+import { trigger } from "../util";
+
+import Vue from "vue";
+import FieldPassword from "src/fields/fieldPassword.vue";
+
+Vue.component("FieldPassword", FieldPassword);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	el = document.createElement("div");		
+	el.innerHTML = `<field-password :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-password>`;
+	vm = new Vue({
+		el: el,
+		data: {
+			schema,
+			model,
+			disabled,
+			options
+		}
+	});
+
+	field = vm.$refs.field;
+	//console.log(el);
+}
+
+describe("fieldPassword.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "password",
+			label: "Password",
+			model: "password",
+			readonly: false,
+			placeholder: "Field placeholder"
+		};
+		let model = { password: "123456!" };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("input")[0];
+		});
+
+		it("should contain az input password element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(input).to.be.defined;
+			expect(input.type).to.be.equal("password");
+			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("123456!");	
+				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.password = "J0hnD03!x4";
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("J0hnD03!x4");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "pass 1234&";
+			trigger(input, "input");
+
+			vm.$nextTick( () => {
+				expect(model.password).to.be.equal("pass 1234&");	
+				done();
+			});
+
+		});
+
+	});
+
+});
\ No newline at end of file
diff --git a/test/unit/specs/fields/fieldSelect.spec.js b/test/unit/specs/fields/fieldSelect.spec.js
new file mode 100644
index 00000000..870272aa
--- /dev/null
+++ b/test/unit/specs/fields/fieldSelect.spec.js
@@ -0,0 +1,215 @@
+import { expect } from "chai";
+import { trigger } from "../util";
+
+import Vue from "vue";
+import FieldSelect from "src/fields/fieldSelect.vue";
+
+Vue.component("FieldSelect", FieldSelect);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	el = document.createElement("div");		
+	el.innerHTML = `<field-select :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-select>`;
+	vm = new Vue({
+		el: el,
+		data: {
+			schema,
+			model,
+			disabled,
+			options
+		}
+	});
+
+	field = vm.$refs.field;
+	//console.log(el);
+}
+
+describe.only("fieldSelect.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "select",
+			label: "Cities",
+			model: "city",
+			values: [
+				"London",
+				"Paris",
+				"Rome",
+				"Berlin"
+			]
+		};
+		let model = { city: "Paris" };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("select")[0];
+		});
+
+		it("should contain an select 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.disabled).to.be.false;	
+		});
+
+		it("should contain option elements", () => {
+			let options = input.querySelectorAll("option");
+			expect(options.length).to.be.equal(4);
+
+			expect(options[1].value).to.be.equal("Paris");
+			expect(options[1].textContent).to.be.equal("Paris");
+			expect(options[1].selected).to.be.true;
+		});
+
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("Paris");	
+				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.city = "Rome";
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("Rome");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "London";
+			trigger(input, "change");
+
+			vm.$nextTick( () => {
+				expect(model.city).to.be.equal("London");	
+				done();
+			});
+
+		});
+
+	});
+
+	describe("check static values with { id, name } objects", () => {
+		let schema = {
+			type: "select",
+			label: "Cities",
+			model: "city",
+			values: [
+				{ id: 1, name: "London" },
+				{ id: 2, name: "Paris" },
+				{ id: 3, name: "Rome" },
+				{ id: 4, name: "Berlin" }
+			]
+		};
+		let model = { city: 2 };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("select")[0];
+		});
+
+		it("should contain option elements", () => {
+			let options = input.querySelectorAll("option");
+			expect(options.length).to.be.equal(4);
+
+			expect(options[1].value).to.be.equal("2");
+			expect(options[1].textContent).to.be.equal("Paris");
+			expect(options[1].selected).to.be.true;
+			expect(options[0].selected).to.be.false;
+		});		
+
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("2");	
+				done();
+			});
+		});
+
+		it("input value should be the model value after changed", (done) => {
+			model.city = 3;
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("3");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "4";
+			trigger(input, "change");
+
+			vm.$nextTick( () => {
+				expect(model.city).to.be.equal(4);	
+				done();
+			});
+
+		});
+
+	});
+
+	describe("check function values", () => {
+		let schema = {
+			type: "select",
+			label: "Cities",
+			model: "city",
+			values() {
+				return [
+					{ id: 1, name: "London" },
+					{ id: 2, name: "Paris" },
+					{ id: 3, name: "Rome" },
+					{ id: 4, name: "Berlin" }
+				]
+			}
+		};
+		let model = { city: 2 };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("select")[0];
+		});
+
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("2");	
+				done();
+			});
+		});
+
+		it("input value should be the model value after changed", (done) => {
+			model.city = 3;
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("3");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "4";
+			trigger(input, "change");
+
+			vm.$nextTick( () => {
+				expect(model.city).to.be.equal(4);	
+				done();
+			});
+
+		});
+
+	});	
+
+});
\ No newline at end of file
diff --git a/test/unit/specs/fields/fieldText.spec.js b/test/unit/specs/fields/fieldText.spec.js
new file mode 100644
index 00000000..2748d75f
--- /dev/null
+++ b/test/unit/specs/fields/fieldText.spec.js
@@ -0,0 +1,103 @@
+import { expect } from "chai";
+import { trigger } from "../util";
+
+import Vue from "vue";
+import FieldText from "src/fields/fieldText.vue";
+
+Vue.component("FieldText", FieldText);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	el = document.createElement("div");		
+	el.innerHTML = `<field-text :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-text>`;
+	vm = new Vue({
+		el: el,
+		data: {
+			schema,
+			model,
+			disabled,
+			options
+		}
+	});
+
+	field = vm.$refs.field;
+	//console.log(el);
+}
+
+describe("fieldText.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "text",
+			label: "Name",
+			model: "name",
+			readonly: false,
+			placeholder: "Field placeholder"
+		};
+		let model = { name: "John Doe" };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("input")[0];
+		});
+
+		it("should contain az 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("John Doe");	
+				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.name = "Jane Doe";
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("Jane Doe");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "John Smith";
+			trigger(input, "input");
+
+			vm.$nextTick( () => {
+				expect(model.name).to.be.equal("John Smith");	
+				done();
+			});
+
+		});
+
+	});
+
+});
\ No newline at end of file
diff --git a/test/unit/specs/fields/fieldTextArea.spec.js b/test/unit/specs/fields/fieldTextArea.spec.js
new file mode 100644
index 00000000..02a1636b
--- /dev/null
+++ b/test/unit/specs/fields/fieldTextArea.spec.js
@@ -0,0 +1,113 @@
+import { expect } from "chai";
+import { trigger } from "../util";
+
+import Vue from "vue";
+import FieldTextArea from "src/fields/fieldTextArea.vue";
+
+Vue.component("FieldTextArea", FieldTextArea);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	el = document.createElement("div");		
+	el.innerHTML = `<field-text-area :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-text-area>`;
+	vm = new Vue({
+		el: el,
+		data: {
+			schema,
+			model,
+			disabled,
+			options
+		}
+	});
+
+	field = vm.$refs.field;
+	console.log(el);
+}
+
+describe("fieldTextArea.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "textarea",
+			label: "Description",
+			model: "desc",
+			readonly: false,
+			placeholder: "Field placeholder",
+			max: 500
+		};
+		let model = { desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("textarea")[0];
+		});
+
+		it("should contain az 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.placeholder).to.be.equal(schema.placeholder);	
+			expect(input.readOnly).to.be.false;	
+			expect(input.disabled).to.be.false;	
+			expect(input.rows).to.be.equal(2);	// default value is 2
+			expect(input.maxLength).to.be.equal(500);	
+		});
+
+		it("should change rows to 4", (done) => {
+			field.$set("schema.rows", 4); // To be reactive
+			vm.$nextTick( () => {
+				expect(input.rows).to.be.equal(4);	
+				done();
+			});
+		});
+
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal(model.desc);	
+				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.desc = "Jane Doe";
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("Jane Doe");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "John Smith";
+			trigger(input, "input");
+
+			vm.$nextTick( () => {
+				expect(model.desc).to.be.equal("John Smith");	
+				done();
+			});
+
+		});
+
+	});
+
+});
\ No newline at end of file
diff --git a/test/unit/specs/util.js b/test/unit/specs/util.js
new file mode 100644
index 00000000..1c0de1ad
--- /dev/null
+++ b/test/unit/specs/util.js
@@ -0,0 +1,14 @@
+export function trigger (el, event, args) {
+	let e = document.createEvent('HTMLEvents')
+	e.initEvent(event, true, false)
+
+	if (args) {
+		for (let prop in args) {
+			e[prop] = args[prop]
+		}
+	}
+
+	// Due to Firefox bug, events fired on disabled
+	// non-attached form controls can throw errors
+	try { el.dispatchEvent(e) } catch (e) {}
+}
\ No newline at end of file