Split tests into seperate JS files
Dmitry Baranovskiy
parent
b2a0817c5e
commit
9c00bc6469
|
|
@ -0,0 +1,173 @@
|
|||
describe("Attributes", function () {
|
||||
var s, r;
|
||||
beforeEach(function () {
|
||||
s = Savage(100, 100);
|
||||
r = s.rect(10, 10, 50, 50);
|
||||
});
|
||||
afterEach(function () {
|
||||
s.remove();
|
||||
});
|
||||
function colorTestProp(key) {
|
||||
var o = {};
|
||||
return function () {
|
||||
o[key] = "#fc0";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "rgb(255, 204, 0)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "hsl(0.1333, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "hsb(0.1333, 1, 1)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "rgba(255, 204, 0, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
o[key] = "hsla(0.1333, 1, .5, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
o[key] = "hsba(0.1333, 1, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
};
|
||||
}
|
||||
function colorTestStyle(key) {
|
||||
var o = {};
|
||||
return function () {
|
||||
function val() {
|
||||
return Savage.color(r.node.style[key]).hex;
|
||||
}
|
||||
o[key] = "#fc0";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "rgb(255, 204, 0)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsl(0.1333, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsb(0.1333, 1, 1)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "rgba(255, 204, 0, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsla(0.1333, 1, .5, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsba(0.1333, 1, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
};
|
||||
}
|
||||
it("sets fill", colorTestProp("fill"));
|
||||
it("sets stroke", colorTestStyle("stroke"));
|
||||
it("circle core attributes", function () {
|
||||
var c = s.circle(10, 20, 30);
|
||||
expect(c.node.getAttribute("cx")).to.be("10");
|
||||
expect(c.node.getAttribute("cy")).to.be("20");
|
||||
expect(c.node.getAttribute("r")).to.be("30");
|
||||
c.attr({
|
||||
cx: 40,
|
||||
cy: 50,
|
||||
r: "5%"
|
||||
});
|
||||
expect(c.node.getAttribute("cx")).to.be("40");
|
||||
expect(c.node.getAttribute("cy")).to.be("50");
|
||||
expect(c.node.getAttribute("r")).to.be("5%");
|
||||
});
|
||||
it("rect core attributes", function () {
|
||||
var c = s.rect(10, 20, 30, 40);
|
||||
expect(c.node.getAttribute("x")).to.be("10");
|
||||
expect(c.node.getAttribute("y")).to.be("20");
|
||||
expect(c.node.getAttribute("width")).to.be("30");
|
||||
expect(c.node.getAttribute("height")).to.be("40");
|
||||
c.attr({
|
||||
x: 40,
|
||||
y: 50,
|
||||
width: "5%",
|
||||
height: "6%",
|
||||
r: 10
|
||||
});
|
||||
expect(c.node.getAttribute("x")).to.be("40");
|
||||
expect(c.node.getAttribute("y")).to.be("50");
|
||||
expect(c.node.getAttribute("width")).to.be("5%");
|
||||
expect(c.node.getAttribute("height")).to.be("6%");
|
||||
expect(c.node.getAttribute("rx")).to.be("10");
|
||||
expect(c.node.getAttribute("ry")).to.be("10");
|
||||
});
|
||||
it("ellipse core attributes", function () {
|
||||
var c = s.ellipse(10, 20, 30, 40);
|
||||
expect(c.node.getAttribute("cx")).to.be("10");
|
||||
expect(c.node.getAttribute("cy")).to.be("20");
|
||||
expect(c.node.getAttribute("rx")).to.be("30");
|
||||
expect(c.node.getAttribute("ry")).to.be("40");
|
||||
c.attr({
|
||||
cx: 40,
|
||||
cy: 50,
|
||||
rx: "5%",
|
||||
ry: "6%"
|
||||
});
|
||||
expect(c.node.getAttribute("cx")).to.be("40");
|
||||
expect(c.node.getAttribute("cy")).to.be("50");
|
||||
expect(c.node.getAttribute("rx")).to.be("5%");
|
||||
expect(c.node.getAttribute("ry")).to.be("6%");
|
||||
});
|
||||
it("path core attributes", function () {
|
||||
var c = s.path("M10,10 110,10");
|
||||
expect(c.node.getAttribute("d")).to.be("M10,10 110,10");
|
||||
c.attr({d: "M10,10 210,10"});
|
||||
expect(c.node.getAttribute("d")).to.be("M10,10 210,10");
|
||||
c.attr({path: "M10,10 310,10"});
|
||||
expect(c.node.getAttribute("d")).to.be("M10,10 310,10");
|
||||
});
|
||||
it("text core attributes", function () {
|
||||
var c = s.text(10, 15, "testing");
|
||||
expect(c.node.getAttribute("x")).to.be("10");
|
||||
expect(c.node.getAttribute("y")).to.be("15");
|
||||
expect(c.node.textContent).to.be("testing");
|
||||
c.attr({
|
||||
x: 20,
|
||||
y: 25,
|
||||
text: "texting"
|
||||
});
|
||||
expect(c.node.getAttribute("x")).to.be("20");
|
||||
expect(c.node.getAttribute("y")).to.be("25");
|
||||
expect(c.node.textContent).to.be("texting");
|
||||
});
|
||||
it("line core attributes", function () {
|
||||
var c = s.line(10, 15, 110, 17);
|
||||
expect(c.node.getAttribute("x1")).to.be("10");
|
||||
expect(c.node.getAttribute("y1")).to.be("15");
|
||||
expect(c.node.getAttribute("x2")).to.be("110");
|
||||
expect(c.node.getAttribute("y2")).to.be("17");
|
||||
c.attr({
|
||||
x1: 20,
|
||||
y1: 25,
|
||||
x2: 220,
|
||||
y2: 27
|
||||
});
|
||||
expect(c.node.getAttribute("x1")).to.be("20");
|
||||
expect(c.node.getAttribute("y1")).to.be("25");
|
||||
expect(c.node.getAttribute("x2")).to.be("220");
|
||||
expect(c.node.getAttribute("y2")).to.be("27");
|
||||
});
|
||||
it("polyline core attributes", function () {
|
||||
var c = s.polyline(10, 15, 20, 25, 30, 35);
|
||||
expect(c.node.getAttribute("points")).to.be("10,15,20,25,30,35");
|
||||
c.attr({
|
||||
points: [20, 25, 30, 35, 40, 45]
|
||||
});
|
||||
expect(c.node.getAttribute("points")).to.be("20,25,30,35,40,45");
|
||||
});
|
||||
it("polygon core attributes", function () {
|
||||
var c = s.polygon(10, 15, 20, 25, 30, 35);
|
||||
expect(c.node.getAttribute("points")).to.be("10,15,20,25,30,35");
|
||||
c.attr({
|
||||
points: [20, 25, 30, 35, 40, 45]
|
||||
});
|
||||
expect(c.node.getAttribute("points")).to.be("20,25,30,35,40,45");
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
describe("Colours", function () {
|
||||
it("parses hex colour", function () {
|
||||
expect(Savage.color("#fC0").hex).to.be("#ffcc00");
|
||||
});
|
||||
it("parses RGB", function () {
|
||||
var c = Savage.color("rgb(255, 204, 0)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
});
|
||||
it("parses HSL", function () {
|
||||
var c = Savage.color("hsl(0.1333, 1, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.h.toFixed(3)).to.be("0.133");
|
||||
expect(c.s).to.be(1);
|
||||
expect(c.l).to.be(.5);
|
||||
});
|
||||
it("parses HSB", function () {
|
||||
var c = Savage.color("hsb(0.1333, 1, 1)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.h.toFixed(3)).to.be("0.133");
|
||||
expect(c.s).to.be(1);
|
||||
expect(c.v).to.be(1);
|
||||
});
|
||||
it("parses RGBA", function () {
|
||||
var c = Savage.color("rgba(255, 204, 0, .75)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.75);
|
||||
});
|
||||
it("parses HSLA", function () {
|
||||
var c = Savage.color("hsla(0.1333, 1, .5, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.5);
|
||||
});
|
||||
it("parses HSBA", function () {
|
||||
var c = Savage.color("hsba(0.1333, 1, 1, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.5);
|
||||
});
|
||||
it("parses names", function () {
|
||||
var c = Savage.color("DodgerBlue");
|
||||
expect(c.hex).to.be("#1e90ff");
|
||||
c = Savage.color("FireBrick");
|
||||
expect(c.hex).to.be("#b22222");
|
||||
c = Savage.color("MintCream");
|
||||
expect(c.hex).to.be("#f5fffa");
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
describe("Check for Paper Creation", function () {
|
||||
it("creates simple paper 20 × 10", function () {
|
||||
var s = Savage(20, 10);
|
||||
var S = s.node;
|
||||
expect(S).to.not.be(null);
|
||||
expect(S.getAttribute("width")).to.be("20");
|
||||
expect(S.getAttribute("height")).to.be("10");
|
||||
s.remove();
|
||||
});
|
||||
it("removal of paper", function () {
|
||||
var s = Savage(20, 10);
|
||||
var S = s.node;
|
||||
expect(S).to.not.be(null);
|
||||
s.remove();
|
||||
S = document.querySelectorAll("svg").length;
|
||||
expect(S).to.be(1);
|
||||
});
|
||||
it("creates simple paper 20% × 10em", function () {
|
||||
var s = Savage("20%", "10em");
|
||||
var S = s.node;
|
||||
expect(S).to.not.be(null);
|
||||
expect(S.getAttribute("width")).to.be("20%");
|
||||
expect(S.getAttribute("height")).to.be("10em");
|
||||
s.remove();
|
||||
});
|
||||
it("converts existing SVG element to paper", function () {
|
||||
var S = document.getElementById("svgroot");
|
||||
var s = Savage(S);
|
||||
expect(document.querySelector("#svgroot circle")).to.be(null);
|
||||
var c = s.circle(10, 20, 5);
|
||||
expect(document.querySelectorAll("#svgroot circle").length).to.be(1);
|
||||
c.remove();
|
||||
});
|
||||
it("converts existing SVG element to paper (as query)", function () {
|
||||
var S = document.getElementById("svgroot");
|
||||
var s = Savage("#svgroot");
|
||||
expect(document.querySelector("#svgroot circle")).to.be(null);
|
||||
var c = s.circle(10, 20, 5);
|
||||
expect(document.querySelectorAll("#svgroot circle").length).to.be(1);
|
||||
c.remove();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
describe("Path methods", function () {
|
||||
it("Savage.path.getTotalLength", function () {
|
||||
expect(+Savage.path.getTotalLength("M0,0 100,0").toFixed(2)).to.be(100);
|
||||
});
|
||||
it("Savage.path.getPointAtLength", function () {
|
||||
expect(Savage.path.getPointAtLength("M0,0 100,0", 50)).to.eql({
|
||||
x: 50,
|
||||
y: 0,
|
||||
m: {
|
||||
x: 25,
|
||||
y: 0
|
||||
},
|
||||
n: {
|
||||
x: 75,
|
||||
y: 0
|
||||
},
|
||||
start: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
end: {
|
||||
x: 100,
|
||||
y: 0
|
||||
},
|
||||
alpha: 180
|
||||
});
|
||||
});
|
||||
it("Savage.path.getSubpath", function () {
|
||||
expect(Savage.path.getSubpath("M0,0 100,0", 10, 90)).to.be("M9.995,0C29.153,0,70.839,0,90,0");
|
||||
expect(Savage.path.getSubpath("M0,0 100,0", 0, 90)).to.be("M0,0C0,0,64.674,0,90,0");
|
||||
expect(Savage.path.getSubpath("M0,0 100,0", 10, 120)).to.be("M10,0C35.326,0,100,0,100,0");
|
||||
});
|
||||
it("Savage.path.findDotsAtSegment", function () {
|
||||
expect(Savage.path.findDotsAtSegment(0,0,0,0,100,0,100,0,.5)).to.eql({
|
||||
x: 50,
|
||||
y: 0,
|
||||
m: {
|
||||
x: 25,
|
||||
y: 0
|
||||
},
|
||||
n: {
|
||||
x: 75,
|
||||
y: 0
|
||||
},
|
||||
start: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
end: {
|
||||
x: 100,
|
||||
y: 0
|
||||
},
|
||||
alpha: 180
|
||||
});
|
||||
});
|
||||
it("Savage.path.bezierBBox", function () {
|
||||
var bbox = Savage.path.bezierBBox(10, 10, 10, 20, 110, 0, 110, 10);
|
||||
expect(bbox.cx).to.be(60);
|
||||
expect(bbox.cy).to.be(10);
|
||||
expect(bbox.x).to.be(10);
|
||||
expect(bbox.w).to.be(100);
|
||||
expect(bbox.width).to.be(100);
|
||||
expect(bbox.x2).to.be(110);
|
||||
});
|
||||
it("Savage.path.isPointInsideBBox", function () {
|
||||
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 5, 5)).to.be(true);
|
||||
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 10, 5)).to.be(true);
|
||||
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 10, 10)).to.be(true);
|
||||
});
|
||||
it("Savage.path.isBBoxIntersect", function () {
|
||||
expect(Savage.path.isBBoxIntersect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 10,
|
||||
height: 10
|
||||
}, {
|
||||
x: 5,
|
||||
y: 5,
|
||||
width: 15,
|
||||
height: 15
|
||||
})).to.be(true);
|
||||
expect(Savage.path.isBBoxIntersect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 10,
|
||||
height: 10
|
||||
}, {
|
||||
x: 5,
|
||||
y: 5,
|
||||
width: 7,
|
||||
height: 7
|
||||
})).to.be(true);
|
||||
expect(Savage.path.isBBoxIntersect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 10,
|
||||
height: 10
|
||||
}, {
|
||||
x: 15,
|
||||
y: 15,
|
||||
width: 10,
|
||||
height: 10
|
||||
})).to.be(false);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
describe("Primitives creation", function () {
|
||||
var s;
|
||||
beforeEach(function () {
|
||||
s = Savage(100, 100);
|
||||
});
|
||||
afterEach(function () {
|
||||
s.remove();
|
||||
});
|
||||
it("creates a circle", function () {
|
||||
var c = s.circle(10, 20, 30);
|
||||
var C = document.querySelector("circle");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("cx")).to.be("10");
|
||||
expect(C.getAttribute("cy")).to.be("20");
|
||||
expect(C.getAttribute("r")).to.be("30");
|
||||
});
|
||||
it("creates a rect", function () {
|
||||
var c = s.rect(10, 20, 30, 40, 5);
|
||||
var C = document.querySelector("rect");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("x")).to.be("10");
|
||||
expect(C.getAttribute("y")).to.be("20");
|
||||
expect(C.getAttribute("width")).to.be("30");
|
||||
expect(C.getAttribute("height")).to.be("40");
|
||||
expect(C.getAttribute("rx")).to.be("5");
|
||||
expect(C.getAttribute("ry")).to.be("5");
|
||||
});
|
||||
it("creates a rect with different rx & ry", function () {
|
||||
var c = s.rect(10, 20, 30, 40, 5, 6);
|
||||
var C = document.querySelector("rect");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("x")).to.be("10");
|
||||
expect(C.getAttribute("y")).to.be("20");
|
||||
expect(C.getAttribute("width")).to.be("30");
|
||||
expect(C.getAttribute("height")).to.be("40");
|
||||
expect(C.getAttribute("rx")).to.be("5");
|
||||
expect(C.getAttribute("ry")).to.be("6");
|
||||
});
|
||||
it("creates a ellipse", function () {
|
||||
var c = s.ellipse(10, 20, 30, 40);
|
||||
var C = document.querySelector("ellipse");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("cx")).to.be("10");
|
||||
expect(C.getAttribute("cy")).to.be("20");
|
||||
expect(C.getAttribute("rx")).to.be("30");
|
||||
expect(C.getAttribute("ry")).to.be("40");
|
||||
});
|
||||
it("creates a ellipse", function () {
|
||||
var c = s.ellipse(10, 20, 30, 40);
|
||||
var C = document.querySelector("ellipse");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("cx")).to.be("10");
|
||||
expect(C.getAttribute("cy")).to.be("20");
|
||||
expect(C.getAttribute("rx")).to.be("30");
|
||||
expect(C.getAttribute("ry")).to.be("40");
|
||||
});
|
||||
it("creates a path", function () {
|
||||
var c = s.path("M10,10,50,60");
|
||||
var C = document.querySelector("path");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("d")).to.be("M10,10,50,60");
|
||||
expect(C.getBBox().width).to.be(40);
|
||||
});
|
||||
it("creates a line", function () {
|
||||
var c = s.line(10, 10, 50, 60);
|
||||
var C = document.querySelector("line");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("x1")).to.be("10");
|
||||
expect(C.getBBox().width).to.be(40);
|
||||
});
|
||||
it("creates a polyline", function () {
|
||||
var c = s.polyline(10, 10, 50, 60, 70, 80);
|
||||
var C = document.querySelector("polyline");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("points")).to.be("10,10,50,60,70,80");
|
||||
});
|
||||
it("creates a polygon", function () {
|
||||
var c = s.polygon(10, 10, 50, 60, 70, 80);
|
||||
var C = document.querySelector("polygon");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("points")).to.be("10,10,50,60,70,80");
|
||||
});
|
||||
it("creates a group", function () {
|
||||
var c = s.group();
|
||||
var C = document.querySelector("g");
|
||||
expect(C).to.not.be(null);
|
||||
});
|
||||
it("creates and fills a group", function () {
|
||||
var c = s.group(),
|
||||
a = s.circle(10, 10, 10),
|
||||
b = s.circle(20, 20, 10),
|
||||
C = document.querySelector("g");
|
||||
c.add(a, b);
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.childNodes.length).to.be(2);
|
||||
});
|
||||
it("creates a text", function () {
|
||||
var c = s.text(10, 10, "test");
|
||||
var C = document.querySelector("text");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("x")).to.be("10");
|
||||
expect(C.textContent).to.be("test");
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
describe("System check", function () {
|
||||
it("Savage exists", function () {
|
||||
expect(Savage).to.be.a("function");
|
||||
});
|
||||
it("eve exists", function () {
|
||||
expect(eve).to.be.a("function");
|
||||
});
|
||||
it("mina exists", function () {
|
||||
expect(mina).to.be.a("function");
|
||||
});
|
||||
it("elemental exists", function () {
|
||||
expect(elemental).to.be.a("function");
|
||||
});
|
||||
});
|
||||
504
test/test.html
504
test/test.html
|
|
@ -31,504 +31,12 @@
|
|||
<script src="../third-party/expect/expect.js"></script>
|
||||
<script src="../third-party/mocha/mocha.js"></script>
|
||||
<script>mocha.setup("bdd");</script>
|
||||
<script>
|
||||
describe("System check", function () {
|
||||
it("Savage exists", function () {
|
||||
expect(Savage).to.be.a("function");
|
||||
});
|
||||
it("eve exists", function () {
|
||||
expect(eve).to.be.a("function");
|
||||
});
|
||||
it("mina exists", function () {
|
||||
expect(mina).to.be.a("function");
|
||||
});
|
||||
it("elemental exists", function () {
|
||||
expect(elemental).to.be.a("function");
|
||||
});
|
||||
});
|
||||
describe("Check for Paper Creation", function () {
|
||||
it("creates simple paper 20 × 10", function () {
|
||||
var s = Savage(20, 10);
|
||||
var S = s.node;
|
||||
expect(S).to.not.be(null);
|
||||
expect(S.getAttribute("width")).to.be("20");
|
||||
expect(S.getAttribute("height")).to.be("10");
|
||||
s.remove();
|
||||
});
|
||||
it("removal of paper", function () {
|
||||
var s = Savage(20, 10);
|
||||
var S = s.node;
|
||||
expect(S).to.not.be(null);
|
||||
s.remove();
|
||||
S = document.querySelectorAll("svg").length;
|
||||
expect(S).to.be(1);
|
||||
});
|
||||
it("creates simple paper 20% × 10em", function () {
|
||||
var s = Savage("20%", "10em");
|
||||
var S = s.node;
|
||||
expect(S).to.not.be(null);
|
||||
expect(S.getAttribute("width")).to.be("20%");
|
||||
expect(S.getAttribute("height")).to.be("10em");
|
||||
s.remove();
|
||||
});
|
||||
it("converts existing SVG element to paper", function () {
|
||||
var S = document.getElementById("svgroot");
|
||||
var s = Savage(S);
|
||||
expect(document.querySelector("#svgroot circle")).to.be(null);
|
||||
var c = s.circle(10, 20, 5);
|
||||
expect(document.querySelectorAll("#svgroot circle").length).to.be(1);
|
||||
c.remove();
|
||||
});
|
||||
it("converts existing SVG element to paper (as query)", function () {
|
||||
var S = document.getElementById("svgroot");
|
||||
var s = Savage("#svgroot");
|
||||
expect(document.querySelector("#svgroot circle")).to.be(null);
|
||||
var c = s.circle(10, 20, 5);
|
||||
expect(document.querySelectorAll("#svgroot circle").length).to.be(1);
|
||||
c.remove();
|
||||
});
|
||||
});
|
||||
describe("Primitives creation", function () {
|
||||
var s;
|
||||
beforeEach(function () {
|
||||
s = Savage(100, 100);
|
||||
});
|
||||
afterEach(function () {
|
||||
s.remove();
|
||||
});
|
||||
it("creates a circle", function () {
|
||||
var c = s.circle(10, 20, 30);
|
||||
var C = document.querySelector("circle");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("cx")).to.be("10");
|
||||
expect(C.getAttribute("cy")).to.be("20");
|
||||
expect(C.getAttribute("r")).to.be("30");
|
||||
});
|
||||
it("creates a rect", function () {
|
||||
var c = s.rect(10, 20, 30, 40, 5);
|
||||
var C = document.querySelector("rect");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("x")).to.be("10");
|
||||
expect(C.getAttribute("y")).to.be("20");
|
||||
expect(C.getAttribute("width")).to.be("30");
|
||||
expect(C.getAttribute("height")).to.be("40");
|
||||
expect(C.getAttribute("rx")).to.be("5");
|
||||
expect(C.getAttribute("ry")).to.be("5");
|
||||
});
|
||||
it("creates a rect with different rx & ry", function () {
|
||||
var c = s.rect(10, 20, 30, 40, 5, 6);
|
||||
var C = document.querySelector("rect");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("x")).to.be("10");
|
||||
expect(C.getAttribute("y")).to.be("20");
|
||||
expect(C.getAttribute("width")).to.be("30");
|
||||
expect(C.getAttribute("height")).to.be("40");
|
||||
expect(C.getAttribute("rx")).to.be("5");
|
||||
expect(C.getAttribute("ry")).to.be("6");
|
||||
});
|
||||
it("creates a ellipse", function () {
|
||||
var c = s.ellipse(10, 20, 30, 40);
|
||||
var C = document.querySelector("ellipse");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("cx")).to.be("10");
|
||||
expect(C.getAttribute("cy")).to.be("20");
|
||||
expect(C.getAttribute("rx")).to.be("30");
|
||||
expect(C.getAttribute("ry")).to.be("40");
|
||||
});
|
||||
it("creates a ellipse", function () {
|
||||
var c = s.ellipse(10, 20, 30, 40);
|
||||
var C = document.querySelector("ellipse");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("cx")).to.be("10");
|
||||
expect(C.getAttribute("cy")).to.be("20");
|
||||
expect(C.getAttribute("rx")).to.be("30");
|
||||
expect(C.getAttribute("ry")).to.be("40");
|
||||
});
|
||||
it("creates a path", function () {
|
||||
var c = s.path("M10,10,50,60");
|
||||
var C = document.querySelector("path");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("d")).to.be("M10,10,50,60");
|
||||
expect(C.getBBox().width).to.be(40);
|
||||
});
|
||||
it("creates a line", function () {
|
||||
var c = s.line(10, 10, 50, 60);
|
||||
var C = document.querySelector("line");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("x1")).to.be("10");
|
||||
expect(C.getBBox().width).to.be(40);
|
||||
});
|
||||
it("creates a polyline", function () {
|
||||
var c = s.polyline(10, 10, 50, 60, 70, 80);
|
||||
var C = document.querySelector("polyline");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("points")).to.be("10,10,50,60,70,80");
|
||||
});
|
||||
it("creates a polygon", function () {
|
||||
var c = s.polygon(10, 10, 50, 60, 70, 80);
|
||||
var C = document.querySelector("polygon");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("points")).to.be("10,10,50,60,70,80");
|
||||
});
|
||||
it("creates a group", function () {
|
||||
var c = s.group();
|
||||
var C = document.querySelector("g");
|
||||
expect(C).to.not.be(null);
|
||||
});
|
||||
it("creates and fills a group", function () {
|
||||
var c = s.group(),
|
||||
a = s.circle(10, 10, 10),
|
||||
b = s.circle(20, 20, 10),
|
||||
C = document.querySelector("g");
|
||||
c.add(a, b);
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.children.length).to.be(2);
|
||||
});
|
||||
it("creates a text", function () {
|
||||
var c = s.text(10, 10, "test");
|
||||
var C = document.querySelector("text");
|
||||
expect(C).to.not.be(null);
|
||||
expect(C.getAttribute("x")).to.be("10");
|
||||
expect(C.textContent).to.be("test");
|
||||
});
|
||||
});
|
||||
describe("Colours", function () {
|
||||
it("parses hex colour", function () {
|
||||
expect(Savage.color("#fC0").hex).to.be("#ffcc00");
|
||||
});
|
||||
it("parses RGB", function () {
|
||||
var c = Savage.color("rgb(255, 204, 0)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
});
|
||||
it("parses HSL", function () {
|
||||
var c = Savage.color("hsl(0.1333, 1, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.h.toFixed(3)).to.be("0.133");
|
||||
expect(c.s).to.be(1);
|
||||
expect(c.l).to.be(.5);
|
||||
});
|
||||
it("parses HSB", function () {
|
||||
var c = Savage.color("hsb(0.1333, 1, 1)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.h.toFixed(3)).to.be("0.133");
|
||||
expect(c.s).to.be(1);
|
||||
expect(c.v).to.be(1);
|
||||
});
|
||||
it("parses RGBA", function () {
|
||||
var c = Savage.color("rgba(255, 204, 0, .75)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.75);
|
||||
});
|
||||
it("parses HSLA", function () {
|
||||
var c = Savage.color("hsla(0.1333, 1, .5, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.5);
|
||||
});
|
||||
it("parses HSBA", function () {
|
||||
var c = Savage.color("hsba(0.1333, 1, 1, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.5);
|
||||
});
|
||||
it("parses names", function () {
|
||||
var c = Savage.color("DodgerBlue");
|
||||
expect(c.hex).to.be("#1e90ff");
|
||||
c = Savage.color("FireBrick");
|
||||
expect(c.hex).to.be("#b22222");
|
||||
c = Savage.color("MintCream");
|
||||
expect(c.hex).to.be("#f5fffa");
|
||||
});
|
||||
});
|
||||
describe("Attributes", function () {
|
||||
var s, r;
|
||||
beforeEach(function () {
|
||||
s = Savage(100, 100);
|
||||
r = s.rect(10, 10, 50, 50);
|
||||
});
|
||||
afterEach(function () {
|
||||
s.remove();
|
||||
});
|
||||
function colorTestProp(key) {
|
||||
var o = {};
|
||||
return function () {
|
||||
o[key] = "#fc0";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "rgb(255, 204, 0)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "hsl(0.1333, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "hsb(0.1333, 1, 1)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "rgba(255, 204, 0, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
o[key] = "hsla(0.1333, 1, .5, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
o[key] = "hsba(0.1333, 1, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
};
|
||||
}
|
||||
function colorTestStyle(key) {
|
||||
var o = {};
|
||||
return function () {
|
||||
function val() {
|
||||
return Savage.color(r.node.style[key]).hex;
|
||||
}
|
||||
o[key] = "#fc0";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "rgb(255, 204, 0)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsl(0.1333, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsb(0.1333, 1, 1)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "rgba(255, 204, 0, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsla(0.1333, 1, .5, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsba(0.1333, 1, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
};
|
||||
}
|
||||
it("sets fill", colorTestProp("fill"));
|
||||
it("sets stroke", colorTestStyle("stroke"));
|
||||
it("circle core attributes", function () {
|
||||
var c = s.circle(10, 20, 30);
|
||||
expect(c.node.getAttribute("cx")).to.be("10");
|
||||
expect(c.node.getAttribute("cy")).to.be("20");
|
||||
expect(c.node.getAttribute("r")).to.be("30");
|
||||
c.attr({
|
||||
cx: 40,
|
||||
cy: 50,
|
||||
r: "5%"
|
||||
});
|
||||
expect(c.node.getAttribute("cx")).to.be("40");
|
||||
expect(c.node.getAttribute("cy")).to.be("50");
|
||||
expect(c.node.getAttribute("r")).to.be("5%");
|
||||
});
|
||||
it("rect core attributes", function () {
|
||||
var c = s.rect(10, 20, 30, 40);
|
||||
expect(c.node.getAttribute("x")).to.be("10");
|
||||
expect(c.node.getAttribute("y")).to.be("20");
|
||||
expect(c.node.getAttribute("width")).to.be("30");
|
||||
expect(c.node.getAttribute("height")).to.be("40");
|
||||
c.attr({
|
||||
x: 40,
|
||||
y: 50,
|
||||
width: "5%",
|
||||
height: "6%",
|
||||
r: 10
|
||||
});
|
||||
expect(c.node.getAttribute("x")).to.be("40");
|
||||
expect(c.node.getAttribute("y")).to.be("50");
|
||||
expect(c.node.getAttribute("width")).to.be("5%");
|
||||
expect(c.node.getAttribute("height")).to.be("6%");
|
||||
expect(c.node.getAttribute("rx")).to.be("10");
|
||||
expect(c.node.getAttribute("ry")).to.be("10");
|
||||
});
|
||||
it("ellipse core attributes", function () {
|
||||
var c = s.ellipse(10, 20, 30, 40);
|
||||
expect(c.node.getAttribute("cx")).to.be("10");
|
||||
expect(c.node.getAttribute("cy")).to.be("20");
|
||||
expect(c.node.getAttribute("rx")).to.be("30");
|
||||
expect(c.node.getAttribute("ry")).to.be("40");
|
||||
c.attr({
|
||||
cx: 40,
|
||||
cy: 50,
|
||||
rx: "5%",
|
||||
ry: "6%"
|
||||
});
|
||||
expect(c.node.getAttribute("cx")).to.be("40");
|
||||
expect(c.node.getAttribute("cy")).to.be("50");
|
||||
expect(c.node.getAttribute("rx")).to.be("5%");
|
||||
expect(c.node.getAttribute("ry")).to.be("6%");
|
||||
});
|
||||
it("path core attributes", function () {
|
||||
var c = s.path("M10,10 110,10");
|
||||
expect(c.node.getAttribute("d")).to.be("M10,10 110,10");
|
||||
c.attr({d: "M10,10 210,10"});
|
||||
expect(c.node.getAttribute("d")).to.be("M10,10 210,10");
|
||||
c.attr({path: "M10,10 310,10"});
|
||||
expect(c.node.getAttribute("d")).to.be("M10,10 310,10");
|
||||
});
|
||||
it("text core attributes", function () {
|
||||
var c = s.text(10, 15, "testing");
|
||||
expect(c.node.getAttribute("x")).to.be("10");
|
||||
expect(c.node.getAttribute("y")).to.be("15");
|
||||
expect(c.node.textContent).to.be("testing");
|
||||
c.attr({
|
||||
x: 20,
|
||||
y: 25,
|
||||
text: "texting"
|
||||
});
|
||||
expect(c.node.getAttribute("x")).to.be("20");
|
||||
expect(c.node.getAttribute("y")).to.be("25");
|
||||
expect(c.node.textContent).to.be("texting");
|
||||
});
|
||||
it("line core attributes", function () {
|
||||
var c = s.line(10, 15, 110, 17);
|
||||
expect(c.node.getAttribute("x1")).to.be("10");
|
||||
expect(c.node.getAttribute("y1")).to.be("15");
|
||||
expect(c.node.getAttribute("x2")).to.be("110");
|
||||
expect(c.node.getAttribute("y2")).to.be("17");
|
||||
c.attr({
|
||||
x1: 20,
|
||||
y1: 25,
|
||||
x2: 220,
|
||||
y2: 27
|
||||
});
|
||||
expect(c.node.getAttribute("x1")).to.be("20");
|
||||
expect(c.node.getAttribute("y1")).to.be("25");
|
||||
expect(c.node.getAttribute("x2")).to.be("220");
|
||||
expect(c.node.getAttribute("y2")).to.be("27");
|
||||
});
|
||||
it("polyline core attributes", function () {
|
||||
var c = s.polyline(10, 15, 20, 25, 30, 35);
|
||||
expect(c.node.getAttribute("points")).to.be("10,15,20,25,30,35");
|
||||
c.attr({
|
||||
points: [20, 25, 30, 35, 40, 45]
|
||||
});
|
||||
expect(c.node.getAttribute("points")).to.be("20,25,30,35,40,45");
|
||||
});
|
||||
it("polygon core attributes", function () {
|
||||
var c = s.polygon(10, 15, 20, 25, 30, 35);
|
||||
expect(c.node.getAttribute("points")).to.be("10,15,20,25,30,35");
|
||||
c.attr({
|
||||
points: [20, 25, 30, 35, 40, 45]
|
||||
});
|
||||
expect(c.node.getAttribute("points")).to.be("20,25,30,35,40,45");
|
||||
});
|
||||
});
|
||||
describe("Path methods", function () {
|
||||
it("Savage.path.getTotalLength", function () {
|
||||
expect(+Savage.path.getTotalLength("M0,0 100,0").toFixed(2)).to.be(100);
|
||||
});
|
||||
it("Savage.path.getPointAtLength", function () {
|
||||
expect(Savage.path.getPointAtLength("M0,0 100,0", 50)).to.eql({
|
||||
x: 50,
|
||||
y: 0,
|
||||
m: {
|
||||
x: 25,
|
||||
y: 0
|
||||
},
|
||||
n: {
|
||||
x: 75,
|
||||
y: 0
|
||||
},
|
||||
start: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
end: {
|
||||
x: 100,
|
||||
y: 0
|
||||
},
|
||||
alpha: 180
|
||||
});
|
||||
});
|
||||
it("Savage.path.getSubpath", function () {
|
||||
expect(Savage.path.getSubpath("M0,0 100,0", 10, 90)).to.be("M9.995,0C29.153,0,70.839,0,90,0");
|
||||
expect(Savage.path.getSubpath("M0,0 100,0", 0, 90)).to.be("M0,0C0,0,64.674,0,90,0");
|
||||
expect(Savage.path.getSubpath("M0,0 100,0", 10, 120)).to.be("M10,0C35.326,0,100,0,100,0");
|
||||
});
|
||||
it("Savage.path.findDotsAtSegment", function () {
|
||||
expect(Savage.path.findDotsAtSegment(0,0,0,0,100,0,100,0,.5)).to.eql({
|
||||
x: 50,
|
||||
y: 0,
|
||||
m: {
|
||||
x: 25,
|
||||
y: 0
|
||||
},
|
||||
n: {
|
||||
x: 75,
|
||||
y: 0
|
||||
},
|
||||
start: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
end: {
|
||||
x: 100,
|
||||
y: 0
|
||||
},
|
||||
alpha: 180
|
||||
});
|
||||
});
|
||||
it("Savage.path.bezierBBox", function () {
|
||||
var bbox = Savage.path.bezierBBox(10, 10, 10, 20, 110, 0, 110, 10);
|
||||
expect(bbox.cx).to.be(60);
|
||||
expect(bbox.cy).to.be(10);
|
||||
expect(bbox.x).to.be(10);
|
||||
expect(bbox.w).to.be(100);
|
||||
expect(bbox.width).to.be(100);
|
||||
expect(bbox.x2).to.be(110);
|
||||
});
|
||||
it("Savage.path.isPointInsideBBox", function () {
|
||||
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 5, 5)).to.be(true);
|
||||
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 10, 5)).to.be(true);
|
||||
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 10, 10)).to.be(true);
|
||||
});
|
||||
it("Savage.path.isBBoxIntersect", function () {
|
||||
expect(Savage.path.isBBoxIntersect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 10,
|
||||
height: 10
|
||||
}, {
|
||||
x: 5,
|
||||
y: 5,
|
||||
width: 15,
|
||||
height: 15
|
||||
})).to.be(true);
|
||||
expect(Savage.path.isBBoxIntersect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 10,
|
||||
height: 10
|
||||
}, {
|
||||
x: 5,
|
||||
y: 5,
|
||||
width: 7,
|
||||
height: 7
|
||||
})).to.be(true);
|
||||
expect(Savage.path.isBBoxIntersect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 10,
|
||||
height: 10
|
||||
}, {
|
||||
x: 15,
|
||||
y: 15,
|
||||
width: 10,
|
||||
height: 10
|
||||
})).to.be(false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="system.js"></script>
|
||||
<script src="paper.js"></script>
|
||||
<script src="primitives.js"></script>
|
||||
<script src="colors.js"></script>
|
||||
<script src="attrs.js"></script>
|
||||
<script src="path.js"></script>
|
||||
<script>
|
||||
mocha.checkLeaks();
|
||||
window.onload = function () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue