1 |
|
2 | var tf = new TableFilter('demo', {
|
3 | base_path: '../dist/tablefilter/',
|
4 | popup_filters: true
|
5 | });
|
6 | tf.init();
|
7 |
|
8 | var popupFilter = tf.feature('popupFilter');
|
9 | module('Sanity checks');
|
10 | test('Pop-up filter component', function() {
|
11 | notEqual(popupFilter, null, 'PopupFilter instanciated');
|
12 | deepEqual(popupFilter.fltElms instanceof Array,
|
13 | true, 'Type of fltElms property');
|
14 | deepEqual(
|
15 | popupFilter.adjustToContainer,
|
16 | true,
|
17 | 'Popup filter width adjusts to container'
|
18 | );
|
19 | deepEqual(tf.headersRow, 1, 'Headers row index');
|
20 |
|
21 | deepEqual(
|
22 | tf.getHeadersText()[2],
|
23 | 'Road Distance (km)',
|
24 | 'Expected header text for multiple filter type'
|
25 | );
|
26 | deepEqual(
|
27 | tf.getHeadersText()[3],
|
28 | 'By Air (hrs)',
|
29 | 'Expected header text for multiple filter type'
|
30 | );
|
31 | deepEqual(tf.dom().rows[tf.headersRow-1].style.display, 'none',
|
32 | 'Extra row hidden');
|
33 | });
|
34 |
|
35 | module('UI elements');
|
36 | test('Pop-up filter UI elements', function() {
|
37 | var flt1 = tf.getFilterElement(0);
|
38 | var flt2 = tf.getFilterElement(1);
|
39 | var fltIcn1 = popupFilter.fltIcons[0];
|
40 | var fltIcn2 = popupFilter.fltIcons[1];
|
41 |
|
42 | notEqual(flt1, null, 'Filter element exists');
|
43 | notEqual(flt2, null, 'Filter element exists');
|
44 | deepEqual(fltIcn1.nodeName, 'IMG', 'Filter icon exists');
|
45 | deepEqual(fltIcn2.nodeName, 'IMG', 'Filter icon exists');
|
46 | });
|
47 |
|
48 | test('Can open pop-up filter', function(){
|
49 |
|
50 | popupFilter.open(1);
|
51 |
|
52 |
|
53 | deepEqual(popupFilter.fltElms[1].style.display, 'block',
|
54 | 'Popup filter is open');
|
55 | });
|
56 |
|
57 | test('Can close pop-up filter', function(){
|
58 |
|
59 | popupFilter.close(1);
|
60 |
|
61 |
|
62 | deepEqual(popupFilter.fltElms[1].style.display, 'none',
|
63 | 'Popup filter is open');
|
64 | });
|
65 |
|
66 | test('Can toggle pop-up filter (initially closed)', function(){
|
67 |
|
68 | popupFilter.close(2);
|
69 |
|
70 |
|
71 | popupFilter.toggle(2);
|
72 |
|
73 |
|
74 | deepEqual(popupFilter.fltElms[2].style.display, 'block',
|
75 | 'Popup filter is toggled');
|
76 | });
|
77 |
|
78 | test('Can toggle pop-up filter (initially opened)', function(){
|
79 |
|
80 | popupFilter.open(2);
|
81 |
|
82 |
|
83 | popupFilter.toggle(2);
|
84 |
|
85 |
|
86 | deepEqual(popupFilter.fltElms[2].style.display, 'none',
|
87 | 'Popup filter is toggled');
|
88 | });
|
89 |
|
90 | test('Pop-up filter closes upon filtering', function(){
|
91 |
|
92 | popupFilter.open(1);
|
93 |
|
94 |
|
95 | tf.setFilterValue(1, 'Adelaide');
|
96 | tf.filter();
|
97 |
|
98 |
|
99 | deepEqual(popupFilter.isOpen(1), false,
|
100 | 'Pop-up filter closed after filtering'
|
101 | );
|
102 | });
|
103 |
|
104 | test('Pop-up filter auto-closes when user clicks away', function() {
|
105 |
|
106 | popupFilter.open(0);
|
107 |
|
108 |
|
109 | var evObj = document.createEvent('HTMLEvents');
|
110 | evObj.initEvent('mouseup', true, true);
|
111 | tf.dom().rows[0].cells[2].dispatchEvent(evObj);
|
112 |
|
113 |
|
114 | deepEqual(popupFilter.isOpen(0), false,
|
115 | 'Pop-up filter closed after user clicks away'
|
116 | );
|
117 | });
|
118 |
|
119 | test('Can close all popup filters', function() {
|
120 |
|
121 | popupFilter.open(0);
|
122 |
|
123 |
|
124 | popupFilter.closeAll();
|
125 |
|
126 |
|
127 | deepEqual(popupFilter.isOpen(0), false,
|
128 | 'Pop-up filter closed after closeAll'
|
129 | );
|
130 | });
|
131 |
|
132 | module('Tear-down');
|
133 | test('TableFilter removed', function() {
|
134 | tf.destroy();
|
135 | var fltIcn1 = popupFilter.fltIcons[3];
|
136 | deepEqual(fltIcn1, undefined, 'Filter icon is removed');
|
137 | deepEqual(tf.isInitialized(), false, 'Filters removed');
|
138 | });
|