test-template.html 10.8 KB
Newer Older
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
  <title>template tests</title>
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../node_modules/lodash/lodash.min.js"></script>
7
  <script src="../node_modules/morphdom/dist/morphdom-umd.min.js"></script>
S Anand's avatar
S Anand committed
8
  <script src="../dist/template.min.js"></script>
9
  <script src="tape.js"></script>
10
11
12
  <style>
    circle, rect { transition: all 0.5s ease; }
  </style>
13
14
15
16
17
18
</head>
<body>
  <script>
    tape.onFinish(function () { window.renderComplete = true })
  </script>

19
  <h1>Lodash templates</h1>
20
21
  <script type="text/html" id="t1">Your platform is <%= navigator.userAgent %></script>
  <script>
22
23
24
    function strip(text) {
      return text.replace(/^\s+/, '').replace(/\s+$/, '')
    }
25
26
    function text(target) {
      var node = target.get(0)
27
      return node ? strip(node.textContent) : ''
28
    }
29
    tape('$().template() renders plain text with variables', function(t) {
30
31
32
33
34
35
36
37
38
39
40
41
      $('#t1')
        .one('template.g1', function (e) {
          t.equal(e.target.length, 1)
          t.equal(text(e.target), 'Your platform is ' + navigator.userAgent)
        })
        .template()
        .one('template.g1', function (e) {
          t.equal(e.target.length, 1)
          t.equal(text(e.target), 'Your platform is abc')
          t.end()
        })
        .template({navigator: {userAgent: 'abc'}})
42
43
44
    })
  </script>

45
46
47
48
49
50
51
  <div id="t2">
    <script type="text/html">
      <% list.forEach(function(item) { %>
        <div><%= item %></div>
      <% }) %>
    </script>
  </div>
52
  <script>
53
54
55
56
    tape('$().template(data) passes data to the template', function (t) {
      var suffixes = ['x', 'y']
      t.plan(suffixes.length * 4)
      suffixes.forEach(function (suffix) {
57
        var list = ['a' + suffix, 'b' + suffix, 'c' + suffix]
58
59
60
61
62
63
        $('#t2').one('template', function (e) {
          var $divs = e.target.filter('div')
          t.equal($divs.length, list.length, 'Correct number of nodes are created')
          var text = $divs.map(function () { return this.innerHTML }).get().join(' ')
          t.equal(text, list.join(' '), 'Template content is correct')
          t.deepEqual(e.templatedata, {list: list})
64
65
          $divs.attr('class', 'my-unique-item')
          t.equal($('.my-unique-item').length, 3, 'Repeated calls over-write the same node')
66
        }).template({ list: list })
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
    })
  </script>

  <script type="text/html" id="t3" src="sample-template.html"></script>
  <script>
    tape('$().template() renders src= via AJAX load', function(t) {
      var data = { data: ['x', 'y'] }
      $('#t3').one('template', function(e) {
        t.equal(text(e.target), data.data.join(' '))
        t.deepEqual(e.templatedata, data)
        t.end()
      }).template(data)
    })
  </script>

  <script type="text/html" id="t4" src="nonexistent.html">
    <%= xhr.status %>: Not found. <%= data.join(' ') %>
  </script>
  <script>
    tape('$().template() renders contents if src= returns an error', function (t) {
      var data = { data: ['x', 'y'] }
      $('#t4').one('template', function(e) {
        t.equal(text(e.target), '404: Not found. x y')
        t.deepEqual(e.templatedata.data, data.data)
        t.equal(e.templatedata.xhr.status, 404)
        t.end()
      }).template(data)
95
96
    })
  </script>
97

98
99
100
101
102
103
104
105
106
107
108
109
  <script type="text/html" id="t5">
    <%= heading %>
  </script>
  <div class="dashboard1">has <em>old content</em></div>
  <div class="dashboard2">has <em>old content</em></div>
  <script>
    tape('$().template(data, target) renders template to any DOM element', function(t) {
      $('#t5')
        .one('template', function(e) {
          t.equal(text(e.target), 'Dashboard 1', 'renders with data')
          t.equal(strip($('.dashboard1').html()), 'Dashboard 1', 'renders to target')
        })
110
        .template({ heading: 'Dashboard 1' }, {target: '.dashboard1'})
111
112
113
114
115
        .one('template', function (e) {
          t.equal(text(e.target), 'Dashboard 2')
          t.equal(strip($('.dashboard2').html()), 'Dashboard 2', 'renders to target')
          t.end()
        })
116
        .template({ heading: 'Dashboard 2' }, {target: '.dashboard2'})
117
118
119
    })
  </script>

120
  <section id="root1">
121
122
123
124
125
126
127
128
    <script type="text/html"><%= 1 + 1 %></script>
    <script type="text/html"><%= 2 + 2 %></script>
  </section>
  <script>
    tape('$().template() renders templates of all script[type="text/html"] sub-elements', function(t) {
      var results = ['2', '4']
      t.plan(results.length)
      var index = 0
129
      $('#root1').on('template', function (e) {
130
131
132
133
134
        t.equal(text(e.target), results[index++])
      }).template()
    })
  </script>

135
  <section id="root2" data-selector="script.template">
136
137
138
139
    <script type="text/html"><div class="result"><%= 1 + 1 %></div></script>
    <script type="text/html" class="template"><div class="result"><%= 2 + 2 %></div></script>
  </section>
  <script>
140
141
    tape('$().template() accepts data-selector to select sub-elements', function (t) {
      // The second template (with .template) is triggered, not the first one
142
      $('#root2').on('template', function (e) {
143
144
145
146
147
        t.equal(e.target.filter('.result').text(), '4')
        t.end()
      }).template()
    })
  </script>
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

  <script class="target-dom" data-target=".target1" type="text/html">1 + 1 = <%= 1 + 1 %></script>
  <script class="target-dom" type="text/html">2 + 2 = <%= 2 + 2 %></script>
  <div class="target1"></div>
  <div class="target2"></div>
  <script>
    tape('$().template() data-target specifies target, overrides {target:...}', function (t) {
      t.plan(2)
      var count = 0
      // Wait for both templates to be done. Then check if the text has changed
      $('script.target-dom').on('template', function (e) {
        count++
        if (count == 2) {
          t.equal($('.target1').text(), '1 + 1 = 2')
          t.equal($('.target2').text(), '2 + 2 = 4')
        }
      }).template({}, { target: '.target2' })
    })
  </script>

168
169
  <script class="append-dom" data-append="true" type="text/html"><i class="new-dom"><%= n %></i><i class="new-dom"><%= n %></i></script>
  <script class="append-dom" data-append="true" data-target=".append-dom-target" type="text/html"><i class="new-dom-target"><%= n %></i><i class="new-dom-target"><%= n %></i></script>
170
171
172
173
174
  <div class="append-dom-target"></div>
  <script>
    tape('$().template() with data-append="true" appends data to target', function (t) {
      var count = 5
      for (var i = 0; i < count; i++) {
175
176
177
178
        $('script.append-dom').template(
          { n: i },
          { append: false }       // append=false is over-ridden by data-append
        )
179
      }
180
181
      t.equal($('.new-dom').length, count * 2)
      t.equal($('.append-dom-target .new-dom-target').length, count * 2)
182
183
184
185
      t.end()
    })
  </script>

186
187
  <script class="append-js" type="text/html"><i class="new-js"><%= n %></i><i class="new-js"><%= n %></i></script>
  <script class="append-js" data-target=".append-js-target" type="text/html"><i class="new-js-target"><%= n %></i><i class="new-js-target"><%= n %></i></script>
188
189
190
191
192
  <div class="append-js-target"></div>
  <script>
    tape('$().template() with {append:true} option appends data to target', function (t) {
      var count = 5
      for (var i = 0; i < count; i++) {
193
194
195
196
        $('script.append-js').template(
          { n: i },
          { append: true }
        )
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
      t.equal($('.new-js').length, count * 2)
      t.equal($('.append-js-target .new-js-target').length, count * 2)
      t.end()
    })
  </script>


  <h1>Morphdom templates</h1>
  <div class="morphdom-t1">
    <script class="morphdom-attr" type="text/html" data-engine="vdom">
      <svg width="100" height="10">
        <circle cx="<%= x %>" cy="5" r="5" fill="<%= color %>"/>
        <rect x="<%= 100 - x %>" y="0" width="10" height="10" fill="green"/>
      </svg>
      <span><%= x %></span>
      <svg width="100" height="10">
        <circle cx="<%= x %>" cy="5" r="5" fill="<%= color %>"/>
        <rect x="<%= 100 - x %>" y="0" width="10" height="10" fill="green"/>
      </svg>
    </script>
    <script class="morphdom-js" type="text/html">
      <b><%= x %></b>
    </script>
    <script class="morphdom-none" type="text/html">
      <i><%= x %></i>
    </script>
  </div>
  <script>
    tape('$().template() with type=text/vdom morphs the same node', function(t) {
      $('.morphdom-t1 .morphdom-attr').template({ x: 0, color: 'white' })
      $('.morphdom-t1 .morphdom-js').template({ x: 0 }, {engine: 'vdom'})
      var $circle = $('.morphdom-t1 circle')
      var $rect = $('.morphdom-t1 rect')
      var $span = $('.morphdom-t1 span')
      var $b = $('.morphdom-t1 b')
      // Use Array() instead of []. Lack of semicolons associates it with previous line
      Array(5, 50, 95).forEach(function(pos) {
        $('.morphdom-t1 .morphdom-attr').template({ x: pos, color: 'red' })
        $('.morphdom-t1 .morphdom-js').template({ x: pos }, { engine: 'vdom' })
        $circle.each(function () {
          t.equal($(this).attr('cx'), String(pos))
          t.equal($(this).attr('fill'), 'red')
        })
        $rect.each(function () { t.equal($(this).attr('x'), String(100 - pos)) })
        $span.each(function () { t.equal($(this).text(), String(pos)) })
        $b.each(function () { t.equal($(this).text(), String(pos)) })
      })
245
246
247
248
      t.end()
    })
  </script>

249
250
251
252
253
  <script type="text/html" class="animated-template" data-engine="vdom">
    <svg class="vdom-result" width="100" height="10"><circle cx="<%= x %>" cy="5" r="5" fill="black"></circle></svg>
  </script>
  <div class="morphdom-target vdom" style="background-color:#afa"></div>
  <div class="morphdom-target vdom" style="background-color:#afa"></div>
S Anand's avatar
S Anand committed
254
  <script type="text/html" class="animated-template" data-engine="vdom" data-target=".morphdom-target">
255
256
257
258
259
    <svg class="vdom-result" width="100" height="10"><circle cx="<%= x %>" cy="5" r="5" fill="black"></circle></svg>
  </script>
  <script>
    var $tmpl = $('.animated-template').template({ x: 0 })
    var circles = $('.vdom-result circle').get()
S Anand's avatar
S Anand committed
260
    var svgs = $('.vdom-result circle').get()
261
262
263
264
265
266
267
268
269
    tape('$().template() with type=text/vdom animates nodes', function(t) {
      t.deepEqual(circles.map(function (c) { return c.getBBox().x }), [-5, -5, -5])
      // In the next cycle, start animation.
      setTimeout(function () {
        $tmpl.template({ x: 100 })
        // After a short interval, check if the SVG element has moved.
        // Default position is -5 (cx - r = 0 - 5 = -5)
        setTimeout(function () {
          var x = _.max(circles.map(function (c) { return c.getBBox().x }))
S Anand's avatar
S Anand committed
270
271
272
273
          // vdom ensures that the same SVGs are still in the document, and have parents.
          // using jQuery would have removed these nodes from the document.
          t.ok(_.every(svgs.map(function (v) { return v.parentNode })), 'DOM preserved')
          // We're mid-way through the animation. Ensure that the position is mid-way
274
275
276
277
278
279
280
          t.ok(x > -5, 'x > -5')
          t.ok(x < 95, 'x < 95')
          t.end()
        }, 100)
      }, 0)
    })
  </script>
281
282
</body>
</html>