『기초부터 완성까지, 프런트엔드』 13장. 14장 테스트 코드 예제 리뷰

프론트엔드 테스트는 어떻게 작성해야 할까?

github에 공개된 테스트 코드의 내용을 훓어보니 아래 세 가지 내용에 대해서만 테스트하고 있음을 알게되었다. 

• 사용자가 사용하는 방식
  
  • 버튼 클릭 시, 또는 텍스트 입력 시 등등
• 외부 인터페이스
  • 메서드가 올바른 매개변수와 함께 호출된다.
  • 속성이 의도한 방식대로 적용된다. 
• 스냅샷 테스트
  • 엘리먼트가 렌더링되며
  • 엘리먼트가 스냅샷과 일치한다. 

 

메모 애플리케이션의 구조와 테스트

메모 애플리케이션의 구조

• Memo 
  • MemoInputArea - Button
  • MemoList
    • MemoItem - Button

메모 애플리케이션의 컴포넌트, Util의 기능과 테스트

	기능	나라면 어떤 테스트를 할까?	실제 테스트 코드
Memo	addMemoItem() 이벤트핸들러를 MemoInputArea에 주입한다. addMemoItem 이벤트핸들러 호출 시 유효성 검사를 수행하고, 이상이 없으면 MemoList의 addMemoItem() 메서드를 호출한다.	[유닛?] addMemoItem() 이벤트핸들러 호출 시 전달된 인자에 대해 유효성 검사가 되고 있는 지 확인	[Cypress] 일반사용자가 메모를 입력하고 삭제한다. [Cypress] 메모텍스트를 입력하지 않고 Add Memo 버튼을 클릭하면, alert 창이 뜬다.  [Cypress] 메모입력조건(50자 이하 입력)을 지키지 않고 Add Memo 버튼을 클릭하면, alert 창이 뜬다.
MemoInputArea	메모 텍스트를 입력한다.  Add Memo 버튼 클릭 시 Memo로부터 주입받은 addMemoItem() 메서드를 호출하고, 텍스트 입력창을 초기화한다.	[유닛] Add Memo 버튼 클릭 시, addMemoItem() 메서드를 호출하고 텍스트 입력창을 초기화하는 지	[유닛] 엘리먼트가 렌더링된다. [유닛] 엘리먼트가 스냅샷과 일치해야 한다. [유닛] Add Memo 버튼 클릭 시, addMemoItem() 메서드를 호출하며, 인자로 입력한 텍스트가 전달된다. 텍스트 입력 영역이 초기화된다.
MemoList	메모 목록을 관리한다. addMemoItem() 메서드가 호출되면 새 MemoItem을 생성하고 메모 목록에 추가한다.  메모 삭제 이벤트가 발생하면 MemoItem의 destroy() 메서드를 호출하고, 메모 목록에서 제거한다.	[통합] addMemoItem() 메서드 호출 시 새 MemoItem이 화면에 추가되는 지 [통합] 메모 삭제 버튼 클릭 시, 메모가 삭제되는 지	[통합] 엘리먼트가 렌더링된다. [통합] 엘리먼트가 스냅샷과 일치해야 한다. [통합] addMemoItem() 메서드 호출 시, 메모항목이 순서대로 추가된다.  [통합] 메모 리스트의 삭제버튼 클릭 시 해당 메모 항목이 삭제된다.
MemoItem	메모와 메모 삭제 버튼을 출력한다.  destroy() 메서드를 호출하면 DOM을 삭제한다.	[유닛] destroy() 메서드 호출 시 DOM 삭제하는 지	[유닛] 엘리먼트가 렌더링된다. [유닛] 엘리먼트가 스냅샷과 일치해야 한다. [유닛] destroy() 메서드 호출 시 삭제된다.
Button	버튼 엘리먼트를 생성한다. classNames 속성이 있으면 엘리먼트의 classList에 추가한다. attributes 속성이 있으면 엘리먼트의 속성으로 추가한다. textContent 속성이 있으면 엘리먼트의 textContent로 추가한다.  on으로 시작하는 속성이 있으면 이벤트 핸들러로 추가한다.	[유닛] classNames 속성이 적용되는 지  [유닛] attributes 속성이 적용되는 지  [유닛] textContent 속성이 적용되는 지  [유닛] on으로 시작하는 속성이 이벤트 핸들러로 적용되는 지	[유닛] 엘리먼트가 렌더링된다. [유닛] 엘리먼트가 스냅샷과 일치해야 한다. [유닛] classNames 속성이 적용되는 지  [유닛] attributes 속성이 적용되는 지  [유닛] textContent 속성이 적용되는 지  [유닛] 이벤트 핸들러가 적용되는 지
dom util	addClass() 메서드 호출 시, 엘리먼트의 classList로 추가한다.		[유닛] addClass() 메서드 호출 시, 전달된 엘리먼트에 class로 추가해야 한다.

 

출처

• 이재성, 한정.  『기초부터 완성까지, 프런트엔드』. 서울: 비제이퍼블릭, 2021
• 이재성, 한정. "Front-end", github.com, 2021-10-29, https://github.com/bjpublic/Front-end/tree/master/chapter13-test