Skip to content

Instantly share code, notes, and snippets.

@kbailles

kbailles/blue-potential-test.html

Last active October 14, 2015 00:47
Show Gist options
  • Save kbailles/b9ac4955daded784aa41 to your computer and use it in GitHub Desktop.
Save kbailles/b9ac4955daded784aa41 to your computer and use it in GitHub Desktop.
Download ZIP
blue-potential TDD
Raw
blue-potential-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-potential.html">
</head>
<body>
<test-fixture id="BluePotential">
<template>
<blue-potential>
</blue-potential>
</template>
</test-fixture>
<script>
describe('<blue-potential>', function() {
var myEl
, testData;
beforeEach(function() {
myEl = fixture('BluePotential');
testData = {
userId: '1234567890',
prospect: 1000003.32,
active: 55123.31,
inactive: 800312.33
};
});
it('should call _processData after data has been passed', function() {
var spy = sinon.spy(myEl, '_processData');
myEl.data = testData;
assert.isTrue(spy.calledOnce);
});
it('should format numbers correctly', function() {
var expected = '$46.5M'
, actual = myEl._formatNumber(46500000);
assert.strictEqual(actual, expected);
});
it('should return $0 when trying to format numbers with invalid parameters', function() {
var expected = '$0'
, actual = myEl._formatNumber('a string');
assert.equal(actual, expected);
});
it('should format a string so it begins with a capital letter', function() {
var expected = 'Active'
, actual = myEl._formatStringForDisplay('active');
assert.strictEqual(actual, expected);
});
it('should return an empty string when you try to format something that is not a string', function() {
var expected = ''
, actual = myEl._formatStringForDisplay(32432432);
assert.strictEqual(actual, expected);
});
it('should put the data into an array of objects with keys of label, value, and display value', function() {
var expected = [
{label: 'Prospect', displayValue: '$1.00M', value: 1000003.32},
{label: 'Active', displayValue: '$55.1k', value: 55123.31},
{label: 'Inactive', displayValue: '$800k', value: 800312.33}]
, actual = myEl._processDataIntoArray(testData);
assert.deepEqual(actual, expected);
});
it('should return an empty array if you try to process something that is not an object into an array', function() {
var expected = []
, actual = myEl._processDataIntoArray(null);
assert.deepEqual(actual, expected);
});
it('should total the value property of objects in an array', function() {
var turnToArray = myEl._processDataIntoArray(testData);
var expected = testData.active + testData.inactive + testData.prospect
, actual = myEl._getTotal(turnToArray);
assert.equal(actual, expected);
});
it('should return 0 when you try to total something that is not an array', function() {
var expected = 0
, actual = myEl._getTotal('test string');
assert.equal(actual, expected);
});
it('should get display value for total', function() {
var turnToArray = myEl._processDataIntoArray(testData);
var expected = '$1.86M'
, actual = myEl._getDisplayTotal(turnToArray);
assert.strictEqual(actual, expected);
});
it('should sort an array of objects by key of value', function() {
var unsortedArray = [
{ value: 3},
{ value: 10 },
{ value: 5}
];
var expected = [
{ value: 10 },
{ value: 5},
{ value: 3}
];
var actual = myEl._sortArrayByValue(unsortedArray);
assert.deepEqual(actual, expected);
});
it('should return empty array when you try to sort something that is not an array', function() {
var expected = []
, actual = myEl._sortArrayByValue('test string');
assert.deepEqual(actual, expected);
});
it('should process the data into a sorted array of objects once data has been passed', function() {
myEl.data = testData;
var expected = [
{label: 'Prospect', displayValue: '$1.00M', value: 1000003.32},
{label: 'Inactive', displayValue: '$800k', value: 800312.33},
{label: 'Active', displayValue: '$55.1k', value: 55123.31}
];
var actual = myEl._processedData;
assert.deepEqual(actual, expected);
});
it('should compute width of an item based on a total amount out of 100', function() {
var arrOfObjects = [
{label: 'Prospect', displayValue: '$1.00M', value: 1000003.32},
{label: 'Active', displayValue: '$55.1k', value: 55123.31},
{label: 'Inactive', displayValue: '$800k', value: 800312.33}]
, total = 1855438.96;
var expected = ((arrOfObjects[0].value / total) * 100).toFixed(2)
, actual = myEl._getWidthPercentValueForItem(arrOfObjects[0], arrOfObjects);
assert.equal(actual, expected);
});
it('should get width of an item based on total amount as a style attribute', function() {
var arrOfObjects = [
{label: 'Prospect', displayValue: '$1.00M', value: 1000003.32},
{label: 'Active', displayValue: '$55.1k', value: 55123.31},
{label: 'Inactive', displayValue: '$800k', value: 800312.33}];
var expected = 'width: 53.90%;'
, actual = myEl._getWidthPercentStyleValueForItem(arrOfObjects[0], arrOfObjects);
assert.strictEqual(actual, expected);
});
});
</script>
Raw
blue-potential.html
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../blue-loadingmask/blue-loadingmask.html">
<link rel="import" href="../font-proximanova/proxima-nova.html">
<link rel="import" href="../font-alternategothic/alternate-gothic.html">
<script src="../d3/d3.min.js"></script>
<script src="../lodash/lodash.min.js"></script>
<dom-module id="blue-potential">
<template>
<!-- Content -->
</template>
</dom-module>
<script>
(function() {
'use strict';
Polymer({
is: 'blue-potential',
properties: {
data: {
type: Object,
observer: '_processData'
}
},
_processData: function() {
this.$.mask.show = false;
var dataIntoArray = this._processDataIntoArray(this.data);
this._processedData = this._sortArrayByValue(dataIntoArray);
},
_processDataIntoArray: function(data) {
if (!_.isObject(data)) {
return [];
}
var res = [];
for (var prop in data) {
// Ignore items on object that is not a number...
if (!data.hasOwnProperty(prop) || !_.isNumber(data[prop])) {
continue;
}
var newObj = {
label: this._formatStringForDisplay(prop),
displayValue: this._formatNumber(data[prop]),
value: data[prop]
};
res.push(newObj);
}
return res;
},
_sortArrayByValue: function(arr) {
if (!_.isArray(arr)) {
return [];
}
return arr.slice().sort(function(a, b) {
return b.value - a.value;
});
},
_formatNumber: function(number) {
if (!_.isNumber(number)) {
return '$0';
}
return d3.format('$.3s')(number);
},
_formatStringForDisplay: function(string) {
if (!_.isString(string) || string.length < 2) {
return '';
}
return string.charAt(0).toUpperCase() + string.slice(1);
},
_getDisplayTotal: function(arr) {
var total = this._getTotal(arr);
return this._formatNumber(total);
},
_getTotal: function(arr) {
if (!_.isArray(arr) || arr.length <= 0) {
return 0;
}
return _.sum(arr, function(o) {
return o.value;
});
},
_getWidthPercentStyleValueForItem: function(item, arr) {
var widthAsPercent = this._getWidthPercentValueForItem(item, arr);
return 'width: ' + widthAsPercent + '%;';
},
_getWidthPercentValueForItem: function(item, arr) {
var total = this._getTotal(arr)
, val = item.value;
if (total === 0) {
return 0;
}
return ((val / total) * 100).toFixed(2);
}
});
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment