Skip to content

Commit

Permalink
Add rendering tests.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbostock
mbostock committed Jun 8, 2017
1 parent 8e59287 commit 2ee44b4
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 14 deletions.
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,11 @@
},
"devDependencies": {
"d3-scale": "1",
"d3-selection": "^1.1.0",
"eslint": "3",
"package-preamble": "0.0",
"rollup": "0.41",
"jsdom": "11",
"package-preamble": "0.1",
"rollup": "0.42",
"tape": "4",
"uglify-js": "^2.8.11"
}
Expand Down
50 changes: 50 additions & 0 deletions test/axis-left-500.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<svg>
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<path class="domain" stroke="#000" d="M-6,0.5H0.5V500.5H-6"></path>
<g class="tick" opacity="1" transform="translate(0,0.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.0</text>
</g>
<g class="tick" opacity="1" transform="translate(0,50.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.1</text>
</g>
<g class="tick" opacity="1" transform="translate(0,100.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.2</text>
</g>
<g class="tick" opacity="1" transform="translate(0,150.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.3</text>
</g>
<g class="tick" opacity="1" transform="translate(0,200.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.4</text>
</g>
<g class="tick" opacity="1" transform="translate(0,250.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.5</text>
</g>
<g class="tick" opacity="1" transform="translate(0,300.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.6</text>
</g>
<g class="tick" opacity="1" transform="translate(0,350.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.7</text>
</g>
<g class="tick" opacity="1" transform="translate(0,400.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.8</text>
</g>
<g class="tick" opacity="1" transform="translate(0,450.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.9</text>
</g>
<g class="tick" opacity="1" transform="translate(0,500.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">1.0</text>
</g>
</g>
</svg>
50 changes: 50 additions & 0 deletions test/axis-left.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<svg>
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<path class="domain" stroke="#000" d="M-6,0.5H0.5V1.5H-6"></path>
<g class="tick" opacity="1" transform="translate(0,0.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.0</text>
</g>
<g class="tick" opacity="1" transform="translate(0,0.6)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.1</text>
</g>
<g class="tick" opacity="1" transform="translate(0,0.7)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.2</text>
</g>
<g class="tick" opacity="1" transform="translate(0,0.8)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.3</text>
</g>
<g class="tick" opacity="1" transform="translate(0,0.9)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.4</text>
</g>
<g class="tick" opacity="1" transform="translate(0,1)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.5</text>
</g>
<g class="tick" opacity="1" transform="translate(0,1.1)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.6</text>
</g>
<g class="tick" opacity="1" transform="translate(0,1.2)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.7</text>
</g>
<g class="tick" opacity="1" transform="translate(0,1.3)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.8</text>
</g>
<g class="tick" opacity="1" transform="translate(0,1.4)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">0.9</text>
</g>
<g class="tick" opacity="1" transform="translate(0,1.5)">
<line stroke="#000" x2="-6"></line>
<text fill="#000" x="-9" dy="0.32em">1.0</text>
</g>
</g>
</svg>
46 changes: 34 additions & 12 deletions test/axis-test.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
var tape = require("tape"),
scale = require("d3-scale"),
axis = require("../");
var fs = require("fs"),
path = require("path"),
tape = require("tape"),
jsdom = require("jsdom"),
d3 = Object.assign({}, require("d3-scale"), require("d3-selection"), require("../"));

tape("axisLeft(scale) has the expected defaults", function(test) {
var s = scale.scaleLinear(),
a = axis.axisLeft(s);
var s = d3.scaleLinear(),
a = d3.axisLeft(s);
test.equal(a.scale(), s);
test.deepEqual(a.tickArguments(), []);
test.equal(a.tickValues(), null);
Expand All @@ -17,29 +19,29 @@ tape("axisLeft(scale) has the expected defaults", function(test) {
});

tape("axis.ticks(arguments…) sets the tick arguments", function(test) {
var a = axis.axisLeft(scale.scaleLinear()).ticks(20);
var a = d3.axisLeft(d3.scaleLinear()).ticks(20);
test.deepEqual(a.tickArguments(), [20]);
a.ticks();
test.deepEqual(a.tickArguments(), []);
test.end();
});

tape("axis.tickArguments(null) sets the tick arguments to the empty array", function(test) {
var a = axis.axisLeft(scale.scaleLinear()).tickArguments(null);
var a = d3.axisLeft(d3.scaleLinear()).tickArguments(null);
test.deepEqual(a.tickArguments(), []);
test.end();
});

tape("axis.tickArguments() makes a defensive copy of the tick arguments", function(test) {
var a = axis.axisLeft(scale.scaleLinear()).tickArguments([20]),
var a = d3.axisLeft(d3.scaleLinear()).tickArguments([20]),
v = a.tickArguments();
v.push(10);
test.deepEqual(a.tickArguments(), [20]);
test.end();
});

tape("axis.tickValues(null) clears any explicitly-set tick values", function(test) {
var a = axis.axisLeft(scale.scaleLinear()).tickValues([1, 2, 3]);
var a = d3.axisLeft(d3.scaleLinear()).tickValues([1, 2, 3]);
test.deepEqual(a.tickValues(), [1, 2, 3]);
a.tickValues([]);
test.deepEqual(a.tickValues(), []);
Expand All @@ -49,23 +51,43 @@ tape("axis.tickValues(null) clears any explicitly-set tick values", function(tes
});

tape("axis.tickValues(values) sets the tick values explicitly", function(test) {
var a = axis.axisLeft(scale.scaleLinear()).tickValues([1, 2, 3]);
var a = d3.axisLeft(d3.scaleLinear()).tickValues([1, 2, 3]);
test.deepEqual(a.tickValues(), [1, 2, 3]);
test.end();
});

tape("axis.tickValues(values) makes a defensive copy of the specified tick values", function(test) {
var v = [1, 2, 3],
a = axis.axisLeft(scale.scaleLinear()).tickValues(v);
a = d3.axisLeft(d3.scaleLinear()).tickValues(v);
v.push(4);
test.deepEqual(a.tickValues(), [1, 2, 3]);
test.end();
});

tape("axis.tickValues() makes a defensive copy of the tick values", function(test) {
var a = axis.axisLeft(scale.scaleLinear()).tickValues([1, 2, 3]),
var a = d3.axisLeft(d3.scaleLinear()).tickValues([1, 2, 3]),
v = a.tickValues();
v.push(4);
test.deepEqual(a.tickValues(), [1, 2, 3]);
test.end();
});

tape("axisLeft(selection) produces the expected result", function(test) {
var bodyActual = (new jsdom.JSDOM("<!DOCTYPE html><svg><g></g></svg>")).window.document.body,
bodyExpected = (new jsdom.JSDOM(file("axis-left.html"))).window.document.body;
d3.select(bodyActual).select("g").call(d3.axisLeft(d3.scaleLinear()));
test.equal(bodyActual.outerHTML, bodyExpected.outerHTML);
test.end();
});

tape("axisLeft.scale(nonNumericRangeScale)(selection) produces the expected result", function(test) {
var bodyActual = (new jsdom.JSDOM("<!DOCTYPE html><svg><g></g></svg>")).window.document.body,
bodyExpected = (new jsdom.JSDOM(file("axis-left-500.html"))).window.document.body;
d3.select(bodyActual).select("g").call(d3.axisLeft(d3.scaleLinear().range([0, "500"])));
test.equal(bodyActual.outerHTML, bodyExpected.outerHTML);
test.end();
});

function file(file) {
return fs.readFileSync(path.join(__dirname, file), "utf8").replace(/\n\s*/mg, "");
}

0 comments on commit 2ee44b4

Please sign in to comment.