Skip to content

Instantly share code, notes, and snippets.

@Skateside
Last active August 2, 2017 08:14
Show Gist options
  • Save Skateside/76ffdc9e637a988c4b28256b163b442f to your computer and use it in GitHub Desktop.
Save Skateside/76ffdc9e637a988c4b28256b163b442f to your computer and use it in GitHub Desktop.
jQuery AMCSS plugin
// $.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