Last active
August 2, 2017 08:14
-
-
Save Skateside/76ffdc9e637a988c4b28256b163b442f to your computer and use it in GitHub Desktop.
jQuery AMCSS plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// $.am(); | |
// $.addAm(); | |
// $.removeAm(); | |
// $.hasAm(); | |
// $.normaliseAm() and $.normalizeAm() | |
// $.amHooks | |
// $.AM_PREFIX | |
describe("jQuery#am", function () { | |
it("should allow an AM attribute to be set", function () { | |
var div1 = document.createElement("div"); | |
var div2 = document.createElement("div"); | |
var jQdivs = $([div1, div2]); | |
var prefix = $.AM_PREFIX; | |
jQdivs.am("one", 1); | |
jQdivs.am({ | |
two: 2, | |
three: 3 | |
}); | |
jQdivs.am("four", function (i, value) { | |
return value + "_" + i; | |
}); | |
jQdivs.am("five", 5); | |
jQdivs.am("five", function (i, value) { | |
return value + "_" + i; | |
}); | |
// Can I set using key and value arguments? | |
chai.assert.isTrue(div1.hasAttribute(prefix + "one")); | |
chai.assert.equal(div1.getAttribute(prefix + "one"), "1"); | |
chai.assert.isTrue(div2.hasAttribute(prefix + "one")); | |
chai.assert.equal(div2.getAttribute(prefix + "one"), "1"); | |
// Can I set using an object with key/value pairs? | |
chai.assert.isTrue(div1.hasAttribute(prefix + "two")); | |
chai.assert.equal(div1.getAttribute(prefix + "two"), "2"); | |
chai.assert.isTrue(div2.hasAttribute(prefix + "two")); | |
chai.assert.equal(div2.getAttribute(prefix + "two"), "2"); | |
chai.assert.isTrue(div1.hasAttribute(prefix + "three")); | |
chai.assert.equal(div1.getAttribute(prefix + "three"), "3"); | |
chai.assert.isTrue(div2.hasAttribute(prefix + "three")); | |
chai.assert.equal(div2.getAttribute(prefix + "three"), "3"); | |
// Can I derive the value with a function? | |
chai.assert.isTrue(div1.hasAttribute(prefix + "four")); | |
chai.assert.equal(div1.getAttribute(prefix + "four"), "undefined_0"); | |
chai.assert.isTrue(div2.hasAttribute(prefix + "four")); | |
chai.assert.equal(div2.getAttribute(prefix + "four"), "undefined_1"); | |
chai.assert.isTrue(div1.hasAttribute(prefix + "five")); | |
chai.assert.equal(div1.getAttribute(prefix + "five"), "5_0"); | |
chai.assert.isTrue(div2.hasAttribute(prefix + "five")); | |
chai.assert.equal(div2.getAttribute(prefix + "five"), "5_1"); | |
}); | |
it("should replace the existing value", function () { | |
var div = document.createElement("div"); | |
var jQdiv = $(div); | |
var prefix = $.AM_PREFIX; | |
jQdiv.am("one", "a"); | |
chai.assert.isTrue(div.hasAttribute(prefix + "one")); | |
chai.assert.equal(div.getAttribute(prefix + "one"), "a"); | |
jQdiv.am("one", "b"); | |
chai.assert.equal(div.getAttribute(prefix + "two"), "b"); | |
}); | |
it("should return the AM value of the first element", function () { | |
var div1 = document.createElement("div"); | |
var div2 = document.createElement("div"); | |
var jQdivs = $([div1, div2]); | |
var prefix = $.AM_PREFIX; | |
jQdivs.am("one", "a"); | |
jQdivs.eq(1).am("one", "b"); | |
chai.assert.equal(jQdivs.am("one"), div1.getAttribute(prefix + "one")); | |
chai.assert.notEqual(jQdivs.am("one"), div2.getAttribute(prefix + "one")); | |
}); | |
it("should allow the process to be changed by $.amHooks", function () { | |
$.amHooks.test = { | |
set: function (element, value, name) { | |
return element.nodeName.toLowerCase() === "div" | |
? element.setAttribute(name, value) | |
: undefined; | |
}, | |
get: function (element, name) { | |
return element.nodeName.toLowerCase() === "div" | |
? element.getAttribute(name, value) | |
: undefined; | |
} | |
}; | |
var jQelems = $("<div></div><span></span>"); | |
var prefix = $.AM_PREFIX; | |
jQelems.eq(0).am("test", "has"); | |
jQelems.eq(1).am("test", "not"); | |
chai.assert.isTrue(jQelems[0].hasAttribute(prefix + "test")); | |
chai.assert.isFalse(jQelems[1].hasAttribute(prefix + "test")); | |
chai.assets.equal( | |
jQelems.eq(0).am("test"), | |
jQelems[0].getAttribute(prefix + "test") | |
); | |
chai.assets.isUndefined(jQelems.eq(1).am("test")); | |
delete $.amHooks.test; | |
}); | |
it("should work with jQuery#is, jQuery#find and jQuery#attr", function () { | |
var jQdiv = $("<div/>"); | |
var prefix = $.AM_PREFIX; | |
jQdiv.am("test", 1).wrap("<div/>"); | |
chai.assert.isTrue(jQdiv.is("[" + prefix + "test]")); | |
chai.assert.equal( | |
jQdiv.parent().find("[" + prefix + "test]")[0], | |
jQdiv[0] | |
); | |
chai.assert.equal(jQdiv.attr(prefix + "test"), jQdiv.am("test")); | |
}); | |
}); | |
describe("jQuery#addAm", function () { | |
it("should add to an AM attribute", function () { | |
var jQdiv = $("<div/>"); | |
jQdiv.addAm("test", "one"); | |
jQdiv.addAm("test", function (i, value) { | |
return value + value; | |
}); | |
}); | |
it("should create an AMCSS attribute if not already there", function () { | |
var div = document.createElement("div"); | |
var jQdiv = $(div); | |
jQdiv.addAm("test", "a"); | |
chai.assert.isTrue(div.hasAttribute($.AM_PREFIX + "test")); | |
}); | |
it("should be able to add multiple values at once", function () { | |
jQdiv.addAm("test", "one two"); | |
jQdiv.addAm("test", "three four"); | |
}); | |
it("should not add the same value twice", function () { | |
var jQdiv = $("<div " + $.AM_PREFIX + "test=\"one\"></div>"); | |
jQdiv.addAm("test", "one"); | |
jQdiv.addAm("test", "two one"); | |
}); | |
it("should be able to affect multiple AM attributes at once", function () { | |
jQdiv.addAm({ | |
one: "a b", | |
two: "c d" | |
}); | |
}); | |
it("should allow the process to be changed by $.amHooks", function () { | |
}); | |
}); | |
describe("jQuery#removeAm", function () { | |
it("should remove a value", function () { | |
jQdiv.removeAm("test", "one"); | |
jQdiv.removeAm("test", function (i, value) { | |
// work the same as $().removeClass() | |
// -> return string of classes to remove. | |
}); | |
}); | |
it("should not fail/error if there is no value or attribute", function () { | |
}); | |
it("should allow the attribute to be removed", function () { | |
jQdiv.removeAm("test"); | |
}); | |
}); | |
describe("jQuery#hasAm", function () { | |
it("should check if the attribute exists", function () { | |
var jQdiv = $("<div " + $.AM_PREFIX + "has=\"one\"></div>"); | |
chai.assert.isTrue(jQdiv.hasAm("has")); | |
chai.assert.isFalse(jQdiv.hasAm("not")); | |
}); | |
it("should check if the attribute has one or more values", function () { | |
var jQdiv = $("<div " + $.AM_PREFIX + "test=\"one two\"></div>"); | |
chai.assert.isTrue(jQdiv.hasAm("test", "one")); | |
chai.assert.isTrue(jQdiv.hasAm("test", "one two")); | |
chai.assert.isTrue(jQdiv.hasAm("test", "two one")); | |
chai.assert.isFalse(jQdiv.hasAm("test", "three")); | |
chai.assert.isFalse(jQdiv.hasAm("test", "two three")); | |
}); | |
}); | |
describe("jQuery.normaliseAm", function () { | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment