[TDD] 투두리스트를 TDD로 개발하기 - TodoItem

본 게시글은 아래 포스팅을 읽고 작성했습니다.

https://velog.io/@seo__namu/%EC%9A%94%EA%B5%AC%EC%82%AC%ED%95%AD-%EC%A0%95%EC%9D%98%ED%95%98%EA%B8%B0

요구사항 정의하기

---

TDD

테스트 주도 개발

 

진행과정

1. 실패하는 테스트코드 작성
2. 테스트 케이스를 통과하기 위한 최소한의 코드 작성
3. 코드 리팩토링

위의 단계를 계속 반복한다.

즉, 요구사항들에 부합하는 테스트코드를 작성하고, 그 테스트코드가 실행되기 위한 컴포넌트 로직을 짜는 것이다.

 

준비물

- react project

- jest(자바스크립트 테스팅 프레임워크) + testing Library(UI 구성요소를 테스트할 수 있음.)

 

---

투두리스트 요구사항 정의

기능 정의

1. 할 일 추가
2. 할 일 완료
3. 할 일 삭제
4. 할 일 수정

 

컴포넌트 역할 정의

TodoList

• 입력한 할 일들의 목록을 보여준다

TodoItem

• 할일과 삭제,수정 버튼을 보여준다

TodoForm

• 할 일을 추가할 수 있다

---

 

 

export default function TodoForm() {
  return <></>
}

 

 

빈 컴포넌트 추가한 뒤 테스트코드를 작성한다.

 

import { TodoItemType } from '@/libs/utils/types'
import { render, screen } from '@testing-library/react'
import TodoItem from '@/components/todo-list/TodoItem'
describe('Test TodoItem', () => {
  it('할 일과 삭제/수정 버튼을 보여준다', function () {
    const item: TodoItemType = {
      title: '테스트중이에요~',
      checked: false,
      deleted: false,
    }

    render(<TodoItem />)
    const todoText = screen.getByText(item.title)
    const deletedBtn = screen.getByRole('button', { name: '삭제' })
    const updateBtn = screen.getByRole('button', { name: '수정' })

    expect(todoText).toBeInTheDocument()
    expect(deletedBtn).toBeInTheDocument()
    expect(updateBtn).toBeInTheDocument()
  })
})

테스트를 돌리면 당연히 실패.

 

테스트가 성공하도록 TodoItem 을 수정해보자.

 

import styled from 'styled-components'
import { TodoItemType } from '@/libs/utils/types'

interface TodoItemProps {
  title: TodoItemType['title']
  checked: TodoItemType['checked']
  deleted: TodoItemType['deleted']
  onChange: () => void
}
export default function TodoItem(props: TodoItemProps) {
  return (
    <StyledTodoItem>
      <label>
        <input type="checkbox" checked={props.checked} onChange={props.onChange} />
        <span>{props.title}</span>
      </label>
      <button>삭제</button>
      <button>수정</button>
    </StyledTodoItem>
  )
}

const StyledTodoItem = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
`

 

import { TodoItemType } from '@/libs/utils/types'
import { render, screen } from '@testing-library/react'
import TodoItem from '@/components/todo-list/TodoItem'
describe('Test TodoItem', () => {
  it('할 일과 삭제/수정 버튼을 보여준다', function () {
    const item: TodoItemType = {
      title: '테스트중이에요~',
      checked: false,
      deleted: false,
    }

    const change = jest.fn()

    render(<TodoItem {...item} onChange={change} />)
    const todoText = screen.getByText(item.title)
    const deletedBtn = screen.getByRole('button', { name: '삭제' })
    const updateBtn = screen.getByRole('button', { name: '수정' })

    expect(todoText).toBeInTheDocument()
    expect(deletedBtn).toBeInTheDocument()
    expect(updateBtn).toBeInTheDocument()
  })
})

 

성공