mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-08 01:16: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.icnCollapseHtml = '<img src="' + this.path + this.icnCollapse + '" alt="Collapse filters" >';
|
||||
this.defaultText = 'Expand/Collapse filters';
|
||||
this.defaultText = 'Toggle filters';
|
||||
|
||||
//id of container element
|
||||
this.targetId = f.target_id || null;
|
||||
|
@ -1244,7 +1244,7 @@ webpackJsonp([1],[
|
|||
span.className = this.contCssClass;
|
||||
|
||||
//Container element (rdiv or custom element)
|
||||
if (this.targetId) {
|
||||
if (!this.targetId) {
|
||||
tf.setToolbar();
|
||||
}
|
||||
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;
|
||||
/*background:#f4f4f4;*/
|
||||
}
|
||||
span.expClpFlt img:hover{
|
||||
background:#fff;
|
||||
/*border:1px solid #666; */
|
||||
}
|
||||
span.expClpFlt img:hover{}
|
||||
|
||||
/* button */
|
||||
.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.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);
|
||||
/******/ }
|
||||
/******/ };
|
||||
|
|
|
@ -30,7 +30,7 @@ export default class FiltersVisibility{
|
|||
'" alt="Expand 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
|
||||
this.targetId = f.target_id || null;
|
||||
|
@ -100,7 +100,7 @@ export default class FiltersVisibility{
|
|||
span.className = this.contCssClass;
|
||||
|
||||
//Container element (rdiv or custom element)
|
||||
if(this.targetId){
|
||||
if(!this.targetId){
|
||||
tf.setToolbar();
|
||||
}
|
||||
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