javascript – 单元测试使用Kendo Grid / Datasource的Angular Controller

2019-08-25 00:34:52 阅读：229 来源： 互联网

标签：javascript unit-testing angularjs kendo-ui kendo-grid

我的项目是使用AngularJS Kendo-UI.我正在尝试测试一个使用Kendo-UI Grid的控制器：

angular.module('myApp')('DevicesCtrl', function ($scope) {

    $scope.gridOptions = {
        dataSource: {
            transport: {
                read: {
                    url: "/devices",
                    dataType: "json"
                }
            },
            change: function(){
                var view = this.view();
                $scope.devices = [];

                $.each(view, function(i, v) {
                    $scope.devices.push({id: v.id, description: v.name, status: v.status  == 0 ? "failure" : "success"});
                });
                $scope.$apply();
            }
        },
        columns: [
            {
                field: "name",
                title: "Name",
                width: 250,
                template: function (item) {
                    var itemStatus = item.status == 0 ? 'failure' : 'success';
                    return '<div label size="small" operation="' + itemStatus + '" label="' + item.name + '"></div>';
                }
            },
            {
                field: "status",
                title: "Status"
            }
        ]
    };
});

当我编写单元测试时,我预计将调用GET请求：

describe('deviceCtrl', function () {

    var scope, deviceCtrl, httpBackend, timeout;

    beforeEach(module("myApp"));
    beforeEach(module('src/modules/devices/views/device.html'));

    beforeEach(inject(function ($controller, $rootScope, $httpBackend, $timeout, $state) {
        scope = $rootScope.$new();

        httpBackend = $httpBackend;
        timeout = $timeout;

        httpBackend.expectGET('languages/en_US.json').respond({});

        deviceCtrl = $controller("DeviceCtrl", {
            $scope: scope
        });

        $state.go("devices");
        timeout.flush()

    }));

    it('should load the switch list', function () {

        httpBackend.expectGET("/devices").respond(
            [{"id":"1","name":"name 1","status":"1"},
            {"id":"2","name":"name 2","status":"2"}]
        );

        httpBackend.flush();

    });

});

但是期望永远不会满足,没有提出要求.
所以我的问题是：有没有办法让Kendo Grid / Datasource进行这个调用,所以我可以模拟它？

我看到了一些关于如何使用Mockjax(http://www.telerik.com/forums/best-practice-mocking-with-datasource)进行操作的示例,但我更喜欢使用角度库来做到这一点.

解决方法:

经过大量的研究,我可以找到一些方法来测试使用Kendo Datasource的控制器.

Kendo有自己的方式来进行Ajax调用以获取数据,并且不使用常规的Angular $http来做到这一点,因此使用Angular工具(角度模拟)进行测试有点棘手.
我们来看看选项：

1 – 使用常规的Angular方式进行Ajax调用.

Kendo让我们改变了获取数据的方式,所以不要这样做：

dataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/devices,
                    dataType: "json"
                }
            },
            change: function(){
                var view = this.view();
                $scope.devices = [];

                $.each(view, function(i, v) {
                    $scope.devices.push({id: v.id, description: v.name, status: v.status  == 0 ? "failure" : "success"});
                });
                $scope.$apply();
            }
        });

我们将改为：

dataSource: new kendo.data.DataSource({
            transport: {
                read: function(options){
                    $http.get("/devices").then(function(response){
                        options.success(response.data);
                        $scope.devices = [];
                        response.data.forEach(function(v){
                            $scope.devices.push({id: v.id, description: v.name, status: v.status  == 0 ? "failure" : "success"});
                        });
                    });
                }
            }
        });

然后我们可以使用常规$httpBackend.expectGET(url)来模拟Ajax调用.
我个人喜欢这种方法,因为我们有更多的控制权.
Ps.：使用函数内部的变量“options”,我们可以访问Grid过滤器,排序和分页值.

2 – 模拟Kendo Ajax Call.

通过这种方式,我们在Controller中几乎没有任何改变,唯一需要改变的是使用新的kendo.data.DataSource({})创建一个新的数据源而不是仅传递选项.
这需要,因为我们在测试用例中调用了read函数.
我尝试了不同的方法来模拟这个Ajax请求,但我唯一可以使它工作的是使用一个名为Jasmine-Ajax的工具.
在测试用例中,我们会写一些类似于：

var request = jasmine.Ajax.requests.mostRecent();
request.response(MockData);

我希望这可以帮助其他人.

标签：javascript,unit-testing,angularjs,kendo-ui,kendo-grid
来源： https://codeday.me/bug/20190825/1713607.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 单元测试使用Kendo Grid / Datasource的Angular Controller