test-formhandler.html 9.56 KB
Newer Older
S Anand's avatar
S Anand committed
1
2
3
4
5
<!DOCTYPE html>
<html>
<head>
  <title>formhandler tests</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
  <style>
  .position-relative {
    position: relative;
  }
  .pos-cc {
    position: absolute;
    top: 45%;
    left: 45%;
  }
  .d-none {
    display: none !important;
  }
  </style>
S Anand's avatar
S Anand committed
20
21
22
23
  <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>
24
25
  <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
26
27
28
29
30
31
32
33
34
  <script src="../dist/formhandler.min.js"></script>
  <script src="tape.js"></script>

</head>
<body>
  <script>
    tape.onFinish(function () { window.renderComplete = true })
  </script>

35
36
37
38
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>
  <div class="fh11"></div>
  <div class="fh12"></div>
  <div class="fh13"></div>
  <div class="formhandler" data-src="formhandler.json" data-page-size="10"></div>

S Anand's avatar
S Anand committed
50
  <script>
51
    tape('$().formhandler() basic example works', function(t) {
S Anand's avatar
S Anand committed
52
      $('.formhandler').formhandler({
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
        pageSize: 20
      }).on('load', function(e) {
        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()
      })
    })
    tape('$().formhandler() renders data from data-src, overriding options.src', function(t) {
      $('.fh1')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function() {
          t.equals($('.fh1 tbody tr').length, 50)
          t.end()
        })
    })
    tape('$().formhandler() uses option.src if no data-src exists', function(t) {
      $('.fh2')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
          t.equal($('.fh2 tbody tr').length, 2)
          t.end()
        })
    })
    tape('$().formhandler() shows default controls if meta is present', function(t) {
      $('.fh3')
        .formhandler({
          src: 'formhandler-small.json',
          transform: function(obj) {
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
        .on('load', function() {
          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()
        })
    })

    tape('$().formhandler() disables controls via data-attributes', function(t) {
      $('.fh4')
        .formhandler({
          src: 'formhandler-small.json',
          transform: function(obj) {
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
        .on('load', function() {
          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: [
            { name: 'Continent', format: function(o) {return o.toUpperCase()}}
          ]
        })
        .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()
        })
      })
    tape('$().formhandler() applies format option (date type) option mentioned in options.columns', function (t) {
      $('.fh10')
      .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

        // 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')


        t.end()
S Anand's avatar
S Anand committed
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
    // tape('$(fh11).formhandler() must show error message if input data is invalid json', function (t) {
    //   $('.fh11')
    //     .formhandler({
    //       src: 'formhandler-invalid.json'
    //     })
    //     .on('load', function () {
    //       t.equal($('.fh11 p').text().trim(), 'Invalid data or no data found')
    //       t.end()
    //     })
    // })
    // tape('$().formhandler() must show error message if formhandler url is missing', function (t) {
    //   $('.fh12')
    //     .formhandler({
    //     })
    //     .on('load', function () {
    //       t.equal($('.fh11 p').text().trim(), 'Invalid data or no data found')
    //       t.end()
    //     })
    // })
    // tape('$().formhandler() must show error message if formhandler returns HTTP status 500/403/400', function (t) {
    //   $('.fh13')
    //     .formhandler({
    //     })
    //     .on('load', function () {
    //       t.end()
    //     })
    // })
S Anand's avatar
S Anand committed
254
255
256
  </script>
</body>
</html>