AngularJS의 단위 테스트 : 서비스, 컨트롤러 및 제공자

키 테이크 아웃

AngularJS는 종속성 주입을 사용하여 단위 테스트를보다 쉽게 ​​만들고 애플리케이션을 서비스, 컨트롤러 및 제공자와 같은 다른 구성 요소로 모듈화 할 수 있도록 테스트 가능성을 염두에두고 설계되었습니다. Angularjs의 서비스는 중앙 장소에서 재사용 가능한 논리를 정의하는 일반적인 구성 요소입니다. 서비스를 테스트 할 때는 다른 서비스에 대한 종속성을 모의 개체로 교체해야합니다. angularjs의 컨트롤러는 주입 할 수 없지만 경로로드 또는 NG 컨트롤러 지시문이 컴파일 될 때 자동으로 인스턴스화됩니다. 컨트롤러를 테스트 할 때는 수동으로 인스턴스화해야하며 뷰가 컴파일 된 후에도 범위에 추가되는 객체를 수동으로 작성하고 컨트롤러에 추가해야합니다.

. AngularJS의 제공 업체는 응용 프로그램이 시작되기 전에 이루어져야하는 응용 프로그램 전체 구성을 위해 API를 노출시키는 데 사용됩니다. 제공자를 테스트하려면 모듈을로드하고 준비해야하며 종속성을 조롱해야하며 콜백을 모듈 블록으로 전달해야합니다. angularjs의 단위 테스트는 까다로울 수 있지만 응용 프로그램의 정확성을 보장하기 때문에 시간이 가치가 있습니다. AngularJS는 프레임 워크를 사용하여 작성된 테스트 코드를보다 쉽게 ​​할 수 있습니다.

AngularJS는 테스트 가능성을 염두에두고 설계되었습니다. 의존성 주입은 단위 테스트를보다 쉽게 ​​만드는 프레임 워크의 두드러진 특징 중 하나입니다. AngularJS는 응용 프로그램을 깔끔하게 모듈화하고 컨트롤러, 지침, 필터 또는 애니메이션과 같은 다른 구성 요소로 나누는 방법을 정의합니다. 이 개발 모델은 개별 작품이 분리되어 작동하며 응용 프로그램은 오랜 시간 동안 쉽게 확장 할 수 있음을 의미합니다. 확장 성과 테스트 가능성이 손을 잡으므로 AngularJS 코드를 쉽게 테스트 할 수 있습니다. 단위 테스트의 정의에 따라 테스트중인 시스템은 분리되어 테스트해야합니다. 따라서 시스템에 필요한 외부 객체는 모의 개체로 교체해야합니다. 이름 자체가 말했듯이, 모의 개체는 실제 작업을 수행하지 않습니다. 오히려 그들은 시험중인 시스템의 기대를 충족시키는 데 사용됩니다. 조롱에 대한 새로 고침이 필요한 경우, 이전 기사 중 하나를 참조하십시오 : AngularJS 테스트의 조롱 종속성. 이 기사에서는 AngularJS의 테스트 서비스, 컨트롤러 및 제공 업체에 대한 일련의 팁을 공유 할 것입니다. 코드 스 니펫은 Jasmine을 사용하여 작성되었으며 Karma Test Runner와 함께 실행할 수 있습니다. 이 기사에서 사용한 코드를 GitHub Repo에서 다운로드 할 수 있습니다. 여기서 테스트 실행에 대한 지침도 찾을 수 있습니다. 테스트 서비스 서비스는 AngularJS 응용 프로그램에서 가장 일반적인 구성 요소 중 하나입니다. 그들은 동일한 논리를 반복해서 반복 할 필요가 없도록 중앙 장소에서 재사용 가능한 논리를 정의하는 방법을 제공합니다. 서비스의 싱글 톤 특성으로 인해 여러 컨트롤러, 지침 및 기타 서비스에서 동일한 데이터를 공유 할 수 있습니다. 서비스는 작업을 수행하기 위해 일련의 다른 서비스에 따라 달라질 수 있습니다. A라는 서비스는 작업을 수행하기 위해 서비스 B, C 및 D에 따라 다릅니다. 서비스 A를 테스트하는 동안 종속성 B, C 및 D는 모의로 대체되어야합니다. 우리는 일반적으로 $ rootscope 및 $ parse와 같은 특정 유틸리티 서비스를 제외한 모든 종속성을 조롱합니다. 우리는 새로운 기능을 반환 할 Jasmine.createspy ()를 사용하여 테스트에서 검사 해야하는 방법 (자스민에서 스파이라고 함)에 대한 스파이를 만듭니다. 다음 서비스를 고려해 봅시다 :

이 서비스에는 하나의 방법 (showdialog)이 있습니다. 이 방법이 수신하는 입력의 값에 따라, 종속성 ($ 창 또는 modalsvc)으로 주입되는 두 서비스 중 하나를 호출합니다.

샘플을 테스트하려면 두 종속 서비스를 조롱하고 서비스가 포함 된 각도 모듈을로드하고 모든 객체에 대한 참조를 가져와야합니다.

이제 우리는 showdialog 메소드의 동작을 테스트 할 수 있습니다. 우리 가이 방법에 대해 쓸 수있는 두 가지 테스트 사례는 다음과 같습니다.

제목이 없으면

에서 전달되는 경우 알림을 호출합니다. 제목과 메시지 매개 변수가 모두 있으면 showmodaldialog를 호출합니다.

다음 스 니펫은이 테스트를 보여줍니다

이 방법에는 테스트 할 논리가 많지 않지만 일반적인 웹 앱의 서비스에는 일반적으로 많은 기능이 포함됩니다. 이 팁에서 시연 된 기술을 조롱하고 서비스에 대한 참조를 얻을 수 있습니다. 서비스 테스트는 서비스를 작성하는 동안 가정 된 모든 가능한 시나리오를 다루어야합니다. 공장과 값은 동일한 기술을 사용하여 테스트 할 수 있습니다.

테스트 컨트롤러 컨트롤러를 테스트하기위한 설정 프로세스는 서비스와는 상당히 다릅니다. 이는 컨트롤러가 주입 할 수 없기 때문에 경로가로드되거나 NG- 컨트롤러 지침이 컴파일 될 때 자동으로 인스턴스화됩니다. 테스트에 뷰가 장착되어 있지 않으므로 테스트 중 컨트롤러를 수동으로 인스턴스화해야합니다.

컨트롤러가 일반적으로 뷰에 연결되어 있으므로 컨트롤러의 메소드 동작은 뷰에 따라 다릅니다. 또한 뷰가 컴파일 된 후 일부 추가 객체가 범위에 추가 될 수 있습니다. 이것의 가장 일반적인 예 중 하나는 양식 대상입니다. 테스트를 예상대로 작동 시키려면 이러한 객체를 수동으로 작성하고 컨트롤러에 추가해야합니다.

angular<span>.module('services', [])
</span>  <span>.service('sampleSvc', ['$window', 'modalSvc', function($<span>window, modalSvc</span>){
</span>    <span>this.showDialog = function(message<span>, title</span>){
</span>      <span>if(title){
</span>        modalSvc<span>.showModalDialog({
</span>          <span>title: title,
</span>          <span>message: message
</span>        <span>});
</span>      <span>} else {
</span>        $<span>window.alert(message);
</span>      <span>}
</span>    <span>};
</span>  <span>}]);</span>

> 컨트롤러는 다음 유형 중 하나 일 수 있습니다.
컨트롤러가 $ Scope 로 사용됩니다 컨트롤러는 컨트롤러와 구문 로 사용됩니다
• 차이점에 대해 잘 모르겠다면 여기에서 자세한 내용을 읽을 수 있습니다. 어느 쪽이든, 우리는이 두 가지 사례를 모두 논의 할 것입니다.
$ SCOPE 가있는 컨트롤러 테스트 컨트롤러 다음 컨트롤러를 고려하십시오
이 컨트롤러를 테스트하려면 $ SCOPE 객체와 서비스의 조롱 된 객체 (DatASVC)를 전달하여 컨트롤러 인스턴스를 작성해야합니다. 이 서비스에는 비동기 방법이 포함되어 있으므로 이전 기사에서 설명한 조롱 약속 기술을 사용하여 조롱해야합니다. 다음 스 니펫은 DataSVC 서비스를 조롱합니다 :

그런 다음 $ rootscope를 사용하여 컨트롤러에 대한 새로운 범위를 만들 수 있습니다. $ new Method. 컨트롤러 인스턴스를 작성한 후이 새로운 $ 범위에 대한 모든 필드와 메소드가 있습니다.

컨트롤러가 필드와 메소드를 $ 범위로 추가함에 따라 올바른 값으로 설정되어 있는지 확인하고 메소드에 올바른 논리가 있는지 확인할 수 있습니다. 위의 샘플 컨트롤러는 정규 표현식을 추가하여 유효한 숫자를 확인합니다. 정규 표현의 동작을 테스트하기 위해 사양을 추가합시다.

컨트롤러가 기본값으로 객체를 초기화하면 사양에서 해당 값을 확인할 수 있습니다. Savedata 메소드를 테스트하려면 BookDetail 및 BookForm 객체에 대한 값을 설정해야합니다. 이 객체는 UI 요소에 묶여 있으므로보기가 컴파일 될 때 런타임에 생성됩니다. 이미 언급했듯이 Savedata 메소드를 호출하기 전에 일부 값으로 수동으로 초기화해야합니다.

다음 스 니펫은이 방법을 테스트합니다

'컨트롤러 AS'구문이있는 컨트롤러를 테스트합니다 컨트롤러를 구문으로 사용하는 컨트롤러를 테스트하는 것은 $ 스코프를 사용하여 테스트하는 것보다 쉽습니다. 이 경우 컨트롤러 인스턴스는 모델의 역할을 수행합니다. 결과적 으로이 인스턴스에서 모든 동작과 객체를 사용할 수 있습니다.

다음 컨트롤러를 고려하십시오

angular<span>.module('services', [])
</span>  <span>.service('sampleSvc', ['$window', 'modalSvc', function($<span>window, modalSvc</span>){
</span>    <span>this.showDialog = function(message<span>, title</span>){
</span>      <span>if(title){
</span>        modalSvc<span>.showModalDialog({
</span>          <span>title: title,
</span>          <span>message: message
</span>        <span>});
</span>      <span>} else {
</span>        $<span>window.alert(message);
</span>      <span>}
</span>    <span>};
</span>  <span>}]);</span>

이 컨트롤러를 호출하는 프로세스는 앞에서 논의 된 프로세스와 유사합니다. 유일한 차이점은 $ 범위를 만들 필요가 없다는 것입니다.
컨트롤러의 모든 멤버와 메소드 가이 인스턴스에 추가되므로 인스턴스 참조를 사용하여 이들 액세스 할 수 있습니다.

다음 스 니펫은 위 컨트롤러에 추가 된 숫자 패턴 필드를 테스트합니다.

savedata 방법의 주장은 동일하게 유지됩니다. 이 접근법의 유일한 차이점은 값을 서점 및 책형 객체에 초기화하는 방법입니다.

<span>var mockWindow, mockModalSvc, sampleSvcObj;
</span><span>beforeEach(function(){
</span>  <span>module(function($provide){
</span>    $provide<span>.service('$window', function(){
</span>      <span>this.alert= jasmine.createSpy('alert');
</span>    <span>});
</span>    $provide<span>.service('modalSvc', function(){
</span>      <span>this.showModalDialog = jasmine.createSpy('showModalDialog');
</span>    <span>});
</span>  <span>});
</span>  <span>module('services');
</span><span>});
</span>
<span>beforeEach(inject(function($<span>window, modalSvc, sampleSvc</span>){
</span>  mockWindow<span>=$window;
</span>  mockModalSvc<span>=modalSvc;
</span>  sampleSvcObj<span>=sampleSvc;
</span><span>}));</span>

다음 스 니펫은 사양을 보여줍니다

angular<span>.module('services', [])
</span>  <span>.service('sampleSvc', ['$window', 'modalSvc', function($<span>window, modalSvc</span>){
</span>    <span>this.showDialog = function(message<span>, title</span>){
</span>      <span>if(title){
</span>        modalSvc<span>.showModalDialog({
</span>          <span>title: title,
</span>          <span>message: message
</span>        <span>});
</span>      <span>} else {
</span>        $<span>window.alert(message);
</span>      <span>}
</span>    <span>};
</span>  <span>}]);</span>

테스트 제공 업체 제공 업체는 응용 프로그램이 시작되기 전에 이루어져야하는 응용 프로그램 전체 구성을 위해 API를 노출시키는 데 사용됩니다. AngularJS 응용 프로그램의 구성 단계가 끝나면 공급자와의 상호 작용이 허용되지 않습니다. 결과적으로 제공자는 구성 블록 또는 기타 제공자 블록에서만 액세스 할 수 있습니다. 인젝트 블록을 사용하여 공급자 인스턴스를 얻을 수 없으며 모듈 블록에 콜백을 전달해야합니다.

. 상수 (AppConstants)에 의존하는 다음 공급 업체를 고려해 봅시다.

이를 테스트하려면 먼저 종속성을 조롱해야합니다. 샘플 코드 에서이 작업을 수행하는 방법을 볼 수 있습니다. 공급자를 테스트하기 전에 모듈이로드되고 준비되었는지 확인해야합니다. 테스트에서는 모듈의 로딩이 주입 블록이 실행되거나 첫 번째 테스트가 실행될 때까지 연기됩니다. 몇 가지 프로젝트에서는 빈 첫 번째 테스트를 사용하여 모듈을로드하는 테스트를 보았습니다. 테스트가 아무것도하지 않고 총 테스트 수에 수를 추가하기 때문에이 접근 방식의 팬이 아닙니다. 대신, 빈 인젝트 블록을 사용하여 모듈을로드합니다.

다음 스 니펫은 참조를 가져 와서 모듈을로드합니다.

이제 우리는 모든 참조를 가지고 있으므로 공급자에 정의 된 방법을 호출하고 테스트 할 수 있습니다.
결론 단위 테스트는 때때로 까다로워 지지만 응용 프로그램의 정확성을 보장하기 때문에 시간을 보내는 것이 좋습니다. AngularJS를 사용하면 프레임 워크를 사용하여 작성된 코드를 더 쉽게 테스트 할 수 있습니다. 이 기사가 응용 프로그램의 테스트를 확장하고 향상시킬 수있는 충분한 아이디어를 제공하기를 바랍니다. 향후 기사에서는 다른 코드를 테스트하는 방법을 계속 살펴볼 것입니다.

<span>var mockWindow, mockModalSvc, sampleSvcObj;
</span><span>beforeEach(function(){
</span>  <span>module(function($provide){
</span>    $provide<span>.service('$window', function(){
</span>      <span>this.alert= jasmine.createSpy('alert');
</span>    <span>});
</span>    $provide<span>.service('modalSvc', function(){
</span>      <span>this.showModalDialog = jasmine.createSpy('showModalDialog');
</span>    <span>});
</span>  <span>});
</span>  <span>module('services');
</span><span>});
</span>
<span>beforeEach(inject(function($<span>window, modalSvc, sampleSvc</span>){
</span>  mockWindow<span>=$window;
</span>  mockModalSvc<span>=modalSvc;
</span>  sampleSvcObj<span>=sampleSvc;
</span><span>}));</span>

단위 테스트 AngularJS 서비스, 컨트롤러 및 제공자에 대한 자주 묻는 질문 (FAQ) angularjs에서 단위 테스트의 중요성은 무엇입니까?
단위 테스트는 AngularJS 개발의 중요한 측면입니다. 서비스, ​​컨트롤러 및 제공 업체와 같은 개별 구성 요소의 기능을 분리하여 검증하는 데 도움이됩니다. 이를 통해 각 구성 요소는 더 큰 응용 프로그램에 통합되기 전에 예상대로 작동하도록합니다. 단위 테스트는 개발 프로세스 초기에 버그를 식별하는 데 도움이 될 수 있으므로 수정 비용이 쉽고 비용이 많이들 수 있습니다. 또한 코드 품질을 유지하고 응용 프로그램의 전반적인 신뢰성을 향상시키는 데 도움이됩니다. angularjs에 대한 테스트 환경을 설정하려면 어떻게해야합니까?
angularjs의 테스트 환경을 설정하는 데 몇 단계가 포함됩니다. 먼저 Jasmine 및 Karma와 같은 필요한 테스트 도구를 설치해야합니다. Jasmine은 JavaScript 코드를 테스트하기위한 행동 중심 개발 프레임 워크이며 Karma는 실제 브라우저에서 테스트를 실행하는 테스트 러너입니다. 이러한 도구를 설치 한 후에는 별도의 테스트 파일로 테스트 케이스를 작성하고 karma를 사용하여 실행할 수 있습니다.

AngularJS 서비스를 어떻게 테스트합니까?

AngularJS 서비스는 테스트에 주입하여 테스트 할 수 있습니다. 그리고 그들의 의존성을 조롱합니다. Jasmine은 모의 함수를 만들고 호출을 추적 할 수있는 'Spyon'이라는 기능을 제공합니다. 이 기능을 사용하여 서비스의 종속성을 조롱하고 테스트를 위해 분리 할 수 ​​있습니다. 모의를 설정 한 후 서비스의 방법을 호출하고 Jasmine의 '기대'기능을 사용하여 출력을 확인할 수 있습니다.

AngularJS 컨트롤러를 어떻게 테스트합니까?

AngularJS 컨트롤러 테스트 인스턴스를 만드는 방법이 필요합니다. 컨트롤러의 방법과 속성을 테스트합니다. AngularJS에서 제공하는 $ 컨트롤러 서비스를 사용하여 컨트롤러 인스턴스를 만들 수 있습니다. 인스턴스를 만든 후에는 메소드를 호출하고 컨트롤러의 범위에 미치는 영향을 확인할 수 있습니다. 또한 서비스를 조롱하고 방법에 대한 통화를 확인하여 컨트롤러와 서비스와의 상호 작용을 테스트 할 수도 있습니다.

AngularJS 제공 업체를 테스트하는 방법

AngularJS 제공 업체는 테스트 서비스와 유사합니다. 제공자를 테스트에 주입하고 종속성을 조롱하며 방법을 테스트 할 수 있습니다. 그러나 제공자는 서비스 인스턴스를 반환하는 '$ get'이라는 특별한 방법을 가지고 있습니다. 이 방법은 전화를 걸고 반환 된 값을 확인하여 별도로 테스트 할 수 있습니다.

angularjs 테스트에서 종속성 주입을 어떻게 사용할 수 있습니까?

종속성 주입은 주입 할 수있는 AngularJS의 주요 기능입니다. 구성 요소에 대한 종속성. 테스트 에서이 기능을 사용하여 테스트중인 구성 요소에 Mock 버전의 종속성을 주입 할 수 있습니다. 이를 통해 구성 요소를 분리하고 종속성과 독립적으로 테스트 할 수 있습니다.

단위 테스트 AngularJS 구성 요소에서 일반적인 과제는 무엇입니까? , 지침을 테스트하고 외부 의존성 처리. 비동기 작업은 테스트를 복잡하고 관리하기 어려울 수 있습니다. DOM과의 상호 작용으로 인해 테스트 지시문이 어려울 수 있습니다. 서비스 및 API와 같은 외부 의존성은 예측할 수없고 격리하기 어려운 테스트를 만들 수 있습니다.AngularJS 테스트에서 비동기 작업을 어떻게 처리 할 수 ​​있습니까?

AngularJS 테스트에서 비동기 작업은 $ Q 서비스와 Jasmine이 제공 한 '완료'기능을 사용하여 처리 할 수 ​​있습니다. $ Q 서비스를 사용하면 테스트에서 해결 또는 거부 할 수있는 약속을 만들 수 있습니다. '완료'함수는 비동기 작업이 완료되었음을 알리기 위해 호출 될 수 있습니다.

AngularJS 지시문을 어떻게 테스트 할 수 있습니까?
angularjs 지침 테스트 지침 인스턴스를 작성하고 동작을 테스트하는 것이 포함됩니다. . AngularJS에서 제공하는 $ compile 서비스를 사용하여 지침의 인스턴스를 만들 수 있습니다. 인스턴스를 작성한 후 jQuery와 같은 방법을 사용하여 조작하고 범위에 미치는 영향을 확인할 수 있습니다.

AngularJS 테스트에서 외부 종속성을 어떻게 처리 할 수 ​​있습니까?

angularjs 테스트에서 외부 종속성을 어떻게 처리 할 수 ​​있습니까? 조롱하여 처리 할 수 ​​있습니다. 의존성의 모의 버전을 만들어 테스트중인 구성 요소에 주입 할 수 있습니다. 이를 통해 종속성의 동작을 제어하고 테스트 구성 요소를 분리 할 수 ​​있습니다.

위 내용은 AngularJS의 단위 테스트 : 서비스, 컨트롤러 및 제공자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!