d3 Arc TDD

arc.html

<link rel="import" href="../polymer/polymer.html">

<script src="../d3/d3.min.js"></script>

<dom-module id="blue-arc-graph">
    <style>
        :host {
            display: block;
        }
    </style>
    <template>
    </template>
</dom-module>

<script>
    (function () { 'use strict';

        var svg
                , arc
                , arcPath
                , thinArc
                , thinArcPath;

        Polymer({
            is: 'blue-arc-graph',

            properties: {
                arcInnerRadius: {
                    type: Number,
                    value: 60
                },

                arcOuterRadius: {
                    type: Number,
                    value: 75
                },

                arcColor: {
                    type: String,
                    value: '#0377b0'
                },

                thinArcColor: {
                  type: String,
                    value: '#6BCEE5'
                },

                endAngle: {
                    type: Number
                },

                ready: {
                    type: Boolean,
                    readOnly: true,
                    notify: true
                }
            },

            observers: [
                '_adjustArcColors(arcColor, thinArcColor, ready)',
                '_adjustArcs(arcInnerRadius, arcOuterRadius, ready)',
                'draw(endAngle, ready)'
            ],

            attached: function() {
              this._initializeGraph();
            },

            getSvg: function() {
                return svg;
            },

            getArc: function() {
                return arc;
            },

            getArcPath: function() {
                return arcPath;
            },

            getThinArc: function() {
                return thinArc;
            },

            getThinArcPath: function() {
                return thinArcPath;
            },

            updateArcsRadius: function(inner, outer) {
                this.arcInnerRadius = inner;
                this.arcOuterRadius = outer;
            },

            draw: function() {
                this.getThinArcPath().attr('d', this.getThinArc());
                this.getArcPath().attr('d', this.getArc());
            },

            _adjustArcColors: function() {
                var self = this;

                self.getArcPath().style({ fill: self.arcColor });
                self.getThinArcPath().style({ fill: self.thinArcColor });
            },

            _adjustArcs: function () {
                this._setArcRadius(this.arcInnerRadius, this.arcOuterRadius);
                this._setThinArcsRadiusBasedOnOuterArc();
            },

            _initializeGraph: function () {
                var self = this;

                var width = self.clientWidth
                        , height = self.clientHeight;

                svg = d3.select(self)
                            .append('svg')
                            .attr('width', '100%')
                            .attr('height', '100%')
                            .attr('viewBox','0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
                        .append("g")
                            .attr('preserveAspectRatio','xMinYMin')
                            .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

                arc = d3.svg.arc()
                        .startAngle(0);

                thinArc = d3.svg.arc()
                        .startAngle(0)
                        .endAngle(360);

                thinArcPath = svg
                        .append('path')
                        .style({ fill: self.thinArcColor });

                arcPath = svg
                        .append('path')
                        .datum({endAngle: 0})
                        .style({ fill: self.arcColor });

                self._setReady(true);
            },

            _setArcRadius: function (inner, outer) {
                var arc = this.getArc();

                if (!arc) {
                    return;
                }

                arc.innerRadius(inner)
                        .outerRadius(outer);

                this._setThinArcsRadiusBasedOnOuterArc();
            },

            _setThinArcRadius: function (inner, outer) {
                var thinArc = this.getThinArc();

                if (!thinArc) {
                    return;
                }

                thinArc.innerRadius(inner)
                        .outerRadius(outer);
            },

            _setThinArcsRadiusBasedOnOuterArc: function() {
                var thinArc = this.getThinArc();

                if (!thinArc) {
                    return;
                }

                var centerOfArc = this._calculateCenterRadiusForArc();

                this._setThinArcRadius(centerOfArc - 1, centerOfArc + 1);
            },

            _calculateCenterRadiusForArc: function() {
                var arc = this.getArc();

                if (!arc) {
                    return 0;
                }

                var innerRad = arc.innerRadius()()
                        , outerRad = arc.outerRadius()();

                var innerOuterDiff = +((outerRad - innerRad) / 2).toFixed(1);

                return innerRad + innerOuterDiff;
            }
        });
    })();
</script>

test.html

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

    <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="../../test-fixture/test-fixture.html">
    <link rel="import" href="../blue-arc-graph.html">
</head>
<body>

<test-fixture id="BlueArcGraph">
    <template>
        <blue-arc-graph>
        </blue-arc-graph>
    </template>
</test-fixture>

<script>
    describe('<blue-potential>', function() {
        var myEl;

        beforeEach(function() {
            myEl = fixture('BlueArcGraph');
        });

        it('should set ready once initialized', function() {
            assert.isTrue(myEl.ready);
        });

        it('should initialize the graph', function() {
           assert.ok(myEl.getSvg());
        });

        it('should initialize the arc', function() {
           assert.ok(myEl.getArc());
        });

        it('should initialize the thin arc', function() {
           assert.ok(myEl.getThinArc());
        });

        it('should initialize arc path', function() {
           assert.ok(myEl.getArcPath());
        });

        it('should initialize thin arc path', function() {
            assert.ok(myEl.getThinArcPath());
        });

        it('should be able to set the radius of the arc', function() {
            var expectedInner = 15
                    , expectedOuter = 25;

            myEl._setArcRadius(expectedInner, expectedOuter);

            var actualInner = myEl.getArc().innerRadius()()
                    , actualOuter = myEl.getArc().outerRadius()();

            assert.equal(actualInner, expectedInner);
            assert.equal(actualOuter, expectedOuter);
        });

        it('should be able to set the arc inner radius as a property', function() {
            var expectedInner = 15;

            myEl.arcInnerRadius = expectedInner;

            var actualInner = myEl.getArc().innerRadius()();

            assert.equal(actualInner, expectedInner);
        });

        it('should be able to set the arc outer radius as a property', function() {
            var expectedOuter = 20;

            myEl.arcOuterRadius = expectedOuter;

            var actualInner = myEl.getArc().outerRadius()();

            assert.equal(actualInner, expectedOuter);
        });

        it('should be properly setting the default color of the arc', function() {
            var expected = 'rgb(3, 119, 176)'
                    , actual = myEl.getArcPath().style('fill');

            assert.strictEqual(actual, expected);
        });

        it('should be properly setting the default color of the thin arc', function() {
            var expected = 'rgb(107, 206, 229)'
                    , actual = myEl.getThinArcPath().style('fill');

            assert.strictEqual(actual, expected);
        });

        it('should update the color of the arc when a user changes the arcColor property', function() {
            var expected = 'rgb(0, 0, 0)';

            myEl.arcColor = expected;

            var actual = myEl.getArcPath().style('fill');

            assert.strictEqual(actual, expected);
        });

        it('should update the color of the thin arc when a user changes the thinArcColor property', function() {
            var expected = 'rgb(0, 0, 0)';

            myEl.thinArcColor = expected;

            var actual = myEl.getThinArcPath().style('fill');

            assert.strictEqual(actual, expected);
        });

        it('should calculate center radius from arc', function() {
            myEl.arcInnerRadius = 14;
            myEl.arcOuterRadius = 25;

            var expected = 19.5
                    , actual = myEl._calculateCenterRadiusForArc();

            assert.equal(actual, expected);
        });

        it('should be able to set the radius of the thin arc', function() {
            var expectedInner = 19
                    , expectedOuter = 21;

            myEl._setThinArcRadius(expectedInner, expectedOuter);

            var actualInner = myEl.getThinArc().innerRadius()()
                    , actualOuter = myEl.getThinArc().outerRadius()();

            assert.equal(actualInner, expectedInner);
            assert.equal(actualOuter, expectedOuter);
        });

        it('should be able to set the thin arcs radius based on the outer arcs radius', function() {
           var expectedInner = 19
                   , expectedOuter = 21;

            myEl._setArcRadius(15, 25);
            myEl._setThinArcsRadiusBasedOnOuterArc();

            var actualInner = myEl.getThinArc().innerRadius()()
                    , actualOuter = myEl.getThinArc().outerRadius()();

            assert.equal(actualInner, expectedInner);
            assert.equal(actualOuter, expectedOuter);
        });

        it('should change the thin arcs radius when arcs inner radius changes', function() {
            var initialInner = myEl.getThinArc().innerRadius()()
                    , initialOuter = myEl.getThinArc().outerRadius()();

            myEl.arcInnerRadius = 5;

            var updatedInner = myEl.getThinArc().innerRadius()()
                    , updatedOuter = myEl.getThinArc().outerRadius()();

            assert.notEqual(initialInner, updatedInner);
            assert.notEqual(initialOuter, updatedOuter);
        });

        it('should change the thin arcs radius when arcs outer radius changes', function() {
            var initialInner = myEl.getThinArc().innerRadius()()
                    , initialOuter = myEl.getThinArc().outerRadius()();

            myEl.arcOuterRadius = 120;

            var updatedInner = myEl.getThinArc().innerRadius()()
                    , updatedOuter = myEl.getThinArc().outerRadius()();

            assert.notEqual(initialInner, updatedInner);
            assert.notEqual(initialOuter, updatedOuter);
        });

        it('should allow an outside user to functionally update the arcs radius', function() {
            var expectedInner = 25
                    , expectedOuter = 35;

            myEl.updateArcsRadius(expectedInner, expectedOuter);

            var actualInner = myEl.getArc().innerRadius()()
                    , actualOuter = myEl.getArc().outerRadius()();

            assert.equal(actualInner, expectedInner);
            assert.equal(actualOuter, expectedOuter);
        });

        it('should update the thin arcs radius when a user functionally updates the arcs radius', function() {
           var expectedInner = 19
                   , expectedOuter = 21;

            myEl.updateArcsRadius(15, 25);

            var actualInner = myEl.getThinArc().innerRadius()()
                    , actualOuter = myEl.getThinArc().outerRadius()();

            assert.equal(actualInner, expectedInner);
            assert.equal(actualOuter, expectedOuter);
        });

        it('should draw when the user has set the end angle property', function() {
           var spy = sinon.spy(myEl, 'draw');

            myEl.endAngle = 195;

            assert.isTrue(spy.calledOnce);
        });

        it('should set the "d" property on arc path when draw is called', function() {
            myEl.endAngle = 195;

            assert.ok(myEl.getArcPath().attr('d'));
        });

        it('should set the "d" property on thin arc path when draw is called', function() {
            myEl.endAngle = 195;

            assert.ok(myEl.getThinArcPath().attr('d'));
        });
    });
</script>