test-template.html 6.76 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="../dist/g1.js"></script>
8
9
10
11
12
13
14
15
16
  <script src="tape.js"></script>
</head>
<body>
  <script>
    tape.onFinish(function () { window.renderComplete = true })
  </script>

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

  <script type="text/html" id="t2">
    <% list.forEach(function(item) { %>
      <div><%= item %></div>
    <% }) %>
  </script>
  <script>
40
41
42
43
    tape('$().template(data) passes data to the template', function (t) {
      var suffixes = ['x', 'y']
      t.plan(suffixes.length * 4)
      suffixes.forEach(function (suffix) {
44
        var list = ['a' + suffix, 'b' + suffix, 'c' + suffix]
45
46
47
48
49
50
51
52
53
54
55
        $('#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})
          e.target
            .filter('div')
            .attr('class', 'item')
          t.equal($('.item').length, 3, 'Repeated calls over-write the same node')
        }).template({ list: list })
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
    })
  </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)
84
85
    })
  </script>
86

87
88
89
90
91
92
93
94
95
96
97
98
  <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')
        })
99
        .template({ heading: 'Dashboard 1' }, {target: '.dashboard1'})
100
101
102
103
104
        .one('template', function (e) {
          t.equal(text(e.target), 'Dashboard 2')
          t.equal(strip($('.dashboard2').html()), 'Dashboard 2', 'renders to target')
          t.end()
        })
105
        .template({ heading: 'Dashboard 2' }, {target: '.dashboard2'})
106
107
108
    })
  </script>

109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
  <section class="root1">
    <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
      $('.root1').on('template', function (e) {
        t.equal(text(e.target), results[index++])
      }).template()
    })
  </script>

  <section class="root2" data-selector="script.template">
    <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>
129
130
    tape('$().template() accepts data-selector to select sub-elements', function (t) {
      // The second template (with .template) is triggered, not the first one
131
132
133
134
135
136
      $('.root2').on('template', function (e) {
        t.equal(e.target.filter('.result').text(), '4')
        t.end()
      }).template()
    })
  </script>
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

  <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>

  <script class="append-dom" data-append="true" type="text/html"><span class="appended-dom"><%= n %></span></script>
  <script class="append-dom" data-append="true" data-target=".append-dom-target" type="text/html"><span class="appended-dom-target"><%= n %></span></script>
  <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++) {
        $('script.append-dom').template({ n: i }, {append: false})
      }
      t.equal($('.appended-dom').length, count)
      t.equal($('.append-dom-target .appended-dom-target').length, count)
      t.end()
    })
  </script>

  <script class="append-js" type="text/html"><span class="appended-js"><%= n %></span></script>
  <script class="append-js" data-target=".append-js-target" type="text/html"><span class="appended-js-target"><%= n %></span></script>
  <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++) {
        $('script.append-js').template({ n: i }, {append: true})
      }
      t.equal($('.appended-js').length, count)
      t.equal($('.append-js-target .appended-js-target').length, count)
      t.end()
    })
  </script>

187
188
</body>
</html>