Angular에서 단위 테스트를 실행하는 방법

대부분의 개발 팀은 Angular에서 단위 테스트가 시간이 많이 걸린다는 데 동의할 것이며, 많은 팀도 불필요하다는 데 동의하고 이를 건너뛰기로 결정할 것입니다. 프로젝트의 규모와 프로젝트에 참여하는 사람들의 프로그래밍 기술에 따라 Angular 앱을 테스트하지 않는 것이 옳을 수 있습니다. 그러나 일반적으로 단위 테스트는 나중에 훨씬 더 많은 디버깅 및 코드 수정이 필요한 잘못 설계된 코드베이스를 만드는 것을 방지하기 위해 매우 중요합니다. 그렇다면 코드 품질에 대한 위험을 감수하시겠습니까, 아니면 개발 중인 코드를 미리 이해하여 개발 주기 초기에 코드에서 버그를 찾는 데 도움이 되는 것을 선호하시겠습니까?

특히 대규모 Angular 앱, 빅 데이터 또는 데이터 과학 프로젝트에서 작업할 때 단위 테스트를 과소평가하지 마십시오.

Try Ignite UI for Angular

큰 그림: 유닛 테스트란 무엇입니까?

소프트웨어 개발에서 단위 테스트(격리 테스트라고도 함)는 앱이 제대로 작동하는지 확인하고 개발 단계에서 코드의 별도 단위에 있는 버그를 제거하기 위해 수행됩니다. 단위 테스트를 여러 번 실행하여 다른 입력 집합에 대한 특정 코드 단위의 동작을 확인할 수 있습니다.

누락된 값을 잡는 것과 같은 문제, "필터 함수가 올바른 방식으로 값을 좁히는가?"와 같은 질문 또는 "함수 반환에 예상대로 모양이 있습니까?" 등과 같은 데이터 과학 앱의 더 복잡한 문제를 다룹니다.

단위 테스트가 필요한 이유에 관해서는 다음과 같습니다.

• 단위 테스트를 수행하면 버그를 즉시 감지하고 수정할 수 있으므로 코드를 다시 작성하는 데 비용과 시간이 더 많이 드는 앱 개발 주기의 훨씬 후반 단계에서 예기치 않은 출력을 방지할 수 있습니다.
• 코드의 특정 단위에서 어떤 동작이 예상되는지 알면 손상된 부분을 확인할 수 있으므로 코드를 더 쉽게 업데이트할 수 있습니다.
• 단위 테스트를 실행하면 코드의 품질에 대한 확신을 가질 수 있고 코드를 더 나은 방식으로 구조화하는 데 도움이 됩니다.
• 개별 클래스를 개별적으로 테스트하고 앱에서 커플링 블록의 강도를 테스트하여 어떻게 작동하는지 확인할 수 있습니다.
• 유닛 테스팅은 리팩토링을 허용하는데, 이는 모든 것이 어떻게 작동하는지 이미 알고 있기 때문에 동작 방식을 변경하지 않고도 버그 없이 코드를 수정할 수 있음을 의미합니다.
• 코드의 격리된 단위에서 수행되기 때문에 새로 추가된 기능이나 파일 수정 사항을 테스트하려고 할 때마다 단위 테스트를 실행해도 전체 코드가 손상되지 않을 수 있습니다.
• 단위 테스트는 매우 빠르며 모든 오류 조건을 시뮬레이션할 수 있습니다.
• 네트워크 및 서비스 중단 또는 데이터 인증 오류와 같은 우발적인 이유로 실패할 수 없습니다.
• 소위 익스트림 프로그래밍 방법론에서 매우 유용합니다.이 방법론은 본질적으로 깨질 수있는 모든 것을 테스트하도록 요청합니다.
• 유닛에서 제공하는 기능에 대해 알아보고 사용 방법을 확인하려는 경우 유닛 테스트를 사용하여 유닛의 API에 대한 기본적인 이해를 얻을 수 있습니다.

Angular에서 단위 테스트란 무엇입니까?

Angular의 단위 테스트는 오작동하는 함수, 잘못된 논리 등과 같은 문제를 가능한 한 빨리 식별하는 것을 목표로 개별 코드 단위를 테스트하는 프로세스입니다. 또한 Angular 프로젝트는 기본적으로 모듈식이므로 이러한 앱에서 단위 테스트를 실행하면 앱의 기능을 개별적으로 검사할 수 있으므로 좀 더 직관적으로 느껴집니다.

다른 프레임워크와 달리 Angular는 모델의 단위 테스트를 수행할 수 있는 좋은 방법을 제공합니다. 일반적으로 개발자는 동작을 확인하고 코드가 작동하는지 여부를 확인하기 위해 수동 테스트를 수행합니다. 그러나 경우에 따라 사소한 변경 사항마다 수동으로 테스트하는 경우 단위 테스트를 개발하는 것보다 시간이 더 걸립니다. 그러나 Angular는 단위 테스트를 수행하는 Karma와 같은 도구와 테스트 러너를 제공합니다.

Angular 앱을 테스트해야 하는 이유

Angular 코드베이스 함수를 기능별로 테스트하는 것은 코드 품질을 개선하고, 프로덕션의 버그를 줄이고, 데드 코드를 줄이고, 유지 관리 비용을 줄이고, 전체 코드를 손상시키는 불일치 없이 더 빠른 리팩토링 및 업그레이드를 달성하는 가장 좋은 방법입니다.

처음에는 느린 것처럼 보일 수 있지만 장기적으로 보면 그만한 가치가 있습니다. 버그는 개발 전반에 걸쳐 포착됩니다. 디버깅 프로세스가 개선되었습니다. 특정 테스트가 실패하면 정확히 무엇이 예상대로 작동하지 않는지 쉽게 찾을 수 있습니다. 특히 테스트 기반 개발과 유닛 테스트는 둘 다 실제보다 약간 더 어렵게 들리기 때문에 새로운 도구와 모범 사례에 의존하면 전체 프로세스를 실제로 촉진하고 자동화할 수 있습니다.

Angular에서 단위 테스트를 수행하는 방법 및 Angular 구성 요소를 테스트합니다.

컴포넌트가 할 수 있는 몇 가지 작업이 있으며, 컴포넌트에 대한 테스트를 작성하는 동안 이러한 모든 동작이 고려되었는지 확인해야 합니다.

• 템플릿을 HTML DOM 트리로 렌더링할 수 있습니다.
• Inputs를 사용하여 부모 구성 요소에서 데이터를 수락하고 Outputs를 사용하여 데이터를 내보낼 수 있습니다.
• 다양한 유형의 이벤트와 상호 작용할 수 있습니다.
• 그들은 서비스나 상점과 이야기할 수 있습니다.
• 데이터를 바인딩하고 사용자가 편집할 수 있도록 허용할 수 있습니다.

다음 섹션에서는 Angular 및 테스트 구성 요소에서 단위 테스트를 수행하는 방법을 보여 줍니다.

We will start testing Angular components, using Ignite UI for Angular. Here’s what to do.

Set up TestBed

Angular는 테스트용 TestBed를 제공하여 구성 요소와 서비스를 쉽게 테스트할 수 있는 환경을 만듭니다. 일반 Angular 모듈처럼 구성된 다음 선언된 모든 구성 요소가 컴파일됩니다. 각 테스트에서 중복된 코드를 저장하기 위해 beforeEach 함수에서 사용할 수 있습니다.

컴포넌트가 컴파일된 후 HTML DOM에서 렌더링되는 컴포넌트를 만들 수 있습니다. 구성 요소가 테스트 환경에서 사용되면 업데이트 시 자동으로 다시 렌더링되지 않습니다. 그렇기 때문에 수동으로 트리거해야 합니다.

    fixture.detectChanges(); 

DOM 테스트

대부분의 경우 구성 요소의 함수는 템플릿을 반영하는 일부 논리를 수행합니다. DebugElement 와 해당 메소드 query 및 queryAll을 사용하여 DOM 트리에 액세스할 수 있습니다.

• query는 조건과 일치하는 첫 번째 요소를 반환합니다.
• queryAll은 일치하는 요소의 컬렉션을 반환합니다

By.css()를 사용하여 CSS 선택기로 요소를 가져올 수 있습니다.

이벤트 핸들러 트리거링

양식 데이터를 제출하고 특정 버튼을 클릭할 때 트리거되는 함수가 있다고 상상해 보십시오. 테스트에서는 두 가지 선택 사항이 있습니다. 첫 번째는 함수를 직접 실행하는 것이고 두 번째는 해당 버튼의 클릭 이벤트를 시뮬레이션하는 것입니다. 이 작업은 DebugElement의 triggerEventHandler를 사용하여 쉽게 수행할 수 있습니다. 여기에는 두 개의 인수가 있습니다: 이벤트의 이름과 이벤트 속성입니다.

이벤트가 필요한 경우 new 키워드를 사용하여 이벤트를 만든 다음 null 대신 매개 변수로 보내야 합니다.

가짜 종속성을 사용하여 데이터를 "모의"하는 방법

대부분의 경우 특정 코드를 단독으로 테스트하려고 합니다. 그러나 구성 요소는 서로 다른 많은 서비스와 통신하고 각 서비스에는 고유한 종속성이 있기 때문에 하나의 기능을 테스트하기 위해 모든 종속성을 추가하는 것은 복잡해지고 코드가 불필요하게 길어집니다.

대신, Angular를 위한 포괄적인 Ignite UI 툴킷, 실제 종속성의 동작을 시뮬레이션하는 가짜 종속성을 만들 수 있습니다. 이 방법을 모의라고 합니다.

Using Jasmine spies

Jasmine은 스파이라고 하는 가짜 종속성을 생성할 수 있는 훌륭한 기능을 제공합니다. 예를 들어 보겠습니다.

DataService에서 fetchData를 호출하는 메서드가 있는 간단한 구성 요소를 하나 만들어 보겠습니다.이 메서드는 API에 일부 데이터를 요청하고 그 후에 응답이 있으면 이 데이터를 구성 요소에 저장합니다.  이 경우 fetchData 함수에서 무슨 일이 일어나고 있는지 테스트하고 싶지 않습니다. 우리가 신경 쓰는 것은 반응입니다. 따라서 여기에서 spyOn 메서드를 사용하여 응답을 가짜로 만든 다음 이 메서드가 트리거되었는지 확인할 수 있습니다.

비동기 코드를 테스트하고 관찰 가능 항목을 Angular 하는 방법

비동기 코드를 테스트하는 것은 약간의 차이점을 제외하고는 비슷합니다.

비동기식 메소드를 spyOn하려면 .returnValues() 대신 .resolveTo() 를 사용합니다. 그 후, 비동기 방법을 테스트하는 경우 두 가지 작업을 더 수행합니다. 먼저 테스트를 fakeAsync로 래핑한 다음 비동기 시간 경과를 시뮬레이션하는 tick()을 사용합니다.

템플릿에 표시하려는 Observable 및 BehaviorSubject Angular 데이터를 테스트하는 경우에도 동일하게 적용됩니다. 제목을 .next로 채운 다음 tick()을 사용하여 다음 줄로 처리하기 전에 잠시 기다려야 합니다.

코드 커버리지 측정

코드 커버리지는 단위 테스트로 테스트된 코드 부분을 알려주는 메트릭입니다. 아직 테스트되지 않은 응용 프로그램 부분을 검색합니다. 코드를 작성하는 동안 전체 커버리지 점수가 감소하는 것이 아니라 증가하도록 해야 합니다. 80% 코드 검사는 목표로 하는 코드 목표입니다. 그러나 가능한 한 많은 코드를 다루십시오. 많을수록 좋습니다. 커버리지 보고서를 제공하는 내장 명령이 있습니다. 테스트 명령에 –code-coverage 플래그를 추가하기만 하면 됩니다.

ng 테스트 – 코드 커버리지

ng 템플릿의 내장 코드 커버리지 생성기를 사용하고 싶지 않다면 선택할 수 있는 수천 개의 다른 npm 패키지가 있습니다. 또한 개발에 Azure DevOps를 사용하는 경우 사용할 수 있는 기본 제공 기능도 있습니다.

마지막으로, Angular 단위 테스트 모범 사례는 무엇입니까?

마무리하기 위해 Angular 단위 테스트를 수행할 때 채택할 수 있는 몇 가지 모범 사례를 공유하고자 합니다.

• 명령 줄에서 ng test 를 실행하여 Angular 단위 테스트 컴파일 및 실행을 시작하여 테스트 모듈을 올바르게 설정했는지 확인하십시오.
• 단위 테스트의 이름을 Angular 적절하게 지정하여 방법, 장치가 테스트되는 시나리오를 설명합니다.
• 단위 테스트가 빠르고 원활하게 실행될 수 있도록 함수를 가능한 한 작게 빌드합니다.
• 항상 격리된 환경에서 단위 테스트를 실행하여 외부 종속성을 제거합니다.
• 서비스를 테스트할 때 종속성에 대해 Jasmine 프레임워크의 스파이를 사용합니다.
• 구성 요소를 테스트할 때 nativeElement를 호출하는 대신 debugElement(기본 런타임 환경에 대한 추상화 제공)를 사용하여 DOM에 액세스하는 것이 좋습니다.
• 서버에서 앱을 실행하는 경우 queryselector 대신 By.css 사용하는 경우 후자는 브라우저에서만 작동하므로 사용합니다.
• 코드 적용 범위가 80% 이상인지 확인합니다.