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를 독립된 환경에서 값만 바꾸어볼 수 있기 때문입니다. 이번 포스팅에서는 간단..
Table of Content Introduction Testing state Testing getters Testing mutations Testing actions Conclusion Reference 📌00. Introduction 이번편에서는 vuex를 테스팅하는 방법에 대해 공유하고자 합니다. 해당 코드는 vue-test-practice에서 확인할 수 있습니다.🎉 해당 편에서는 기본적으로 Component편의 counter를 구현하는 예제에서 api mock을 실제로 실현 해보기 위해 json placeholder에 todos를 불러오는 예제도 같이 진행하려고 합니다. 📌 01. Testing State state는 보통 getDefaultState 같은 함수형으로 선언을 해주는것이 좋습니다. ..
Table of Content Introduction Testing Data Testing Methods Testing Created Testing Props Testing Computed Testing vuex in component Conclusion Reference 📌 00. Introduction 🚨주의: 해당글은 환경설정을 다루지는 않습니다. 기본적인 cli로 jest를 설정한 파일을 토대로 설명을 합니다. 이 포스팅에는 Vue component를 어떻게 testing을 할까? 에 대한 물음에 답변을 하는 글입니다. 해당 글의 코드는 vue-test-practice에 가시면 됩니다. 이 포스팅에서 다룰 컴포넌트는 하나이며 간단한 Counter를 만들어보는 예제로 설명을 합니다. 그리고 tdd의..
목차 1. 서론: reduce.. 너 이런놈이었어? 2. 본론: reduce의 참된 사용 3. 결론: reduce의 강력함 📌 서론: reduce.. 너 이런놈이었어? Javascript를 쓰면서 reduce는 이상하게 잘 사용하지 않았다. 하지만 이제 reduce의 강력함을 알고 그 사용법을 공유하고자 한다. 기본적인 책에서 나오는 reduce문법을 먼저 소개하고 그뒤에 실사용의 예제를 소개하고자 한다. 📌 본론: reduce의 참된 사용 기본적인 문법: const temp = [1, 2, 3, 4, 5]; temp.reduce((a, c) => a + c, 0); // 15 간단하게 1 부터 5까지 더하는 reduce를 작성해보았다. reduce의 첫번째 인자로는 call-back function이 ..
