1 |
|
2 | var test = require('tape')
|
3 | var h = require('../')
|
4 | var o = require('observable')
|
5 | var spy = require('ispy')
|
6 | var simu = require('simulate')
|
7 |
|
8 | test('simple', function (t) {
|
9 | t.equal(h('h1').outerHTML, '<h1></h1>')
|
10 | t.equal(h('h1', 'hello world').outerHTML, '<h1>hello world</h1>')
|
11 | t.end()
|
12 | })
|
13 |
|
14 | test('nested', function(t) {
|
15 | t.equal(h('div',
|
16 | h('h1', 'Title'),
|
17 | h('p', 'Paragraph')
|
18 | ).outerHTML, '<div><h1>Title</h1><p>Paragraph</p></div>')
|
19 | t.end()
|
20 | })
|
21 |
|
22 | test('arrays for nesting is ok', function(t){
|
23 | t.equal(h('div',
|
24 | [h('h1', 'Title'), h('p', 'Paragraph')]
|
25 | ).outerHTML, '<div><h1>Title</h1><p>Paragraph</p></div>')
|
26 | t.end()
|
27 | })
|
28 |
|
29 | test('can use namespace in name', function(t){
|
30 | t.equal(h('myns:mytag').outerHTML, '<myns:mytag></myns:mytag>');
|
31 | t.end()
|
32 | })
|
33 |
|
34 | test('can use id selector', function(t){
|
35 | t.equal(h('div#frame').outerHTML, '<div id="frame"></div>')
|
36 | t.end()
|
37 | })
|
38 |
|
39 | test('can use class selector', function(t){
|
40 | t.equal(h('div.panel').outerHTML, '<div class="panel"></div>')
|
41 | t.end()
|
42 | })
|
43 |
|
44 | test('can default element types', function(t){
|
45 | t.equal(h('.panel').outerHTML, '<div class="panel"></div>')
|
46 | t.equal(h('#frame').outerHTML, '<div id="frame"></div>')
|
47 | t.end()
|
48 | })
|
49 |
|
50 | test('can set properties', function(t){
|
51 | var a = h('a', {href: 'http://google.com'})
|
52 | t.equal(a.href, 'http://google.com/')
|
53 | var checkbox = h('input', {name: 'yes', type: 'checkbox'})
|
54 | t.equal(checkbox.outerHTML, '<input name="yes" type="checkbox">')
|
55 | t.end()
|
56 | })
|
57 |
|
58 | test('registers event handlers', function(t){
|
59 | var onClick = spy()
|
60 | var p = h('p', {onclick: onClick}, 'something')
|
61 | simu.click(p)
|
62 | t.assert(onClick.called)
|
63 | t.end()
|
64 | })
|
65 |
|
66 | test('sets styles', function(t){
|
67 | var div = h('div', {style: {'color': 'red'}})
|
68 | t.equal(div.style.color, 'red')
|
69 | t.end()
|
70 | })
|
71 |
|
72 | test('sets styles as text', function(t){
|
73 | var div = h('div', {style: 'color: red'})
|
74 | t.equal(div.style.color, 'red')
|
75 | t.end()
|
76 | })
|
77 |
|
78 | test('sets data attributes', function(t){
|
79 | var div = h('div', {'data-value': 5})
|
80 | t.equal(div.getAttribute('data-value'), '5')
|
81 | t.end()
|
82 | })
|
83 |
|
84 | test('boolean, number, date, regex get to-string\'ed', function(t){
|
85 | var e = h('p', true, false, 4, new Date('Mon Jan 15 2001'), /hello/)
|
86 | t.assert(e.outerHTML.match(/<p>truefalse4Mon Jan 15.+2001.*\/hello\/<\/p>/))
|
87 | t.end()
|
88 | })
|
89 |
|
90 | test('observable content', function(t){
|
91 | var title = o()
|
92 | title('Welcome to HyperScript!')
|
93 | var h1 = h('h1', title)
|
94 | t.equal(h1.outerHTML, '<h1>Welcome to HyperScript!</h1>')
|
95 | title('Leave, creep!')
|
96 | t.equal(h1.outerHTML, '<h1>Leave, creep!</h1>')
|
97 | t.end()
|
98 | })
|
99 |
|
100 | test('observable property', function(t){
|
101 | var checked = o()
|
102 | checked(true)
|
103 | var checkbox = h('input', {type: 'checkbox', checked: checked})
|
104 | t.equal(checkbox.checked, true)
|
105 | checked(false)
|
106 | t.equal(checkbox.checked, false)
|
107 | t.end()
|
108 | })
|
109 |
|
110 | test('observable style', function(t){
|
111 | var color = o()
|
112 | color('red')
|
113 | var div = h('div', {style: {'color': color}})
|
114 | t.equal(div.style.color, 'red')
|
115 | color('blue')
|
116 | t.equal(div.style.color, 'blue')
|
117 | t.end()
|
118 | })
|
119 |
|
120 | test('context basic', function(t){
|
121 | var _h = h.context()
|
122 | var p = _h('p', 'hello')
|
123 | t.equal(p.outerHTML, '<p>hello</p>')
|
124 | _h.cleanup()
|
125 | t.end()
|
126 | })
|
127 |
|
128 | test('context cleanup removes observable listeners', function(t){
|
129 | var _h = h.context()
|
130 | var text = o()
|
131 | text('hello')
|
132 | var color = o()
|
133 | color('red')
|
134 | var className = o()
|
135 | className('para')
|
136 | var p = _h('p', {style: {color: color}, className: className}, text)
|
137 | t.equal(p.outerHTML, '<p style=\"color: red; \" class=\"para\">hello</p>')
|
138 | _h.cleanup()
|
139 | color('blue')
|
140 | text('world')
|
141 | className('section')
|
142 | t.equal(p.outerHTML, '<p style=\"color: red; \" class=\"para\">hello</p>')
|
143 | t.end()
|
144 | })
|
145 |
|
146 | test('context cleanup removes event handlers', function(t){
|
147 | var _h = h.context()
|
148 | var onClick = spy()
|
149 | var button = _h('button', 'Click me!', {onclick: onClick})
|
150 | _h.cleanup()
|
151 | simu.click(button)
|
152 | t.assert(!onClick.called, 'click listener was not triggered')
|
153 | t.end()
|
154 | })
|