Merge pull request #46 from lionel-bijaoui/LB_vueMultiSelect_unit_test

VueMultiSelect unit test

Author: icebob

dev/schema.js

@@ -222,9 +222,9 @@ module.exports = {
     			numeralDecimalScale: 2,
     			numeralDecimalMark: '.',
     			// General
-    			blocks: [0, 2, 3, 4],
+    			blocks: [0, 2, 0, 3, 4],
     			delimiter: ' ',
-    			delimiters: ['(', ') ', '-', '-'],
+    			delimiters: ['(', ')', ' ', '-', '-'],
     			// prefix: '(',
     			numericOnly: true,
     			uppercase: false,
@@ -406,6 +406,16 @@ module.exports = {
 				// direction: "ltr", //"ltr", "rtl"
 				// tooltips: false, // false, true, formatter, array[formatter or false]
 				// animate: true,
+				range:{
+					'min': [  0 ],
+					'max': [ 10 ]
+				},
+				pips: {
+					mode: 'count',
+					values: 6,
+					density: 10,
+					stepped: true
+				}
 			},
 			// validator: validators.integer
 		},

src/fields/fieldNoUiSlider.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	div.slider
+	div.slider(:disabled="disabled")
 </template>
 
 <script>

src/fields/fieldVueMultiSelect.vue

@@ -17,7 +17,7 @@
 		:custom-label="schema.selectOptions.customLabel || null",
 		:taggable="schema.selectOptions.taggable",
 		:tag-placeholder="schema.selectOptions.tagPlaceholder",
-		:max="schema.max",
+		:max="schema.max || null",
 		@update="updateSelected",
 		@tag="addTag",
 		@select="onSelect",
@@ -33,7 +33,7 @@
 		:limit="schema.selectOptions.limit",
 		:limit-text="schema.selectOptions.limitText",
 		:loading="schema.selectOptions.loading",
-		:disabled="schema.disabled",
+		:disabled="disabled",
 	)
 </template>
 <script>

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

@@ -36,7 +36,71 @@ describe("fieldNoUiSlider.vue", () => {
 			expect(field.$el).to.be.exist;
 
 			expect(input).to.be.defined;
-			expect(input.classList.contains("slider")).to.be.true;			
+			expect(input.classList.contains("slider")).to.be.true;
+			expect(input.disabled).to.be.undefined;
+		});
+
+		before( () => {
+			vm.$appendTo(document.body);
+		});
+
+		it("should contain an handle element", (done) => {
+			if (window.noUiSlider) {
+				vm.$nextTick( () => {
+					let handle = input.querySelector(".noUi-handle");
+					expect(handle).to.be.defined;
+					// expect(input.classList.contains("noui-target")).to.be.true;
+					done();
+				});
+			} else {
+				// eslint-disable-next-line
+				throw new Exception("Library is not loaded");
+			}
+		});
+
+		it.skip("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				let origin = input.querySelector(".noUi-origin");				
+				expect(origin.style.left).to.be.within("70%", "90%");
+				done();
+			});
+		});
+
+		before( () => {
+			vm.model = { rating: 10 };
+		});
+
+		it("handle value should be the model value after changed", (done) => {
+			vm.$nextTick( () => {
+				let origin = input.querySelector(".noUi-origin");				
+				expect(origin.style.left).to.be.equal("100%");				
+				done();
+			});
+		});
+
+		// before( (done) => {
+		// 	input.querySelectorAll(".noUi-origin")[0].style.left = "0%";
+		// 	vm.$nextTick( () => {
+		// 		done();
+		// 	});
+		// });
+
+		it.skip("model value should be the handle value after changed", (done) => {
+			vm.$nextTick( () => {
+				expect(vm.model.rating).to.be.equal("0");				
+				done();
+			});
+		});
+		
+		it.skip("should set disabled", (done) => {			
+			console.log(field.disabled);
+			console.log(input);
+			vm.schema.disabled = true;
+			vm.$nextTick( () => {
+				console.log(input);
+				expect(input.disabled).to.be.true;
+				done();
+			});
 		});
 	});
 });

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

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { createVueField } from "../util";
+import { createVueField, trigger } from "../util";
 
 import Vue from "vue";
 import fieldVueMultiSelect from "src/fields/fieldVueMultiSelect.vue";
@@ -20,7 +20,7 @@ describe("fieldVueMultiSelect.vue", () => {
 			type: "vueMultiSelect",
 			label: "Cities",
 			model: "city",
-			multiSelect: false,
+			multiSelect: true,
 			required: false,
 			values: [
 				"London",
@@ -35,16 +35,69 @@ describe("fieldVueMultiSelect.vue", () => {
 
 		before( () => {
 			createField(schema, model, false);
-			input = el.getElementsByTagName("select")[0];
+			vm.$appendTo(document.body);
+			input = el.querySelector(".multiselect");
 		});
 
 		it("should contain a 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.false;
-			// expect(input.disabled).to.be.false;	
+			expect(input.classList.contains("form-control")).to.be.false;
+			expect(input.classList.contains("multiselect--disabled")).to.be.false;
+		});
+
+		it("should contain option elements", () => {					
+			let options = input.querySelectorAll("li.multiselect__option");			
+			expect(options.length).to.be.equal(schema.values.length);
+			expect(options[1].querySelector("span").textContent).to.be.equal("Paris");
+			expect(options[1].classList.contains("multiselect__option--selected")).to.be.true;
+		});
+
+		it("should set disabled", (done) => {
+			field.disabled = true;
+			vm.$nextTick( () => {
+				expect(input.classList.contains("multiselect--disabled")).to.be.true;
+				field.disabled = false;
+				done();
+			});
+		});
+
+		it("input value should be the model value after changed", (done) => {
+			model.city = "Rome";
+			vm.$nextTick( () => {
+				expect(input.querySelectorAll("li.multiselect__option--selected").length).to.be.equal(1);
+				let options = input.querySelectorAll("li.multiselect__option");			
+				expect(options[2].querySelector("span").textContent).to.be.equal("Rome");
+				expect(options[2].classList.contains("multiselect__option--selected")).to.be.true;	
+				done();
+			});
+		});
+
+		it("input value should be the model value after changed (multiselection)", (done) => {
+			model.city = ["Paris","Rome"];
+			vm.$nextTick( () => {
+				expect(input.querySelectorAll("li.multiselect__option--selected").length).to.be.equal(2);
+				let options = input.querySelectorAll("li.multiselect__option");
+				expect(options[1].querySelector("span").textContent).to.be.equal("Paris");
+				expect(options[1].classList.contains("multiselect__option--selected")).to.be.true;	
+				expect(options[2].querySelector("span").textContent).to.be.equal("Rome");
+				expect(options[2].classList.contains("multiselect__option--selected")).to.be.true;	
+				done();
+			});
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			let options = input.querySelectorAll("li.multiselect__option");
+			trigger(options[2], "mousedown");			
+			
+			vm.$nextTick( () => {
+				expect(model.city.length).to.be.equal(1);
+				expect(model.city[0]).to.be.equal("Paris");
+				done();
+			});
+
 		});
 	});
 });