2022-04-07 TIL

Fact

• 퀴즈를 추가하기, 추가한 문제를 가져오기, 소장한 문제를 가져올때, 가장 최근에 생성한 퀴즈순서대로 가져오도록 구현했다.
• E2E 테스트 전체적인 리펙토링
• Cypress에서 URL을 환경변수로 만들어서 사용하려고 했는데, 일반적인 방법으로는 사용을 못해서 아래와 같은 방법을 사용했다.

Feelings

• E2E 테스트 상당히 중독성있다… E2E테스트가 끝나면 단위테스트도 도전해봐야겠다.

Findings

• Cypress에서 env를 사용하려고했는데, 일반적인 방법으로는 환경변수를 가져올수 없다… 그래서 아래와 같은 방법을 사용했다.

맨 바깥쪽 폴더에 cypress.json 파일을 만들고

{
  "env": {
    "api": "https://placeholder.com"
  }
}
cypress.json

아래와 같이 사용한다.

Cypress.env('url') // https://placeholder.com

• E2E 테스트를 작성하다가 피드백을 받은게 있는데, 아래는 내가 기존에 작성했던 코드다. E2E 테스트가 익숙하지 않아서 그랬는지 모르겠는데 이런식으로 코드를 작성하는 것 보단 선언형으로 어떤 의미를 가지는 코드인지 명시해주는게 더 가독성이 좋을것 같다고 조언을 받았다.

it('로그인 버튼을 클릭하면 로그인 페이지로 가야 함', () => {
  cy.get('.login').click()
  loginPageButton.click()

  cy.location('pathname').should(loc => {
    expect(loc).to.eq('/login')
  })
})

아래처럼 리펙토링 했다.

it('로그인 버튼을 클릭하면 로그인 페이지로 가야 함', () => {
  const loginPageButton = cy.get('.login')
  loginPageButton.click()

  cy.location('pathname').should(loc => {
    expect(loc).to.eq('/login')
  })
})

Future Action

• 배포하기
• 단위 테스트 시도해보기
• 꾸준히 TIL 적기