用动态内容测试角度指令

时间:2016-05-21 11:01:32

标签: javascript angularjs angularjs-directive

我为下面的指令编写了测试用例并且它没有按预期工作。对于第一个测试用例,我想检查确切的html标记,但是它的一部分来了,src丢失了,第二个测试用例响应值出现了未定义。我需要做出哪些改变?我正在使用业力+茉莉花。代码按预期工作但与测试用例有关。

My directive in html
 <div listcall code='code'></div>

指令

app.directive('testdirective', function ($sce) {
    return {
        restrict: 'EA',
        scope: { code: '=' },
        replace: true,
        template: '<div class="code-container"><iframe src="{{value}}" frameborder="0" allowfullscreen></iframe></div>',
        link: function (scope) {
            scope.$watch('code', function (newVal) {
                if (newVal) {
                    scope.value = $sce.trustAsResourceUrl("hello" + newVal);
                }
            });
        }
    };
});

测试用例

describe('test directive', function () {

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

    it('test for html', function () {

        var element = compile("<div listcall code='code'></div>")(rootScope);
        rootScope.$digest();
        expect(element.html()).toBe('<iframe src="{{value}}" frameborder="0" allowfullscreen>'); // while debug it comes like that <iframe frameborder="0" allowfullscreen=""></iframe> 
    });

    it('scope value', function () {
        var element = compile("<div listcall code='code'></div>")(rootScope);
        rootScope.$digest();
        scope.code = '88x23';
        scope.$digest();

        expect(element.isolateScope().value).toEqual('hello88x23'); // while debug undefined value comes
    });
});

how can i retrieve <iframe src="{{value}}" frameborder="0" allowfullscreen> and hello88x23 to make this test case pass? your any response will be appreciated. 

0 个答案:

没有答案