tests + doc

mp3000mp · Oct 16, 2019 · bac7531 · bac7531
1 parent bbe9484
commit bac7531
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -12,13 +12,14 @@ Table of Contents
  - [Demo](#demo)
  - [Installation](#installation)
  - [Usage](#usage)
+ - [Configuration](#configuration)
  - [Examples](#examples)
 
 
 Demo
 ----
 
-[Try it on JSFiddle](https://jsfiddle.net/)
+[Try it on JSFiddle](https://jsfiddle.net/g9u6ybsp/)
 
 
 Installation
@@ -33,21 +34,37 @@ Usage
 -----
 
 ```js
-// This will create window.TableTrHref
+// This will create window.ListFilter
 const ListFilter = require('list-filter')
 ```
 
 
-Examples
+Example
 --------
 
-You can force rendering a DOMElement:
+You have to create a new instance for binding a list to an input trigger
 ```js
 // on document ready
 document.addEventListener('DOMContentLoaded', function(){
+    let trigger = document.getelementById('my-trigger');
+    let list = document.getelementById('my-list');
+    let options = {};
     // This will look for input[data-list] in document
-    ListFilter.init();
-    // This will look force initialize on #my-input
-    ListFilter.init(document.getElementById('my-input'));
+    let oListFilter = new ListFilter(trigger, list, options);
 });
 ```
+
+
+Configuration
+--------
+
+Here are the key you can use to configure your instance
+
+| Key               | Type           | Default | Description                                                                                  |
+|-------------------|----------------|---------|----------------------------------------------------------------------------------------------|
+| caseSensitive     | boolean        | false   | Case sensitive search or not.                                                                |
+| keyupDelay        | Number         | 50      | Time in millisecond before refreshing the DOM.                                               |
+| searchInAttribute | boolean or string | false   | Data attribute used for comparison, innerHTML if false.                                      |
+| onSearch          | Callback       | null    | Function to run after each comparison, return true to display the element, false to hide it. |
+| onAfterSearch     | Callback       | null    | Function to run after DOM refresh.                                                           |
+|                   |                |         |     
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "table-tr-href",
+  "name": "list-filter",
   "version": "0.1.0",
   "description": "Simple library with no dependencies that help you to hide html list items that do not match a pattern",
   "main": "/dist/ListFilter.min.js",

diff --git a/src/ListFilter.js b/src/ListFilter.js
@@ -107,40 +107,50 @@ let ListFilter = function (trigger, list, options) {
 	/**
 	 * refresh DOM
 	 */
-	this.refresh = function(){
-		clearTimeout(timeoutOnGoing);
-		setTimeout(function () {
+	function doRefresh()
+	{
+		matchingLiElements = [];
+		searchPattern = getSearchPattern(trigger.value);
 
-			matchingLiElements = [];
-			searchPattern = getSearchPattern(trigger.value);
-			console.log(searchPattern);
+		for(let liElement of listItems){
+			isMatching = testMatch(searchPattern, liElement);
 
-			for(let liElement of listItems){
-				console.log(liElement.innerHTML);
-				isMatching = testMatch(searchPattern, liElement);
+			if(isMatching){
+				matchingLiElements.push(liElement);
+			}
 
-				if(isMatching){
-					matchingLiElements.push(liElement);
-				}
+			updateDisplay(liElement, isMatching);
+		}
 
-				updateDisplay(liElement, isMatching);
-				console.log(liElement.style.display);
-			}
+		if(typeof(options.onAfterSearch) === 'function'){
+			options.onAfterSearch(searchPattern, matchingLiElements);
+		}
+	}
 
-			if(typeof(options.onAfterSearch) === 'function'){
-				options.onAfterSearch(searchPattern, matchingLiElements);
-			}
-		}, options.keyupDelay);
+	/**
+	 * refresh DOM
+	 * @param {boolean} [waitDelay=false]
+	 */
+	this.refresh = function(waitDelay){
+		clearTimeout(timeoutOnGoing);
+		if(waitDelay){
+			setTimeout(function () {
+				doRefresh();
+			}, options.keyupDelay);
+		}else{
+			doRefresh();
+		}
 	};
 
 	// event
 	trigger.onkeyup = function(){
-		me.refresh();
+		me.refresh(true);
 	};
 
 };
 
 module.exports = ListFilter;
+/* istanbul ignore next */
 if (typeof window !== 'undefined') {
 	window.ListFilter = ListFilter;
 }
diff --git a/test/test.js b/test/test.js
@@ -14,28 +14,80 @@ describe('ListFilter', function () {
 	let trigger = window.document.getElementById('trigger');
 	let list = window.document.getElementById('my-list');
 	let listElements = list.getElementsByTagName('li');
+
 	describe('#refresh()', function () {
 		// caseSensitive false
 		it('should hide only second element', function () {
 			let oListFilter = new ListFilter(trigger, list, {
-				caseSensitive: false
+				caseSensitive: false,
 			});
 			trigger.value = 'a';
-			console.log(listElements[0].style.display + '-' + listElements[1].style.display);
 			oListFilter.refresh();
-			console.log(listElements[0].style.display + '-' + listElements[1].style.display);
 			assert.deepStrictEqual(listElements[0].style.display,'');
 			assert.deepStrictEqual(listElements[1].style.display,'none');
 		});
 		// caseSensitive true
 		it('should hide all', function () {
 			let oListFilter = new ListFilter(trigger, list, {
-				caseSensitive: true
+				caseSensitive: true,
 			});
 			trigger.value = 'a';
 			oListFilter.refresh();
 			assert.deepStrictEqual(listElements[0].style.display,'none');
 			assert.deepStrictEqual(listElements[1].style.display,'none');
 		});
+		// search in attribute
+		it('should hide only first element', function () {
+			let oListFilter = new ListFilter(trigger, list, {
+				caseSensitive: false,
+				searchInAttribute: 'data-value',
+			});
+			trigger.value = 'a';
+			oListFilter.refresh();
+			assert.deepStrictEqual(listElements[0].style.display,'none');
+			assert.deepStrictEqual(listElements[1].style.display,'');
+		});
+		// onSearch
+		it('should hide all', function () {
+			let i = 0;
+			let oListFilter = new ListFilter(trigger, list, {
+				onSearch: function(searchPattern, element, isMatching){
+					i++;
+					return false;
+				}
+			});
+			trigger.value = 'a';
+			oListFilter.refresh();
+			assert.deepStrictEqual(i, 2);
+			assert.deepStrictEqual(listElements[0].style.display,'none');
+			assert.deepStrictEqual(listElements[1].style.display,'none');
+		});
+		// onAfterSearch
+		it('should return one item', function () {
+			let oListFilter = new ListFilter(trigger, list, {
+				onAfterSearch: function(searchPattern, foundElements){
+					assert.deepStrictEqual(foundElements.length,1);
+				}
+			});
+			trigger.value = 'a';
+			oListFilter.refresh();
+		});
+		// delay
+		it('should wait before hide all', function () {
+			let oListFilter = new ListFilter(trigger, list, {
+				keyupDelay: 100,
+			});
+			trigger.value = '';
+			oListFilter.refresh();
+			trigger.value = 'c';
+			trigger.dispatchEvent(new KeyboardEvent('keyup',{'key':'c'}));
+			//oListFilter.refresh(true);
+			assert.deepStrictEqual(listElements[0].style.display,'');
+			assert.deepStrictEqual(listElements[1].style.display,'');
+			setTimeout(function(){
+				assert.deepStrictEqual(listElements[0].style.display,'none');
+				assert.deepStrictEqual(listElements[1].style.display,'none');
+			},200);
+		});
 	});
 });