test-translate.html 4.02 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
<!DOCTYPE html>
<html>
<head>
  <title>translate tests</title>
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../node_modules/lodash/lodash.min.js"></script>
  <script src="../dist/translate.min.js"></script>
  <script src="tape.js"></script>
  <script src="tape-stream.js"></script>
</head>
<body>
  <script>
    function text(selector) {
      var walk = document.createTreeWalker($(selector).get(0), NodeFilter.SHOW_TEXT, null, false)
      var node, result = []
      while (node = walk.nextNode()) {
        if ($.trim(node.textContent))
          result.push(node.textContent)
      }
      return result
    }
  </script>
  <section class="test1">
    <div lang="en" lang-target="nl">
      <h1>Hello <em>world</em></h1>
      <p>Some <em>English</em> text</p>
    </div>
    <script>
      tape('$.translate translates all child nodes under selector based on lang and lang-target', function(t) {
        $('.test1 [lang-target]').on('translate', function () {
          t.deepEqual(text('.test1 [lang-target]'), [
            'en-nl-Hello ',
            'en-nl-world',
            'en-nl-Some ',
            'en-nl-English',
            ' en-nl-text'
          ])
          t.end()
        }).translate({
          url: '../translate'
        })
      })
    </script>
  </section>

  <section class="test2">
    <div>
      <h1> x </h1>
      <h2> y </h2>
    </div>
    <script>
      tape('$.translate applies only to selected node', function(t) {
        $('.test2 div').on('translate', function (e) {
          t.deepEqual(text('.test2 div'), [' -nl-x ', ' -nl-y '])
          // Ensure that events have all attributes
          t.deepEqual(_.map(e.translate, 'q'), ['x', 'y'])
          t.deepEqual(_.map(e.translate, 't'), ['-nl-x', '-nl-y'])
          t.deepEqual(_.map(e.translate, 'source'), ['', ''])
          t.deepEqual(_.map(e.translate, 'target'), ['nl', 'nl'])
          t.deepEqual(_.map(e.translate, function(v) { return v.node.textContent }), [' -nl-x ', ' -nl-y '])
          t.end()
        }).translate({ target: 'nl', url: '../translate' })
      })
    </script>
  </section>

  <section class="test3">
    <div>
      <h1>This will be translated</h1>
      <h2>This will not be translated</h2>
    </div>
    <script>
      tape('$.translate applies only to selected node', function (t) {
        $('.test3 h1').on('translate', function () {
          t.deepEqual(text('.test3 div'), [
            '-de-This will be translated',
            'This will not be translated'
          ])
          t.end()
        }).translate({ target: 'de', url: '../translate' })
      })
    </script>
  </section>

  <section class="test4">
    <div class="a" lang="en" lang-target="nl">English to Dutch</div>
    <div class="b" lang-target="hi">Auto to Hindi</div>
    <script>
      tape('$.translate allows different selected elements to have different targets', function (t) {
        t.plan(2)
        $('.test4 div').on('translate', function (e) {
          if ($(e.target).is('.a'))
            t.deepEqual(text('.test4 .a'), ['en-nl-English to Dutch'])
          else if ($(e.target).is('.b'))
            t.deepEqual(text('.test4 .b'), ['-hi-Auto to Hindi'])
        }).translate({ url: '../translate' })
      })
    </script>
  </section>

  <section class="test5">
    <p lang="en" lang-target="hi" lang-url="../translate">...</p>
    <script>
      tape('$.translate attributes lang, lang-target, lang-url work as data attributes', function (t) {
        $('.test5 p').on('translate', function () {
          t.deepEqual(text('.test5 p'), ['en-hi-...'])
          t.end()
        }).translate()
      })
    </script>
  </section>

  <section class="test6">
    <p lang="en" lang-target="hi" lang-url="nonexistent-url">...</p>
    <script>
      tape('$.translate fires error event', function (t) {
        $('.test6 p').on('error', function (e) {
          t.equal(e.xhr.status, 404)
          t.deepEqual(e.request, {q: ['...'], source: 'en',  target: 'hi'})
          t.end()
        }).translate()
      })
    </script>
  </section>
</body>
</html>