mardi 22 septembre 2015

AngularJS Jasmine Tests

I've been learning AngularJS for a while now and am finally getting my head around how it works after being a back-end developer for years.

However, I'm having an enormous amount of trouble understanding how unit testing works with Karma + Jasmine.

Every article I read either stops at testing a controller $scope variable for a value or dives so far into the deep end I get lost in the first paragraph.

I'm hoping someone can write a demo test for this controller so I can get my head around how to test controller functions with private variables etc.

financeApp.controller('navController', ['$scope', '$resource', '$cookies', '$location', function ($scope, $resource, $cookies, $location) {
    // Set default values
    $scope.resultList = [];
    $scope.cookieExp = moment().add(3, 'months').toDate();
    $scope.dataLoaded = true;
    $scope.codesList = [];

    // Update watchlist item stock prices
    $scope.updateWatchItem = function (items) {

        sqlstring = items.join("\",\"");

        var financeAPI = $resource('http://ift.tt/1qXLaIk', {callback: "JSON_CALLBACK" }, {get: {method: "JSONP"}});        
        financeAPI.get({q: decodeURIComponent('select%20*%20from%20yahoo.finance.quote%20where%20symbol%20in%20(%22' + sqlstring + '%22)'),
                format: 'json', env: decodeURIComponent('store%3A%2F%2Fdatatables.org%2Falltableswithkeys')})
        .$promise.then(function (response) {
                var quotes = response.query.results.quote;
                quotes = Array.isArray(quotes) ? quotes : [quotes];
                quotes.forEach(function (quote) {
                    $scope.createWatchItem(quote);
                });

            }, function (error) {
                alert("ERROR: There was an issue accessing the finance API service.");
            });
    };

    // Add a new watchlist item (triggered on button click)
    $scope.newWatchItem = function () {
        var newcode = $scope.asxcodeinput;

        if (newcode == null) {
            alert('Please enter a valid ASX equities code...');
            return;
        }
        else if ($scope.codesList.indexOf(newcode + '.AX') > -1) {
            alert('You are already tracking ' + newcode.toUpperCase() + '!');
            return;
        }

        $scope.dataLoaded = false;

        var financeAPI = $resource('http://ift.tt/1qXLaIk', {callback: "JSON_CALLBACK" }, {get: {method: "JSONP"}});        
        financeAPI.get({q: decodeURIComponent('select%20*%20from%20yahoo.finance.quote%20where%20symbol%20in%20(%22' + newcode + '.AX%22)'),
                format: 'json', env: decodeURIComponent('store%3A%2F%2Fdatatables.org%2Falltableswithkeys')})
        .$promise.then(function (response) {
                $scope.dataLoaded = true;
                var quote = response.query.results.quote;

                if(quote.StockExchange != null) {
                    $scope.createWatchItem(quote);
                    $cookies.putObject('codesCookie', $scope.codesList, {expires: $scope.cookieExp});
                    $location.path('/' + (quote.Symbol).split('.')[0].toUpperCase());
                }
                else {
                    alert("Woops! Looks like that stock doesn't exist :(");
                }
            }, function (error) {
                alert("ERROR: There was an issue accessing the finance API service.");
            });
        $scope.asxcodeinput = "";
    };

    // Delete a watchlist item (triggered on delete icon click)
    $scope.deleteWatchlistItem = function (asxcode) {
        $scope.resultList.forEach(function (result, key) {
            if(result.Symbol == asxcode) {
                $scope.resultList.splice(key, 1);
            }
        });
        $scope.codesList.forEach(function (code, key) {
            if(code == asxcode) {
                $scope.codesList.splice(key, 1);
            }
        });
        $cookies.putObject('codesCookie', $scope.codesList, {expires: $scope.cookieExp});

        $location.path('/');
    };

    // Add new watchlist item to lists of watched items
    $scope.createWatchItem = function (quote) {
        $scope.resultList.push(quote);
        $scope.codesList.push(quote.Symbol);
    };

    // Get current page for navigation menu CSS
    $scope.isActive = function (location) {
        return location === $location.path();
    };

    // If the cookie is set and not empty, populate the watchlist items with the cookie contents
    if($cookies.getObject('codesCookie') && $cookies.getObject('codesCookie').length > 0) {
        $scope.updateWatchItem($cookies.getObject('codesCookie'));
    }
}]);

Also, if anyone can recommend an easy to read article on unit testing in AngularJS I'd appreciate it.

Aucun commentaire:

Enregistrer un commentaire