var app = angular.module('coinChangerApp', []);
// based on http://snippetrepo.com/snippets/lodash-in-angularjs
app.factory('_', ['$window',
function($window) {
return $window._;
}
]);
app.controller('CoinChangerCtrl', ['$scope', '_',
function($scope) {
$scope.changeFor = function(coins, amount) {
if (_.isEmpty(coins)) return [];
return _.reduce(coins, function(m, coin) {
m.change.push(Math.floor(m.amount / coin));
m.amount %= coin;
return m;
}, {
amount: amount,
change: []
}).change;
};
}
]);
describe('Testing a Hello World controller', function() {
var $scope = null;
var ctrl = null;
var _ = null;
//you need to indicate your module in a test
beforeEach(module('coinChangerApp'));
beforeEach(inject(function($rootScope, $controller, $window) {
$scope = $rootScope.$new();
_ = $window._;
ctrl = $controller('CoinChangerCtrl', {
$scope: $scope
});
}));
describe('given no coins', function() {
var noCoinsFor;
beforeEach(function() {
noCoinsFor = _.curry($scope.changeFor)([]);
});
it('should return nothing for 0 cents', function() {
expect(noCoinsFor(0)).toEqual([]);
});
it('should return nothing for 99 cents', function() {
expect(noCoinsFor(99)).toEqual([]);
});
});
describe('given pennies', function(){
var penniesFor;
beforeEach(function(){
penniesFor = _.curry($scope.changeFor)([1]);
});
it('should return nothing for 0 cents', function(){
expect(penniesFor(0)).toEqual([0]);
});
it('should return 1 penny for 1 cents', function(){
expect(penniesFor(1)).toEqual([1]);
});
it('should return 2 pennies for 2 cents', function(){
expect(penniesFor(2)).toEqual([2]);
});
});
describe('given nickels and pennies', function(){
var nickelsPenniesFor;
beforeEach(function(){
nickelsPenniesFor = _.curry($scope.changeFor)([5, 1]);
});
it('should return nothing for 0 cents', function(){
expect(nickelsPenniesFor(0)).toEqual([0, 0]);
});
it('should return 1 penny for 1 cents', function(){
expect(nickelsPenniesFor(1)).toEqual([0, 1]);
});
it('should return 1 nickel and 1 penny for 6 cents', function(){
expect(nickelsPenniesFor(6)).toEqual([1, 1]);
});
});
describe('given quarters, dimes, nickels, and pennies', function(){
var changeFor;
beforeEach(function(){
changeFor = _.curry($scope.changeFor)([25, 10, 5, 1]);
});
it('should return nothing for 0 cents', function(){
expect(changeFor(0)).toEqual([0, 0, 0, 0]);
});
it('should return 1 penny for 1 cents', function(){
expect(changeFor(1)).toEqual([0, 0, 0, 1]);
});
it('should return 3 quarters, 2 dimes, 0 nickels and 4 pennies for 99 cents', function(){
expect(changeFor(99)).toEqual([3, 2, 0, 4]);
});
});
});
<!DOCTYPE html>
<html ng-app="coinChangerApp">
<head>
<meta charset="utf-8" />
<title>AngularJS test</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="CoinChangerCtrl" ng-init="coins = [25, 10, 5, 1]">
<div>Make change for</div>
<input ng-model="value">
<table ng-if="value">
<thead>
<tr>
<td>Coin value</td>
<td>Number of coins</td>
</tr>
</thead>
<tbody ng-repeat="coin in changeFor(coins, value) track by $index">
<tr>
<td>{{coins[$index]}}</td>
<td>{{coin}}</td>
</tr>
</tbody>
</table>
</body>
</html>
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 250;
/**
Create the `HTMLReporter`, which Jasmine calls to provide results of each spec and each suite. The Reporter is responsible for presenting results to the user.
*/
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
/**
Delegate filtering of specs to the reporter. Allows for clicking on single suites or specs in the results to only run a subset of the suite.
*/
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
/**
Run all of the tests when the page finishes loading - and make sure to run any previous `onload` handler
### Test Results
Scroll down to see the results of all of these specs.
*/
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
//document.querySelector('.version').innerHTML = jasmineEnv.versionString();
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
/* restore "body" styling that were changes by "jasmine.css"... */
body { background-color: white; padding: 0; margin: 8px; }
/* ... but remain the "jasmine.css" styling for the Jasmine reporting */
.jasmine_reporter { background-color: #eeeeee; padding: 0; margin: 0; }
<!DOCTYPE html>
<html ng-app="coinChangerApp">
<head>
<meta charset="utf-8" />
<title>AngularJS test</title>
<link data-require="jasmine" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
<script data-require="json2" data-semver="0.0.2012100-8" src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script data-require="jasmine" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
<script data-require="jasmine" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script>
<script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script>
<script data-require="angular.js" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script data-require="angular-mocks" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular-mocks.js"></script>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="appSpec.js"></script>
<script src="jasmineBootstrap.js"></script>
<!-- bootstraps Jasmine -->
</head>
<body>
<div id="HTMLReporter" class="jasmine_reporter"></div>
</body>
</html>
**Coin Changer** kata using AngularJS
See this [blog post][1] which goes with this.
[1]: http://comp-phil.blogspot.com/2014/08/functional-programming-all-things-or.html