test-dom-element.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. var test = require("tape")
  2. module.exports = testDomElement
  3. function testDomElement(document) {
  4. var cleanup = require('./cleanup')(document)
  5. test("can getElementsByClassName", function(assert) {
  6. function append_div(classNames, parent) {
  7. var div = document.createElement("div")
  8. div.className = classNames
  9. parent.appendChild(div)
  10. return div
  11. }
  12. function assertMatch(classNames, expectedElements, parent) {
  13. var parent = parent || document
  14. var result = parent.getElementsByClassName(classNames)
  15. assert.equal(result.length, expectedElements.length)
  16. for (var i = 0; i < expectedElements.length; i++) {
  17. assert.notEqual(expectedElements.indexOf(result[i]), -1)
  18. }
  19. }
  20. var divA = append_div("A", document.body)
  21. var divB = append_div("B", document.body)
  22. var divC = append_div("C", document.body)
  23. var divA1 = append_div("A1", divA)
  24. var divA2 = append_div("A2", divA)
  25. var divB1 = append_div("B1", divB)
  26. var divB2 = append_div("B2", divB)
  27. var divB2a = append_div("B2a", divB2)
  28. var divB2b = append_div("B2b", divB2)
  29. assertMatch("A", [divA])
  30. assertMatch("B", [divB])
  31. assertMatch("C", [divC])
  32. assertMatch("A1", [divA1])
  33. assertMatch("A2", [divA2])
  34. assertMatch("B1", [divB1])
  35. assertMatch("B2", [divB2])
  36. assertMatch("B2a", [divB2a])
  37. assertMatch("B2b", [divB2b])
  38. assertMatch("A1", [divA1], divA)
  39. assertMatch("A2", [divA2], divA)
  40. assertMatch("A1", [], divB)
  41. assertMatch("A2", [], divC)
  42. assertMatch("B1", [divB1], divB)
  43. assertMatch("B2", [divB2], divB)
  44. assertMatch("B2a", [divB2a], divB)
  45. assertMatch("B2a", [divB2a], divB2)
  46. assertMatch("B2b", [], divA)
  47. cleanup()
  48. assert.end()
  49. })
  50. test("does not serialize innerText as an attribute", function(assert) {
  51. var div = document.createElement("div")
  52. div.innerText = "Test <&>"
  53. assert.equal(div.toString(), "<div>Test &lt;&amp;&gt;</div>")
  54. cleanup()
  55. assert.end()
  56. })
  57. test("does not serialize innerHTML as an attribute", function(assert) {
  58. var div = document.createElement("div")
  59. div.innerHTML = "Test <img />"
  60. assert.equal(div.toString(), "<div>Test <img /></div>")
  61. cleanup()
  62. assert.end()
  63. })
  64. test("can getElementsByTagName", function(assert) {
  65. var parent = document.createElement("div")
  66. var child1 = document.createElement("span")
  67. var child2 = document.createElement("span")
  68. child1.id = "foo"
  69. child2.id = "bar"
  70. child1.appendChild(child2)
  71. parent.appendChild(child1)
  72. var elems = parent.getElementsByTagName("SPAN")
  73. assert.equal(elems.length, 2)
  74. assert.equal(elems[0].id, "foo")
  75. assert.equal(elems[1].id, "bar")
  76. cleanup()
  77. assert.end()
  78. })
  79. test("can getElementsByTagName with *", function(assert) {
  80. var e1 = document.createElement("div")
  81. var e2 = document.createElement("p")
  82. var e3 = document.createElement("span")
  83. e1.appendChild(e2)
  84. e2.appendChild(e3)
  85. // non-elements should be ignored
  86. e3.appendChild(document.createTextNode('foo'))
  87. e3.appendChild(document.createComment('bar'))
  88. var elems = e1.getElementsByTagName("*")
  89. assert.equal(elems.length, 2)
  90. assert.equal(elems[0].tagName, "P")
  91. assert.equal(elems[1].tagName, "SPAN")
  92. cleanup()
  93. assert.end()
  94. })
  95. test("getElement* methods can be passed to map()", function(assert) {
  96. var container = document.createElement("div")
  97. var e1 = document.createElement("div")
  98. var e2 = document.createElement("span")
  99. container.appendChild(e1)
  100. container.appendChild(e2)
  101. assert.deepEqual(
  102. ["div", "span"].map(container.getElementsByTagName.bind(container)),
  103. [[e1], [e2]]
  104. )
  105. e1.className = "foo"
  106. e2.className = "bar"
  107. assert.deepEqual(
  108. ["foo", "bar"].map(container.getElementsByClassName.bind(container)),
  109. [[e1], [e2]]
  110. )
  111. cleanup()
  112. assert.end()
  113. })
  114. test("can serialize comment nodes", function(assert) {
  115. var div = document.createElement("div")
  116. div.appendChild(document.createComment("test"))
  117. assert.equal(div.toString(), "<div><!--test--></div>")
  118. cleanup()
  119. assert.end()
  120. })
  121. test("can serialize style property", function(assert) {
  122. var div = document.createElement("div")
  123. div.style.fontSize = "16px"
  124. assert.equal(div.toString(), "<div style=\"font-size:16px;\"></div>")
  125. cleanup();
  126. assert.end()
  127. })
  128. test("can serialize style as a string", function(assert) {
  129. var div = document.createElement("div")
  130. div.setAttribute('style', 'display: none')
  131. assert.equal(div.toString(), "<div style=\"display: none\"></div>")
  132. cleanup()
  133. assert.end()
  134. })
  135. test("can serialize text nodes", function(assert) {
  136. var div = document.createElement("div")
  137. div.appendChild(document.createTextNode('<test> "&'))
  138. assert.equal(div.toString(), '<div>&lt;test&gt; "&amp;</div>')
  139. cleanup()
  140. assert.end()
  141. })
  142. test("escapes serialized attribute values", function(assert) {
  143. var div = document.createElement("div")
  144. div.setAttribute("data-foo", '<p>"&')
  145. assert.equal(div.toString(), '<div data-foo="&lt;p&gt;&quot;&amp;"></div>')
  146. cleanup()
  147. assert.end()
  148. })
  149. test("can check if an element contains another", function(assert) {
  150. var parent = document.createElement("div")
  151. var sibling = document.createElement("div")
  152. var child1 = document.createElement("div")
  153. var child2 = document.createElement("div")
  154. child1.appendChild(child2)
  155. parent.appendChild(child1)
  156. assert.equal(parent.contains(parent), true)
  157. assert.equal(parent.contains(sibling), false)
  158. assert.equal(parent.contains(child1), true)
  159. assert.equal(parent.contains(child2), true)
  160. cleanup()
  161. assert.end()
  162. })
  163. test("can handle non string attribute values", function(assert) {
  164. var div = document.createElement("div")
  165. div.setAttribute("data-number", 100)
  166. div.setAttribute("data-boolean", true)
  167. div.setAttribute("data-null", null)
  168. assert.equal(div.toString(), '<div data-number="100" data-boolean="true" data-null=""></div>')
  169. cleanup()
  170. assert.end()
  171. })
  172. test("can serialize textarea correctly", function(assert) {
  173. var input = document.createElement("textarea")
  174. input.setAttribute("name", "comment")
  175. input.innerHTML = "user input here"
  176. assert.equal(input.toString(), '<textarea name="comment">user input here</textarea>')
  177. cleanup()
  178. assert.end()
  179. })
  180. }