Test 1. version.

Author: hansi90

test/unit/specs/fields/fieldSelect.spec.js

@@ -9,11 +9,11 @@ Vue.component("FieldSelect", FieldSelect);
 let el, vm, field;
 
 function createField(test, schema = {}, model = null, disabled = false, options) {
-	[ el, vm, field ] = createVueField(test, "fieldSelect", schema, model, disabled, options);
+	[el, vm, field] = createVueField(test, "fieldSelect", schema, model, disabled, options);
 }
 
 
-describe("fieldSelect.vue", function() {
+describe("fieldSelect.vue", function () {
 
 	describe("check template", () => {
 		let schema = {
@@ -31,7 +31,7 @@ describe("fieldSelect.vue", function() {
 		let model = { city: "Paris" };
 		let input;
 
-		before( () => {
+		before(() => {
 			createField(this, schema, model, false);
 			input = el.getElementsByTagName("select")[0];
 		});
@@ -60,7 +60,7 @@ describe("fieldSelect.vue", function() {
 		});
 
 		it("should contain the value", (done) => {
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("Paris");
 				done();
 			});
@@ -69,16 +69,16 @@ describe("fieldSelect.vue", function() {
 		describe("check optional attribute", () => {
 			let attributes = ["disabled", "inputName"];
 
-			attributes.forEach(function(name) {
-				it("should set " + name, function(done) {
+			attributes.forEach(function (name) {
+				it("should set " + name, function (done) {
 					checkAttribute(name, vm, input, field, schema, done);
 				});
 			});
 		});
 
 		it("input value should be the model value after changed", (done) => {
 			model.city = "Rome";
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("Rome");
 				done();
 			});
@@ -89,7 +89,7 @@ describe("fieldSelect.vue", function() {
 			input.value = "London";
 			trigger(input, "change");
 
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(model.city).to.be.equal("London");
 				done();
 			});
@@ -98,7 +98,7 @@ describe("fieldSelect.vue", function() {
 
 		it("should contain a disabled <non selected> element if required", (done) => {
 			schema.required = true;
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				let options = input.querySelectorAll("option");
 				expect(options[0].disabled).to.be.true;
 				expect(options[0].textContent).to.be.equal("<Nothing selected>");
@@ -110,7 +110,7 @@ describe("fieldSelect.vue", function() {
 			Vue.set(vm.schema, "selectOptions", {
 				noneSelectedText: "Empty list"
 			});
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				let options = input.querySelectorAll("option");
 				expect(options[0].disabled).to.be.true;
 				expect(options[0].textContent).to.be.equal("Empty list");
@@ -126,7 +126,7 @@ describe("fieldSelect.vue", function() {
 				noneSelectedText: "Empty list",
 				hideNoneSelectedText: true
 			});
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				let options = input.querySelectorAll("option");
 				expect(options[0].disabled).to.be.false;
 				expect(options[0].textContent).to.not.be.equal("Empty list");
@@ -148,37 +148,57 @@ describe("fieldSelect.vue", function() {
 				{ id: 1, name: "London" },
 				{ id: 2, name: "Paris" },
 				{ id: 3, name: "Rome" },
-				{ id: 4, name: "Berlin" }
+				{ id: 4, name: "Berlin" },
+				{ id: 5, name: "Budapest", group: "HUN" },
+				{ id: 6, name: "Paks", group: "HUN" },
 			]
 		};
 		let model = { city: 2 };
 		let input;
 
-		before( () => {
+		before(() => {
 			createField(this, 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 + 1); // +1 for <non selected>
+			expect(options.length).to.be.equal(6 + 1); // +1 for <non selected>
 
 			expect(options[2].value).to.be.equal("2");
 			expect(options[2].textContent).to.be.equal("Paris");
 			expect(options[2].selected).to.be.true;
 			expect(options[1].selected).to.be.false;
 		});
 
+		it("should contain optgroup elements", () => {
+			let optgroups = input.querySelectorAll("optgroup");
+			expect(optgroups.length).to.be.equal(1);
+			expect(optgroups[0].label).to.be.equal("HUN");
+		});
+
+		it("should contain option elements in optgroup", () => {
+			let og = input.getElementsByTagName("optgroup")[0]
+			let options = og.querySelectorAll("option");
+
+			expect(options.length).to.be.equal(2);
+			expect(options[0].selected).to.be.false;
+			expect(options[1].selected).to.be.false;
+
+			expect(options[1].textContent).to.be.equal("Paks");
+			expect(options[1].value).to.be.equal("6");
+		});
+
 		it("should contain the value", (done) => {
-			vm.$nextTick( () => {
+			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( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("3");
 				done();
 			});
@@ -189,7 +209,7 @@ describe("fieldSelect.vue", function() {
 			input.value = "4";
 			trigger(input, "change");
 
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(model.city).to.be.equal(4);
 				done();
 			});
@@ -215,21 +235,21 @@ describe("fieldSelect.vue", function() {
 		let model = { city: 2 };
 		let input;
 
-		before( () => {
+		before(() => {
 			createField(this, schema, model, false);
 			input = el.getElementsByTagName("select")[0];
 		});
 
 		it("should contain the value", (done) => {
-			vm.$nextTick( () => {
+			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( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("3");
 				done();
 			});
@@ -240,7 +260,7 @@ describe("fieldSelect.vue", function() {
 			input.value = "4";
 			trigger(input, "change");
 
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(model.city).to.be.equal(4);
 				done();
 			});