재스민:돌연변이 관찰자를 조롱하는 방법?

재스민:돌연변이 관찰자를 조롱하는 방법?

angularjs 성분이 있는데,

HTML 템플릿

<div id="panel" class="hide-div">
   <div id="viewPort" class="hide-div">
    ...
   </div>
</div>

JS

var myController = function() {
    var ctrl=this;
    ctrl.$onchanges = function() {

    }

    var source = $("#viewport");
    var target = $("#panel");
    var observer = new MutationObserver(function() {
       target.toggleClass("hide-div", source.hasClass("hide-div"));
     });
    observer.observe($("#viewport")[0], {attributes: true});
}

var config = {
    controller: [myController],
    templateUrl: "temp/abc.html",
    bindings: {
        id: "<",
        name: "<"
    }
};

directives.component("myComponent", config);

여기 있습니다.MutationObserver다른 요소 속성을 관찰하여 클래스를 추가/removes합니다.

Jasmine 스크립트 여기 모든 테스트 케이스에 대한 스크립트를 설정합니다.

beforeEach(inject(function($rootScope,  $compile, _$componentController_, ...){
    $templateCache.put("temp/abc.html", "<div><div id='panel' /><div id='viewport' /></div>");
    rootScope = $rootScope;
    scope = $rootScope.$new();
    $componentController = _$componentController_;
    element = angular.element("<my-component></my-component>");
    element = $compile(element)(scope);
    ctrl = $componentController("myComponent", null, componentBining);
}));

여기서 다음과 같은 오류가 발생합니다.

NotFoundError: NotFoundError: DOM Exception 8 in temp/abc.html observe@[native code]

JSDOM 글로벌은 여러분이 예상하는 것과 다릅니다.

이 질문에 대한 답은 "어떻게 돌연변이 관찰자를 조롱할 것인가?"에서 "왜 처음부터 조롱하는가?"로 초점을 옮겨야 합니다.

돌연변이 관찰자는 외부에서 구현되며, 잘 작동하기를 바랍니다.그래서 테스트 범위의 일부로 테스트하지 않습니다.그 대신에 콜백을 추출할 겁니다

const triggerHandler = function() {
       target.toggleClass("hide-div", source.hasClass("hide-div"));
     }

 var observer = new MutationObserver(triggerHandler);

핸들러를 수동으로 트리거하여 효과를 테스트합니다.

Mutation Observer를 조롱할 수도 있습니다.jest.fn(),맘에 들다

global.MutationObserver = jest.fn(()=>{
  return {...}
})

언급URL : https://stackoverflow.com/questions/50398703/jasmine-how-to-mock-mutationobserver