محاكاة محاكاة وحدة التحكم في اختبار وحدة التوجيه الزاوي

Question

أقوم باختبار وحدة توجيه Angular وأرغب في السخرية أو إيقاف بطريقة ما إنشاء مثيل لوحدة التحكم المسماة في اختبار الوحدة.

لذا أفترض أولاً بعض التعليمات البرمجية ...

'use strict';

angular.module('App.Directives.BreadCrumbs', [])

    .directive('kxBreadcrumbs', function () {
        return {
            restrict: 'E',
            controller: 'BreadCrumbsController',
            template:
                '<!-- Breadcrumbs Directive HTML -->' +

                '<ol class="breadcrumb">' +
                '    <li ng-repeat="crumb in crumbPath">' +
                '       <a ng-class="{true: \'disable\', false: \'\'}[crumb.last]" href="{{crumb.href}}" ng-click="updateCrumb(crumb.name)">{{crumb.name}}</a>' +
                '    </li>' +
                '</ol>' +

                '<!-- End of Breadcrumbs Driective HTML -->'
        };

    });

هذا أحد نماذج التوجيهات التي سأختبرها على الوحدة، والشيء المهم الذي يجب أخذه من هذا هو وحدة التحكم المسماة.

لذلك في اختبار وحدتي

'use strict';

describe('Directives: Breadcrumbs', function () {

    var//iable declarations
        elm,
        scope,
        $rootScope
    ;

    beforeEach(function () {
        module('App.Directives.BreadCrumbs');
        module('App.Controllers.BreadCrumbs');
        module('App.Constants'); // <--- Comes from the controller dependancy
    });


    beforeEach(inject(function (_$rootScope_, $compile) {
        $rootScope = _$rootScope_;
        scope = $rootScope.$new();

        elm = angular.element('<kx-breadcrumbs></kx-breadcrumbs>');
        $compile(elm)(scope);
        scope.$apply();
    }));

    it('Should create the breadcrumbs template', function () {
        scope.crumbPath = [{name: 'home', href: '/'},{name: 'coffee', href: '/coffee'},{name: 'milk', href: '/milk'}];
        scope.$apply();
        var listItem = $(elm).find('li');
        expect(listItem.length).toBe(3);
        expect($(listItem).text()).toContain('home');
        expect($(listItem).text()).toContain('coffee');
        expect($(listItem).text()).toContain('milk');

    });
});

يمكنك رؤية تضمين الوحدات الثلاث - التوجيه ووحدة التحكم والثالثة الثوابت.تتم الإشارة إلى هذا بواسطة وحدة التحكم باعتباره تبعية، لذا من أجل سحب هذا إلى اختبار الوحدة، أحتاج إلى سحب التبعية أو في الحالات الأسوأ بكثير، التبعيات من وحدة التحكم.ولكن نظرًا لأنني لا أقوم باختبار وظيفة وحدة التحكم في اختبار وحدة التوجيه، فإن هذا يبدو زائدًا عن الحاجة ومتضخمًا في التعليمات البرمجية من خلال تضمين الوحدات النمطية.من الناحية المثالية، أود فقط تضمين الوحدة التي أقوم باختبارها.

  module('App.Directives.BreadCrumbs');

وليس (تم إضافة الوحدات لتوضيح وجهة نظري أكثر)

  module('App.Directives.BreadCrumbs');
  module('App.Controllers.BreadCrumbs');
  module('App.Constants'); // <--- Comes from the controller dependancy
  module('App.Service.SomeService'); // <--- Comes from the controller dependancy
  module('App.Service.SomeOtherService'); // <--- Comes from the SomeService dependancy

عندما نقوم باختبار وحدات التحكم، يمكننا الاستهزاء بالخدمات التي يتم تمريرها إما بشكل كامل أو باستخدام جواسيس الياسمين.هل يمكننا إنجاز نفس الشيء في اختبار الوحدة للتوجيهات حتى لا أضطر إلى اتباع مسار التبعية؟

Answer 1

يمكنك إنشاء نماذج وهمية في كتلة تكوين الوحدة النمطية باستخدام $controllerProvider.register() لأجهزة التحكم، $provide.provider(), $provide.factory(), $provide.service() و $provide.value() لمقدمي الخدمات والمصانع والخدمات:

جافا سكريبت

beforeEach(function () {
    module('App.Directives.BreadCrumbs', function($provide, $controllerProvider) {
        $controllerProvider.register('BreadCrumbsController', function($scope) {
            // Controller Mock
        });
        $provide.factory('someService', function() {
            // Service/Factory Mock
            return {
                doSomething: function() {}
            }
        });
    });
});

بمجرد القيام بذلك، سيقوم Angular بإدخال ملفك الوهمي BreadCrumbsController وحدة تحكم في kxBreadcrumbs التوجيه.بهذه الطريقة لن تحتاج إلى تضمين وحدة تحكم حقيقية وتبعياتها في اختبار الوحدة.

لمزيد من المعلومات، راجع وثائق Angular الرسمية على:

• توفير $
• $controllerProvider