jlengrand/d3-progress-meter
1
0
Fork 0
mirror of https://github.com/jlengrand/d3-progress-meter.git synced 2026-03-10 08:11:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add tests

Browse Source
This commit is contained in:
Ronny Roeller
2015-09-16 16:35:10 +02:00
parent 9e3ff9ef7d
commit 688eab76fd
3 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
test/d3-progress-meter.html Normal file
View File

@@ -0,0 +1,103 @@
<!doctype html>
<html>
<head>
<title>d3-progress-meter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../d3-progress-meter.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="TrivialProgressMeter">
<template>
<d3-progress-meter radius="100" percentage="0.05"></d3-progress-meter>
</template>
</test-fixture>
<test-fixture id="ProgressMeterWithText">
<template>
<d3-progress-meter radius="100" percentage="0.35" current-text="70" goal-text="Goal: 200" type-text="transactions"></d3-progress-meter>
</template>
</test-fixture>
<script>
suite('<d3-progress-meter>', function() {
suite('sizing behavior', function() {
var meter;
setup(function() {
meter = fixture('TrivialProgressMeter');
});
test('sets element width/height based on radius attribute', function() {
var svg = Polymer.dom(meter.root).querySelector("svg");
expect(svg.getAttribute("width")).to.be.eql("200");
expect(svg.getAttribute("height")).to.be.eql("200");
});
test('sets font-sizes based on radius attribute', function() {
var current = Polymer.dom(meter.root).querySelector("#current");
var goal = Polymer.dom(meter.root).querySelector("#goal");
var type = Polymer.dom(meter.root).querySelector("#type");
expect(current.style.fontSize).to.be.eql("50px");
expect(goal.style.fontSize).to.be.eql("20px");
expect(type.style.fontSize).to.be.eql("25px");
});
});
suite('text behavior', function() {
var meter;
setup(function() {
meter = fixture('ProgressMeterWithText');
});
test('sets current text based on current-text attribute', function() {
var current = Polymer.dom(meter.root).querySelector("#current");
expect(current.innerHTML).to.be.eql("70");
});
test('sets goal text based on goal-text attribute', function() {
var goal = Polymer.dom(meter.root).querySelector("#goal");
expect(goal.innerHTML).to.be.eql("Goal: 200");
});
test('sets type text based on type-text attribute', function() {
var type = Polymer.dom(meter.root).querySelector("#type");
expect(type.innerHTML).to.be.eql("transactions");
});
});
suite('progress behavior', function() {
var meter;
setup(function() {
meter = fixture('TrivialProgressMeter');
});
test('sets background diameter to full circle', function() {
var background = Polymer.dom(meter.root).querySelector("#background");
expect(background.getAttribute("d")).to.be.eql("M0,100A100,100 0 1,1 0,-100A100,100 0 1,1 0,100M0,90A90,90 0 1,0 0,-90A90,90 0 1,0 0,90Z");
});
test('sets progress diameter based on percentage attribute', function(done) {
setTimeout(function() {
var progress = Polymer.dom(meter.root).querySelector("#progress");
expect(progress.getAttribute("d")).to.be.eql("M6.123233995736766e-15,-100A100,100 0 0,1 30.901699437494745,-95.10565162951535L27.81152949374527,-85.59508646656381A90,90 0 0,0 5.5109105961630896e-15,-90Z");
done();
}, 300);
});
});
});
</script>
</body>
</html>

13
test/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([ 'd3-progress-meter.html' ]);
</script>
</body>
</html>