컴포넌트 하네스 개요

컴포넌트 하네스는 공식적으로 지원되는 API로 실제 사용자와 같은 방식으로 컴포넌트와 상호작용할 수 있게 하는 클래스입니다. 재사용하는 작은 위젯부터 페이지 전체까지 어떤 컴포넌트에도 테스트 하네스를 만들 수 있습니다.

하네스를 사용하면 다음과 같은 장점이 있습니다.

• 컴포넌트의 DOM 구조와 같은 내부 구현에 의존하지 않으므로 변경에 쉽게 깨지지 않는 테스트를 작성할 수 있습니다.
• 테스트를 읽기 쉽고 유지보수하기 편합니다.
• 여러 테스트 환경에서 사용할 수 있습니다.

// MyButtonComponent의 하네스를 사용하는 테스트 예제
it('should load button with exact text', async () => {
  const button = await loader.getHarness(MyButtonComponentHarness);
  expect(await button.getText()).toBe('Confirm');
});

컴포넌트 하네스는 공유하는 UI 위젯에 특히 유용합니다. 개발자는 DOM 구조나 CSS 클래스처럼 위젯의 비공개 구현에 의존하는 테스트를 작성하는 경우가 많습니다. 이런 의존성이 있으면 테스트가 변경에 취약해지고 유지보수하기 어려워집니다. 하네스는 실제 사용자와 같은 방식으로 위젯과 상호작용하는 공식 지원 API를 제공합니다. 그러면 위젯의 구현이 변경되어도 이를 사용하는 테스트가 실패할 가능성이 줄어듭니다. 예를 들어 Angular Material은 라이브러리의 각 컴포넌트에 테스트 하네스를 제공합니다.

컴포넌트 하네스는 여러 테스트 환경을 지원합니다. 단위 테스트와 E2E 테스트에서 같은 하네스 구현을 사용할 수 있습니다. 테스트를 작성하는 개발자는 API 하나만 익히면 되고, 컴포넌트 개발자는 단위 테스트와 E2E 테스트용 구현을 따로 관리할 필요가 없습니다.

개발자는 테스트 작성자, 컴포넌트 하네스 작성자, 하네스 환경 작성자로 구분할 수 있습니다. 아래 표에서 해당하는 역할에 맞는 문서를 확인하세요.

전체 API는 Angular CDK 컴포넌트 하네스 API 문서를 참고하세요.