mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-06 08:33:15 +02:00
Started columns visibility extension tests
This commit is contained in:
parent
1092cc2eb5
commit
fe7ef862ec
4
dist/tablefilter/tablefilter.js
vendored
4
dist/tablefilter/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
2
dist/tablefilter/tf-ded87c3d579ac7ac73d0.js
vendored
2
dist/tablefilter/tf-ded87c3d579ac7ac73d0.js
vendored
|
@ -1,6 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* TableFilter v0.0.0 by Max Guglielmi
|
* TableFilter v0.0.0 by Max Guglielmi
|
||||||
* build date: 2015-07-01T08:00:52.824Z
|
* build date: 2015-07-02T07:41:11.707Z
|
||||||
* MIT License
|
* MIT License
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
@ -113,8 +113,8 @@ export default class ColsVisibility{
|
||||||
if(tf.gridLayout){
|
if(tf.gridLayout){
|
||||||
this.headersTbl = tf.feature('gridLayout').headTbl; //headers table
|
this.headersTbl = tf.feature('gridLayout').headTbl; //headers table
|
||||||
this.headersIndex = 0; //headers index
|
this.headersIndex = 0; //headers index
|
||||||
this.onAfterColDisplayed = function(){};
|
// this.onAfterColDisplayed = function(){};
|
||||||
this.onAfterColHidden = function(){};
|
// this.onAfterColHidden = function(){};
|
||||||
}
|
}
|
||||||
|
|
||||||
//Loads extension stylesheet
|
//Loads extension stylesheet
|
||||||
|
|
|
@ -2395,37 +2395,6 @@ export class TableFilter{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Refresh the filters
|
|
||||||
* @param {Object} config Configuration literal object
|
|
||||||
*/
|
|
||||||
// refresh(config){
|
|
||||||
// let configObj = !config ? this.cfg : config;
|
|
||||||
// let hasSort = this.sort;
|
|
||||||
// //sort property is set to false in order to avoid sort object
|
|
||||||
// //re-instanciation
|
|
||||||
// if(hasSort){
|
|
||||||
// this.sort = false;
|
|
||||||
// }
|
|
||||||
// this.nbRows = this.getRowsNb(); //in case table is refreshed
|
|
||||||
// this.remove();
|
|
||||||
// global['tf_'+this.id] = new TableFilter(
|
|
||||||
// this.id, this.startRow, configObj);
|
|
||||||
// this.isFirstLoad = true;
|
|
||||||
// this.fltIds = [];
|
|
||||||
// this.init();
|
|
||||||
// //New tbody content needs to be referenced in sortabletable script
|
|
||||||
// //with setTBody() method
|
|
||||||
// if(hasSort){
|
|
||||||
// //this.st = SortableTable object
|
|
||||||
// //Note this is a method of the Sortable Table 1.12 script
|
|
||||||
// //(Erik Arvidsson)
|
|
||||||
// this.st.setTBody(this.tbl.tBodies[0]);
|
|
||||||
// //finally sort property is enabled again
|
|
||||||
// this.sort = true;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Refresh the filters subject to linking ('select', 'multiple',
|
* Refresh the filters subject to linking ('select', 'multiple',
|
||||||
* 'checklist' type)
|
* 'checklist' type)
|
||||||
|
@ -2777,38 +2746,3 @@ export class TableFilter{
|
||||||
return this.cfg;
|
return this.cfg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
TableFilter.Cookie = Cookie;
|
|
||||||
// TableFilter.Store = Store;
|
|
||||||
// TableFilter.GridLayout = GridLayout;
|
|
||||||
// TableFilter.Loader = Loader;
|
|
||||||
// TableFilter.HighlightKeyword = HighlightKeyword;
|
|
||||||
// TableFilter.PopupFilter = PopupFilter;
|
|
||||||
// TableFilter.Dropdown = Dropdown;
|
|
||||||
// TableFilter.CheckList = CheckList;
|
|
||||||
// TableFilter.RowsCounter = RowsCounter;
|
|
||||||
// TableFilter.StatusBar = StatusBar;
|
|
||||||
// TableFilter.Paging = Paging;
|
|
||||||
// TableFilter.ClearButton = ClearButton;
|
|
||||||
// TableFilter.Help = Help;
|
|
||||||
// TableFilter.AlternateRows = AlternateRows;
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- Sets filters grid bar
|
|
||||||
- Calls TF Constructor and generates grid bar
|
|
||||||
- Params:
|
|
||||||
- id: table id (string)
|
|
||||||
- refRow (optional): row index (number)
|
|
||||||
- config (optional): configuration
|
|
||||||
object (literal object)
|
|
||||||
- Returns TF object
|
|
||||||
=====================================================*/
|
|
||||||
// function setFilterGrid(id){
|
|
||||||
// if(arguments.length === 0){
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// let tf = new TableFilter(arguments[0], arguments[1], arguments[2]);
|
|
||||||
// tf.init();
|
|
||||||
// window['tf_'+id] = tf;
|
|
||||||
// return tf;
|
|
||||||
// }
|
|
||||||
|
|
80
test/test-cols-visibility.html
Normal file
80
test/test-cols-visibility.html
Normal file
|
@ -0,0 +1,80 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>TableFilter filter with columns visibility extension</title>
|
||||||
|
<link rel="stylesheet" href="libs/qunit/qunit.css">
|
||||||
|
<script src="libs/qunit/qunit.js"></script>
|
||||||
|
<script src="libs/polyfill.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table id="demo">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>From</th>
|
||||||
|
<th>Destination</th>
|
||||||
|
<th>Road Distance (km)</th>
|
||||||
|
<th>By Air (hrs)</th>
|
||||||
|
<th>By Rail (hrs)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<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-cols-visibility.js"></script>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
<div id="qunit-fixture"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
150
test/test-cols-visibility.js
Normal file
150
test/test-cols-visibility.js
Normal file
|
@ -0,0 +1,150 @@
|
||||||
|
|
||||||
|
(function(win, TableFilter){
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
extensions:[{ name: 'colsVisibility' }]
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
var ext;
|
||||||
|
|
||||||
|
module('Sanity checks');
|
||||||
|
test('Extension initialization', function() {
|
||||||
|
ext = tf.getExtension('colsVisibility');
|
||||||
|
deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
|
||||||
|
notEqual(ext, null, 'Extension instanciated');
|
||||||
|
deepEqual(ext.initialized, true, 'Extension initialized');
|
||||||
|
deepEqual(ext.text, 'Hide: ', 'Text setting');
|
||||||
|
deepEqual(ext.btnText, 'Columns▼', 'Button text setting');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('UI checks');
|
||||||
|
test('UI elements', function() {
|
||||||
|
ext = tf.getExtension('colsVisibility');
|
||||||
|
var span = ext.spanEl;
|
||||||
|
var cont = ext.contEl;
|
||||||
|
var btn = ext.btnEl;
|
||||||
|
deepEqual(span.nodeName, 'SPAN', 'Container element');
|
||||||
|
deepEqual(cont.nodeName, 'DIV', 'Container element');
|
||||||
|
deepEqual(cont.getElementsByTagName('p')[0].innerHTML,
|
||||||
|
'Hide: ', 'Expected text');
|
||||||
|
deepEqual(btn.nodeName, 'A', 'Button element');
|
||||||
|
deepEqual(btn.innerHTML, 'Columns▼');
|
||||||
|
});
|
||||||
|
module('Behaviour');
|
||||||
|
test('Toggle columns list container', function() {
|
||||||
|
ext = tf.getExtension('colsVisibility');
|
||||||
|
ext.toggle();
|
||||||
|
deepEqual(ext.contEl.style.display, 'inline', 'columns list visible');
|
||||||
|
|
||||||
|
ext.toggle();
|
||||||
|
deepEqual(ext.contEl.style.display, 'none', 'columns list visible');
|
||||||
|
});
|
||||||
|
test('Hide columns', function() {
|
||||||
|
ext = tf.getExtension('colsVisibility');
|
||||||
|
ext.hideCol(2);
|
||||||
|
ext.hideCol(3);
|
||||||
|
deepEqual(ext.isColHidden(2), true, 'Expected column is hidden');
|
||||||
|
deepEqual(ext.isColHidden(3), true, 'Expected column is hidden');
|
||||||
|
});
|
||||||
|
test('Show columns', function() {
|
||||||
|
ext = tf.getExtension('colsVisibility');
|
||||||
|
ext.showCol(2);
|
||||||
|
ext.showCol(3);
|
||||||
|
deepEqual(ext.isColHidden(2), false, 'Expected column is displayed');
|
||||||
|
deepEqual(ext.isColHidden(3), false, 'Expected column is displayed');
|
||||||
|
});
|
||||||
|
test('Toggle column', function() {
|
||||||
|
ext = tf.getExtension('colsVisibility');
|
||||||
|
ext.toggleCol(2);
|
||||||
|
deepEqual(ext.isColHidden(2), true, 'Expected column is hidden');
|
||||||
|
|
||||||
|
ext.toggleCol(2);
|
||||||
|
deepEqual(ext.isColHidden(2), false, 'Expected column is displayed');
|
||||||
|
});
|
||||||
|
test('Destroy extension', function() {
|
||||||
|
ext = tf.getExtension('colsVisibility');
|
||||||
|
ext.destroy();
|
||||||
|
deepEqual(ext.initialized, false, 'Extension no longer initialized');
|
||||||
|
deepEqual(ext.contEl, null, 'Columns list container removed');
|
||||||
|
deepEqual(ext.btnEl, null, 'Button removed');
|
||||||
|
});
|
||||||
|
|
||||||
|
// module('Behaviour');
|
||||||
|
// test('Filter column with custom filter', function() {
|
||||||
|
// var flt = tf.getFilterElement(3);
|
||||||
|
// flt.selectedIndex = flt.options.length-1;
|
||||||
|
// tf.filter();
|
||||||
|
|
||||||
|
// deepEqual(
|
||||||
|
// tf.getFilteredData().length, 2, 'Expected nb of filtered rows');
|
||||||
|
|
||||||
|
// tf.clearFilters();
|
||||||
|
|
||||||
|
// deepEqual(
|
||||||
|
// tf.getFilteredData().length, 7, 'Expected nb of filtered rows');
|
||||||
|
// });
|
||||||
|
|
||||||
|
// test('Paging: filter column with custom filter', function() {
|
||||||
|
// tf.destroy();
|
||||||
|
// tf = null;
|
||||||
|
// tf = new TableFilter('demo', {
|
||||||
|
// col_3: 'select',
|
||||||
|
// custom_options: {
|
||||||
|
// cols: [3],
|
||||||
|
// texts: [['0-0.5', '0.5-1', '1-2', '>2']],
|
||||||
|
// values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
|
||||||
|
// sorts: [false]
|
||||||
|
// },
|
||||||
|
// paging: true,
|
||||||
|
// paging_length: 3
|
||||||
|
// });
|
||||||
|
// tf.init();
|
||||||
|
|
||||||
|
// var flt = tf.getFilterElement(3);
|
||||||
|
// flt.selectedIndex = flt.options.length-1;
|
||||||
|
// tf.filter();
|
||||||
|
|
||||||
|
// deepEqual(
|
||||||
|
// tf.getFilteredData().length, 2, 'Expected nb of filtered rows');
|
||||||
|
|
||||||
|
// tf.clearFilters();
|
||||||
|
|
||||||
|
// deepEqual(
|
||||||
|
// tf.getFilteredData().length, 7, 'Expected nb of filtered rows');
|
||||||
|
|
||||||
|
// tf.destroy();
|
||||||
|
// tf = null;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// test('Grid layout: filter column with custom filter', function() {
|
||||||
|
// tf = new TableFilter('demo', {
|
||||||
|
// base_path: '../dist/tablefilter/',
|
||||||
|
// col_3: 'select',
|
||||||
|
// custom_options: {
|
||||||
|
// cols: [3],
|
||||||
|
// texts: [['0-0.5', '0.5-1', '1-2', '>2']],
|
||||||
|
// values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
|
||||||
|
// sorts: [false]
|
||||||
|
// },
|
||||||
|
// grid_layout: true
|
||||||
|
// });
|
||||||
|
// tf.init();
|
||||||
|
|
||||||
|
// var flt = tf.getFilterElement(3);
|
||||||
|
// flt.selectedIndex = flt.options.length-1;
|
||||||
|
// tf.filter();
|
||||||
|
|
||||||
|
// deepEqual(
|
||||||
|
// tf.getFilteredData().length, 2, 'Expected nb of filtered rows');
|
||||||
|
|
||||||
|
// tf.clearFilters();
|
||||||
|
|
||||||
|
// deepEqual(
|
||||||
|
// tf.getFilteredData().length, 7, 'Expected nb of filtered rows');
|
||||||
|
|
||||||
|
// tf.destroy();
|
||||||
|
// tf = null;
|
||||||
|
// });
|
||||||
|
|
||||||
|
})(window, TableFilter);
|
|
@ -14,7 +14,7 @@
|
||||||
tf.init();
|
tf.init();
|
||||||
|
|
||||||
module('Sanity checks');
|
module('Sanity checks');
|
||||||
test('Active columns', function() {
|
test('Filter type', function() {
|
||||||
deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
|
deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
|
||||||
deepEqual(
|
deepEqual(
|
||||||
tf.getFilterElement(3).nodeName, 'SELECT', 'Expected filter type');
|
tf.getFilterElement(3).nodeName, 'SELECT', 'Expected filter type');
|
||||||
|
|
|
@ -2,9 +2,7 @@
|
||||||
|
|
||||||
var tf = new TableFilter('demo', {
|
var tf = new TableFilter('demo', {
|
||||||
base_path: '../dist/tablefilter/',
|
base_path: '../dist/tablefilter/',
|
||||||
extensions:[{
|
extensions: [{ name: 'filtersVisibility' }]
|
||||||
name: 'filtersVisibility'
|
|
||||||
}]
|
|
||||||
});
|
});
|
||||||
tf.init();
|
tf.init();
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,13 @@
|
||||||
|
|
||||||
var Cookie = TableFilter.Cookie;
|
function removeCookie(name){
|
||||||
|
var expire = '';
|
||||||
|
var hours = -1;
|
||||||
|
if(hours){
|
||||||
|
expire = new Date((new Date()).getTime() + hours * 3600000);
|
||||||
|
expire = '; expires=' + expire.toGMTString();
|
||||||
|
}
|
||||||
|
document.cookie = name + '=' + expire;
|
||||||
|
}
|
||||||
|
|
||||||
var tf = new TableFilter('demo', {
|
var tf = new TableFilter('demo', {
|
||||||
base_path: '../dist/tablefilter/',
|
base_path: '../dist/tablefilter/',
|
||||||
|
@ -11,9 +19,9 @@ var tf = new TableFilter('demo', {
|
||||||
remember_page_length: true
|
remember_page_length: true
|
||||||
});
|
});
|
||||||
|
|
||||||
Cookie.remove(tf.fltsValuesCookie);
|
removeCookie(tf.fltsValuesCookie);
|
||||||
Cookie.remove(tf.pgNbCookie);
|
removeCookie(tf.pgNbCookie);
|
||||||
Cookie.remove(tf.pgLenCookie);
|
removeCookie(tf.pgLenCookie);
|
||||||
|
|
||||||
tf.init();
|
tf.init();
|
||||||
tf.clearFilters();
|
tf.clearFilters();
|
||||||
|
@ -30,7 +38,7 @@ module('Check page number persistence');
|
||||||
test('Page number value', function() {
|
test('Page number value', function() {
|
||||||
tf.clearFilters();
|
tf.clearFilters();
|
||||||
tf.filter();
|
tf.filter();
|
||||||
tf.feature('paging')._changePage(1);
|
tf.feature('paging').changePage(1);
|
||||||
var cookieName = tf.pgNbCookie;
|
var cookieName = tf.pgNbCookie;
|
||||||
deepEqual(tf.feature('store').getPageNb(cookieName), '2', 'Page number value');
|
deepEqual(tf.feature('store').getPageNb(cookieName), '2', 'Page number value');
|
||||||
tf.clearFilters();
|
tf.clearFilters();
|
||||||
|
@ -41,7 +49,7 @@ module('Check page length persistence');
|
||||||
test('Page length value', function() {
|
test('Page length value', function() {
|
||||||
var paging = tf.feature('paging');
|
var paging = tf.feature('paging');
|
||||||
paging.resultsPerPageSlc.options[2].selected = true;
|
paging.resultsPerPageSlc.options[2].selected = true;
|
||||||
paging._changeResultsPerPage();
|
paging.changeResultsPerPage();
|
||||||
var cookieName = tf.pgLenCookie;
|
var cookieName = tf.pgLenCookie;
|
||||||
deepEqual(tf.feature('store').getPageLength(cookieName), '2', 'Page length value');
|
deepEqual(tf.feature('store').getPageLength(cookieName), '2', 'Page length value');
|
||||||
tf.clearFilters();
|
tf.clearFilters();
|
||||||
|
@ -56,7 +64,10 @@ test('Filters value', function() {
|
||||||
var cookieName = tf.fltsValuesCookie;
|
var cookieName = tf.fltsValuesCookie;
|
||||||
deepEqual(tf.feature('store').getFilterValues(cookieName)[0], 'Sydney', 'Filter 0 value');
|
deepEqual(tf.feature('store').getFilterValues(cookieName)[0], 'Sydney', 'Filter 0 value');
|
||||||
deepEqual(tf.feature('store').getFilterValues(cookieName)[3], '1.5', 'Filter 3 value');
|
deepEqual(tf.feature('store').getFilterValues(cookieName)[3], '1.5', 'Filter 3 value');
|
||||||
tf.clearFilters();
|
tf.destroy();
|
||||||
tf.filter();
|
|
||||||
|
removeCookie(tf.fltsValuesCookie);
|
||||||
|
removeCookie(tf.pgNbCookie);
|
||||||
|
removeCookie(tf.pgLenCookie);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue