attributes.ts 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import { assert } from "chai";
  2. import { init, attributesModule, h } from "../../src/index";
  3. const patch = init([attributesModule]);
  4. describe("attributes", function () {
  5. let elm: any, vnode0: any;
  6. beforeEach(function () {
  7. elm = document.createElement("div");
  8. vnode0 = elm;
  9. });
  10. it("have their provided values", function () {
  11. const vnode1 = h("div", {
  12. attrs: { href: "/foo", minlength: 1, selected: true, disabled: false },
  13. });
  14. elm = patch(vnode0, vnode1).elm;
  15. assert.strictEqual(elm.getAttribute("href"), "/foo");
  16. assert.strictEqual(elm.getAttribute("minlength"), "1");
  17. assert.strictEqual(elm.hasAttribute("selected"), true);
  18. assert.strictEqual(elm.getAttribute("selected"), "");
  19. assert.strictEqual(elm.hasAttribute("disabled"), false);
  20. });
  21. it("can be memoized", function () {
  22. const cachedAttrs = { href: "/foo", minlength: 1, selected: true };
  23. const vnode1 = h("div", { attrs: cachedAttrs });
  24. const vnode2 = h("div", { attrs: cachedAttrs });
  25. elm = patch(vnode0, vnode1).elm;
  26. assert.strictEqual(elm.getAttribute("href"), "/foo");
  27. assert.strictEqual(elm.getAttribute("minlength"), "1");
  28. assert.strictEqual(elm.getAttribute("selected"), "");
  29. elm = patch(vnode1, vnode2).elm;
  30. assert.strictEqual(elm.getAttribute("href"), "/foo");
  31. assert.strictEqual(elm.getAttribute("minlength"), "1");
  32. assert.strictEqual(elm.getAttribute("selected"), "");
  33. });
  34. it("are not omitted when falsy values are provided", function () {
  35. const vnode1 = h("div", {
  36. attrs: { href: null as any, minlength: 0, value: "", title: "undefined" },
  37. });
  38. elm = patch(vnode0, vnode1).elm;
  39. assert.ok(elm.hasAttribute("href"));
  40. assert.ok(elm.hasAttribute("minlength"));
  41. assert.ok(elm.hasAttribute("value"));
  42. assert.ok(elm.hasAttribute("title"));
  43. });
  44. it("are set correctly when namespaced", function () {
  45. const vnode1 = h("div", { attrs: { "xlink:href": "#foo" } });
  46. elm = patch(vnode0, vnode1).elm;
  47. assert.strictEqual(
  48. elm.getAttributeNS("http://www.w3.org/1999/xlink", "href"),
  49. "#foo"
  50. );
  51. });
  52. it("should not touch class nor id fields", function () {
  53. elm = document.createElement("div");
  54. elm.id = "myId";
  55. elm.className = "myClass";
  56. vnode0 = elm;
  57. const vnode1 = h("div#myId.myClass", { attrs: {} }, ["Hello"]);
  58. elm = patch(vnode0, vnode1).elm;
  59. assert.strictEqual(elm.tagName, "DIV");
  60. assert.strictEqual(elm.id, "myId");
  61. assert.strictEqual(elm.className, "myClass");
  62. assert.strictEqual(elm.textContent, "Hello");
  63. });
  64. describe("boolean attribute", function () {
  65. it("is present and empty string if the value is truthy", function () {
  66. const vnode1 = h("div", {
  67. attrs: { required: true, readonly: 1, noresize: "truthy" },
  68. });
  69. elm = patch(vnode0, vnode1).elm;
  70. assert.strictEqual(elm.hasAttribute("required"), true);
  71. assert.strictEqual(elm.getAttribute("required"), "");
  72. assert.strictEqual(elm.hasAttribute("readonly"), true);
  73. assert.strictEqual(elm.getAttribute("readonly"), "1");
  74. assert.strictEqual(elm.hasAttribute("noresize"), true);
  75. assert.strictEqual(elm.getAttribute("noresize"), "truthy");
  76. });
  77. it("is omitted if the value is false", function () {
  78. const vnode1 = h("div", { attrs: { required: false } });
  79. elm = patch(vnode0, vnode1).elm;
  80. assert.strictEqual(elm.hasAttribute("required"), false);
  81. assert.strictEqual(elm.getAttribute("required"), null);
  82. });
  83. it("is not omitted if the value is falsy", function () {
  84. const vnode1 = h("div", {
  85. attrs: { readonly: 0, noresize: null as any },
  86. });
  87. elm = patch(vnode0, vnode1).elm;
  88. assert.ok(elm.hasAttribute("readonly"));
  89. assert.ok(elm.hasAttribute("noresize"));
  90. });
  91. });
  92. describe("Object.prototype property", function () {
  93. it("is not considered as a boolean attribute and shouldn't be omitted", function () {
  94. const vnode1 = h("div", { attrs: { constructor: true } });
  95. elm = patch(vnode0, vnode1).elm;
  96. assert.strictEqual(elm.hasAttribute("constructor"), true);
  97. assert.strictEqual(elm.getAttribute("constructor"), "");
  98. const vnode2 = h("div", { attrs: { constructor: false } });
  99. elm = patch(vnode0, vnode2).elm;
  100. assert.strictEqual(elm.hasAttribute("constructor"), false);
  101. });
  102. });
  103. });