Vue BDD

Vue BDD

Vue BDD - Cypress Mock Api

📌 목차 Introduction Cypress api mock 하기 Conclusion Reference 📌 Introduction 안녕하세요. BDD마지막 시간으로 이제 Cypress에서 api call를 mock 하는 방법에 대해 알아보겠습니다. 해당 코드는 여기에서 확인하실 수 있습니다. 해당 예제는 jsonplaceholder에서 todo를 하나 반환하는 예제 입니다. 📌 Cypress api mock 하기 API를 mock 하기전에 먼저 행동을 정의해보겠습니다. Todo의 제목은 'hello'라고 쓰여있어야 합니다. Feature: Todo Background: Given I am on the main page Scenario: Todo display Then I can see Todo with..

Vue BDD

Vue BDD - Cypress 적용하기

📌 목차 Introduction Gherkin 사용 Gherkin + Cypress Vuex store mocking 하기 Conclusion Reference 📌 Introduction 안녕하세요! 오늘은 지난 포스팅에서 다뤘던 Gherkin을 실제로 Cypress에 적용하는 포스팅입니다. 해당 코드는 여기에서 확인 하실 수 있습니다. 🚧 해당 포스팅의 예제는 간단한 counter 구현입니다. 📌 Gherkin 사용 Counter는 세가지 시나리오에 대해서 작동이 해야합니다. count의 시작 값은 0입니다. 플러스 버튼을 누르면 count가 1 증가 해야합니다. 마이너스 버튼을 누르면 count가 1 감소 해야합니다. 이제 해당 시나리오를 Gherkin으로 옮겨보겠습니다. # Counter.featu..

Vue BDD

Vue BDD - Gherkin

📌 목차 Introduction Gherkin?이 뭔데? Gherkin 키워드 Good And Bad Gherkin example Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅은 드디어 BDD를 시작하는 첫걸음 입니다. 바로 Gherkin인데요. 그럼 지금부터 Gherkin이 뭔지 사용은 어떻게 하는지에 대해 알아보겠습니다. 👍 📌 Gherkin?이 뭔데? Gherkin이란 cucumber의 표현 형식입니다. 아래 그림을 봐주세요. Gherkin은 바로 이렇게 Given, When, Then으로 정의를 합니다. Before Gerkin을 보면 기획자로 보이는 사람과 개발자로 보이는 사람이 서로 대화를 합니다. 개발자의 말을 기획자는 이해를 못하죠. 하지만 Ghe..

Vue BDD

Vue BDD - Setting

📌 목차 Introduction Setting을 어떻게 해야할까? Conclusion Reference 📌 Introduction 안녕하세요 이번 포스팅은 지난번에 알려드린대로 BDD를 세팅하는 방법에 대해서 알려드리려고 합니다. 실제 코드는 여기를 참고하시면 됩니다. 🎉 📌 Setting을 하는 방법 먼저 cypress-cucumber-preprocessor를 설치해주세요 npm i -D cypress-cucumber-preprocessor package.json package.json에 해당 내용을 추가해주세요. "cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": true, "stepDefinitions": "tests/e2e/specs",..

Vue BDD

Vue BDD - Intro

📌 목차 Introduction BDD란 무엇인가? BDD를 왜 사용하는가? Vue에서 어떻게 BDD를 적용하는가? Conclusion Reference 📌 Introduction Vue TDD를 진행하면서 그동안 TDD의 한계점과 좀더 좋은 코드에 대한 생각을 하다가 BDD를 접하게 되었습니다. 회사에서 TDD도 물론 매우 도움이 되었습니다.(주로 unit test) 이번 포스팅은 그래서 그러한 한계점을 극복하는 BDD를 적용하는 방법에 대해 알려드리려고 합니다. 해당 코드는 깃 레포를 참고하시면 됩니다.🎉 📌 BDD란 무엇인가? BDD는 Behavior Driven Development의 약자입니다. 아래 이미지를 봐주세요. 이처럼 TDD의 상위 버전이 바로 BDD입니다.🎉 순서는 BDD를 하여 fe..

eddie0329
'Vue BDD' 카테고리의 글 목록