Skip to content

Commit

Permalink
FLOE-399: Calculate percentage
Browse files Browse the repository at this point in the history
  • Loading branch information
@jobara
jobara committed Jun 30, 2015
1 parent b28833a commit 4e5e0c5
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 10 deletions.
47 changes: 38 additions & 9 deletions src/js/valueEntry.js
View file
Expand Up @@ -12,22 +12,33 @@ https://github.com/gpii/universal/LICENSE.txt

"use strict";

/*
<input type="text" class="gpiic-ca-valueEntry-valueInput">
<span class="gpiic-ca-valueEntry-percentage"></span>
<input type="text" class="gpiic-ca-valueEntry-description">
*/

fluid.defaults("gpii.chartAuthoring.valueEntry", {
gradeNames: ["fluid.viewRelayComponent", "autoInit"],
gradeNames: ["fluid.viewRelayComponent", "gpii.chartAuthoring.valueBinding", "autoInit"],
selectors: {
input: ".gpiic-ca-valueEntry-input",
percentage: ".gpiic-ca-valueEntry-percentage",
description: ".gpiic-ca-valueEntry-description"
},
strings: {
inputPlaceholder: "Value",
descriptionPlacholder: "Description (max of 30 characters)"
descriptionPlacholder: "Description (max of 30 characters)",
percentage: "%percentage%"
},
descriptionMaxLength: 30,
model: {
value: "",
description: "",
total: ""
},
invokers: {
calculatePercentage: {
funcName: "gpii.chartAuthoring.valueEntry.calculatePercentage",
args: ["{that}.model.value", "{that}.model.total"]
},
setPercentage: {
funcName: "gpii.chartAuthoring.valueEntry.setPercentage",
args: ["{that}", "{that}.calculatePercentage"]
}
},
listeners: {
"onCreate.setInputAttrs": {
Expand All @@ -52,7 +63,25 @@ https://github.com/gpii/universal/LICENSE.txt
}
}
},
descriptionMaxLength: 30
modelListeners: {
"value": "{that}.setPercentage",
"total": "{that}.setPercentage"
}
});

gpii.chartAuthoring.valueEntry.calculatePercentage = function (value, total) {
value = parseInt(value, 10) || 0;
total = parseInt(total, 10) || 1;
return (value / total) * 100;
};

gpii.chartAuthoring.valueEntry.setPercentage = function (that, calculatePercentageFn) {
var elm = that.locate("percentage");
// only output a percentage if the value has been specified.
var percentage = that.model.value ? calculatePercentageFn() : "";

var output = fluid.stringTemplate(that.options.strings.percentage, {percentage: percentage});
elm.text(output);
};

})(jQuery, fluid);
2 changes: 2 additions & 0 deletions tests/html/valueEntry-Tests.html
View file
Expand Up @@ -12,7 +12,9 @@
<script src="../lib/infusion/test-core/jqUnit/js/jqUnit-browser.js"></script>
<script src="../lib/infusion/test-core/utils/js/IoCTestUtils.js"></script>

<script src="../../src/js/valueBinding.js"></script>
<script src="../../src/js/valueEntry.js"></script>
<script src="../js/testUtils.js"></script>
<script src="../js/valueEntryTests.js"></script>
</head>

Expand Down
42 changes: 41 additions & 1 deletion tests/js/valueEntryTests.js
View file
Expand Up @@ -12,6 +12,41 @@ https://github.com/gpii/universal/LICENSE.txt

"use strict";

fluid.registerNamespace("gpii.tests.calculatePercentage");

gpii.tests.calculatePercentage.inputs = [undefined, null, NaN, false, true, function () {}, {}, ["array"], "", "string", 2.2, "2.2", 0, "0", 50, "50", 100, "100"];
gpii.tests.calculatePercentage.outputs = [
// undefined, null, NaN, false, true, function, {}, [], "", "string", 2.2, "2.2", 0, "0", 50, "50", 100, "100"]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === undefined
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === null
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === NaN
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === false
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === true
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === function () {}
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === {}
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === []
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === ""
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === "string"
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 100, 100, 0, 0, 2500, 2500, 5000, 5000], // total === 2.2
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 100, 100, 0, 0, 2500, 2500, 5000, 5000], // total === "2.2"
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === 0
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 200, 0, 0, 5000, 5000, 10000, 10000], // total === "0"
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 100, 100, 200, 200], // total === 50
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 100, 100, 200, 200], // total === "50"
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 50, 50, 100, 100], // total === 100
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 50, 50, 100, 100] // total === "100"
];

jqUnit.test("Test gpii.chartAuthoring.valueEntry.calculatePercentage", function () {
fluid.each(gpii.tests.calculatePercentage.inputs, function (total, totalIdx) {
fluid.each(gpii.tests.calculatePercentage.inputs, function (value, valIdx) {
var actual = gpii.chartAuthoring.valueEntry.calculatePercentage(value, total);
var expected = gpii.tests.calculatePercentage.outputs[totalIdx][valIdx];
jqUnit.assertEquals("The percentate for value: " + value + " total: " + total + " should be calculated as " + expected, expected, actual);
});
});
});

fluid.defaults("gpii.tests.chartAuthoring.valueEntry", {
gradeNames: ["gpii.chartAuthoring.valueEntry", "autoInit"]
});
Expand All @@ -34,7 +69,7 @@ https://github.com/gpii/universal/LICENSE.txt
modules: [{
name: "Tests the value entry component",
tests: [{
expect: 8,
expect: 11,
name: "Test Init",
type: "test",
func: "gpii.tests.chartAuthoring.valueEntryTester.testRendering",
Expand All @@ -48,7 +83,12 @@ https://github.com/gpii/universal/LICENSE.txt
fluid.each(that.options.selectors, function (sel, selName) {
jqUnit.exists("The '" + selName + "' element exists.", that.locate(selName));
});
jqUnit.assertEquals("The input value has been set", that.model.value || "", that.locate("input").val());
jqUnit.assertEquals("The input placholder has been set", that.options.strings.inputPlaceholder, that.locate("input").attr("placeholder"));

jqUnit.assertEquals("The percentage has been set", "%", that.locate("percentage").text());

jqUnit.assertEquals("the description text has been set", that.model.description || "", that.locate("description").val());
jqUnit.assertEquals("The description placholder has been set", that.options.strings.descriptionPlacholder, that.locate("description").attr("placeholder"));
jqUnit.assertEquals("The description's max length should be set", that.options.descriptionMaxLength, that.locate("description").attr("maxlength"));
var descriptionSize = parseInt(that.locate("description").attr("size"), 10);
Expand Down

0 comments on commit 4e5e0c5

Please sign in to comment.