test-formhandler.html 11.7 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
<body>
  <script>
    tape.onFinish(function () { window.renderComplete = true })
  </script>
S Anand's avatar
S Anand committed
38
  <div class="fh13" data-src="/formhandler-data"></div>
S Anand's avatar
S Anand committed
39

40
41
42
43
44
45
46
47
48
49
  <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>
50
51
  <div class="fh11" data-src="formhandler.json"></div>
  <div class="fh12" data-src="formhandler.json"></div>
52
53
  <div class="formhandler" data-src="formhandler.json" data-page-size="10"></div>

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

111
    tape('$().formhandler() disables controls via data-attributes', function (t) {
112
113
114
      $('.fh4')
        .formhandler({
          src: 'formhandler-small.json',
115
          transform: function (obj) {
116
117
118
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
119
        .on('load', function () {
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
198
          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: [
199
            { name: 'Continent', format: function (o) { return o.toUpperCase() } }
200
201
202
203
204
205
206
207
          ]
        })
        .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()
        })
208
    })
209
210
    tape('$().formhandler() applies format option (date type) option mentioned in options.columns', function (t) {
      $('.fh10')
211
212
213
214
215
216
217
218
219
220
        .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
221

222
223
224
225
          // 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')
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
          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
S Anand's avatar
S Anand committed
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
          t.equal($('.fh12 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() if namespace is given for urlfilter, apply that ', function (t) {
      window.history.pushState({}, '', '#')
      window.history.pushState({}, '', g1.url.parse(location.href).toString() + '#' + g1.url.parse(location.hash).update({ 'fhname13:Continent': 'Europe', _limit: 5 }).toString())

      $('.fh13')
      .formhandler({
        name: 'fhname13',
        columns: [
          {
            name: 'Continent'
          }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(1) > td > a').text().trim(' '),
                  'Europe')
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(2) > td > a').text().trim(' '),
            'Europe')
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(3) > td > a').text().trim(' '),
            'Europe')
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(4) > td > a').text().trim(' '),
            'Europe')
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(5) > td > a').text().trim(' '),
            'Europe')
          window.history.pushState({}, '', '#')
289
290
          t.end()
        })
S Anand's avatar
S Anand committed
291
    })
S Anand's avatar
S Anand committed
292
    // TODO: test if not encoded url args work
S Anand's avatar
S Anand committed
293
294
  </script>
</body>
295

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