구성 요소 테스트 라인(1/3)을 사용하여 테스트 정리

Angular에 대해 내가 가장 좋아하는 것은 테스트가 틀의 일등 시민이라는 것이다.그러나 UI 구성 요소와의 자동 테스트는 여전히 지루합니다.상호작용에 전념하지 않고 테스트를 어떻게 작성하는지 걱정하는 데 더 많은 시간을 들일 수 있습니다.테스트는 여전히 한 눈에 읽거나 이해하기 어려울 수 있으며, 테스트는 UI 구성 요소 라이브러리의 내부 선택기에 의존할 수 있으며, 이러한 선택기는 바뀔 수 있습니다.😬
✨ 테스트를 정리하고 구성 요소 테스트 도구를 사용하여 의미 있는 테스트를 작성할 수 있습니다.✨

테스트 하네스

테스트 하네스는 @angular/cdk/testing 라이브러리 Angular Component Development Kit(CDK)에서 테스트된 API의 일부입니다.CDK 테스트 라이브러리는 테스트와 구성 요소의 상호작용을 지원합니다.테스트 라인의 생각은 PageObject pattern에서 나온 것으로 집적 테스트에 사용된다.

A page object wraps an HTML page, or fragment, with an application-specific API, allowing you to manipulate page elements without digging around in the HTML.
– Martin Fowler, PageObject

어셈블리 테스트 하네스

그런 다음 UI 구성 요소는 CDK의 테스트 하네스 API를 구현하여 구성 요소 테스트 하네스를 생성합니다.구성 요소 테스트 라인이 있을 때, 지원하는 방식으로 구성 요소와 상호작용을 테스트할 수 있습니다.
어셈블리 테스트 하네스는

테스트를 통해 쉽게 읽고 이해할 수 있습니다.

은 API를 사용하여 UI 구성 요소

과 상호 작용함으로써 테스트를 쉽게 작성할 수 있습니다.

은 UI 구성 요소

의 내부에 의존하지 않으므로 테스트를 더욱 탄력적으로 수행합니다.
너는 그렇게 약하지 않은 깔끔한 테스트를 할 수 있을 것이다.😍

어셈블리 테스트 하네스를 사용하여 테스트

CDK 테스트 빔 로드 프로그램은 두 가지 환경을 지원합니다. 단원과 e2e입니다.상자를 열면 바로 사용할 수 있습니다. 카마를 사용하여 단원 테스트에 테스트 라인을 불러올 수 있고, 각도기를 사용하여 e2e 테스트에 테스트 라인을 불러올 수 있습니다.만약 가장 좋아하는 테스트 라이브러리가 다르다면, API는 테스트 도구 환경을 만들 수 있습니다.
Angular Material은 Angular 팀이 관리하는 UI 구성 요소 라이브러리입니다.모든 각도 재료 어셈블리는 각도 재료 어셈블리 버전 12의 테스트 하네스를 제공합니다.그러나 이 작업은 버전 9에서 시작되기 때문에 Angular의 최신 버전에 있지 않으면 일부 구성 요소 테스트 라인에 접근할 수 있습니다.

테스트의 병렬 비교

단원 테스트 예시를 보고 테스트 라인과 테스트 라인이 없는 테스트를 비교해 봅시다.a sample To-do app written using Angular Material UI components을 봅시다.

CSS 클래스를 적용하는 동작을 중점적으로 테스트할 것입니다. 이 클래스는 완료된 작업의 체크 상자 텍스트에 삭제선을 그립니다.
이 글은 네가 building a site using Angular과 writing unit tests using Karma을 이해한다고 가정해 봐.다음 예는 GitHub repo 프로젝트의 간략한 버전입니다.

엘리자덴칸 / 부품 하네스 코드

단원 테스트 (테스트 빔이 있는 것과 없는 것) 를 포함하는 예시 프로그램, 구성 요소 테스트 빔 프레젠테이션에 사용할 사용자 정의 구성 요소 테스트 빔

저희가 테스트할 코드입니다.

우리는 주로 checkbox 요소를 주목하고 ngClass 속성을 추가하여 작업이 완성될 때 CSS 클래스 .task-completed을 조건부로 추가합니다..task-completed CSS 클래스는 텍스트에 삭제 선을 추가합니다.

이전에 각도 재질을 사용한 적이 없다면 모든 부품에 mat 접두사가 있기 때문에 복선상자는 mat-checkbox으로 바뀐다.처리해야 할 작업을 표시하고 MatCheckbox 구성 요소 삭제 행위를 처리하는 코드 세션은 다음과 같습니다.

<mat-checkbox
  #task
  [ngClass]="task.checked ? 'task-completed' : ''">
      {{todo.description}}
</mat-checkbox>

저희가 뭘 테스트해야 돼요?

테스트에서 수행할 작업은 다음과 같습니다.

액세스 확인란 요소

단언 확인란 시작 시

이 선택되지 않음

CSS 클래스 task-completed이 확인란에 포함되지 않음 단언

확인란을

선택으로 전환

선언 확인란이

선택됨

단언 CSS 클래스 task-completed

안전벨트 없는 테스트

테스트 라인이 없는 상황에서 이 논리의 예시 테스트를 시작합시다.TestBed 설정을 건너뛰고 바로 테스트에 들어갑니다.

it('should apply completed class to match task completion', () => {

   // 1. Access mat-checkbox and the checkbox element within
   const matCb = fixture.debugElement.query(By.css('mat-checkbox'));
   expect(matCb).toBeTruthy();

   const cbEl = matCb.query(By.css('input'));
   expect(cbEl).toBeTruthy();

   // 2. Assert the checkbox element is not checked  
   expect(cbEl.nativeElement.checked).toBe(false);

   // 3. Assert the mat-checkox doesn't contain the CSS class
   expect(matCb.nativeElement.classList).not.toContain('task-completed');

   // 4. Toggle the mat-checkbox to mark as checked
   const cbClickEl =
      fixture.debugElement.query(By.css('.mat-checkbox-inner-container'));
   cbClickEl.nativeElement.click();
   fixture.detectChanges();

   // 5. Assert the checkbox element is checked
   expect(cbEl.nativeElement.checked).toBe(true);

   // 6. Assert the mat-checkbox contains the CSS class
   expect(matCb.nativeElement.classList).toContain('task-completed');
});

여기에는 많은 선택기와 DOM 조회가 있습니다.checkbox 요소에 접근하여 상호작용을 하려면

체크 상자 요소 자체(mat-checkbox), 속성 명령

의 귀속

입력 요소(input 요소 중 mat-checkbox), 체크 표시

CSS 선택기 .mat-checkbox-inner-container, mat-checkbox의 클릭 가능 요소

이 세 가지 요소가 있으면 우리는 계속 테스트 조작을 진행할 수 있다.그러나 이 테스트를 어떻게 작성하는지 확인하기 위해서 우리는 mat-checkbox이 실현한 내부 작업 원리를 살펴보고 지원되지 않을 수 있는 선택기를 사용해야 한다. 이런 선택기는 장래에 변화가 발생할 수 있다.

어셈블리 테스트 하네스를 사용하여 테스트

MatCheckbox 구성 요소 테스트 라인을 사용하는 테스트와 비교해 보겠습니다.비교하기 편리하도록 우리는 같은 조작 순서를 따를 것이다.
다음은 MatCheckbox 테스트 라인을 사용하여 진행된 동일한 테스트입니다.

it('should apply completed class to match task completion', async () => {

   // 1. Access the mat-checkbox
   const cbHarness = await loader.getHarness(MatCheckboxHarness);

   // 2. Assert the checkbox element is not checked. 
   expect(await cbHarness.isChecked()).toBeFalse();

   // 3. Assert the mat-checkox doesn't contain the CSS class
   const cbHost = await cbHarness.host();
   expect(await cbHost.hasClass('task-completed')).not.toBeTrue();

   // 4. Toggle the mat-checkbox to mark as checked
   await cbHarness.toggle();

   // 5. Assert the checkbox element is checked
   expect(await cbHarness.isChecked()).toBeTrue();

   // 6. Assert the mat-checkbox contains the CSS class
   expect(await cbHost.hasClass('task-completed')).toBeTrue();
});  

이 테스트는 훨씬 짧고 읽기 쉬우므로, 이 테스트를 작성하기 위해 MatCheckbox 코드의 내부 작업 원리를 발굴하는 것을 걱정할 필요가 없습니다.우리가 하는 일은 모두 MatCheckboxHarness의 공공 API를 통해서다.

하네스의 가치를 테스트합니다.

현재 우리는 실타래가 있는 것과 없는 예시 테스트를 비교하여 실타래가 제공하는 가치를 보았다.구성 요소 테스트 도구를 통해 우리는 테스트 행위에 전념하여 테스트 목표를 더욱 잘 전달할 수 있다.
내일 게시물에서는 @angular/cdk/testing API에 대해 자세히 살펴보고 라이브러리에서 얻은 정보를 더 자세히 살펴보겠습니다.
구성 요소 테스트를 작성하는 경우 아래 설명서에서 PageObjects 또는 기타 어떤 기술을 사용하고 있는지 알려주십시오.