I'm completely new to using AngularJS and I have been hopelessly trying to write some tests for my Controller script
EmployeeRegister.js
var EmployeeRegister = angular.module("myApp.EmployeeRegister", [])
EmployeeRegister.controller("EmployeeRegisterController", function($scope, $http) {
$scope.home = "This is the homepage";
/*
* The Handshake test function
**/
$scope.getRequest = function() {
console.log("I've been pressed!");
$http.get("http://localhost:4200/handshake").then(
function successCallback(response) {
$scope.response = response;
console.log(response);
},
function errorCallback(response) {
console.log("Unable to perform get request");
}
);
};
/*
* The function to retrieve all employees from the API
**/
$scope.getEmployees = function (){
$scope.employees = [];
$http.get("http://localhost:4200/").then(
function successCallback(employees) {
$scope.employees = employees;
console.log(employees);
},
function errorCallback(employees) {
console.log("Unable to perform get request");
}
);
};
$scope.firstname = null;
$scope.lastname = null;
$scope.phonenumber = null;
$scope.mail = null;
/*
* The function to post a specified employee to the http://localhost:4200/add URL
**/
$scope.postEmployee = function (firstname, lastname, phonenumber, mail){
var data = {
firstname: firstname,
lastname: lastname,
phonenumber: phonenumber,
email: mail
};
$http.post("http://localhost:4200/add", JSON.stringify(data)).then(
function successCallback(response){
console.log(response);
},
function errorCallback(reponse) {
console.log("Unable to perform postrequest");
}
);
};
/*
* The function to search for an employee by the ID on the http://localhost:4200/ID URL
**/
$scope.getEmployeesByID = function (){
$scope.employeesByID = [];
$http.get("http://localhost:4200/" + $scope.id).then(
function successCallback(employeesByID) {
$scope.employeesByID = employeesByID;
console.log(employeesByID);
},
function errorCallback(employeesByID) {
console.log("Unable to perform get request");
}
);
};
/*
* The function to delete an employee specified by the ID in the URL on http://localhost:4200/delete/ID
**/
$scope.deleteEmployeesWithID = function (){
$http.delete("http://localhost:4200/delete/" + $scope.id).then(
function successCallback(response){
console.log("success");
},
function errorCallback(response){
console.log("could not delete employee");
}
);
};
});
And expectedly my copied and tweaked Code from somewhere in the internet doesn't work, I realize that the reason I'm getting these errors is because there's never any GET requests fired in the test, what I fail to understand is why
EmployeeRegister.spec.js
describe('EmployeeController', function() {
var $httpBackend, $rootScope, createController, GetAllEmployeesHandler;
// Set up the module
beforeEach(module('myApp.EmployeeRegister'));
beforeEach(inject(function($injector) {
// Set up the mock http service responses
$httpBackend = $injector.get('$httpBackend');
// backend definition common for all tests
GetAllEmployeesHandler = $httpBackend.when('GET', 'http://localhost:4200/')
.respond(200, [{firstname: 'Max', lastname: 'Mustermann', phonenumber: '123456', email: 'Max@example.com'},
{firstname: 'Hans', lastname: 'Mustermuster', phonenumber: '654321', email: 'Hans@example.com'},
{firstname: 'Peter', lastname: 'mannmann', phonenumber: '246801', email: 'Peter@example.com'}]);
// Get hold of a scope (i.e. the root scope)
$rootScope = $injector.get('$rootScope');
// The $controller service is used to create instances of controllers
var $controller = $injector.get('$controller');
createController = function() {
return $controller('EmployeeRegisterController', {'$scope' : $rootScope });
};
}));
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should fetch authentication token', function() {
var controller = createController();
$httpBackend.expectGET('http://localhost:4200/').respond(200, [{firstname: 'Max', lastname: 'Mustermann', phonenumber: '123456', email: 'Max@example.com'},
{firstname: 'Hans', lastname: 'Mustermuster', phonenumber: '654321', email: 'Hans@example.com'},
{firstname: 'Peter', lastname: 'mannmann', phonenumber: '246801', email: 'Peter@example.com'}]);
expect($rootScope.employees).toBe([{firstname: 'Max', lastname: 'Mustermann', phonenumber: '123456', email: 'Max@example.com'},
{firstname: 'Hans', lastname: 'Mustermuster', phonenumber: '654321', email: 'Hans@example.com'},
{firstname: 'Peter', lastname: 'mannmann', phonenumber: '246801', email: 'Peter@example.com'}]);
$httpBackend.flush();
expect($rootScope.status).toBe('');
});
});
Here's the HTML file if somehow relevant
<!DOCTYPE html>
<html ng-app="myApp.EmployeeRegister">
<head>
<title>Employee Register</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="EmployeeRegisterController">
<!-- <h2>Handshake test</h2>
<div ng-init="getRequest()"></div>
<div ng-controller="testController">
<h3></h3>
</div>
<hr> -->
<div ng-controller="EmployeeRegisterController">
<h1>Add an employee</h1>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" ng-model="firstname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" ng-model="lastname"><br><br>
<label for="pnumber">Phone number:</label>
<input type="text" id="pnumber" name="pnumber" ng-model="phonenumber"><br><br>
<label for="email">E-Mail:</label>
<input type="text" id="email" name="email" ng-model="mail"><br><br>
<input type="submit" value="Submit" ng-click="postEmployee(firstname, lastname, phonenumber, mail)" onClick="window.location.reload();">
</div>
<h1>Employee list</h1>
<div ng-init="getEmployees()"></div>
<div ng-controller="EmployeeRegisterController">
<div ng-repeat="item in employees.data">
<div ng-repeat="(key, val) in item">
:
</div>
<br><br>
</div>
</div>
<div ng-controller="EmployeeRegisterController">
<h1>Find an employee</h1>
<input type="text" id="id" name="ident" ng-model="id">
<input type="submit" value="Search" ng-click="getEmployeesByID(id)">
<div ng-controller="EmployeeRegisterController">
<div ng-repeat="(key, val) in employeesByID.data">
:
</div>
<br>
<input type="submit" value="Delete" ng-click="deleteEmployeesWithID(id)" onClick="window.location.reload();">
</div>
</div>
<script src="EmployeeRegister.js"></script>
</body>
</html>
An explanation of my errors and maybe some tips to write further tests would be appreciated.
