시작하기 전에
팁: 이 문서는 컴포넌트 하네스 개요를 읽었다고 가정합니다. 컴포넌트 하네스를 처음 사용한다면 먼저 해당 문서를 읽어보세요.
테스트 환경 지원을 추가해야 하는 경우
다음 환경에서 컴포넌트 하네스를 사용하려면 Angular CDK에 기본으로 제공되는 두 가지 환경을 사용하면 됩니다.
- 단위 테스트
- WebDriver E2E 테스트
지원되는 테스트 환경을 사용하려면 컴포넌트 하네스 만들기를 참고하세요.
다른 환경을 지원하려면 DOM 엘리먼트와 상호작용하는 방법과 해당 환경에서 DOM 상호작용이 동작하는 방식을 정의해야 합니다. 이어지는 내용을 확인해 보세요.
CDK 설치하기
Component Dev Kit(CDK)는 컴포넌트의 동작을 구현하는 기본 요소 모음입니다.
컴포넌트 하네스를 사용하려면 먼저 npm에서 @angular/cdk를 설치해야 합니다.
터미널에서 Angular CLI로 설치할 수 있습니다.
ng add @angular/cdk
TestElement 구현하기
각 테스트 환경은 TestElement 구현을 정의해야 합니다.
TestElement 인터페이스는 특정 환경에 의존하지 않는 방식으로 DOM 엘리먼트를 표현합니다.
그래서 하네스는 실행 환경과 관계없이 DOM 엘리먼트와 상호작용할 수 있습니다.
WebDriver처럼 DOM 엘리먼트와 동기적으로 상호작용할 수 없는 환경도 있으므로, 모든 TestElement 메서드는 비동기로 동작하고 실행 결과를 Promise로 반환합니다.
TestElement는 blur(), click(), getAttribute() 등 DOM과 상호작용하는 여러 메서드를 제공합니다.
전체 메서드는 TestElement API 문서를 참고하세요.
TestElement 인터페이스의 메서드는 대부분 HTMLElement에서 제공하는 메서드와 비슷합니다.
대부분의 테스트 환경에도 비슷한 메서드가 있어서 구현은 비교적 간단합니다.
다만 sendKeys를 구현할 때는 중요한 차이를 주의해야 합니다.
TestKey 열거형의 키 코드가 테스트 환경에서 사용하는 키 코드와 다를 수 있습니다.
환경 작성자는 TestKey 코드와 해당 테스트 환경의 코드를 대응시키는 매핑을 관리해야 합니다.
Angular CDK의 UnitTestElement와 SeleniumWebDriverElement를 이 인터페이스의 구현 예제로 참고할 수 있습니다.
HarnessEnvironment 구현하기
테스트 작성자는 HarnessEnvironment로 테스트에 사용할 컴포넌트 하네스 인스턴스를 생성합니다.
HarnessEnvironment는 추상 클래스이므로, 새 환경을 지원하려면 이를 상속하는 구체적인 하위 클래스를 만들어야 합니다.
새 테스트 환경을 지원할 때는 HarnessEnvironment를 상속하고 모든 추상 멤버를 구현하세요.
HarnessEnvironment에는 HarnessEnvironment<E>라는 제네릭 타입 파라미터가 있습니다.
E는 해당 환경의 원시 엘리먼트 타입을 나타냅니다.
예를 들어 단위 테스트 환경에서는 Element 타입입니다.
구현해야 하는 추상 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
abstract getDocumentRoot(): E |
환경의 최상위 엘리먼트(예: document.body)를 가져옵니다. |
abstract createTestElement(element: E): TestElement |
주어진 원시 엘리먼트에 대한 TestElement를 생성합니다. |
abstract createEnvironment(element: E): HarnessEnvironment |
주어진 원시 엘리먼트를 최상위 엘리먼트로 사용하는 HarnessEnvironment를 생성합니다. |
abstract getAllRawElements(selector: string): Promise<E[]> |
환경의 최상위 엘리먼트 아래에서 주어진 셀렉터와 일치하는 원시 엘리먼트를 모두 가져옵니다. |
abstract forceStabilize(): Promise<void> |
NgZone이 안정화되면 이행되는 Promise를 가져옵니다. 필요하다면 NgZone이 안정화되도록 처리합니다. 예를 들어 fakeAsync 테스트에서 flush()를 실행합니다. |
abstract waitForTasksOutsideAngular(): Promise<void> |
NgZone의 부모 존이 안정화되면 이행되는 Promise를 가져옵니다. |
추상 메서드를 구현하는 것 외에도 테스트 작성자가 ComponentHarness 인스턴스를 가져올 수 있는 방법을 제공해야 합니다.
생성자를 protected로 정의하고 HarnessLoader 인스턴스를 반환하는 loader 정적 메서드를 제공하세요.
그러면 테스트 작성자는 SomeHarnessEnvironment.loader().getHarness(...)와 같은 코드를 작성할 수 있습니다.
환경에 따라 여러 정적 메서드를 제공하거나 인자를 요구할 수도 있습니다.
예를 들어 TestbedHarnessEnvironment의 loader 메서드는 ComponentFixture를 인자로 받으며, 이 클래스에는 documentRootLoader, harnessForFixture 정적 메서드도 있습니다.
Angular CDK의 TestbedHarnessEnvironment와 SeleniumWebDriverHarnessEnvironment를 이 인터페이스의 구현 예제로 참고할 수 있습니다.
자동 변경 감지 처리하기
manualChangeDetection과 parallel API를 지원하려면 환경에 자동 변경 감지 상태를 처리하는 핸들러를 등록해야 합니다.
자동 변경 감지 상태 처리를 시작하려면 handleAutoChangeDetectionStatus(handler)를 실행합니다.
핸들러 함수는 isDisabled, onDetectChangesNow()라는 두 프로퍼티가 있는 AutoChangeDetectionStatus를 전달받습니다.
자세한 내용은 AutoChangeDetectionStatus API 문서를 참고하세요.
자동 변경 감지 상태 처리를 중단하려면 stopHandlingAutoChangeDetectionStatus()를 실행합니다.