I'm currently in the process of learning how to write test cases for my angularJS application. As a beginner, I'm searching for some sample examples of working demos. I came across an example online that uses the Jasmine plugin to test an angularJS application, but unfortunately, the application doesn't seem to be functioning properly.
<html ng-app="testingApp">
<head>
<!-- Include Jasmine -->
<script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
<!-- Jasmine's HTML & CSS for reporting -->
<link data-require="jasmine@*" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
<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>
<!-- Include AngularJS -->
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eee1e4edeff6e8ecf9ef8ce2eee6ebf9ade9edd;">[email protected]</a>" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<!-- AngularJS testing helpers -->
<script data-require="angular-mocks@*" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular-mocks.js"></script>
</head>
<body ng-controller="calculatorController as vm">
<!-- Display the message from the controller -->
<h1>{{vm.message}}</h1>
<!-- Set up number inputs and a button for the calculator -->
<form>
<input id="firstNumber" type="number" ng-model="vm.firstNumber" />
<span>+</span>
<input id="secondNumber" type="number" ng-model="vm.secondNumber" />
<button ng-click="vm.addNumber()">Calculate</button>
</form>
<!-- Display the result -->
<span>{{vm.result}}</span>
<!-- This is our simple Angular app -->
<script type="text/javascript">
angular
.module('testingApp',[])
.controller('calculatorController', calculatorController);
function calculatorController(){
var vm = this;
vm.message = 'I am a basic calculator';
vm.result = 0;
vm.firstNumber = 0;
vm.secondNumber = 0;
vm.addNumber = addNumber;
function addNumber(){
vm.result = vm.firstNumber + vm.secondNumber;
}
};
</script>
<!-- This is our test specification -->
<script type="text/javascript">
describe("Unit: calculatorController tests", function() {
// setup code for testing this unit
var controller;
beforeEach(function(){
module('testingApp');
inject(function ($controller){
controller = $controller('calculatorController');
});
});
it("SUCCESSFUL TEST - should be able to display a title", function() {
expect(controller.message).toBe('I am a basic calculator');
});
it("UNSUCCESSFUL TEST - should be able to display a title", function() {
expect(controller.message).toBe('fail fail fail');
});
it("SUCCESSFUL TEST - should add 2+2 and result in 4", function() {
controller.firstNumber = 2;
controller.secondNumber = 2;
controller.result = 0;
controller.addNumber()
expect(controller.result).toEqual(4);
});
});
</script>
</body>
</html>
Any suggestions on how to get this example working would be greatly appreciated. Also, please recommend any good example links that use Jasmine, karma, or any testing plugins for angularJS applications.