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

Angular단위 테스트를 수행하는 방법은 무엇입니까? 이 기사에서는 Angular 단위 테스트 작성을 위한 4가지 고급 기술을 공유하겠습니다. 이것이 도움이 되기를 바랍니다.

테스트 아이디어:

• 1. 단위 테스트가 가능하다면 단위 테스트를 우선적으로 시도하세요
• 2. 단위 테스트가 불가능하다면, 테스트를 캡슐화하는 등의 캡슐화 레이어를 통해 테스트하세요. 하지만 통합 테스트보다 약한 부분이 있습니다.
• 4. E2E 테스트

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

이 문서에 사용된 테스트 기술 스택:

Angular12

+Jasmine 다른 테스트 기술의 구문은 다르지만 전체적인 아이디어는 유사합니다. [관련 튜토리얼 추천: "angular tutorial"]

Tips: Jasmine 테스트 케이스 결정, 방법은 무엇인지 여기에서 찾을 수 있습니다.

Poke me

Unit test

컴포넌트, 기본값은 구성 요소입니다. Angular에서 다음 구문을 사용하여 생성한 테스트할 객체의 인스턴스

beforeEach(() => { 
  fixture = TestBed.createComponent(BannerComponent); 
  component = fixture.componentInstance; 
  fixture.detectChanges(); 
});

Function test

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

function test(index:number ,fn:Function){
 if(fn){
     fn(index);
 }
}

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

카운터 예: 정의되지 않은 반환 값을 직접 테스트

  const res = component.test(1,() => {}）);
  expect(res).tobeUndefined();

권장 사례:

 # 利用Jasmine
 it('should get correct data when call test',() =>{
     const param = {
       fn：() => {}
    }
   spyOn(param,'fn')
   component.test(1,param.fn);
   expect(param.fn).toHaveBeenCalled();
 })

구조 지침 HostListener 테스트

구조 지침, 일반 용어 숨기기, 표시 및 이러한 기능을 표시하는 for 루프

 # code
 @Directive({ selector: '[ImageURlError]' })
export class ImageUrlErrorDirective implements OnChanges {
  constructor(private el: ElementRef) {}
  
  @HostListener('error')
  public error() { 
      this.el.nativeElement.style.display = 'none';
  } 
}

테스트 방법은?

테스트 아이디어:

이미지 로딩 오류가 발생하면 오류를 발생시키는 방법을 찾으세요

• 명령은 일반적으로 구성 요소 이미지 요소에 연결되어 있으며 dispath

• #1.添加一个自定义组件, 并添加上自定义指令
  @Component({
    template: `<div>
      <image></image>
    </div>`
  })
  class TestHostComponent {
  
  }
  
  #2.把自定义组件视图实例化，并派发errorEvent
  beforeEach(waitForAsync(() => {
      TestBed.configureTestingModule({
          declarations: [
              TestHostComponent,
              ImageURlError
          ]
      });
  }));
  
  beforeEach(() => { 
   fixture = TestBed.createComponent(TestHostComponent); 
   component = fixture.componentInstance; 
   fixture.detectChanges();
  });
    
  it('should allow numbers only', () => {
      const event = new ErrorEvent('error', {} as any);
      const image = fixture.debugElement.query(By.directive(ImageURlError));
      image.nativeElement.dispatchEvent(event); //派发事件即可，此时error()方法就会被执行到
  });

  에서 errorEvent를 사용하세요.

Make public, private 및 protected 수정자를 잘 사용하세요

Angular에서는 spec.ts가 공개인 경우에 액세스할 수 있지만 비공개이거나 보호된 경우에는 액세스할 수 없습니다. blackboard

단위 테스팅과 테스트 메소드를 하나씩 할 예정이라면 공개적으로 적절히 활용해주세요 --- 난이도 *

각 메소드 테스트를 할 예정이 아니라면 자료 정리는 입구로 전화주세요 , 통합 테스트를 통해 메서드 전달 -- 난이도 ***

• 클릭 이벤트 테스트

클릭 이벤트 트리거, 클릭에 대한 직접 js 호출이 있고 클릭 이벤트를 트리거하는 마우스 시뮬레이션도 있습니다.

# xx.component.ts
@Component({
 selecotr: 'dashboard-hero-list'
})
class DashBoardHeroComponent {
    public cards = [{
        click: () => {
            .....
        }
    }]
}
# html
<dashboard-hero-list>
</dashboard-hero-list>`

테스트 방법은?

테스트 아이디어:

Host를 사용하지 않고 구성 요소를 직접 테스트

코드에서 반환된 클릭 이벤트가 포함된 개체 컬렉션을 사용하여 하나씩 클릭을 호출하면 코드 적용 범위가 향상됩니다.

it('should get correct data when call click',() => {
    const cards = component.cards;
    cards?.forEach(card => {
        if(card.click){
            card.click(new Event('click'));
        }
    });
    expect(cards?.length).toBe(1);
});

• 다른 클릭에 대한 아이디어 참조:
• 아이디어 1:

TestHostComponent를 사용하여 테스트해야 하는 구성 요소를 래핑합니다.

그런 다음 Fixture.nativeElement.querySelector('.card')를 사용하여 바인딩된 클릭 요소를 찾습니다.

요소에서 dispatchEvent를 트리거합니다. 즉,

• 아이디어 2:
• Host

를 사용하지 않고 직접 구성 요소를 테스트한 다음 Fixture.nativeElement.querySelector('.card')를 사용하여 찾습니다. 바운드 클릭 요소
• triggerEventHandler 사용

  ('click');

• 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angular 단위 테스트 작성을 위한 4가지 팁, 와서 살펴보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!