AWESOMEDEV
8058a89304
단위(순수함수)와 E2E(전체 흐름) 사이 '부품 렌더링' 층을 메운다(jsdom). - Badge(3): 코드값→한국어 라벨/색 매핑, 미지값 폴백(방어적 기본값) - ProgressBar(4): 백분율 계산·반올림, 0 나눗셈 방어(NaN 방지), 막대 너비 - CodeEditor(6): 제어 입력 왕복, 줄번호 minRows 보장/증가, Tab 공백2칸 삽입, 텍스트 선택 후 Tab 커서 위치(selectionStart+2 회귀 방지 — 과거 버그 못 박기) 세팅: @testing-library/react+jest-dom+user-event+jsdom, 파일별 @vitest-environment, 매 테스트 후 cleanup(globals 미사용 시 DOM 누적 방지). 프론트 테스트 9→22. coverage 게이트·lint·build 통과. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
31 lines
1.2 KiB
JavaScript
31 lines
1.2 KiB
JavaScript
// @vitest-environment jsdom
|
|
import { describe, it, expect } from 'vitest'
|
|
import { render, screen } from '@testing-library/react'
|
|
import ProgressBar from './ProgressBar.jsx'
|
|
|
|
// 이 파일이 하는 일: 진행률 계산(반올림)과 0 나눗셈 방어, 막대 너비를 검증한다.
|
|
|
|
describe('ProgressBar', () => {
|
|
it('진행률을 백분율로 계산해 표시한다', () => {
|
|
render(<ProgressBar value={3} total={4} />)
|
|
expect(screen.getByText('3 / 4 (75%)')).toBeInTheDocument()
|
|
})
|
|
|
|
it('소수점은 반올림한다', () => {
|
|
render(<ProgressBar value={1} total={3} />) // 33.33... → 33
|
|
expect(screen.getByText('1 / 3 (33%)')).toBeInTheDocument()
|
|
})
|
|
|
|
it('total이 0이면 NaN이 아니라 0%를 보여준다(0 나눗셈 방어)', () => {
|
|
// 학습 포인트: total/0은 NaN이 되어 "NaN%"가 찍히는 사고 — 이 방어를 못 박는다.
|
|
render(<ProgressBar value={0} total={0} />)
|
|
expect(screen.getByText('0 / 0 (0%)')).toBeInTheDocument()
|
|
})
|
|
|
|
it('채워진 막대의 너비가 진행률과 같다', () => {
|
|
const { container } = render(<ProgressBar value={1} total={4} />) // 25%
|
|
const fill = container.querySelector('.progress-fill')
|
|
expect(fill).toHaveStyle({ width: '25%' })
|
|
})
|
|
})
|