棱角分明的UI /引导:测试使用一个对话框控制器棱角、对话框、控制器、分明

2023-09-14 00:17:32 作者:孤独症

我已经从棱角分明的UI /引导使用对话框中的控制器:

I've a controller that uses a Dialog from angular-ui/bootstrap:

   function ClientFeatureController($dialog, $scope, ClientFeature, Country, FeatureService) {

        //Get list of client features for selected client (that is set in ClientController)
        $scope.clientFeatures = ClientFeature.query({clientId: $scope.selected.client.id}, function () {
            console.log('getting clientfeatures for clientid: ' + $scope.selected.client.id);
            console.log($scope.clientFeatures);
        });

        //Selected ClientFeature
        $scope.selectedClientFeature = {};

        /**
         * Edit selected clientFeature.
         * @param clientFeature
         */
        $scope.editClientFeature = function (clientFeature) {
            //set selectedClientFeature for data binding
            $scope.selectedClientFeature = clientFeature;

            var dialogOpts = {
                templateUrl: 'partials/clients/dialogs/clientfeature-edit.html',
                controller: 'EditClientFeatureController',
                resolve: {selectedClientFeature: function () {
                    return clientFeature;
                } }
            };
            //open dialog box
            $dialog.dialog(dialogOpts).open().then(function (result) {
                if (result) {
                    $scope.selectedClientFeature = result;
                    $scope.selectedClientFeature.$save({clientId: $scope.selectedClientFeature.client.id}, function (data, headers) {
                        console.log('saved.');
                    }, null);
                }
            });
        };
    });

我几乎完全新的测试,并推断也许我需要测试两件事情:

I'm almost completely new to testing, and figured that maybe I need to test two things:

如果$ scope.editClientFeature()调用打开一个对话框这$保存成功称为对话框关闭并返回一个结果后

我真的搞砸了测试,现在看起来是这样的:

My really messed up test now looks like this:

describe('ClientFeatureController', function () {
    var scope, $dialog, provider;

    beforeEach(function () {
            inject(function ($controller, $httpBackend, $rootScope, _$dialog_) {
            scope = $rootScope;
            $dialog = _$dialog_;

            //mock client
            scope.selected = {};
            scope.selected.client = {
                id: 23805
            };

            $httpBackend.whenGET('http://localhost:3001/client/' + scope.selected.client.id + '/clientfeatures').respond(mockClientFeatures);
            $controller('ClientFeatureController', {$scope: scope});
            $httpBackend.flush();
        });
    });


    it('should inject dialog service from angular-ui-bootstrap module', function () {
        expect($dialog).toBeDefined();
        console.log($dialog); //{}
    });

    var dialog;

    var createDialog = function (opts) {
        dialog = $dialog.dialog(opts);
    };

    describe('when editing a clientfeature', function () {
        createDialog({});
        console.log(dialog); //undefined
//        var res;
//        var d;
//        beforeEach(function () {
//            var dialogOpts = {
//                template: '<div>dummy template</div>'
//            };
//            console.log(dialog);
//            d = $dialog.dialog(dialogOpts);
//            d.open();
//        });
//
//        it('should open a dialog when editing a client feature', function () {
//            expect(d.isOpen()).toBe(true);
//        });
    });

});

眼前的问题,现在是,我无法创建/打开一个对话框。我收到以下错误:

The immediate problem now is that I'm unable to create/open a dialog. I get the following error:

Chrome 25.0 (Mac) ClientFeatureController when editing a clientfeature encountered a declaration exception FAILED
    TypeError: Cannot call method 'dialog' of undefined

如果有人已经写了一个测试一个类似用途的情况下,可以为我提供一个例子,因为我是pretty失去这将是巨大的。

It would be great if someone has already written a test for a similar use case and can provide me with an example as I'm pretty lost.

谢谢,肖恩

推荐答案

我亲自尝试嘲笑所有的服务了。如果UI,引导项目不提供$对话框模拟,你应该有一个开放的bug票,并问他们一个。但是创造一个是容易。

Personally I try to mock all services out. If the ui-bootstrap project does not provide a $dialog mock, you should open a bug ticket there and ask them for one. However creating one is as easy.

模拟服务应该有假货的方法做什么,但回报的承诺。它也应该给你一个方法来刷新所有异步方法,使之更容易做同步测试。

The mock service should have fake methods that do nothing but return promises. It should also give you a method to flush all asynchronous methods to make it easier to do synchronous testing.

 
精彩推荐
图片推荐