mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-08 09:26:40 +02:00
Finalised filters visibility extensions tests
This commit is contained in:
parent
8f835ab1fe
commit
78fe75b3d3
|
@ -1176,7 +1176,7 @@ webpackJsonp([1],[
|
||||||
|
|
||||||
this.icnExpandHtml = '<img src="' + this.path + this.icnExpand + '" alt="Expand filters" >';
|
this.icnExpandHtml = '<img src="' + this.path + this.icnExpand + '" alt="Expand filters" >';
|
||||||
this.icnCollapseHtml = '<img src="' + this.path + this.icnCollapse + '" alt="Collapse filters" >';
|
this.icnCollapseHtml = '<img src="' + this.path + this.icnCollapse + '" alt="Collapse filters" >';
|
||||||
this.defaultText = 'Expand/Collapse filters';
|
this.defaultText = 'Toggle filters';
|
||||||
|
|
||||||
//id of container element
|
//id of container element
|
||||||
this.targetId = f.target_id || null;
|
this.targetId = f.target_id || null;
|
||||||
|
@ -1244,7 +1244,7 @@ webpackJsonp([1],[
|
||||||
span.className = this.contCssClass;
|
span.className = this.contCssClass;
|
||||||
|
|
||||||
//Container element (rdiv or custom element)
|
//Container element (rdiv or custom element)
|
||||||
if (this.targetId) {
|
if (!this.targetId) {
|
||||||
tf.setToolbar();
|
tf.setToolbar();
|
||||||
}
|
}
|
||||||
var targetEl = !this.targetId ? tf.rDiv : _Dom2['default'].id(this.targetId);
|
var targetEl = !this.targetId ? tf.rDiv : _Dom2['default'].id(this.targetId);
|
||||||
|
@ -1888,4 +1888,4 @@ webpackJsonp([1],[
|
||||||
|
|
||||||
/***/ }
|
/***/ }
|
||||||
]);
|
]);
|
||||||
//# sourceMappingURL=1-eda749d2ef2fcdb2e245.js.map
|
//# sourceMappingURL=1-d577df757d4add915f61.js.map
|
5
dist/tablefilter/style/filtersVisibility.css
vendored
5
dist/tablefilter/style/filtersVisibility.css
vendored
|
@ -17,10 +17,7 @@ span.expClpFlt img{
|
||||||
margin:1px 1px 1px 1px;
|
margin:1px 1px 1px 1px;
|
||||||
/*background:#f4f4f4;*/
|
/*background:#f4f4f4;*/
|
||||||
}
|
}
|
||||||
span.expClpFlt img:hover{
|
span.expClpFlt img:hover{}
|
||||||
background:#fff;
|
|
||||||
/*border:1px solid #666; */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* button */
|
/* button */
|
||||||
.btnExpClpFlt{ margin:0 5px 0 5px; }
|
.btnExpClpFlt{ margin:0 5px 0 5px; }
|
2
dist/tablefilter/tablefilter.js
vendored
2
dist/tablefilter/tablefilter.js
vendored
|
@ -83,7 +83,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ script.charset = 'utf-8';
|
/******/ script.charset = 'utf-8';
|
||||||
/******/ script.async = true;
|
/******/ script.async = true;
|
||||||
/******/
|
/******/
|
||||||
/******/ script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "-" + {"1":"eda749d2ef2fcdb2e245"}[chunkId] + ".js";
|
/******/ script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "-" + {"1":"d577df757d4add915f61"}[chunkId] + ".js";
|
||||||
/******/ head.appendChild(script);
|
/******/ head.appendChild(script);
|
||||||
/******/ }
|
/******/ }
|
||||||
/******/ };
|
/******/ };
|
||||||
|
|
|
@ -30,7 +30,7 @@ export default class FiltersVisibility{
|
||||||
'" alt="Expand filters" >';
|
'" alt="Expand filters" >';
|
||||||
this.icnCollapseHtml = '<img src="'+ this.path + this.icnCollapse +
|
this.icnCollapseHtml = '<img src="'+ this.path + this.icnCollapse +
|
||||||
'" alt="Collapse filters" >';
|
'" alt="Collapse filters" >';
|
||||||
this.defaultText = 'Expand/Collapse filters';
|
this.defaultText = 'Toggle filters';
|
||||||
|
|
||||||
//id of container element
|
//id of container element
|
||||||
this.targetId = f.target_id || null;
|
this.targetId = f.target_id || null;
|
||||||
|
@ -100,7 +100,7 @@ export default class FiltersVisibility{
|
||||||
span.className = this.contCssClass;
|
span.className = this.contCssClass;
|
||||||
|
|
||||||
//Container element (rdiv or custom element)
|
//Container element (rdiv or custom element)
|
||||||
if(this.targetId){
|
if(!this.targetId){
|
||||||
tf.setToolbar();
|
tf.setToolbar();
|
||||||
}
|
}
|
||||||
let targetEl = !this.targetId ? tf.rDiv : Dom.id(this.targetId);
|
let targetEl = !this.targetId ? tf.rDiv : Dom.id(this.targetId);
|
||||||
|
|
80
test/test-filters-visibility.html
Normal file
80
test/test-filters-visibility.html
Normal file
|
@ -0,0 +1,80 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>TableFilter filters visibility extension tests</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-filters-visibility.js"></script>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
<div id="qunit-fixture"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
111
test/test-filters-visibility.js
Normal file
111
test/test-filters-visibility.js
Normal file
|
@ -0,0 +1,111 @@
|
||||||
|
(function(win, TableFilter){
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
extensions:[{
|
||||||
|
name: 'filtersVisibility'
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
var extTargetElement = document.createElement('div');
|
||||||
|
extTargetElement.setAttribute('id', 'test');
|
||||||
|
document.body.insertBefore(extTargetElement, tf.tbl);
|
||||||
|
|
||||||
|
module('Sanity checks');
|
||||||
|
test('Filters visibility extension', function() {
|
||||||
|
var ext = tf.ExtRegistry.filtersVisibility;
|
||||||
|
deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
|
||||||
|
notEqual(ext, null, 'Extension instanciated');
|
||||||
|
deepEqual(ext.initialized, true, 'Extension initialized');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('Check UI');
|
||||||
|
test('UI elements', function() {
|
||||||
|
var ext = tf.ExtRegistry.filtersVisibility;
|
||||||
|
var cont = ext.contEl;
|
||||||
|
var btn = ext.btnEl;
|
||||||
|
deepEqual(cont.nodeName, 'SPAN', 'Container element');
|
||||||
|
deepEqual(btn.nodeName, 'A', 'Button element');
|
||||||
|
deepEqual(btn.title, 'Toggle filters', 'Button tooltip');
|
||||||
|
deepEqual(btn.firstChild.nodeName, 'IMG', 'Image element');
|
||||||
|
deepEqual(btn.firstChild.alt, 'Collapse filters', 'Button tooltip');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('Check behaviours');
|
||||||
|
test('Toggle filters', function() {
|
||||||
|
var ext = tf.ExtRegistry.filtersVisibility;
|
||||||
|
ext.toggle();
|
||||||
|
var filtersRow = tf.tbl.rows[tf.getFiltersRowIndex()];
|
||||||
|
deepEqual(filtersRow.style.display, 'none', 'Filters hidden');
|
||||||
|
ext.toggle();
|
||||||
|
deepEqual(filtersRow.style.display, '', 'Filters displayed');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Remove extension', function() {
|
||||||
|
var ext = tf.ExtRegistry.filtersVisibility;
|
||||||
|
ext.destroy();
|
||||||
|
deepEqual(ext.contEl, null, 'Container element removed');
|
||||||
|
deepEqual(ext.btnEl, null, 'Button element removed');
|
||||||
|
deepEqual(ext.initialized, false, 'Extension not initialized');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Button without icon', function() {
|
||||||
|
tf.destroy();
|
||||||
|
tf = new TableFilter('demo', {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
extensions:[{
|
||||||
|
name: 'filtersVisibility',
|
||||||
|
enable_icon: false
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
var ext = tf.ExtRegistry.filtersVisibility;
|
||||||
|
deepEqual(ext.contEl.nodeName, 'SPAN', 'Container element');
|
||||||
|
deepEqual(ext.btnEl.nodeName, 'A', 'Button element');
|
||||||
|
deepEqual(ext.btnEl.innerHTML, 'Toggle filters', 'Expected text');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Button in external Container', function() {
|
||||||
|
tf.destroy();
|
||||||
|
tf = new TableFilter('demo', {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
extensions:[{
|
||||||
|
name: 'filtersVisibility',
|
||||||
|
target_id: 'test',
|
||||||
|
btn_text: 'Hello'
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
var ext = tf.ExtRegistry.filtersVisibility;
|
||||||
|
var btn = ext.btnEl;
|
||||||
|
deepEqual(
|
||||||
|
extTargetElement.firstChild.nodeName, 'SPAN', 'Container element');
|
||||||
|
deepEqual(btn.nodeName, 'A', 'Button element');
|
||||||
|
deepEqual(btn.textContent || btn.innerText, 'Hello', 'Expected text');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Grid layout: filters hidden at start', function() {
|
||||||
|
tf.destroy();
|
||||||
|
tf = new TableFilter('demo', {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
grid_layout: true,
|
||||||
|
extensions:[{
|
||||||
|
name: 'filtersVisibility',
|
||||||
|
visible_at_start: false
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
var ext = tf.ExtRegistry.filtersVisibility;
|
||||||
|
var gridLayout = tf.Cpt.gridLayout;
|
||||||
|
var filtersRow = gridLayout.headTbl.rows[tf.getFiltersRowIndex()];
|
||||||
|
var cont = ext.contEl;
|
||||||
|
var btn = ext.btnEl;
|
||||||
|
deepEqual(filtersRow.style.display, 'none', 'Filters hidden');
|
||||||
|
deepEqual(cont.nodeName, 'SPAN', 'Container element');
|
||||||
|
deepEqual(btn.nodeName, 'A', 'Button element');
|
||||||
|
});
|
||||||
|
|
||||||
|
})(window, TableFilter);
|
Loading…
Reference in a new issue