mirror of
https://github.com/jlengrand/d3-progress-meter.git
synced 2026-03-10 08:11:18 +00:00
146 lines
4.7 KiB
HTML
146 lines
4.7 KiB
HTML
<!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"
|
|
caption="caption">
|
|
</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");
|
|
var caption = Polymer.dom(meter.root).querySelector("#caption");
|
|
|
|
expect(current.style.fontSize).to.be.eql("50px");
|
|
expect(goal.style.fontSize).to.be.eql("20px");
|
|
expect(type.style.fontSize).to.be.eql("25px");
|
|
expect(caption.style.fontSize).to.be.eql("20px");
|
|
});
|
|
});
|
|
|
|
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");
|
|
});
|
|
|
|
test('sets caption text based on type-text attribute', function() {
|
|
var caption = Polymer.dom(meter.root).querySelector("#caption");
|
|
expect(caption.innerHTML).to.be.eql("caption");
|
|
});
|
|
});
|
|
|
|
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,85A85,85 0 1,1 0,-85A85,85 0 1,1 0,85M0,82.5A82.5,82.5 0 1,0 0,-82.5A82.5,82.5 0 1,0 0,82.5Z");
|
|
});
|
|
|
|
test('sets progress diameter based on percentage attribute', function(done) {
|
|
// Wait until animation finishes
|
|
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);
|
|
});
|
|
});
|
|
|
|
suite('progress coloring', function() {
|
|
var meter;
|
|
|
|
setup(function() {
|
|
meter = fixture('TrivialProgressMeter');
|
|
});
|
|
|
|
test('sets low color for percentage < 33%', function() {
|
|
meter.percentage = .32;
|
|
var progress = Polymer.dom(meter.root).querySelector("#progress");
|
|
expect(progress.getAttribute("class")).to.contain("low");
|
|
});
|
|
|
|
test('sets medium color for percentage > 33% and < 66%', function() {
|
|
meter.percentage = .5;
|
|
var progress = Polymer.dom(meter.root).querySelector("#progress");
|
|
expect(progress.getAttribute("class")).to.contain("medium");
|
|
});
|
|
|
|
test('sets high color for percentage > 66%', function() {
|
|
meter.percentage = .67;
|
|
var progress = Polymer.dom(meter.root).querySelector("#progress");
|
|
expect(progress.getAttribute("class")).to.contain("high");
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|