테스트 한 줄 어떠신가요

친구1: "이번에 새로나온 초코아이스크림 맛있다는데 한번 먹어보자"
친구2: "나는 그냥 기존에 맛있던 딸기아이스크림 먹어볼래"

친구1: (초코아이스크림을 먹는다)
친구2: "맛있어?"

친구1: "야 먹어봐 진짜 맛있어"
친구2: (초코아이스크림을 먹는다)
친구1: "어때?"
친구2: "맛있네.. 나도 다음에 먹어야지"

describe('회원가입', () => {
  describe('아이디', () => {
    it.todo('영문과 숫자포함 4자리 이상이면 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 문구가 나오지 않습니다.')
    it.todo('영문과 숫자포함 4자리 이상이 아니면 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 문구가 나옵니다.')
  })

  describe('비밀번호', () => {
    it.todo('영문 + 숫자 + 특수문자로 이뤄진 8자리 이상이면 "영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요" 문구가 나오지 않습니다.')
    it.todo('영문 + 숫자 + 특수문자로 이뤄진 8자리 이상이 아니면 "영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요" 문구가 나옵니다.')
    it.todo('비밀번호확인의 값과 비밀번호 값이 다르다면 "입력한 비밀번호와 달라요" 문구가 나옵니다.')
  })

  describe('가입', () => {
    it.todo('아이디나 비밀번호가 올바르지 않다면 "가입" 버튼은 disabled 입니다.')
    it.todo('아이디와 비밀번호가 올바르다면, "가입" 버튼은 enabled 입니다.')
  })
})

describe('아이디', () => {
  it('영문과 숫자포함 4자리 이상이면 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 문구가 나오지 않습니다.', () => {
    render(<SignUpPage />)

    // 키보드 타이핑으로 'heecheolman123' 을 입력한다.
    userEvent.type(input, 'heecheolman123')
    // 올바른 값이므로 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 는 나오지 않는다.
    expect(
      screen.queryByText(/영문과 숫자를 포함해 4자리 이상으로 만들어주세요/)
    ).not.toBeInTheDocument()
  })

  it('영문과 숫자포함 4자리 이상이 아니면 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 문구가 나옵니다.', () => {
    render(<SignUpPage />)

    // 키보드 타이핑으로 'heecheolman' 을 입력한다.
    userEvent.type(input, 'heecheolman')
    // 올바른 값이 아니므로 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 문구가 나온다.
    expect(
      screen.getByText(/영문과 숫자를 포함해 4자리 이상으로 만들어주세요/)
    ).toBeInTheDocument()
  })
})

describe('비밀번호', () => {
  it('영문 + 숫자 + 특수문자로 이뤄진 8자리 이상이면 "영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요" 문구가 나오지 않습니다.', () => {
    render(<SignUpPage />)

    // 키보드 타이핑으로 'heecheolman123!' 을 입력한다.
    userEvent.type(input, 'heecheolman123!')
    // 올바른 값이므로 "영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요" 는 나오지 않는다.
    expect(
      screen.queryByText(
        /영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요/
      )
    ).not.toBeInTheDocument()
  })

  it('영문 + 숫자 + 특수문자로 이뤄진 8자리 이상이 아니면 "영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요" 문구가 나옵니다.', () => {
    render(<SignUpPage />)

    // 키보드 타이핑으로 'heecheolman' 을 입력한다.
    userEvent.type(input, 'heecheolman')
    // 올바른 값이 아니므로 "영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요" 는 나온다.
    expect(
      screen.getByText(
        /영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요/
      )
    ).toBeInTheDocument()
  })

  it('비밀번호확인의 값과 비밀번호 값이 다르다면 "입력한 비밀번호와 달라요" 문구가 나옵니다.', () => {
    render(<SignUpPage />)

    // 키보드 타이핑으로 'heecheolman123!' 을 패스워드에 입력한다.
    userEvent.type(passwordInput, 'heecheolman123!')
    // 키보드 타이핑으로 'heecheolman123!@#' 을 패스워드 확인에 입력한다.
    userEvent.type(passwordConfirmInput, 'heecheolman123!@#')

    // 서로 값이 다르기 때문에 "입력한 비밀번호와 달라요" 문구가 나온다.
    expect(screen.getByText(/입력한 비밀번호와 달라요/)).toBeInTheDocument()
  })
})

describe('가입', () => {
  it('아이디나 비밀번호가 올바르지 않다면 버튼은 disabled 입니다.', () => {
    render(<SignUpPage />)

    // 키보드 타이핑으로 각 값을 입력한다.
    userEvent.type(idInput, 'heecheolman123')
    userEvent.type(passwordInput, 'heecheolman')
    userEvent.type(passwordConfirmInput, 'heecheolman')

    // 비밀번호가 조건에 맞지 않아 버튼이 disabled 상태가 된다.
    expect(screen.getByRole('button', { name: /가입/ })).toBeDisabled()
  })

  it('아이디와 비밀번호가 올바르다면, 버튼이 enabled 입니다.', () => {
    render(<SignUpPage />)

    // 키보드 타이핑으로 각 값을 입력한다.
    userEvent.type(idInput, 'heecheolman123')
    userEvent.type(passwordInput, 'heecheolman123!@')
    userEvent.type(passwordConfirmInput, 'heecheolman123!@')

    // 만족하는 값이기 때문에 버튼은 enabled 상태이다.
    expect(screen.getByRole('button', { name: /가입/ })).toBeEnabled()
  })
})

function SignUpPage() {
  const [id, setId] = useState('')
  const [password, setPassword] = useState('')
  const [passwordConfirm, setPasswordConfirm] = useState('')

  const isSamePassword = password === passwordConfirm
  const validId = isValidId(id)
  const validPassword = isValidPassword(password)

  const canSubmit = validId && validPassword && isSamePassword

  return (
    <>
      <input type="text" value={id} onChange={e => setId(e.target.value)} />
      {!validId && '영문과 숫자를 포함해 4자리 이상으로 만들어주세요'}

      <input
        type="password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      {!validPassword &&
        '영문과 숫자와 특수문자를 포함해 8자리 이상으로 만들어주세요'}

      <input
        type="password"
        value={passwordConfirm}
        onChange={e => setPasswordConfirm(e.target.value)}
      />
      {!isSamePassword && '입력한 비밀번호와 달라요'}

      <button disabled={!canSubmit}>가입</button>
    </>
  )
}

it('영문과 숫자포함 4자리 이상이면 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 문구가 나오지 않습니다.', () => {
  // 1. Assignment: 화면에 그려서 테스트 단계 준비
  render(<TestPage />)

  // 2. Act: 테스트할 목적이 되는 코드. 타이핑한 결과 값이 목적임
  // 키보드 타이핑으로 'heecheolman123' 을 입력한다.
  userEvent.type(input, 'heecheolman123')

  // 3. Assert: 기대하는 결과값으로 안내 문구가 나오지 않기를 기대함
  // 올바른 값이므로 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 는 나오지 않는다.
  expect(
    screen.queryByText(/영문과 숫자를 포함해 4자리 이상으로 만들어주세요/)
  ).not.toBeInTheDocument()
})

it('영문과 숫자포함 4자리 이상이면 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 문구가 나오지 않습니다.', () => {
  // 1. Given: 화면에 그려서 테스트 단계 준비
  render(<TestPage />)

  // 2. When: 테스트할 목적이 되는 코드. 'heecheolman123' 을 입력할 때,
  // 키보드 타이핑으로 'heecheolman123' 을 입력한다.
  userEvent.type(input, 'heecheolman123')

  // 3. Then: 기대하는 결과값으로 안내 문구가 나오지 않아야 함
  // 올바른 값이므로 "영문과 숫자를 포함해 4자리 이상으로 만들어주세요" 는 나오지 않는다.
  expect(
    screen.queryByText(/영문과 숫자를 포함해 4자리 이상으로 만들어주세요/)
  ).not.toBeInTheDocument()
})