deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-10 10:26:38 +02:00
Code Issues Releases Wiki Activity

Added behaviour tests

Browse source
This commit is contained in:
Max Guglielmi 2015-05-24 19:16:09 +10:00
parent 672a89111d
commit 1bcf78a88a
14 changed files with 495 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dist/tablefilter/1.js vendored
View file

File diff suppressed because one or more lines are too long

8
dist/tablefilter/tablefilter.js vendored
View file

File diff suppressed because one or more lines are too long

4
src-es6/event.js
View file

@ -2,7 +2,7 @@
* DOM event utilities
*/
var Event = {
export var Event = {
add(obj, type, func, capture){
if(obj.addEventListener){
obj.addEventListener(type, func, capture);
@ -51,5 +51,3 @@ var Event = {
(evt.keyCode ? evt.keyCode: (evt.which ? evt.which : 0));
}
};
exports.Event = Event;

76
src-es6/tablefilter.js
View file

@ -226,7 +226,7 @@ export class TableFilter{
this.onAfterFilter = types.isFn(f.on_after_filter) ?
f.on_after_filter : null;
//enables/disables case sensitivity
this.matchCase = f.match_case===true ? true : false;
this.caseSensitive = f.case_sensitive===true ? true : false;
//enables/disbles exact match for search
this.exactMatch = f.exact_match===true ? true : false;
//refreshes drop-down lists upon validation
@ -562,19 +562,19 @@ export class TableFilter{
=====================================================*/
detectKey(e) {
if(!o.enterKey){ return; }
var _evt = e || global.event;
if(_evt){
var key = evt.keyCode(_evt);
var _ev = e || global.event;
if(_ev){
var key = evt.keyCode(_ev);
if(key===13){
o._filter();
evt.cancel(_evt);
evt.stop(_evt);
evt.cancel(_ev);
evt.stop(_ev);
} else {
o.isUserTyping = true;
global.clearInterval(o.onKeyUpTimer);
o.onKeyUpTimer = undefined;
}
}//if evt
}
},
/*====================================================
- onkeyup event for text filters
@ -583,8 +583,8 @@ export class TableFilter{
if(!o.onKeyUp){
return;
}
var _evt = e || global.event;
var key = evt.keyCode(_evt);
var _ev = e || global.event;
var key = evt.keyCode(_ev);
o.isUserTyping = false;
function filter() {
@ -634,12 +634,12 @@ export class TableFilter{
- onfocus event for input filters
=====================================================*/
onInpFocus(e) {
var _evt = e || global.event;
var _ev = e || global.event;
o.activeFilterId = this.getAttribute('id');
o.activeFlt = dom.id(o.activeFilterId);
if(o.popUpFilters){
evt.cancel(_evt);
evt.stop(_evt);
evt.cancel(_ev);
evt.stop(_ev);
}
// if(o.ezEditTable){
// if(o.editable){
@ -654,7 +654,7 @@ export class TableFilter{
- onfocus event for select filters
=====================================================*/
onSlcFocus(e) {
var _evt = e || global.event;
var _ev = e || global.event;
o.activeFilterId = this.getAttribute('id');
o.activeFlt = dom.id(o.activeFilterId);
// select is populated when element has focus
@ -663,8 +663,8 @@ export class TableFilter{
o.Cpt.dropdown._build(ct);
}
if(o.popUpFilters){
evt.cancel(_evt);
evt.stop(_evt);
evt.cancel(_ev);
evt.stop(_ev);
}
},
/*====================================================
@ -677,8 +677,8 @@ export class TableFilter{
// if(o.activeFlt && colIndex &&
// o['col'+colIndex]===o.fltTypeCheckList &&
// !o.Evt.onSlcChange.caller){ return; }
var _evt = e || global.event;
if(o.popUpFilters){ evt.stop(_evt); }
var _ev = e || global.event;
if(o.popUpFilters){ evt.stop(_ev); }
if(o.onSlcChange){ o.filter(); }
},
/*====================================================
@ -879,9 +879,6 @@ export class TableFilter{
//drop-down filters
if(col===this.fltTypeSlc || col===this.fltTypeMulti){
if(!this.Cpt.dropdown){
// var Dropdown =
// require('modules/dropdown').Dropdown;
// import {Dropdown} from 'modules/dropdown';
this.Cpt.dropdown = new Dropdown(this);
}
var dropdown = this.Cpt.dropdown;
@ -928,9 +925,6 @@ export class TableFilter{
else if(col===this.fltTypeCheckList){
var checkList;
if(!this.Cpt.checkList){
// var CheckList =
// require('modules/checkList').CheckList;
// import {CheckList} from 'modules/checkList';
this.Cpt.checkList = new CheckList(this);
checkList = this.Cpt.checkList;
}
@ -990,16 +984,16 @@ export class TableFilter{
this.fltIds.push(this.prfxFlt+i+'_'+this.id);
inp.onkeypress = this.Evt.detectKey;
inp.onkeydown = this.Evt.onKeyDown;
inp.onkeyup = this.Evt.onKeyUp;
inp.onblur = this.Evt.onInpBlur;
evt.add(inp, 'keypress', this.Evt.detectKey);
evt.add(inp, 'keydown', this.Evt.onKeyDown);
evt.add(inp, 'keyup', this.Evt.onKeyUp);
evt.add(inp, 'blur', this.Evt.onInpBlur);
if(this.rememberGridValues){
var flts_values = this.Cpt.store.getFilterValues(
this.fltsValuesCookie);
if(flts_values[i]!=' '){
this.setFilterValue(i,flts_values[i],false);
this.setFilterValue(i, flts_values[i], false);
}
}
}
@ -1164,7 +1158,6 @@ export class TableFilter{
cpt.paging._resetPageLength(this.pgLenCookie);
break;
case ev.sort:
void(0);
break;
case ev.loadextensions:
this._loadExtensions();
@ -1678,9 +1671,9 @@ export class TableFilter{
}
/**
* Filter the table by retrieving the data from each td in every single tr
* and comparing it to the search term for current column. A tr is hidden
* when all search terms are not found
* Filter the table by retrieving the data from each cell in every single
* row and comparing it to the search term for current column. A row is
* hidden when all the search terms are not found in current row.
*/
_filter(){
if(!this.fltGrid || (!this._hasGrid && !this.isFirstLoad)){
@ -1956,7 +1949,7 @@ export class TableFilter{
}
var cell_data = str.matchCase(
this.getCellData(j, cell[j]), this.matchCase);
this.getCellData(j, cell[j]), this.caseSensitive);
//multiple search parameter operator ||
var sAOrSplit = sA.split(this.orOperator),
@ -2202,7 +2195,7 @@ export class TableFilter{
for(var i=0; i<this.fltIds.length; i++){
searchArgs.push(
str.trim(
str.matchCase(this.getFilterValue(i), this.matchCase))
str.matchCase(this.getFilterValue(i), this.caseSensitive))
);
}
return searchArgs;
@ -2345,7 +2338,7 @@ export class TableFilter{
filteredData.push(rowData);
}
var validRows = this.getValidRowsIndex(true);
var validRows = this.getValidRows(true);
for(var i=0; i<validRows.length; i++){
var rData = [this.validRowsIndex[i],[]],
cells = row[this.validRowsIndex[i]].cells;
@ -2485,19 +2478,20 @@ export class TableFilter{
}
//checklist
else if(fltColType === this.fltTypeCheckList){
searcharg = str.matchCase(searcharg, this.matchCase);
searcharg = str.matchCase(searcharg, this.caseSensitive);
var sarg = searcharg.split(' '+this.orOperator+' ');
var lisNb = dom.tag(slc,'li').length;
slc.setAttribute('value','');
slc.setAttribute('indexes','');
for(var k=0; k<dom.tag(slc,'li').length; k++){
for(var k=0; k<lisNb; k++){
var li = dom.tag(slc,'li')[k],
lbl = dom.tag(li,'label')[0],
chk = dom.tag(li,'input')[0],
lblTxt = str.matchCase(
dom.getText(lbl), this.matchCase);
if(lblTxt!=='' && array.has(sarg, lblTxt, true)){
dom.getText(lbl), this.caseSensitive);
if(lblTxt !== '' && array.has(sarg, lblTxt, true)){
chk.checked = true;
this.Cpt.checkList.setCheckListValues(chk);
}
@ -2767,7 +2761,7 @@ export class TableFilter{
// automatic exact match for selects and special characters are now
// filtered
var regexp,
modifier = (this.matchCase) ? 'g' : 'gi',
modifier = (this.caseSensitive) ? 'g' : 'gi',
exactMatch = !forceMatch ? this.exactMatch : forceMatch;
if(exactMatch || (fltType!==this.fltTypeInp && fltType)){
regexp = new RegExp(
@ -2859,7 +2853,7 @@ export class TableFilter{
- returns an array containing valid rows indexes
(valid rows upon filtering)
=====================================================*/
getValidRowsIndex(reCalc){
getValidRows(reCalc){
if(!this._hasGrid){
return;
}

91
test/test-always-visible-rows.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TableFilter always visible rows tests</title>
<link rel="stylesheet" href="libs/qunit/qunit.css">
<script src="libs/qunit/qunit.js"></script>
</head>
<body>
<table id="demo" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>From</th>
<th>Destination</th>
<th>Road Distance (km)</th>
<th>By Air (hrs)</th>
<th>By Rail (hrs)</th>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Adelaide</td>
<td>1412</td>
<td>1.4</td>
<td>25.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Brisbane</td>
<td>982</td>
<td>1.5</td>
<td>16</td>
</tr>
<tr>
<td>Always visible row</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Canberra</td>
<td>286</td>
<td>.6</td>
<td>4.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Melbourne</td>
<td>872</td>
<td>1.1</td>
<td>10.5</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Perth</td>
<td>2781</td>
<td>3.1</td>
<td>38</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Alice Springs</td>
<td>1533</td>
<td>2</td>
<td>20.25</td>
</tr>
<tr>
<td>Always visible row</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Brisbane</td>
<td>2045</td>
<td>2.15</td>
<td>40</td>
</tr>
</tbody>
</table>
<script src="../dist/tablefilter/tablefilter.js"></script>
<script src="test-always-visible-rows.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

48
test/test-always-visible-rows.js Normal file
View file

@ -0,0 +1,48 @@
(function(win, TableFilter){
var tf = new TableFilter('demo', {
base_path: '../dist/tablefilter/',
rows_always_visible: [4, 9]
});
tf.init();
module('Sanity checks');
test('Always visible rows', function() {
deepEqual(tf instanceof TableFilter, true, 'TableFilter type');
deepEqual(tf.hasVisibleRows, true, 'Contains always visible rows');
});
module('Behaviour');
tf.setFilterValue(0, 'Hello');
tf.filter();
test('for filtered table', function() {
var alwaysVisibleRow1 = tf.tbl.rows[4];
var alwaysVisibleRow2 = tf.tbl.rows[9];
deepEqual(
tf.getRowDisplay(alwaysVisibleRow1),
'',
'Row display for alwaysVisibleRow1'
);
deepEqual(
tf.getRowDisplay(alwaysVisibleRow2),
'',
'Row display for alwaysVisibleRow2'
);
});
tf.clearFilters();
test('after filters are cleared', function() {
var alwaysVisibleRow1 = tf.tbl.rows[4];
var alwaysVisibleRow2 = tf.tbl.rows[9];
deepEqual(
tf.getRowDisplay(alwaysVisibleRow1),
'',
'Row display for alwaysVisibleRow1'
);
deepEqual(
tf.getRowDisplay(alwaysVisibleRow2),
'',
'Row display for alwaysVisibleRow2'
);
});
})(window, TableFilter);

77
test/test-case-sensitive-query.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TableFilter case sensitive query tests</title>
<link rel="stylesheet" href="libs/qunit/qunit.css">
<script src="libs/qunit/qunit.js"></script>
</head>
<body>
<table id="demo" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>From</th>
<th>Destination</th>
<th>Road Distance (km)</th>
<th>By Air (hrs)</th>
<th>By Rail (hrs)</th>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Adelaide</td>
<td>1412</td>
<td>1.4</td>
<td>25.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Brisbane</td>
<td>982</td>
<td>1.5</td>
<td>16</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Canberra</td>
<td>286</td>
<td>.6</td>
<td>4.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Melbourne</td>
<td>872</td>
<td>1.1</td>
<td>10.5</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Perth</td>
<td>2781</td>
<td>3.1</td>
<td>38</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Alice Springs</td>
<td>1533</td>
<td>2</td>
<td>20.25</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Brisbane</td>
<td>2045</td>
<td>2.15</td>
<td>40</td>
</tr>
</tbody>
</table>
<script src="../dist/tablefilter/tablefilter.js"></script>
<script src="test-case-sensitive-query.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

39
test/test-case-sensitive-query.js Normal file
View file

@ -0,0 +1,39 @@
(function(win, TableFilter){
var tf = new TableFilter('demo', {
base_path: '../dist/tablefilter/',
case_sensitive: true
});
tf.init();
module('Sanity checks');
test('Enable case sensitive query match', function() {
deepEqual(tf instanceof TableFilter, true, 'TableFilter type');
deepEqual(tf.caseSensitive, true, 'Case sensitive query match enabled');
});
module('Behaviour');
test('After filtering with `sydney`', function() {
tf.setFilterValue(0, 'sydney');
tf._filter();
deepEqual(tf.getValidRows().length, 0, 'No matches');
});
test('After filtering with `Sydney`', function() {
tf.setFilterValue(0, 'Sydney');
tf._filter();
deepEqual(tf.getValidRows().length>0, true, 'Matches');
});
test('After filtering with `ade`', function() {
tf.setFilterValue(0, 'ade');
tf._filter();
deepEqual(tf.getValidRows().length, 0, 'No matches');
});
test('After filtering with `Ade`', function() {
tf.setFilterValue(0, 'Ade');
tf._filter();
deepEqual(tf.getValidRows().length>0, true, 'Matches');
});
})(window, TableFilter);

77
test/test-disable-enter-key.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TableFilter disable enter key tests</title>
<link rel="stylesheet" href="libs/qunit/qunit.css">
<script src="libs/qunit/qunit.js"></script>
</head>
<body>
<table id="demo" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>From</th>
<th>Destination</th>
<th>Road Distance (km)</th>
<th>By Air (hrs)</th>
<th>By Rail (hrs)</th>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Adelaide</td>
<td>1412</td>
<td>1.4</td>
<td>25.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Brisbane</td>
<td>982</td>
<td>1.5</td>
<td>16</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Canberra</td>
<td>286</td>
<td>.6</td>
<td>4.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Melbourne</td>
<td>872</td>
<td>1.1</td>
<td>10.5</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Perth</td>
<td>2781</td>
<td>3.1</td>
<td>38</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Alice Springs</td>
<td>1533</td>
<td>2</td>
<td>20.25</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Brisbane</td>
<td>2045</td>
<td>2.15</td>
<td>40</td>
</tr>
</tbody>
</table>
<script src="../dist/tablefilter/tablefilter.js"></script>
<script src="test-disable-enter-key.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

14
test/test-disable-enter-key.js Normal file
View file

@ -0,0 +1,14 @@
(function(win, TableFilter){
var tf = new TableFilter('demo', {
base_path: '../dist/tablefilter/',
enter_key: false
});
tf.init();
module('Sanity checks');
test('Disable enter key on textbox filters', function() {
deepEqual(tf instanceof TableFilter, true, 'TableFilter type');
deepEqual(tf.enterKey, false, '<Enter> key disabled');
});
})(window, TableFilter);

77
test/test-exact-query-match.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TableFilter enable exact query match tests</title>
<link rel="stylesheet" href="libs/qunit/qunit.css">
<script src="libs/qunit/qunit.js"></script>
</head>
<body>
<table id="demo" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>From</th>
<th>Destination</th>
<th>Road Distance (km)</th>
<th>By Air (hrs)</th>
<th>By Rail (hrs)</th>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Adelaide</td>
<td>1412</td>
<td>1.4</td>
<td>25.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Brisbane</td>
<td>982</td>
<td>1.5</td>
<td>16</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Canberra</td>
<td>286</td>
<td>.6</td>
<td>4.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Melbourne</td>
<td>872</td>
<td>1.1</td>
<td>10.5</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Perth</td>
<td>2781</td>
<td>3.1</td>
<td>38</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Alice Springs</td>
<td>1533</td>
<td>2</td>
<td>20.25</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Brisbane</td>
<td>2045</td>
<td>2.15</td>
<td>40</td>
</tr>
</tbody>
</table>
<script src="../dist/tablefilter/tablefilter.js"></script>
<script src="test-exact-query-match.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

27
test/test-exact-query-match.js Normal file
View file

@ -0,0 +1,27 @@
(function(win, TableFilter){
var tf = new TableFilter('demo', {
base_path: '../dist/tablefilter/',
exact_match: true
});
tf.init();
module('Sanity checks');
test('Enable exact query match', function() {
deepEqual(tf instanceof TableFilter, true, 'TableFilter type');
deepEqual(tf.exactMatch, true, 'Exact query match enable');
});
module('Behaviour');
test('After filtering with `syd`', function() {
tf.setFilterValue(0, 'syd');
tf._filter();
deepEqual(tf.getValidRows().length, 0, 'No matches');
});
test('After filtering with `sydney`', function() {
tf.setFilterValue(0, 'sydney');
tf._filter();
deepEqual(tf.getValidRows().length>0, true, 'Matches');
});
})(window, TableFilter);

4
test/test-sort-custom-sorter.js
View file

@ -42,7 +42,7 @@ function startTest(tf, sort){
test('Sort UI elements', function() {
var th = tf.getHeaderElement(0),
indicator = tag(th, 'img'),
validRows = tf.getValidRowsIndex(true);
validRows = tf.getValidRows(true);
deepEqual(indicator.length, 1, 'Sort indicator in header element');
deepEqual(
@ -53,7 +53,7 @@ function startTest(tf, sort){
test('Sort behaviour', function() {
var th = tf.getHeaderElement(1),
validRows = tf.getValidRowsIndex();
validRows = tf.getValidRows();
sort.sortByColumnIndex(1);
deepEqual(sort.sorted, true, 'Table column sorted');

4
test/test-sort-key.js
View file

@ -34,7 +34,7 @@ function start(tf, sort){
test('Sort UI elements', function() {
var th = tf.getHeaderElement(0),
indicator = tag(th, 'img'),
validRows = tf.getValidRowsIndex(true);
validRows = tf.getValidRows(true);
deepEqual(indicator.length, 1, 'Sort indicator in header element');
deepEqual(
@ -45,7 +45,7 @@ function start(tf, sort){
test('Sort behaviour', function() {
var th = tf.getHeaderElement(1),
validRows = tf.getValidRowsIndex();
validRows = tf.getValidRows();
sort.sortByColumnIndex(1);
deepEqual(sort.sorted, true, 'Table column sorted');