[Angular] 07. 유닛 테스트

교재 : [Angular Development with TypeScript]

링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159

*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다.

Chapter07. 유닛 테스트

학습목표 : 

1. 유닛 테스트와 엔드 투 엔드 테스트의 개념에 대해 설명할 수 있다.

→유닛 테스트(Unit testing): 컴포넌트나 함수 단위의 작은 코드를 테스트하며, 입력하는 데이터를 바꿔가면서 원하는 동작을 실행하는지 검사하는 방식이다. 엔드 투 엔드 테스트(End-to-end testing): 애플리케이션 완전히 동작하는 상태에서 사용자의 행동에 따라 애플리케이션의 각 부분이 정해진 대로 동작하는지 확인하는 방식이다.

2. 함수 테스트와 클래스 테스트의 개념에 대해 설명할 수 있다.

→함수 테스트: 문자열로 인자로 받아 대문자로 변환하는 함수가 있다고 하자. 그러면 이 함수를 테스트하기 위해 null, undefined, 빈 문자열, 소문자 단어, 대문자 단어, 대소문자가 섞인 단어, 숫자를 인자로 전달하는 테스트 케이스를 만들 수 있다.

클래스 테스트: 클래스 안에 함수가 있는 경우는 이 메소드들이 제대로 동작하는지 확인하는 테스트 스펙을 각각 작성하고, 이 스펙들을 묶어 테스트 스윗을 구성할 수 있다. Angular에서는 서비스도 클래스이기 때문에, 이 방법으로 서비스를 테스트할 수 있다.

3. Karma의 개념에 대해 설명할 수 있다.

→Karma는 원래 AngularJS 팀 내부에서 사용하려고 만든 테스트 러너지만, 이제는 JavaScript 코드를 테스트하는 일반적인 도구가 되었다. 

또 Karma는 Node.js로 작성되었기 때문에 커맨드창에서 여러 브라우저를 동시에 띄우면서 애플리케이션이 제대로 동작하는지 확인할 수 있다.

학습내용  : 

이번 차시에서는 유닛 테스트에 대해 학습합니다.

7차시 학습에서 중요한 키워드는 [유닛 테스트(Unit testing)], [엔드 투 엔드 테스트(End-to-end testing)], [스펙(spec)]입니다.

각 키워드에 대한 설명은 다음과 같습니다.

[유닛 테스트(Unit testing)]

유닛 테스트(Unit testing)는 컴포넌트나 함수 단위의 작은 코드를 테스트하며, 입력하는 데이터를 바꿔가면서 원하는 동작을 실행하는지 검사하는 방식이다. 

[엔드 투 엔드 테스트(End-to-end testing)]

엔드 투 엔드 테스트(End-to-end testing)는 애플리케이션 완전히 동작하는 상태에서 사용자의 행동에 따라 애플리케이션의 각 부분이 정해진 대로 동작하는지 확인하는 방식이다. 

[스펙(spec)]

Jasmine에서는 테스트 케이스 하나를 스펙(spec)이라고 하고, 하나 이상의 스펙을 묶은 것을 스윗(suite)이라고 한다.

학습요약 : 

 

• 애플리케이션 코드는 정기적으로 테스트해야 하며, 필요할 때마다 실행할 수 있도록 테스트 과정을 자동화해야 한다. 테스트 스크립트를 작성해두고 최대한 자주 실행하면, 나중에 큰 문제가 되어 돌아오는 것을 막을 수 있다.

• 유닛 테스트(Unit testing): 컴포넌트나 함수 단위의 작은 코드를 테스트하며, 입력하는 데이터를 바꿔가면서 원하는 동작을 실행하는지 검사하는 방식이다. 

• 엔드 투 엔드 테스트(End-to-end testing): 애플리케이션 완전히 동작하는 상태에서 사용자의 행동에 따라 애플리케이션의 각 부분이 정해진 대로 동작하는지 확인하는 방식이다. 

• 부하 테스트(Load testing)나 스트레스 테스트(Stress testing)는 애플리케이션이 얼마나 많은 동시 접속자를 처리할 수 있는지 테스트하는 방법이며, 애플리케이션보다는 서버의 성능을 테스트화하는 방법이다.

• Jasmine을 사용하면 특정 행동에 대한 반응을 정의하는 방식(BDD, behavior-driven development)으로 개발을 진행할 수 있다. 예를 들면 “ApplicationComponent 인스턴스가 제대로 생성되어야 해”라는 식으로, 코드가 정상적으로 실행되었을 때의 행동을 문장으로 기술하는 방식이다.

• Jasmine에서는 테스트 케이스 하나를 스펙(spec)이라고 하고, 하나 이상의 스펙을 묶은 것을 스윗(suite)이라고 한다. 

• Angular 애플리케이션은 함수와 클래스, 컴포넌트를 테스트할 수 있다.

 함수 테스트: 문자열로 인자로 받아 대문자로 변환하는 함수가 있다고 하자. 그러면 이 함수를 테스트하기 위해 null, undefined, 빈 문자열, 소문자 단어, 대문자 단어, 대소문자가 섞인 단어, 숫자를 인자로 전달하는 테스트 케이스를 만들 수 있다.

 클래스 테스트: 클래스 안에 함수가 있는 경우는 이 메소드들이 제대로 동작하는지 확인하는 테스트 스펙을 각각 작성하고, 이 스펙들을 묶어 테스트 스윗을 구성할 수 있다. Angular에서는 서비스도 클래스이기 때문에, 이 방법으로 서비스를 테스트할 수 있다.

 컴포넌트 테스트: 컴포넌트에서 외부로 공개된 API를 테스트할 수 있다. 여기에서 말하는 공개된 API는 외부에서 접근할 수 있는 프로퍼티나 함수를 의미한다.

• Angular는 Jasmine의 describe(), it(), xit() 함수를 랩핑한 테스트 라이브러리를 지원하며, 추가로 async(), fakeAsync()와 같은 함수도 제공한다. 

• Angular 테스트 라이브러리의 NgMatchers 인터페이스는 다음과 같은 매처를 제공한다.

 toBePromise(): 프로미스여야 한다.

 toBeAnInstanceOf(): 인자로 전달하는 클래스의 인스턴스여야 한다.

 toHaveText(): 인자로 전달하는 문자열이 엘리먼트의 문자열에 있어야 한다.

 toHaveCssClass(): 인자로 전달하는 CSS 클래스가 엘리먼트에 지저오딘 클래스 중에 있어야 한다.

 toHaveCssStyle(): 인자로 전달하는 CSS 스타일이 엘리먼트의 스타일 중에 있어야 한다.

 toImplement(): 인자로 전달하는 인터페이스로 구현된 클래스여야 한다.

 toContainError(): 인자로 전달하는 문자열이 예외 객체 있어야 한다.

 toThrowErrorWith(): 평가하는 함수에서 에러가 발생하고, 인자로 전달하는 문자열이 이 에러에 있어야 한다.

 toMatchPattern(): 인자로 전달하는 정규표현식에 적합한 문자열이어야 한다.

• JavaScript 애플리케이션을 Jasmine 프레임워크로 테스트할 때 JavaScript나 TypeScript로 직접 작성한 테스트 스윗을 사용할 수 있는데, 이 테스트 케이스 정의 파일은 애플리케이션 파일과 같은 폴더에 두고 함께 관리할 수도 있고, 다른 폴더에 두고 용도에 맞게 실행할 수도 있다.

 컴포넌트와 관련된 팡리을 전부 한 폴더에서 관리할 수 있다. 컴포넌트를 구성하는 .ts, .html, .css 파일이 있는 폴더에 테스트 정의 파일인 .spec.ts 파일을 함께 두면 폴더를 새로 만들 필요도 없다.

 애플리케이션 구성요소가 있는 곳에 테스트 케이스 파일도 있기 때문에 SystemJS 설정을 수정할 필요가 없다. 이미 저장된 SystemJS 대상 폴더에서 테스트 케이스 정의 파일만 불러와 테스트를 실행할 수 있다. 

• 라우터를 테스트하려면 테스트 스펙에서 navigate() 함수는 navigateByUrl() 함수를 사용한다. 이때 라우터 설정을 인자로 받아 테스트하려면 navigate() 함수를 사용하고, 원하는 주소를 문자열로 받아 테스트하려면 navigateByUrl() 함수를 사용한다. 

• 컴포넌트는 클래스와 템플릿으로 구성되는데, 클래스에 있는 메소드는 일반 함수를 테스트하는 것과 같은 방법으로 테스트할 수 있으며, 템플릿은 바인딩된 데이터가 제대로 표시되는지 확인하는 방식으로 테스트할 수 있다. 

• Karma는 원래 AngularJS 팀 내부에서 사용하려고 만든 테스트 러너지만, 이제는 JavaScript 코드를 테스트하는 일반적인 도구가 되었다. 또 Karma는 Node.js로 작성되었기 때문에 커맨드창에서 여러 브라우저를 동시에 띄우면서 애플리케이션이 제대로 동작하는지 확인할 수 있다.