고립 된 범위, 양방향 가치 및 NGIF로 단위 테스트

Question

단위 테스트를 원합니다.이 지침은 다음과 같습니다.

angular.module('myApp', [])
.directive('myTest', function () {
    return {
        restrict: 'E',
        scope: { message: '='},
        replace: true,
        template:  '<div ng-if="message"><p>{{message}}</p></div>',
        link: function (scope, element, attrs) {
        }
    };
});

.

여기에 내 실패한 테스트가 있습니다 :

describe('myTest directive:', function () {

    var scope, compile, validHTML;

    validHTML = '<my-test message="message"></my-test>';

    beforeEach(module('myApp'));

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

    function create() {
        var elem, compiledElem;
        elem = angular.element(validHTML);
        compiledElem = compile(elem)(scope);
        scope.$digest();

        return compiledElem;    
    }

    it('should have a scope on root element', function () {  
        scope.message = 'not empty';
        var el = create();
        console.log(el.text());
        expect(el.text()).toBeDefined();
        expect(el.text()).not.toBe('');
    });

});

.

왜 실패한 이유를 찾을 수 있습니까?

해당 jsfiddle

감사합니다 :)

Answer 1

 console.log((new XMLSerializer()).serializeToString(el.get(0)));

.

는

를 반환합니다

 <!-- ngIf: message --> 

.

NG-IF .SO의 콤비 결합을 사용하여 ValidHTML을 겸손하게 사용하여 ValidHtml을 변경하고 AVILHTML을 추가하고 부모로 추가하십시오.

또는

el

의 다음 형제 자매에 대한 기대치를 테스트하십시오.

el.next() 

.

<div ng-if="message" message="message" class="ng-scope"><p class="ng-binding">yes</p></div> 

.