Todo List Project

Given: Task 리스트가 존재할 때

• When: 페이지에 접속하면
  • Then: Task 리스트가 보입니다.

Given: 완료된 테스크와 미완료된 테스크가 모두 존재할 때

• When: 페이지에 접속하면
  • Then: 완료된 테스크들은 아래쪽 영역에 표시됩니다.
  • And: 완료되지 않은 테스크들은 윗쪽 영역에 표시됩니다.

Given: 유저가 Task 생성 버튼을 볼 때

• When: 버튼을 클릭하면
  • Then: Task 생성 폼이 보입니다.

Given: 유저가 Task 생성 폼을 볼 때

• When: Task 이름을 입력하고, Task 생성 버튼을 클릭하면
  • Then: 새로운 Task가 리스트에 추가됩니다.

Given: Task 가 리스트에 존재할 때

• When: 내용을 변경하고 싶은 Task의 라벨을 클릭하면
  • Then: input창으로 변경된다
  • And: input창에 변경하고 싶은 내용을 적을 수 있게 되는데, input창에는 기존 Task 내용이 적혀있고 내용 마지막 글자에 포커스가 있다.
• When: input창에 변경 내용을 적고 input 외 영역을 클릭하면
  • Then: 입력한 내용으로 Task가 변경되고, input창이 없어진다
• When: input창에 변경 내용을 적고 엔터를 누르면
  • Then: 입력한 내용으로 Task가 변경되고, input창이 없어진다
• When: input창에 변경 내용을 적고 esc를 누르면
  • Then: 입력하기 전 내용으로 돌아간다.

Given: 완료되지 않은 테스크

• When: 체크박스를 클릭하면
  • Then: 체크 박스가 체크된다.
  • And: 완료 리스트로 넘어간다.
  • And: 테스크 설명에 취소선이 생긴다.

Given: 완료된 테스크

• When: 체크박스를 클릭하면
  • Then: 체크가 해제된다
  • And: 대기 리스트로 올라간다.

Given: 리스트에 Task가 있을 때

• When: 해당하는 Task에 호버하면
  • Then: 삭제 버튼이 나온다.
  • When: 삭제 버튼을 누르면
    • Then: Task가 삭제되고, 리스트에서 없어진다.

Given: 완료된 task가 존재 할 때

• When: Clear All 버튼을 누르면
  • Then: Task 리스트에서 완료된 Task 가 삭제된다.

Given: 미완료 리스트가 두 개 이상일 때

• When: 유저가 하나의 태스크를 드래그하면
  • Then: 리스트간 순서를 바꿀 수 있다.

Given: task에 마감 기한이 없는 task가 존재할 때

• When: 리스트 좌측의 달력을 누르면
  • Then: 달력이 나온다
  • When: 달력에서 마감 날짜를 선택하면
    • Then: 달력이 사라지며, 마감 기한이 정해지고 리스트 좌측에 마감 기한까지 d-day가 나온다.

Given: 리스트에 마감 기한이 있는 task가 존재할 때

• When: 리스트 좌측의 d-day를 누르면
  • Then: 달력이 나온다 (달력에는 현재 정해진 날짜를 보여준다)
  • When: 달력에서 마감 날짜를 선택하면
    • Then: 달력이 사라지며, 마감 기한이 수정되고 리스트 좌측에 마감 기한까지 d-day가 나온다.