jeudi 15 avril 2021

AngularJS Jasmine controller testing, No Pending requests to flush and Unsatisfied requests GET

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.

Aucun commentaire:

Enregistrer un commentaire