jtwjs Dev Wiki
  • DEV_ROAD
    • 💪🏻 생존하기
    • Week 1
      • 개발 환경 세팅
      • 타입스크립트
      • 리엑트
      • Testing Library
      • Parcel & ESLint
    • Week 2
      • JSX
      • Virtual DOM
    • Week 3
      • React Component
      • React State
    • Week 4
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
    • Week 5
      • TDD
      • React Testing Library
      • MSW
      • Playwrite
      • Snapshot
    • Week 6
      • Separtion of Concerns
      • Principle
      • DI, (Dependency Injection)
      • Reflect-metadata
      • TSyringe
      • External Store
      • Follow Redux
      • usestore-ts
      • useSyncExternalStore
    • Week 7
      • Routing
      • Routes
      • Router
      • Navigation
    • Week 8
      • Design System
      • Style Basics
      • CSS-in-JS
      • Styled-Components
      • Global Style & Theme
    • Week 9
      • 개발하기 전 준비
      • 상품 목록 페이지
      • 상품 상세 페이지
      • 장바구니 페이지
    • Week 10
      • 로그인
      • 로그아웃
      • 회원가입
      • 주문 목록 & 주문 상세
    • Week 11
      • 배송 정보 입력
      • 포트원 결제 요청
      • 배송 및 결제 정보 전달
    • Week 12
      • 관리자 웹사이트개발시작
  • DEV_NOTE
    • TypeScript
      • 기본적 문법
        • Enum
        • 다형성
          • Untitled
        • 구조적 타이핑
        • 제너릭 타입
        • 컨디셔널 타입
        • 함수 메서드 타이핑
        • infer로 타입스크립트의 추론 직접 활용
        • 재귀 타입
        • 템플릿 리터럴 타입
        • 추가적인 타입 검사 satisfies 연산자
        • 타입스크립트 건망증
        • 원시 자료형에도 브랜딩 기법 사용 가능
        • 타입 좁히기
        • 유용한 타입 만들기
        • 데코레이터 함수
        • 앰비언트 선언도 선언 병합이 된다.
        • 앰비언트 선언도 선언병합이 된다.
    • Testing
      • Unit Testing
      • 단위 테스트의 두 분파
      • 좋은 단위 테스트를 구성하는 4대 요소
      • 테스트 대역과 식별할 수 있는 동작
      • 단위 테스트 스타일
      • 가치 있는 단위 테스트를 위한 리팩토링
      • 통합 테스트
      • Cross Browsing Testing
      • 기능 테스트 종류
      • React Testing Pattern
      • 프론트엔드 테스트 입문
        • 테스트 범위
        • 단위 테스트 검증
        • Mock
        • UI 컴포넌트 테스트
        • 테스트 커버리지
        • 웹 통합 테스트
        • MSW
        • 스토리북
        • 시각적 회귀 테스트
        • E2E 테스트
        • Github Actions 설정
        • 깃허브 액션에서 E2E
      • 시프트 레프트
        • 테스트 기본중의 기본
        • 단위 테스트
        • 코드 복잡도
        • 리팩터링
        • 코드 리뷰
        • 통합 테스트 패턴
        • 시스템 테스트의 자동화
        • 탐색적 테스트
      • Test Tip
      • vitest
      • playwright
      • Test Data Generator
      • MSW
    • Algorithm
      • coding test
      • Data Structure
    • Next.js
      • Data Fetching
      • Hydration
      • Next 13
      • Optimization
      • Next 15
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
    • Storybook
      • Storybook
      • CSF3
      • CDD
      • Headless Component
    • Funtional Programming
      • 함수형 프로그래밍
      • 참조 투명성
      • 부수효과
      • 함수 합성
      • 제너릭 타입 활용하기
      • 암묵적 입출력
      • 액션과 계산, 데이터
      • 계층형 설계
      • 호출 그래프
      • 함수형 설계
      • 불변성
      • 일급 함수
      • 함수형 도구
    • Git
      • Github Actions
      • Conflict
      • Branch 전략
    • Contents Format
      • Audio
    • 3D Graphic
      • 3D keyword
      • Three.js
      • Geometry
      • Material
      • Light
      • Camera
      • Decal
      • Rotation
      • Text
      • Shadow
      • Fog
      • Post Processing
      • Animation
      • Math
        • Vector Space
        • 벡터의 연산
        • 회전 계산
      • 3D 컨텐츠가 만들어지는 과정
      • R3F
      • Env
      • Scene
      • Transform
      • R3F
      • Interaction & Raycast
      • Rendering Algorithnm
      • Blender
      • Blender
    • Accessibility
      • 접근성이란
    • Interactive Web
      • Parallax
      • Canvas
      • requestAnimationFrame
      • Effect
      • HSL
      • React.js + Canvas
      • Matter.js
    • AWS
      • DevOps
      • Amplify
      • S3
      • 클라우드 컴퓨팅
        • 온프레미스와 클라우드
        • 클라우드 도입효과
        • 클라우드 컴퓨팅의 범위
        • 컴퓨팅 옵션
          • EC2 - Virtual Machin
          • ECS, EKS - Container
          • Lambda - Serverless
        • 네트워크 가상화
        • 스토리지
        • 데이터베이스
        • 데이터 수집
        • 머신 러닝 영역
        • IoT 영역
        • 블록체인 영역
      • 클라우드 아키텍처 설계
    • Network
      • Web Server & WAS
    • System Design
      • System Design
      • Component
      • 의존성을 배제한 개발
      • Error Handling
      • Architecture
        • 모노로틱 아키텍처
        • Clean Architecture
        • Layered Architecture
        • 이벤트 기반 아키텍처
      • 상황을 파악하는 메타인지
      • 중복 문제 해결하기
      • Monorepo Arhitecture
        • 모노레포 운영과 트러블슈팅
        • Module Federation
      • 코드 병목지점
      • API 대응
      • 공통 코드
      • Infra 구축
      • 모듈 기반의 개발 방식
      • Design System
        • 최소 수준의 아키텍처 설정
        • 더 효율적인 디자인시스템 만들기
        • 디자인 시스템과 UI 라이브러리 목적
        • 디자인 토큰
      • 효율적인 업무
        • 업무 프로세스 병목 파악
      • Clean Code
      • Design Pattern
        • CQRS Pattern
        • Strangler Fig Pattern
        • 데코레이터 패턴
        • 커맨드 패턴
        • 전략 패턴
        • 옵저버 패턴
      • A/B 테스팅
      • 대규모 리엑트 웹앱 개발
        • 복잡성 관리
        • 모듈성
        • 성능
        • 디자인 시스템
        • 데이터 패칭
        • 상태 관리
        • 국제화
        • 코드 조직화하기
        • 개인화 A/B 테스팅
        • 확장 가능한 웹 아키텍처
        • 테스팅
        • 툴링
        • 기술적 마이그레이션
        • 타입스크립트
        • 라우팅
        • 사용자 중심 API 디자인
        • 리액트 미래
    • Performance
      • React DevTools
      • Component 최적화
      • Page Load
      • API
    • MFA
      • MSA
      • MFA 도입하기
      • Monorepo
        • Monorepo Tool
        • Yarn Berry Workspace
        • Turborepo
      • MFA Composition
      • SPA 통합
      • Design System
      • Package Manager
        • Yarn
        • pnpm
      • Transpiler & Bundler
        • Babel
        • Rollup
        • esbuild
        • swc
        • Webpack
        • Vite
      • 분해와 통합을 위한 여러 기술 비교
    • State Management
      • Zustand
    • React v18
      • Automatic batching
      • Suspense
      • Transition
    • SEO
      • Search Engine Optimization
      • Open Graph Element
      • Metadata
    • FE Develop
      • Scrubbing
      • Clipboard
    • Refactoring
      • 리팩토링 깊게 들여다보기
      • 긴 코드 조각내기
      • 타입 코드 처리하기
      • 유사한 코드 융합하기
      • 데이터 보호
      • 코드 추가 및 제거
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • 커스텀 훅
      • 코드 분할하기 with Suspense, lazy
      • Suspense와 이미지 적재하기
      • useTransition, uesDeferredValue
      • SuspenseList
Powered by GitBook
On this page
  • 테스트 기본
  • 경곗값 테스트
  • 상태 전이 테스트
  1. DEV_NOTE
  2. Testing
  3. 시프트 레프트

테스트 기본중의 기본

테스트 기본

  • 적어도 설계 단계에서 클래스 다이어그램과 시퀸스 다이어그램은 꼭 작성하자

    • 클래스 다이어그램: 객체지향 설계에서 클래스 간의 관계와 구조를 시각적으로 표현한 다이어그램. 클래스의 속성, 메서드, 상속 등을 나타냄

    • 시퀀스 다이어그램: 시스템 내 객체 간 상호작용 순서를 시간 흐름에 따라 표현한 다이어그램. 메시지 교환 과정과 실행 순서를 보여줌

    • 하나의 거대한 코드를 방지할 수 있고, 리팩토링 효과도 시각화 가능해짐

  • 테스트 라이프 사이클(단위 테스트 -> 통합 테스트 -> 시스템 테스트)의 각 단계에서 적절한 방법을 수행해야함

    • 적절한 테스트 방법: 경계값 테스트, 조합 테스트, 상태 전이 테스트

    • 경계값 테스트: 입력값의 경계나 한계점에서 발생할 수 있는 오류등을 체크 (최대/최소값, 경계 바로 안팎의 값)

    • 조합 테스트: 서로 다른 입력값의 조합에 따라 발생할 수 있는 오류등을 체크

    • 상태 전이 테스트: 시스템이 어떤 상태에서 다른 상태로 전이될 때 올바르게 작동되는지 체크 (상태와 전이 조건 기반으로 진행)

단위 테스트에서 경곗값 테스트 개념이 포함되어 있지 않은 경우 단지, 함수를 호출해서 커버리지 비율을 높이는 것일뿐 도움이 되지 않는다.

경곗값 테스트

경곗값 테스트만 확실히 수행해도 80% 이상의 버그를 잡을 수 있다.

  • 문자 그대로 '경계를 테스트하는 방법'

  • 일반적으로 요구사항 사양의 경계에서 버그가 발생한다.

    • 테스터도 집요하게 경계가 되는 값을 입력해 버그를 발견하려고 한다!

  • 프로그램에서 경계라 불리는 위치에서는 항상 버그가 숨어있다.

> 와 >=의 잘못된 사용 (닫힘 관계 버그)

  • 개발자가 >=로 입력해야 하는 곳에 >라고 잘못 입력한 경우

if (a > 1) {
  // 출력 처리
} else {
  // 에러 처리
}

잘못 입력한 숫자, 요구사항 사양 오해 등

  • 개발자가 1이라 입력하는 대신 잘못해서 2로 입력한 경우

if (a >= 2) {
  // 출력 처리
} else {
  // 에러 처리
}

경계가 없음

  • 개발자가 조건문을 작성하는 것을 잊어버린 경우 (else)

if (a >= 2) {
  // 출력 처리
}
// else 까머금

여분의 경계

  • 불필요한 경계를 개발자가 작성한 경우

if (a > 2 %% a < 10) {
  // 출력 처리 
} else {
  // 에러 처리
}

상태 전이 테스트

'상태'를 모델화해서 테스트를 수행하는 방법

  • '상태 전이'란 크게 상태와 전이로 나누어 표현됨

  • 어떤 상태에서 다른 상태로 이동하기 위해서는 전이가 발생함

  • Ex: 애플리케이션이 기동하는 상태를 상태 A, 기동하지 않는 상태를 B라 정의, 상태 A에서 상태 B로 바뀌려면 애플리케이션이 종료 상태를 거쳐야함

  • 상태 전이 테스트에서는 함수(또는 클래스) 레벨에서 단위 테스트가 끝난 뒤, 해당 함수가 다른 함수에서 호출되는지 등을 확인

  • 상태 전이 테스트에서는 일반적으로 상태 전이 매트릭스를 사용함

상태 전이 매트릭스

이벤트/상태
시스템
입력 대기
대화 상자 열기

기동

입력 대기

N/A(두 번째 인스턴스가 기동하지 않는 것을 확인)

N/A(두 번째 인스턴스가 기동하지 않는 것을 확인)

메뉴 명령어

N/A

파일 대화 상자 열기

N/A

입력

N/A

입력 대기

N/A

대화 상자 닫기

N/A

N/A

입력 대기

애플리케이션 종료

N/A

시스템

N/A(종료하지 않는 것을 확인)

개발자라면 이와 같은 내용을 올바른 문장으로 만들고 테스터에게 전달하는 행동이 매우 중요하다.

  • 그렇지 않다면 스스로 테스트를 수행해야 한다.

  • 만약 이 중 한가지라도 부족하면 시장의 버그로 연결된다.

Previous시프트 레프트Next단위 테스트

Last updated 3 months ago