Improve test coverage

awesomplete.js

@@ -46,7 +46,7 @@ var _ = function (input, o) {
 	});
 
 	this.ul = $.create("ul", {
-		hidden: "",
+		hidden: "hidden",
 		inside: this.container
 	});
 
@@ -102,8 +102,8 @@ var _ = function (input, o) {
 	}});
 
 	if (this.input.hasAttribute("list")) {
-		this.list = "#" + input.getAttribute("list");
-		input.removeAttribute("list");
+		this.list = "#" + this.input.getAttribute("list");
+		this.input.removeAttribute("list");
 	}
 	else {
 		this.list = this.input.getAttribute("data-list") || o.list || [];

karma.conf.js

@@ -5,12 +5,17 @@ module.exports = function(config) {
 
 		// frameworks to use
 		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-		frameworks: ['jasmine'],
+		frameworks: ['jasmine', 'jasmine-def', 'fixture'],
 
 		// list of files / patterns to load in the browser
 		files: [
 			'awesomplete.js',
-      'test/**/*Shared.js',
+			'test/specHelper.js',
+			{
+				pattern: 'test/fixtures/**/*.html',
+				watched: true, included: true, served: true
+			},
+			'test/**/*Shared.js',
 			'test/**/*Spec.js'
 		],
 
@@ -22,12 +27,13 @@ module.exports = function(config) {
 		// preprocess matching files before serving them to the browser
 		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
 		preprocessors: {
+			'**/*.html' : ['html2js']
 		},
 
 		// test results reporter to use
 		// possible values: 'dots', 'progress'
 		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
-		reporters: ['progress'],
+		reporters: ['dots'],
 
 		// web server port
 		port: 9876,

package.json

@@ -15,9 +15,11 @@
   "homepage": "https://leaverou.github.io/awesomplete/",
   "devDependencies": {
     "jasmine-core": "^2.3.0",
-    "karma": "^0.12.31",
-    "karma-chrome-launcher": "^0.1.8",
-    "karma-jasmine": "^0.3.5",
-    "karma-phantomjs-launcher": "^0.1.4"
+    "karma": "^0.13.15",
+    "karma-chrome-launcher": "^0.2.1",
+    "karma-fixture": "^0.2.5",
+    "karma-html2js-preprocessor": "^0.1.0",
+    "karma-jasmine": "^0.3.6",
+    "karma-jasmine-def": "^0.1.0"
   }
 }

test/api/closeSpec.js

@@ -0,0 +1,30 @@
+describe("awesomplete.close", function () {
+
+	$.fixture("plain");
+
+	subject(function () { return new Awesomplete("#plain") });
+
+	beforeEach(function () {
+		this.subject.open();
+		this.subject.next();
+	});
+
+	it("closes completer", function () {
+		this.subject.close();
+		expect(this.subject.ul.hasAttribute("hidden")).toBe(true);
+	});
+
+	it("makes no item selected", function () {
+		this.subject.close();
+
+		expect(this.subject.selected).toBe(false);
+		expect(this.subject.index).toBe(-1);
+	});
+
+	it("fires awesomplete-close event", function () {
+		var handler = $.spyOnEvent(this.subject.input, "awesomplete-close");
+		this.subject.close();
+
+		expect(handler).toHaveBeenCalled();
+	});
+});

test/api/evaluateSpec.js

@@ -0,0 +1,57 @@
+describe("awesomplete.evaluate", function () {
+
+	$.fixture("plain");
+
+	subject(function () {
+		return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] });
+	});
+
+	describe("with too short input value", function () {
+		beforeEach(function () {
+			$.type(this.subject.input, "i");
+		});
+
+		it("closes completer", function () {
+			spyOn(this.subject, "close");
+			this.subject.evaluate();
+
+			expect(this.subject.close).toHaveBeenCalled();
+		});
+	});
+
+	describe("with no items found", function () {
+		beforeEach(function () {
+			$.type(this.subject.input, "nosuchitem");
+		});
+
+		it("closes completer", function () {
+			spyOn(this.subject, "close");
+			this.subject.evaluate();
+
+			expect(this.subject.close).toHaveBeenCalled();
+		});
+	});
+
+	describe("with some items found", function () {
+		beforeEach(function () {
+			$.type(this.subject.input, "ite");
+		});
+
+		it("opens completer", function () {
+			spyOn(this.subject, "open");
+			this.subject.evaluate();
+
+			expect(this.subject.open).toHaveBeenCalled();
+		});
+
+		it("fills completer with found items", function () {
+			this.subject.evaluate();
+			expect(this.subject.ul.children.length).toBe(3);
+		});
+
+		it("makes no item selected", function () {
+			this.subject.evaluate();
+			expect(this.subject.selected).toBe(false);
+		});
+	});
+});

test/api/gotoSpec.js

@@ -0,0 +1,64 @@
+describe("awesomplete.goto", function () {
+
+	$.fixture("plain");
+
+	subject(function () {
+		return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] });
+	});
+
+	def("firstIndex", function () { return 0 });
+	def("lastIndex", function () { return this.subject.ul.children.length - 1 });
+
+	beforeEach(function () {
+		$.type(this.subject.input, "ite");
+	});
+
+	it("clears previous aria-selected", function () {
+		this.subject.goto(this.firstIndex);
+		this.subject.goto(this.lastIndex);
+
+		expect(this.subject.ul.children[this.firstIndex].getAttribute("aria-selected")).toBe("false");
+	});
+
+	it("goes to first item", function () {
+		this.subject.goto(this.firstIndex);
+		expect(this.subject.index).toBe(this.firstIndex);
+	});
+
+	it("goes to last item", function () {
+		this.subject.goto(this.lastIndex);
+		expect(this.subject.index).toBe(this.lastIndex);
+	});
+
+	it("fires awesomplete-highlight event", function () {
+		var handler = $.spyOnEvent(this.subject.input, "awesomplete-highlight");
+		this.subject.goto(1);
+
+		expect(handler).toHaveBeenCalled();
+	});
+
+	describe("with item index > -1", function () {
+		beforeEach(function () {
+			this.subject.goto(this.firstIndex);
+		});
+
+		it("sets aria-selected", function () {
+			expect(this.subject.ul.children[this.firstIndex].getAttribute("aria-selected")).toBe("true");
+		});
+
+		it("updates status", function () {
+			expect(this.subject.status.textContent).toBe("item1");
+		});
+	});
+
+	describe("with item index = -1", function () {
+		beforeEach(function () {
+			this.subject.goto(this.firstIndex);
+			this.subject.goto(-1);
+		});
+
+		it("does not update status", function () {
+			expect(this.subject.status.textContent).toBe("item1");
+		});
+	});
+});

test/api/nextSpec.js

@@ -0,0 +1,57 @@
+describe("awesomplete.next", function () {
+
+	$.fixture("plain");
+
+	subject(function () {
+		return new Awesomplete("#plain", { list: ["item1", "item2", "item3"] });
+	});
+
+	def("firstIndex", function () { return 0 });
+	def("lastIndex", function () { return this.subject.ul.children.length - 1 });
+
+	describe("without any items found", function () {
+		beforeEach(function () {
+			$.type(this.subject.input, "nosuchitem");
+			this.subject.open();
+		});
+
+		it("does not select any item", function () {
+			this.subject.next();
+			expect(this.subject.selected).toBe(false);
+		});
+	});
+
+	describe("with some items found", function () {
+		beforeEach(function () {
+			$.type(this.subject.input, "ite");
+			this.subject.open();
+		});
+
+		describe("and no item was already selected", function () {
+			it("selects the first item ", function () {
+				this.subject.next();
+				expect(this.subject.index).toBe(this.firstIndex);
+			});
+		});
+
+		describe("and some item was already selected", function () {
+			it("selects the second item", function () {
+				this.subject.goto(this.firstIndex);
+				this.subject.next();
+				expect(this.subject.index).toBe(this.firstIndex + 1);
+			});
+
+			it("selects the last item", function () {
+				this.subject.goto(this.lastIndex - 1);
+				this.subject.next();
+				expect(this.subject.index).toBe(this.lastIndex);
+			});
+
+			it("selects no item after reaching the end", function () {
+				this.subject.goto(this.lastIndex);
+				this.subject.next();
+				expect(this.subject.selected).toBe(false);
+			});
+		});
+	});
+});

test/api/openSpec.js

@@ -0,0 +1,50 @@
+describe("awesomplete.open", function () {
+
+	$.fixture("plain");
+
+	subject(function () { return new Awesomplete("#plain", this.options) });
+
+	it("opens completer", function () {
+		this.subject.open();
+		expect(this.subject.ul.hasAttribute("hidden")).toBe(false);
+	});
+
+	// Exposes this bug https://github.com/LeaVerou/awesomplete/pull/16740
+	// FIXME better fix is probably required as discussed in PR above
+	xit("fills in the list on creation", function () {
+		$("#plain").value = "ite";
+		this.options = { list: "item1, item2" };
+		this.subject.open();
+
+		expect(this.subject.ul.children.length).toBe(2);
+	});
+
+	it("fires awesomplete-open event", function () {
+		var handler = $.spyOnEvent(this.subject.input, "awesomplete-open");
+		this.subject.open();
+
+		expect(handler).toHaveBeenCalled();
+	});
+
+	describe("with autoFirst: true", function () {
+		def("options", function () { return { autoFirst: true } });
+
+		it("automatically selects first item", function () {
+			spyOn(this.subject, "goto");
+			this.subject.open();
+
+			expect(this.subject.goto).toHaveBeenCalledWith(0);
+		});
+	});
+
+	describe("with autoFirst: false", function () {
+		def("options", function () { return { autoFirst: false } });
+
+		it("does not select any item", function () {
+			this.subject.open();
+
+			expect(this.subject.selected).toBe(false);
+			expect(this.subject.index).toBe(-1);
+		});
+	});
+});

test/api/openedSpec.js

@@ -0,0 +1,26 @@
+describe("awesomplete.opened", function () {
+
+	$.fixture("plain");
+
+	subject(function () { return new Awesomplete("#plain") });
+
+	describe("with newly created completer", function () {
+		it("is false", function () {
+			expect(this.subject.opened).toBe(false);
+		});
+	});
+
+	describe("with opened completer", function () {
+		it("is true", function () {
+			this.subject.open();
+			expect(this.subject.opened).toBe(true);
+		});
+	});
+
+	describe("with closed completer", function () {
+		it("is false", function () {
+			this.subject.close();
+			expect(this.subject.opened).toBe(false);
+		});
+	});
+});