test-formhandler.html 10.1 KB
Newer Older
S Anand's avatar
S Anand committed
1
2
<!DOCTYPE html>
<html>
3

S Anand's avatar
S Anand committed
4
5
6
<head>
  <title>formhandler tests</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
7
8
  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
  <style>
9
10
11
12
13
14
15
16
17
18
19
20
21
    .position-relative {
      position: relative;
    }

    .pos-cc {
      position: absolute;
      top: 45%;
      left: 45%;
    }

    .d-none {
      display: none !important;
    }
22
  </style>
S Anand's avatar
S Anand committed
23
24
25
26
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../node_modules/lodash/lodash.min.js"></script>
27
28
  <script src="../node_modules/moment/min/moment.min.js"></script>
  <script src="../node_modules/numeral/min/numeral.min.js"></script>
S Anand's avatar
S Anand committed
29
30
31
32
  <script src="../dist/formhandler.min.js"></script>
  <script src="tape.js"></script>

</head>
33

S Anand's avatar
S Anand committed
34
35
36
37
38
<body>
  <script>
    tape.onFinish(function () { window.renderComplete = true })
  </script>

39
40
41
42
43
44
45
46
47
48
  <div class="fh1" data-src="formhandler.json"></div>
  <div class="fh2"></div>
  <div class="fh3"></div>
  <div class="fh4" data-table="false" data-count="false" data-page="false" data-size="false" data-export="false" data-filters="false"></div>
  <div class="fh5" data-src="formhandler.json"></div>
  <div class="fh6" data-src="formhandler.json"></div>
  <div class="fh7" data-src="formhandler.json"></div>
  <div class="fh8" data-src="formhandler.json"></div>
  <div class="fh9" data-src="formhandler.json"></div>
  <div class="fh10"></div>
49
50
  <div class="fh11" data-src="formhandler.json"></div>
  <div class="fh12" data-src="formhandler.json"></div>
51
52
  <div class="formhandler" data-src="formhandler.json" data-page-size="10"></div>

S Anand's avatar
S Anand committed
53
  <script>
54
    tape('$().formhandler() basic example works', function (t) {
S Anand's avatar
S Anand committed
55
      $('.formhandler').formhandler({
56
        pageSize: 20
57
      }).on('load', function (e) {
58
59
60
61
62
63
64
65
        t.equals(e.options.pageSize, 10)
        // TODO: Review: if _limit is given in url, e.args._limit is [10] not 10
        t.equals(e.args._limit, 10)
        t.ok(e.formdata.length > 0)
        t.equals($('.formhandler table tbody tr').length, e.formdata.length)
        t.end()
      })
    })
66
    tape('$().formhandler() renders data from data-src, overriding options.src', function (t) {
67
68
      $('.fh1')
        .formhandler({ src: 'formhandler-small.json' })
69
        .on('load', function () {
70
71
72
73
          t.equals($('.fh1 tbody tr').length, 50)
          t.end()
        })
    })
74
    tape('$().formhandler() uses option.src if no data-src exists', function (t) {
75
76
77
78
79
80
81
      $('.fh2')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
          t.equal($('.fh2 tbody tr').length, 2)
          t.end()
        })
    })
82
    tape('$().formhandler() shows default controls if meta is present', function (t) {
83
84
85
      $('.fh3')
        .formhandler({
          src: 'formhandler-small.json',
86
          transform: function (obj) {
87
88
89
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
90
        .on('load', function () {
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
          t.equal($('.fh3 tbody tr').length, 2)
          t.equal($('.fh3 .count').length, 1)
          t.ok($('.fh3 .count').text().match(/2 rows/))

          t.equal($('.fh3 .page').length, 1)
          t.ok($('.fh3 .page').text().match(/Previous.*Next/))

          t.equal($('.fh3 .size').length, 1)
          t.ok($('.fh3 .size').text().match(/2 rows/))

          t.equal($('.fh3 .filters').length, 1)

          t.equal($('.fh3 .export').length, 1)
          t.ok($('.fh3 .export').text().match(/Export as/))

          t.end()
        })
    })

110
    tape('$().formhandler() disables controls via data-attributes', function (t) {
111
112
113
      $('.fh4')
        .formhandler({
          src: 'formhandler-small.json',
114
          transform: function (obj) {
115
116
117
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
118
        .on('load', function () {
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
          t.equal($('.fh4 .table').html(), '')
          t.equal($('.fh4 .count').html(), '')
          t.equal($('.fh4 .page').html(), '')
          t.equal($('.fh4 .size').html(), '')
          t.equal($('.fh4 .filters').html(), '')
          t.equal($('.fh4 .export').html(), '')
          t.end()
        })
    })
    tape('$().formhandler() applies {sort: true, hideable: false} option mentioned in options.columns', function (t) {
      $('.fh5')
        .formhandler({
          columns: [
            { name: 'Continent', sort: true, hideable: false }
          ]
        })
        .on('load', function () {
          // display only Continent column
          t.equal($('.fh5 thead tr th').length, 1)
          t.equal($('.fh5 [data-col="Continent"] div:nth-child(1) div a:nth-child(1)').text().trim(), "Sort ascending")
          t.equal($('.fh5 [data-col="Continent"] div:nth-child(1) div a:nth-child(2)').text().trim(), "Sort descending")
          t.notEqual($('.fh5 [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide")

          t.end()
        })
    })
    tape('$().formhandler() allows updating column info only for specific columns', function (t) {
      $('.fh6')
        .formhandler({
          columns: [
            { name: 'Continent', title: 'CustomTitle', sort: true },
            { name: '*' }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
          t.equal($('.fh6 thead tr th').length, 17)
          // there should not be a column with name 'Continent'
          t.notOk($('.fh6 thead tr').text().match(/Continent/))
          // there shoudl be a column with name 'CustomTitle'
          t.ok($('.fh6 thead tr').text().match(/CustomTitle/))
          // column is hideable by default
          t.equal($('.fh6 [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide")
          t.end()
        })
    })
    tape('$().formhandler() applies {sort: false} option mentioned in options.columns', function (t) {
      $('.fh7')
        .formhandler({
          columns: [
            { name: 'Continent', sort: false }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
          t.equal($('.fh7 thead tr th').length, 1)
          t.notEqual($('.fh7 [data-col="Continent"] div:nth-child(1) div a:nth-child(1)').text().trim(), "Sort ascending")
          t.notEqual($('.fh7 [data-col="Continent"] div:nth-child(1) div a:nth-child(2)').text().trim(), "Sort descending")
          t.end()
        })
    })
    tape('$().formhandler() ---- applies custom sorting names option mentioned in options.columns', function (t) {
      $('.fh8')
        .formhandler({
          columns: [
            { name: 'Continent', sort: { '': 'Sort by Alphabet', '-': 'Sort reverse alphabet' } },
          ]
        })
        .on('load', function () {
          // check if custom sort names are displayed
          t.equal($('.fh8 [data-col="Continent"] div:nth-child(1) div a:nth-child(1)').text().trim(), "Sort by Alphabet")
          t.equal($('.fh8 [data-col="Continent"] div:nth-child(1) div a:nth-child(2)').text().trim(), "Sort reverse alphabet")
          t.end()
        })
    })
    tape('$().formhandler() applies format option (function, text, number) option mentioned in options.columns', function (t) {
      $('.fh9')
        .formhandler({
          columns: [
198
            { name: 'Continent', format: function (o) { return o.toUpperCase() } }
199
200
201
202
203
204
205
206
          ]
        })
        .on('load', function () {
          // check if by default text type is applied
          // check if function is applied as format
          t.equal($('.fh9 tbody tr:first-of-type td:first-of-type a').text().trim(), "EUROPE")
          t.end()
        })
207
    })
208
209
    tape('$().formhandler() applies format option (date type) option mentioned in options.columns', function (t) {
      $('.fh10')
210
211
212
213
214
215
216
217
218
219
        .formhandler({
          src: 'formhandler-types.json',
          columns: [
            { name: 'Amount', type: 'number', format: '$0,0.00' },
            { name: 'Date', type: 'date', format: 'DD-MM-YYYY' }
          ]
        })
        .on('load', function () {
          // check if number is given, applied filters display name must be Greater than, Lesser than
          // check if date is give, applied filters display name must be Before, After
220

221
222
223
224
          // check if format is applied to number type using numeraljs
          t.equal($('.fh10 tbody tr:first-of-type td:nth-of-type(1) a').text().trim(), '$3,500.00')
          // check if format is applied to date type using momentjs
          t.equal($('.fh10 tbody tr:first-of-type td:nth-of-type(2) a').text().trim(), '08-02-2013')
225
226


227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
          t.end()
        })
    })
    tape('$().formhandler() link attr will let user goto that link instead of applying filter', function (t) {
      $('.fh11')
        .formhandler({
          columns: [
            {
              name: 'Continent',
              link: 'https://en.wikipedia.org/wiki/<%= Continent.split(" ").join(" ") %>'
            }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
          t.equal($('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').attr('href'), 'https://en.wikipedia.org/wiki/' + $('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').text().split(" ").join(" "))
          t.end()
        })
    })
    tape('$().formhandler() link attr will let user goto that link instead of applying filter using function', function (t) {
      $('.fh12')
        .formhandler({
          columns: [
            {
              name: 'Continent',
              link: function (row) { return 'https://en.wikipedia.org/wiki/' + row.split(" ").join(" ") }
            }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
          t.equal($('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').attr('href'), 'https://en.wikipedia.org/wiki/' + $('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').text().split(" ").join(" "))
          t.end()
        })
S Anand's avatar
S Anand committed
261
262
263
    })
  </script>
</body>
264

S Anand's avatar
S Anand committed
265
</html>