동작 테스트 Angular Components를 사용하면 다른 구성 요소의 인스턴스를 조회 할 수 있습니까?

Question

@ngrx/store을 통해 상태 변경 작업을 실행하는 각도 도구 모음 구성 요소를 테스트하고 있습니다.

고유 한 내부 상태를 업데이트하기 위해 이러한 상태 변경을 구독하는 다른 구성 요소가 있습니다.

따라서 karma/jasmine 단위 테스트에서 툴바 버튼 클릭을 트리거합니다. 나는 단순히 다른 컴포넌트의 spy을 원하고 변경 기능이 있다고 주장한다.

그래서 질문은, 단지 OFC 코드 - 냄새 간주되는 시험을 위해 ViewParent/ViewChild 지침과 기존 구성 요소를 변경하지 않고, 는 어떻게 각도 구성 요소의 인스턴스를 조회 할입니까?

Answer 1

이와 같이 순서 테스트 동작에서 하위 구성 요소의 올바른 인스턴스를 가져올 수 있습니다.

당신은 지시에 의해 아이를 찾기 위해 부모를 조회 할 수 있습니다

import { By } from '@angular/platform-browser'; 
... 
let childComponentInstance: ChildComponent; 

// After setting up your component in the TestBed... 
parentComponentFixture = TestBed.createComponent(ParentComponent); 
... 

// Reference the child component from your parent component fixture 
childComponentInstance = parentComponentFixture 
    .debugElement 
    .query(By.directive(ChildComponent)) 
    .componentInstance; 

당신은 다음 시험 방법에 childComponentInstance를 사용할 수 있습니다.

언급 한대로이 테스트는 더 이상 단위 테스트가 아니며 더 많은 동작 테스트입니다.

Answer 2

나는 당신이 지나친 생각을할지 모른다.

@ ngrx/store를 사용하면 구성 요소 트리 외부에있는이 일반 저장소에 가입 할 수 있습니다. 따라서 이벤트를 @ ngrx/store에 보내고 다른 구성 요소의 @ ngrx/store에 가입하려는 경우 다른 구성 요소를 테스트 할 때 저장소를 만들고 이벤트를 보내고 테스트중인 구성 요소가 있는지 확인하십시오 '상점 이벤트'에 적절하게 응답합니다.

이벤트를 보내는 첫 번째 구성 요소를 테스트 할 때 저장소를 감시하고 첫 번째 구성 요소에서 적절한 이벤트가 수신되는지 확인하십시오.

테스트에서 첫 번째 구성 요소가 이벤트를 올바르게 보내고 있고 두 번째 구성 요소가 이벤트에 적절하게 응답하는지 확인할 수 있으면 저장소를 통해 구성 요소 상호 작용의 양측을 제대로 테스트 한 것입니다.