UNPKG

can

Version:

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

265 lines (179 loc) 6.95 kB
steal('can/util', 'can/view/stache', 'can/util/attr', 'steal-qunit', function () { QUnit.module("can/util/attr"); test("attributes event", function () { var div = document.createElement("div"); var attrHandler1 = function(ev) { equal(ev.attributeName, "foo", "attribute name is correct"); equal(ev.target, div, "target"); equal(ev.oldValue, null, "oldValue"); equal(div.getAttribute(ev.attributeName), "bar"); can.unbind.call(can.$(div), "attributes", attrHandler1); }; can.bind.call(can.$(div), "attributes", attrHandler1); can.attr.set(div, "foo", "bar"); stop(); setTimeout(function () { var attrHandler = function(ev) { ok(true, "removed event handler should be called"); equal(ev.attributeName, "foo", "attribute name is correct"); equal(ev.target, div, "target"); equal(ev.oldValue, "bar", "oldValue should be 'bar'"); equal(div.getAttribute(ev.attributeName), null, "value of the attribute should be null after the remove."); can.unbind.call(can.$(div), "attributes", attrHandler); start(); }; can.bind.call(can.$(div), "attributes", attrHandler); can.attr.remove(div, "foo"); }, 50); }); test("template attr updating", function () { var template = can.stache("<div my-attr='{{value}}'></div>"), compute = can.compute("foo"); var div = template({ value: compute }) .childNodes[0]; can.bind.call(can.$(div), "attributes", function (ev) { equal(ev.oldValue, "foo"); equal(ev.attributeName, "my-attr"); start(); }); equal(div.getAttribute("my-attr"), "foo", "attribute set"); stop(); compute("bar"); }); test("attr.set CHECKED attribute works", function(){ var input = document.createElement("input"); input.type = "checkbox"; document.getElementById("qunit-fixture").appendChild(input); can.attr.set(input, "CHECKED"); equal(input.checked, true); input.checked = false; can.attr.set(input, "CHECKED"); equal(input.checked, true); can.remove(can.$("#qunit-fixture>*")); }); test("attr.set READONLY property should be set correctly via template binding #1874", function () { var template = can.stache('<input type="text" {{#if flag}}READONLY{{/if}}></input>'), compute = can.compute(false); var input = template({ flag: compute }).childNodes[0]; equal(input.readOnly, false, "readOnly should be false"); compute(true); equal(input.readOnly, true, "readOnly should be set to true"); compute(false); equal(input.readOnly, false, "readOnly should be set back to false"); }); test("attr.set READONLY property should be set correctly via one way binding #2431", function () { var template = can.stache('<input type="text" {$readonly}="flag"></input>'), compute = can.compute(false); var input = template({ flag: compute }).childNodes[0]; equal(input.readOnly, false, "readOnly should be false"); compute(true); equal(input.readOnly, true, "readOnly should be set to true"); compute(false); equal(input.readOnly, false, "readOnly should be set back to false"); }); test("Map special attributes", function () { var div = document.createElement("label"); document.getElementById("qunit-fixture").appendChild(div); can.attr.set(div, "for", "my-for"); equal(div.htmlFor, "my-for", "Map for to htmlFor"); can.attr.set(div, "innertext", "my-inner-text"); equal(div.innerText, "my-inner-text", "Map innertext to innerText"); can.attr.set(div, "textcontent", "my-content"); equal(div.textContent, "my-content", "Map textcontent to textContent"); can.attr.set(div, "readonly", true); equal(div.readOnly, true, "Map readonly to readOnly"); can.remove(can.$("#qunit-fixture>*")); }); test('set class attribute via className or setAttribute for svg (#2015)', function() { var div = document.createElement('div'); var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); var obj = { toString: function() { return 'my-class'; } }; can.attr.set(div, 'class', 'my-class'); equal(div.getAttribute('class'), 'my-class', 'class mapped to className'); can.attr.set(div, 'class', undefined); equal(div.getAttribute('class'), '', 'an undefined className is an empty string'); can.attr.set(div, 'class', obj); equal(div.getAttribute('class'), 'my-class', 'you can pass an object to className'); can.attr.set(svg, 'class', 'my-class'); equal(svg.getAttribute('class'), 'my-class', 'svg class was set as an attribute'); can.attr.set(svg, 'class', undefined); equal(svg.getAttribute('class'), '', 'an undefined svg class is an empty string'); can.attr.set(svg, 'class', obj); equal(svg.getAttribute('class'), 'my-class', 'you can pass an object to svg class'); }); test("set xlink:href attribute via setAttributeNS for svg-use (#2384)", function() { var use = document.createElementNS("http://www.w3.org/2000/svg", "use"); can.attr.set(use, "xlink:href", "svgUri"); equal(use.getAttributeNS("http://www.w3.org/1999/xlink", "href"), "svgUri", "svg-use xlink:href was set with setAttributeNS"); }); if (window.jQuery || window.Zepto) { test("zepto or jQuery - bind and unbind", function () { var div = document.createElement("div"); var attrHandler = function(ev) { equal(ev.attributeName, "foo", "attribute name is correct"); equal(ev.target, div, "target"); equal(ev.oldValue, null, "oldValue"); equal(div.getAttribute(ev.attributeName), "bar"); $(div) .unbind("attributes", attrHandler) .attr("foo", "abc"); setTimeout(function () { start(); }, 20); }; $(div) .bind("attributes", attrHandler); stop(); $(div) .attr("foo", "bar"); }); } if (window.MooTools) { test("Mootools - addEvent, removeEvent, and set", function () { var div = document.createElement("div"); var attrHandler = function(ev) { equal(ev.attributeName, "foo", "attribute name is correct"); equal(ev.target, div, "target"); equal(ev.oldValue, null, "oldValue"); equal(div.getAttribute(ev.attributeName), "bar"); $(div) .removeEvent("attributes", attrHandler); $(div) .set("foo", "abc"); setTimeout(function () { start(); }, 20); }; $(div) .addEvent("attributes", attrHandler); stop(); $(div) .set("foo", "bar"); }); } if (window.dojo) { test("Dojo - on, remove, and setAttr", function () { var div = document.createElement("div"), nodeList = new dojo.NodeList(div); var handler = nodeList.on("attributes", function (ev) { equal(ev.attributeName, "foo", "attribute name is correct"); equal(ev.target, div, "target"); equal(ev.oldValue, null, "oldValue"); equal(div.getAttribute(ev.attributeName), "bar"); handler.remove(); dojo.setAttr(div, "foo", "abc"); setTimeout(function () { start(); }, 20); }); stop(); dojo.setAttr(div, "foo", "bar"); }); } });