각도 1.5 구성 요소 내부에서 단위 테스트하는 방법

Question

각도 1.5 구성 요소를 사용하여 탐색을 만들었습니다. 그러나 테스트에 어려움을 겪고 있습니다. 나는 Angular와 unit testing 모두에 익숙하지 않습니다. 코드를 찾으십시오. PLUNKER

이것은 제 구성 요소입니다.

module.component('firstComponent', { 
    templateUrl: "1.html", 
    bindings: { 
     "$router": "<" 
    }, 
    controller: function($rootScope) { 

     var $ctrl = this; 

     $rootScope.title = "Title from Page 1"; 

     $ctrl.goToNextPage = function() { 
     $ctrl.$router.navigate(["Second"]); 
     }; 

    } 
    }); 

현재 페이지의 제목이 적절한 지 여부와 다음 페이지로 이동 중인지 여부를 테스트하려고합니다.

3 사양, 2 개 실패 1. 형식 오류 : 속성을 읽을 수 없습니다 '제목'여기

는 이러한 테스트를 실행하는 동안 오류가 얻고 있습니다 내 테스트 spec.js

 describe("Check if component is defined", function() { 

     beforeEach(module("app")); 

     var $ctrl; 
     var router; 
     var $rootscope; 

     beforeEach(inject(function($componentController) { 
     $ctrl = $componentController("firstComponent", { 
      $router: router, 
      $rootscope: $rootscope 
     }); 
     })); 

     it("are things define properly", function() { 
     expect($ctrl).toBeDefined(); 

     expect($ctrl.goToNextPage).toBeDefined(); 
     }); 

     it("should have proper title", function() { 

     expect($rootscope.title).toBe("Title from Page 1"); 

     }); 

     it("should navigate to next page", function() { 

     expect($ctrl.router.navigate).toHaveBeenCalled(); 

     }); 

    }); 

입니다 정의되지 않음 2. TypeError : 정의되지 않은 'navigate'속성을 읽을 수 없습니다.

Answer 1

테스트 중에 약간의 오류가 있습니다.

우선 $ componentController 및 $ rootScope을 삽입해야합니다.

그 후, 당신은 $ componentController 서비스를 사용하여 컨트롤러를 인스턴스화해야합니다

let bindings = {$router: router}; 
$ctrl = $componentController('firstComponent', null, bindings); 

을 그리고 당신은 일부 기능을 테스트 할 수 있습니다

it("are things define properly", function() { 
    expect($ctrl).toBeDefined(); 
    expect($ctrl.goToNextPage).toBeDefined(); 
}); 

은 당신이 가지고있는 탐색 기능을 테스트하려면를 라우터에 스파이를 만들려면 함수 $ ctrl.goToNextPage()을 실행하고 스파이에 대한 주장을하십시오.

let routerSpy = spyOn(router, "navigate"); 

...//you must instantiate your controller here as shown above 

$ctrl.goToNextPage(); 
expect(routerSpy).toHaveBeenCalled(); 

난 당신이 완전한 코드를 볼 수 있습니다 Plunker 업데이트 한

:

https://plnkr.co/edit/TiuXM5?p=preview

을