홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

Angular 단위 테스트 작성을 위한 4가지 팁, 와서 살펴보세요!

저자：Eve Cole 업데이트 시간：2022-08-15 17:48:29
Angular를 단위 테스트하는 방법은 무엇입니까? 이 글은 Angular 단위 테스트 작성에 관한 4가지 고급 기술을 여러분에게 공유할 것입니다. 여러분에게 도움이 되기를 바랍니다.

테스트 아이디어:

  • 1. 단위 테스트가 가능하다면 단위 테스트에 우선순위를 두십시오.
  • 2. 단위 테스트가 불가능하다면 테스트를 구성 요소로 캡슐화하지만 그보다 약합니다. 통합 테스트
  • 3. 통합 테스트
  • 4. E2E 테스트

테스트의 난이도도 점차 높아지고 시간도 더 많이 걸립니다. 테스트를 간단하게 만들고 싶다면 개발 중에 의식적으로 아이디어를 명확하게 하고 간단하고 효율적인 코드를 작성해야 합니다~.

이 기사에서 사용된 테스트 기술 스택: Angular12 + Jasmine 다른 테스트 기술의 구문은 다르지만 전체적인 아이디어는 유사합니다. [관련 튜토리얼 권장사항: "angular 튜토리얼"]

팁: Jasmine 테스트 사례 결정, 방법은 무엇입니까? 여기에서 찾을 수 있습니다. 내

단위 테스트

의 구성 요소를 클릭하면

기본값은 테스트할 개체의 인스턴스입니다. 다음 구문을 사용하는 각도

beforeEach(() => { 
  Fixture = TestBed.createComponent(BannerComponent); 
  구성요소 = Fixture.comComponentInstance; 
  Fixture.DetectChanges(); 
});

함수 테스트

1. 반환 값이 없는 함수 호출

function test(index:number,fn:Function){
 만약(fn){
     fn(인덱스);
 }
}

테스트 방법은 무엇입니까?

반대 예: 반환 값을 직접 테스트 undefed

const res = component.test(1,() => {}));
  Expect(res).tobeUndefine();

권장 사례:

# Jasmine을 사용하세요.
 it('호출 테스트 시 올바른 데이터를 얻어야 합니다.',() =>{
     const 매개변수 = {
       fn: () => {}
    }
   spyOn(param,'fn')
   컴포넌트.테스트(1,param.fn);
   기대(param.fn).toHaveBeenCalled();
 })

구조 명령 HostListener는

일반적으로 사용되는 단어로 숨기기, 표시 및 for 루프를 사용하여 이러한 기능을 표시합니다

.
 @Directive({ 선택기: '[ImageURlError]' })
내보내기 클래스 ImageUrlErrorDirective는 OnChanges를 구현합니다.
  생성자(private el: ElementRef) {}
  
  @HostListener('오류')
  공개 오류() { 
      this.el.nativeElement.style.display = '없음';
  } 
}

테스트 방법은 무엇입니까?

테스트 아이디어:

  • 이미지 로드 시 오류가 발생할 때까지 이미지가 트리거되지 않습니다. 그런 다음 오류를 트리거하는 방법을 찾으십시오.
  • 명령은 일반적으로 구성 요소 이미지 요소에서 dispath
#1 아래에 연결됩니다. 사용자 정의 구성요소를 추가하고 사용자 정의 지시문 @Component({
  템플릿: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
클래스 TestHostComponent {

}

#2. 사용자 정의 구성 요소 보기를 인스턴스화하고 errorEvent를 전달합니다.
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        선언: [
            테스트호스트컴포넌트,
            이미지URL 오류
        ]
    });
}));

beforeEach(() => { 
 Fixture = TestBed.createComponent(TestHostComponent); 
 구성요소 = Fixture.comComponentInstance; 
 Fixture.DetectChanges();
});
  
it('숫자만 허용해야 합니다.', () => {
    const event = new ErrorEvent('error', {});
    const image = Fixture.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //이벤트를 전달하면 error() 메서드가 실행됩니다.});

각도, 사양의 공개

수정자를 잘 활용하세요.

.ts는 액세스할 수 있지만 개인적이고 보호된 수정은 허용되지 않습니다.

단위 테스트를

수행

  • 하고 각 방법을 테스트하려는 경우 공개를 적절하게 사용하십시오. --- 난이도 *
  • 각 방법을 테스트할 계획이 없는 경우 그런 다음 데이터 구성을 전달하고 입구를 호출하고 통합 테스트 난이도 ***

테스트

클릭 이벤트를 전달할 수 있습니다. 클릭 이벤트의 트리거에는 직접 js 호출 클릭 또는 클릭 이벤트를 트리거하기 위한 마우스 모방이 포함될 수 있습니다.

#xx.컴포넌트.ts
@요소({
 선택 항목: 'dashboard-hero-list'
})
클래스 DashBoardHeroComponent {
    공용 카드 = [{
        클릭: () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [카드]="카드" 클래스="카드">
</dashboard-hero-list>`

테스트 방법은 무엇입니까?

테스트 아이디어:

  • 구성 요소를 직접 테스트하고 호스트에서 반환된 클릭 이벤트가 포함된 개체 컬렉션을 사용하지 않고
  • 클릭을 하나씩 호출하여 코드 적용 범위가 향상됩니다
('클릭 호출 시 올바른 데이터를 얻어야 합니다', () => {
    const 카드 = 구성요소.카드;
    카드?.forEach(카드 => {
        if(카드.클릭){
            카드.클릭(새 이벤트('클릭'));
        }
    });
    기대(카드?.길이).toBe(1);
});

기타 클릭 참조 아이디어:

아이디어 1:

  • TestHostComponent를 사용하여 테스트해야 하는 구성 요소를 래핑한
  • 다음 Fixture.nativeElement.querySelector('.card')를 사용하여 구성 요소에 바인딩된 클릭 요소를 찾습니다
  • .

아이디어 2:

Host를
  • 사용

  • 하지 않고 구성 요소를 직접 테스트한

    • 다음 Fixture.nativeElement.querySelector('.card')를

  • 사용

  • 하여 바인딩된 클릭 요소를 찾습니다.
관련 기사