목차 문제 정의 Cypress? Cypress hydration test 작성 Local에서 테스트 해보기 Github action 연동하기 작동 동영상 질문타임 문제 정의 문제가 뭐였길래? 🚨 우리의 개발 환경은 빠르게 개발을 하기 위해 CSR 환경이다. 배포 환경은 SSR 환경이다. 👉 개발 환경과 배포 환경이 다르기 때문에 빠른 머지를 할때 build test를 건너 뛰기 쉽다. 👉 다른 사람 코드를 건들이기 어렵다. 👉 hydration 테스트가 귀찮다. 그래 ! 😎 그럼 Cypress로 Hydration 테스트를 자동화를 하자! Cypress가 뭔가유? 먹는건가유? Cypress에 대해서 알아보자! Cypress는 Javascript End to End 테스트 프레임워크 입니다. 더 많은 정보를..
📌 목차 Introduction Gherkin 사용 Gherkin + Cypress Vuex store mocking 하기 Conclusion Reference 📌 Introduction 안녕하세요! 오늘은 지난 포스팅에서 다뤘던 Gherkin을 실제로 Cypress에 적용하는 포스팅입니다. 해당 코드는 여기에서 확인 하실 수 있습니다. 🚧 해당 포스팅의 예제는 간단한 counter 구현입니다. 📌 Gherkin 사용 Counter는 세가지 시나리오에 대해서 작동이 해야합니다. count의 시작 값은 0입니다. 플러스 버튼을 누르면 count가 1 증가 해야합니다. 마이너스 버튼을 누르면 count가 1 감소 해야합니다. 이제 해당 시나리오를 Gherkin으로 옮겨보겠습니다. # Counter.featu..
📌 목차 00.Introduction 01.Mixin Test하기 02.Conclusion 📌 00.Introduction 이번 포스팅은 mixins의 테스트 방법에 대해 다룹니당. 🎉 mixins는 그렇게 어렵지 않아요.(컴포넌트 테스트와 비슷하게 합니다.) 이번 포스팅에서는 어떻게 mixins를 테스팅하는지에 대해 알아보겠습니다. mixins는 counter example로 진행합니다. 해당 코드는 여기에서 보실수 있습니다. 📌 01.Mixin Test하기 이번 포스팅은 이해를 돕기 위해 먼저 counter mixins 코드를 짜보고 그뒤에 테스트 코드를 작성하겠습니다. 해당 코드는 이렇게 됩니다. // CounterMixins.js export default { data: () => ({ count..
목차 Introduction What is Test Double Stub Spy Mock Conclusion Reference 📌Introduction 이번편은TDD를 하기위해 test double이라는 것에 대해 부가적으로 알아보는 포스팅입니다. 📌What is Test Double? 테스트 더블이란 실제 객체를 대신해서 테스팅에서 사용하는 모든 방법을 말합니다. 예를 들어 보겠습니다. 다음과 같은 실제 api 통신을 하는 함수가 있다고 가정해봅시다. asnyc function getTodos() { await axios.get('jsonplace-holder/todos'); } getTodos를 테스팅하려면 실제 네트워크 api를 사용하게 됩니다. 이것은 네트워크 연결 상태에 영향을 받을 것이고 항상..
📌 목차 서론 TDD를 하면서 겪었던 어려움들 TDD를 하면서 좋았던 점들 결론 📌 서론 이번 포스팅에서는 그동안 다뤘던 tdd에 관해 회고 해보는 포스팅 입니다. 개인적으로 tdd를 하면서 겪었던 어려움들 그리고 느꼈던 생각들을 정리해 보는 포스팅입니다. 📌 TDD를 하면서 겪었던 어려움들 TDD를 하면서 겪었던 어려움들은 다음 세가지가 있습니다. 어디까지 test를 해야할까? 어떻게 하면 의존성을 줄일 수 있을까? testcase가 잘못 되면 어쩌지? 1. 어디까지 test를 해야할까? 모든 코드를 test code로 커버한다는 것은 매우 어렵고 비생산적인 일입니다. 그렇다면 어디까지 testcode를 작성을 해야할까요? 어느 부분에서 실수가 가장 많이 날까요? 이런것들은 어쩔수 없는 경험이라고 생각..
Table of Contents Introduction Use of Storybook in vue How to bind vuex with storybook Conclusion Apply to Test Reference 📌 Introduction Vuex, vue component에 이은 storybook편 입니다. 여때까지는 logic에 관한 부분을 testing 했다면 이번에는 view에 관한 부분을 테스팅하는 방법에 대해 말하고자 합니다. View를 테스팅하는 방법은 여러가지가 있는데 왜 Storybook이 왜 tdd에 들어갔는지 의아하실 텐데요. 그이유는 storybook의 mock값을 그대로 사용가능하고 component를 독립된 환경에서 값만 바꾸어볼 수 있기 때문입니다. 이번 포스팅에서는 간단..
