Tests for boolean, column, list, horizontal list. small code optimiza…

…tions. (#165)

* column boolean code optimization
* _computeSelected valuePath default
* tests for column boolean
* tests for omnitable column
* function keyword removed
* column list handle null params
* basic tests for column list
* list horizontal handle null
* tests for list horizontal
* list test getString returns values
* list applyMultiFilter handle null

cosmoz-omnitable-column-boolean.html

@@ -96,52 +96,41 @@
 
 			_filterChangedFromAbove: false,
 
-			_textFilterChanged: function (textFilter) {
+			_textFilterChanged(textFilter) {
 				if (this._filterChangedFromAbove) {
 					this._filterChangedFromAbove = false;
 					return;
 				}
-				var b = null;
-				if (textFilter) {
-					b = textFilter === 'true';
-				}
 				this._filterChangedFromInput = true;
-				this.set('filter', b);
+				this.set('filter', textFilter && textFilter === 'true' ? true : null);
 			},
 
-			_filterChanged: function (filter) {
+			_filterChanged(filter) {
 				if (this._filterChangedFromInput) {
 					this._filterChangedFromInput = false;
 					return;
 				}
-
 				this._filterChangedFromAbove = true;
-				if (typeof filter === 'boolean') {
-					this._textFilter = filter.toString();
-				} else {
-					this._textFilter = null;
-				}
-
+				this._textFilter = typeof filter === 'boolean' ? filter.toString() : null;
 			},
 
-			getString: function (item, valuePath) {
-				var value = this.get(valuePath || this.valuePath, item);
+			getString(item, valuePath) {
+				const value = this.get(valuePath || this.valuePath, item);
 				return value ? this.trueLabel : this.falseLabel;
 			},
 
-			getFilterFn: function () {
+			getFilterFn() {
 				if (this.filter != null) {
 					return this._applySingleFilter.bind(this);
 				}
 			},
 
-			_applySingleFilter: function (item) {
-				var value = this.get(this.valuePath, item);
-				return value === this.filter;
+			_applySingleFilter(item) {
+				return this.get(this.valuePath, item) === this.filter;
 			},
 
-			_computeSelected: function (item, valuePath) {
-				var value = this.get(valuePath, item);
+			_computeSelected(item, valuePath) {
+				const value = this.get(valuePath || this.valuePath, item);
 				if (value != null) {
 					return value.toString();
 				}
@@ -152,7 +141,7 @@
 			/** cosmoz-omnitable-column-behavior */
 
 			_valueChanged(e) {
-				var value = e.target.selected === 'true',
+				const value = e.target.selected === 'true',
 					item = e.model.item,
 					oldValue = this.get(this.valuePath, item),
 					formatFn = value => {

cosmoz-omnitable-column-list-horizontal.html

@@ -107,6 +107,9 @@
 			},
 
 			_getLabelForValue: function (value) {
+				if (value == null) {
+					return null;
+				}
 				return value.toString();
 			},
 
@@ -124,14 +127,17 @@
 			},
 
 			_applySingleFilter: function (filterString, item) {
-				const value = this.get(this.valuePath, item).toString().toLowerCase();
-				return value === filterString;
+				const value = this.get(this.valuePath, item);
+				if (value == null) {
+					return false;
+				}
+				return value.toString().toLowerCase() === filterString;
 			},
 
 			_applyMultiFilter: function (filter, item) {
 				const valueFilter = element => {
 						const value = this.valueProperty ? this.get(this.valueProperty, element) : element;
-						return value.toString().toLowerCase();
+						return value ? value.toString().toLowerCase() : null;
 					},
 					filterArray = filter.map(valueFilter),
 					listValue = this.get(this.valuePath, item);

cosmoz-omnitable-column-list.html

@@ -69,7 +69,7 @@
 				'_filterChanged(filter, autocompleteItems)'
 			],
 
-			_computeAutocompleteItems: function () {
+			_computeAutocompleteItems() {
 				return this.values
 					.reduce((acc, val) => acc.concat(val), [])
 					// Make the item list unique
@@ -83,25 +83,33 @@
 					});
 			},
 
-			_getLabelForValue: function (value) {
+			_getLabelForValue(value) {
+				if (value == null) {
+					return null;
+				}
 				return value.toString();
 			},
 
-			_applySingleFilter: function (filterString, item) {
-				const value = this.get(this.valuePath, item).toString().toLowerCase();
-				return value === filterString;
+			_applySingleFilter(filterString, item) {
+				const value = this.get(this.valuePath, item);
+				if (value == null) {
+					return false;
+				}
+				return value.toString().toLowerCase() === filterString;
 			},
 
-			_applyMultiFilter: function (filter, item) {
-				const filterArray = filter.map(element => element.toString().toLowerCase()),
+			_applyMultiFilter(filter, item) {
+				const filterArray = filter.map(element => {
+						return element ? element.toString().toLowerCase() : null;
+					}),
 					listValue = this.get(this.valuePath, item);
 
 				return listValue.some(val =>
 					filterArray.indexOf(val.toString().toLowerCase()) >= 0
 				);
 			},
 
-			_autocompleteSelectedItemsChanged: function () {
+			_autocompleteSelectedItemsChanged() {
 				const filter = this.filter,
 					items = this.autocompleteSelectedItems;
 				if (Array.isArray(filter) && items.length === this.filter.length &&  items.every((item, i) => item.value === filter[i])) {

test/basic.html

@@ -126,6 +126,54 @@
 
 				assert.equal(column.sortOn, 'sortOnValuePath');
 			});
+
+			test('_serializeFilter returns filter', () => {
+				const column = omnitable.columns.find(col => {
+						return col.name === 'columnWithGroupOn';
+					}),
+					filter = {key: 'value'};
+				assert.deepEqual(column._serializeFilter(filter), filter);
+			});
+
+			test('_serializeFilter uses default filter', () => {
+				const column = omnitable.columns.find(col => {
+					return col.name === 'columnWithGroupOn';
+				});
+				assert.isNull(column.filter);
+				column.filter = {key: 'value'};
+				assert.deepEqual(column._serializeFilter(), column.filter);
+			});
+
+			test('_serializeFilter handles null filter', () => {
+				const column = omnitable.columns.find(col => {
+					return col.name === 'columnWithGroupOn';
+				});
+				assert.isNull(column.filter);
+				assert.isNull(column._serializeFilter());
+			});
+
+			test('_deserializeFilter returns object', () => {
+				const column = omnitable.columns.find(col => {
+					return col.name === 'columnWithGroupOn';
+				});
+				assert.deepEqual(column._deserializeFilter({key: 'value'}), {key: 'value'});
+			});
+
+			test('_deserializeFilter handles null', () => {
+				const column = omnitable.columns.find(col => {
+					return col.name === 'columnWithGroupOn';
+				});
+				assert.isNull(column._deserializeFilter());
+			});
+
+			test('resetFilter resets filter to null', () => {
+				const column = omnitable.columns.find(col => {
+					return col.name === 'columnWithGroupOn';
+				});
+				column.filter = {key: 'value'};
+				column.resetFilter();
+				assert.isNull(column.filter);
+			});
 		});
 
 		suite('it logs unnamed column', function () {

test/boolean.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+	<title>cosmoz-omnitable boolean test</title>
+
+	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+	<script src="../../web-component-tester/browser.js"></script>
+	<script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+	<link rel="import" href="../../test-fixture/test-fixture.html">
+	<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
+
+	<link rel="import" href="../cosmoz-omnitable.html">
+	<link rel="import" href="../cosmoz-omnitable-columns.html">
+	<link rel="import" href="../demo/table-demo-behavior.html">
+</head>
+<body>
+	<test-fixture id="basic">
+		<template>
+			<cosmoz-omnitable id="omnitable" class="flex" selection-enabled>
+				<cosmoz-omnitable-column-boolean name="boolean" value-path="boolean">
+				</cosmoz-omnitable-column-boolean>
+			</cosmoz-omnitable>
+		</template>
+	</test-fixture>
+
+	<script>
+	(function () {
+		'use strict';
+
+		suite('basic', () => {
+			let omnitable,
+				column,
+				data;
+
+			setup(done => {
+				omnitable = fixture('basic');
+				data = [
+					{ boolean: true },
+					{ boolean: false },
+					{ null: true },
+					{ boolean: 'invalid' },
+					{ boolean: 'true' }
+				];
+				omnitable.data = data;
+				omnitable.notifyResize();
+				if (omnitable.visibleColumns != null && omnitable.visibleColumns.length) {
+					done();
+				} else {
+					omnitable.addEventListener('visible-columns-changed', () => {
+						column = omnitable.columns[0];
+						Polymer.Base.async(done, 30);
+					});
+				}
+			});
+
+			test('initializes boolean column', () => {
+				assert.equal(column.is, 'cosmoz-omnitable-column-boolean');
+			});
+
+			test('_getDefaultFilter is null', () => {
+				assert.isNull(column.filter);
+			});
+
+			test('_textFilterChanged updates filter', () => {
+				assert.isNull(column.filter);
+				column._textFilterChanged('true');
+				assert.isTrue(column.filter);
+			});
+
+			test('_textFilterChanged updates filter as null', done => {
+				column.filter = 'true';
+				column._filterChangedFromAbove = false;
+				column._textFilterChanged();
+				assert.isNull(column.filter);
+				done();
+			});
+
+			test('filterChanged observer converts boolean to string', () => {
+				column.filter = true;
+				assert.equal(column._textFilter, 'true');
+				column.filter = false;
+				assert.equal(column._textFilter, 'false');
+			});
+
+			test('getString uses this.valuePath as default', () => {
+				assert.equal(column.getString(data[0]), 'True');
+				assert.equal(column.getString(data[1]), 'False');
+			});
+
+			test('_computeSelected returns boolean to string', () => {
+				assert.equal(column._computeSelected(data[0]), 'true');
+				assert.equal(column._computeSelected(data[1]), 'false');
+			});
+
+			test('_valueChanged updates _valuePath', done => {
+				const item = {boolean: false},
+					el = document.createElement('div');
+				el.selected = 'true';
+				el.addEventListener('click', e => {
+					column._valueChanged(e);
+					assert.equal(item.boolean, true);
+					done();
+				});
+				const e = new Event('click');
+				e.model = {};
+				e.model.item = item;
+				el.dispatchEvent(e);
+			});
+
+			test('_valueChanged does not update _valuePath if value is equal to oldValue', done => {
+				const item = {boolean: true},
+					el = document.createElement('div');
+				el.selected = 'true';
+				el.addEventListener('click', e => {
+					column._valueChanged(e);
+					assert.equal(item.boolean, true);
+					done();
+				});
+				const e = new Event('click');
+				e.model = {};
+				e.model.item = item;
+				el.dispatchEvent(e);
+			});
+		});
+	})();
+	</script>
+</html>

test/index.html

@@ -10,7 +10,9 @@
 	<script>
 		var pages = [
 				'basic.html',
+				'boolean.html',
 				'hash-param.html',
+				'list.html',
 				'xlsx-export.html',
 				'range.html',
 				'range-date.html',