【问题标题】:AngularJS Jasmine TestsAngularJS 茉莉花测试
【发布时间】:2015-09-23 05:16:29
【问题描述】:

我学习 AngularJS 已经有一段时间了,在做了多年后端开发人员之后,我终于明白了它是如何工作的。

但是,我很难理解单元测试如何与 Karma + Jasmine 一起工作。

我读到的每一篇文章要么停止测试控制器 $scope 变量的值,要么深入到我在第一段中迷失的深处。

我希望有人可以为这个控制器编写一个演示测试,这样我就可以了解如何使用私有变量等测试控制器功能。

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('https://query.yahooapis.com/v1/public/yql', {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('https://query.yahooapis.com/v1/public/yql', {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'));
    }
}]);

另外,如果有人能推荐一篇关于 AngularJS 单元测试的易于阅读的文章,我将不胜感激。

【问题讨论】:

标签: javascript angularjs unit-testing karma-jasmine


【解决方案1】:

这是开始测试的一大块。我建议查看 Angular 网站上的教程页面 REST 和自定义服务,并将资源内容放入服务中。

我建议在https://www.youtube.com/channel/UC4Avh_hoUNIJ0WL2XpcLkog观看一些关于茉莉花的好视频 我建议您查看并包括关于间谍的那个。

【讨论】:

  • 谢谢。我将与 $resource 相关的代码重构为一项服务,我希望它也能让测试变得更容易一些。我会读一读,看看我的进展如何。
猜你喜欢
  • 2017-09-27
  • 1970-01-01
  • 2023-03-27
  • 2013-05-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多