mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-04-26 04:01:33 +02:00
Started columns visibility extension tests
This commit is contained in:
Max Guglielmi
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
|
||||
* build date: 2015-07-01T08:00:52.824Z
|
||||
* build date: 2015-07-02T07:41:11.707Z
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -113,8 +113,8 @@ export default class ColsVisibility{
|
|||
if(tf.gridLayout){
|
||||
this.headersTbl = tf.feature('gridLayout').headTbl; //headers table
|
||||
this.headersIndex = 0; //headers index
|
||||
this.onAfterColDisplayed = function(){};
|
||||
this.onAfterColHidden = function(){};
|
||||
// this.onAfterColDisplayed = function(){};
|
||||
// this.onAfterColHidden = function(){};
|
||||
}
|
||||
|
||||
//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',
|
||||
* 'checklist' type)
|
||||
|
|
@ -2777,38 +2746,3 @@ export class TableFilter{
|
|||
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();
|
||||
|
||||
module('Sanity checks');
|
||||
test('Active columns', function() {
|
||||
test('Filter type', function() {
|
||||
deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
|
||||
deepEqual(
|
||||
tf.getFilterElement(3).nodeName, 'SELECT', 'Expected filter type');
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@
|
|||
|
||||
var tf = new TableFilter('demo', {
|
||||
base_path: '../dist/tablefilter/',
|
||||
extensions:[{
|
||||
name: 'filtersVisibility'
|
||||
}]
|
||||
extensions: [{ name: 'filtersVisibility' }]
|
||||
});
|
||||
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', {
|
||||
base_path: '../dist/tablefilter/',
|
||||
|
|
@ -11,9 +19,9 @@ var tf = new TableFilter('demo', {
|
|||
remember_page_length: true
|
||||
});
|
||||
|
||||
Cookie.remove(tf.fltsValuesCookie);
|
||||
Cookie.remove(tf.pgNbCookie);
|
||||
Cookie.remove(tf.pgLenCookie);
|
||||
removeCookie(tf.fltsValuesCookie);
|
||||
removeCookie(tf.pgNbCookie);
|
||||
removeCookie(tf.pgLenCookie);
|
||||
|
||||
tf.init();
|
||||
tf.clearFilters();
|
||||
|
|
@ -30,7 +38,7 @@ module('Check page number persistence');
|
|||
test('Page number value', function() {
|
||||
tf.clearFilters();
|
||||
tf.filter();
|
||||
tf.feature('paging')._changePage(1);
|
||||
tf.feature('paging').changePage(1);
|
||||
var cookieName = tf.pgNbCookie;
|
||||
deepEqual(tf.feature('store').getPageNb(cookieName), '2', 'Page number value');
|
||||
tf.clearFilters();
|
||||
|
|
@ -41,7 +49,7 @@ module('Check page length persistence');
|
|||
test('Page length value', function() {
|
||||
var paging = tf.feature('paging');
|
||||
paging.resultsPerPageSlc.options[2].selected = true;
|
||||
paging._changeResultsPerPage();
|
||||
paging.changeResultsPerPage();
|
||||
var cookieName = tf.pgLenCookie;
|
||||
deepEqual(tf.feature('store').getPageLength(cookieName), '2', 'Page length value');
|
||||
tf.clearFilters();
|
||||
|
|
@ -56,7 +64,10 @@ test('Filters value', function() {
|
|||
var cookieName = tf.fltsValuesCookie;
|
||||
deepEqual(tf.feature('store').getFilterValues(cookieName)[0], 'Sydney', 'Filter 0 value');
|
||||
deepEqual(tf.feature('store').getFilterValues(cookieName)[3], '1.5', 'Filter 3 value');
|
||||
tf.clearFilters();
|
||||
tf.filter();
|
||||
tf.destroy();
|
||||
|
||||
removeCookie(tf.fltsValuesCookie);
|
||||
removeCookie(tf.pgNbCookie);
|
||||
removeCookie(tf.pgLenCookie);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue