Базовое испытание компонентов Karma Angular 1.5

Question

Базовое испытание компонентов Karma Angular 1.5

0

Я не уверен, что то, что я делаю, совершенно неверно, но когда я переключился с "директивы" на "компоненты" для определения некоторых из моих HTML-элементов, я внезапно нарушил все мои тесты Karma. вот что у меня есть:

karam.conf.js

...
preprocessors: {
    'module-a/module-a.view.html': ['ng-html2js'],
    ...,
    'module-z/module-z.view.html': ['ng-html2js']
},

ngHtml2JsPreprocessor: {
    moduleName: 'theTemplates'
},
...

модуль-a.component.js

(function(){
    "use strict";

    angular.module('ModuleA').component('moduleAComponent',{
        controller: 'ModuleAController as moduleAVm',
        templateUrl: 'module-a/module-a.view.html'      
    });
})();

Модуль-а-tests.js

"use strict";

describe('ModuleA',function(){

    beforeEach(module('ModuleA'));

    describe('Controller',function(){
        ...
    });

    describe('Component',function(){
        var element, $rootScope;
        beforeEach(module('theTemplates'));
        beforeEach(inject([
            '$compile','$rootScope',
            function($c,$rs) {
               $rootScope = $rs;
               element = $c('<module-a-component></module-a-component>')($rootScope);
               $rootScope.$digest(); // ???
            }
        ]));

        it('should have moduleAVm',function(){
            expect(element.html()).not.toBe(''); // FAILS HERE
            expect(element.html()).toContain('moduleVm'); // FAILS HERE TOO
        });

    });

});

Ошибка:

Expected '' not to be ''.

westandy 22 июль 2016, в 22:37

Источник

0

Можете ли вы добавить ошибку, которую вы видите на консоли? Также попробуйте использовать этот angular.module ('ModuleA', []). Component ('moduleAComponent' ....
Indra Uprade 22 июль 2016, в 20:16
0

Я определил angular.module('ModuleA',[]) в module-a/module-a.module.js , поэтому я считаю, что это нормально. Однако я добавил ошибку. Сбой при ожидаемом вызове означает, что element.html () пуст, что означает, что он не переваривается (я думаю).
westandy 22 июль 2016, в 20:33

Теги:

javascript

angularjs

karma-jasmine

1 ответ

Ещё вопросы

Можете ли вы добавить ошибку, которую вы видите на консоли? Также попробуйте использовать этот angular.module ('ModuleA', []). Component ('moduleAComponent' ....
Я определил angular.module('ModuleA',[]) в module-a/module-a.module.js , поэтому я считаю, что это нормально. Однако я добавил ошибку. Сбой при ожидаемом вызове означает, что element.html () пуст, что означает, что он не переваривается (я думаю).

westandy · Accepted Answer · 2016-07-22T20-39-00.000Z

Хорошо, после более глубокого чтения Угловой документации я наткнулся на это утверждение:

Самый простой способ модульного тестирования компонентного контроллера - использовать $ componentController, который включен в ngMock. Преимущество этого метода заключается в том, что вам не нужно создавать какие-либо элементы DOM. В следующем примере показано, как это сделать для компонента heroDetail сверху.

И мне стало понятно, что я описываю ("Контроллер", функция() {...}); было то, что мне действительно нужно было изменить, и что я должен просто избавиться от части "Компонент", официально известной как "Директива",

Здесь мой "Контроллер" теперь:

    beforeEach(inject([
        '$componentController', // replaced $controller with $componentController
        function($ctrl){
            ctrl = $ctrl('queryResults',{ // Use component name, instead of controller name
                SomeFactory:MockSomeFactory,
                SomeService:MockSomeService
            });
        }
    ]));

Теперь я все еще проверяю свой контроллер, одновременно проверяя компонент. И мне больше не нужно создавать элементы DOM, используя $ compile, $ rootScope и т.д.

Можно ли сказать, что вам вообще не нужно создавать элемент, когда вы можете использовать $componentController ?