Vue BDD

Vue BDD - Gherkin

2020. 10. 6. 17:16
๋ชฉ์ฐจ
  1. ๐Ÿ“Œ ๋ชฉ์ฐจ
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ Gherkin?์ด ๋ญ”๋ฐ?
  4. ๐Ÿ“Œ Gherkin ํ‚ค์›Œ๋“œ
  5. 1. Scenario
  6. 2. Given
  7. 3. When
  8. 4. Then
  9. 5. And
  10. 6. But
  11. 7. Background
  12. ๐Ÿ“Œ Good And Bad Gherkin example
  13. 1. Good Gherkin
  14. 2. Bad Gherkin
  15. ๐Ÿ“Œ Conclusion
  16. ๐Ÿ“Œ Reference
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ์ฐจ

  • Introduction
  • Gherkin?์ด ๋ญ”๋ฐ?
  • Gherkin ํ‚ค์›Œ๋“œ
  • Good And Bad Gherkin example
  • Conclusion
  • Reference

๐Ÿ“Œ Introduction

์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ํฌ์ŠคํŒ…์€ ๋“œ๋””์–ด BDD๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ์ฒซ๊ฑธ์Œ ์ž…๋‹ˆ๋‹ค. ๋ฐ”๋กœ Gherkin์ธ๋ฐ์š”. ๊ทธ๋Ÿผ ์ง€๊ธˆ๋ถ€ํ„ฐ Gherkin์ด ๋ญ”์ง€ ์‚ฌ์šฉ์€ ์–ด๋–ป๊ฒŒ ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๐Ÿ‘

๐Ÿ“Œ Gherkin?์ด ๋ญ”๋ฐ?

Gherkin์ด๋ž€ cucumber์˜ ํ‘œํ˜„ ํ˜•์‹์ž…๋‹ˆ๋‹ค. ์•„๋ž˜ ๊ทธ๋ฆผ์„ ๋ด์ฃผ์„ธ์š”.

Gherkin์€ ๋ฐ”๋กœ ์ด๋ ‡๊ฒŒ Given, When, Then์œผ๋กœ ์ •์˜๋ฅผ ํ•ฉ๋‹ˆ๋‹ค.

Before Gerkin์„ ๋ณด๋ฉด ๊ธฐํš์ž๋กœ ๋ณด์ด๋Š” ์‚ฌ๋žŒ๊ณผ ๊ฐœ๋ฐœ์ž๋กœ ๋ณด์ด๋Š” ์‚ฌ๋žŒ์ด ์„œ๋กœ ๋Œ€ํ™”๋ฅผ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž์˜ ๋ง์„ ๊ธฐํš์ž๋Š” ์ดํ•ด๋ฅผ ๋ชปํ•˜์ฃ . ํ•˜์ง€๋งŒ Gherkin์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๊ฐœ๋ฐœ ์–ธ์–ด๋ฅผ ์ข€๋” ์ž์—ฐ์–ด์ฒ˜๋Ÿผ ๋ณ€ํ˜•์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ Gherkin ํ‚ค์›Œ๋“œ

Gherkin์—๋Š” ํฌ๊ฒŒ 7๊ฐ€์ง€ ํ‚ค์›Œ๋“œ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.

1. Scenario

ํŠน์ • ํ–‰๋™์— ๋Œ€ํ•ด ๊ธฐ์ˆ ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. jest์˜ describe๋ฅผ ์ƒ๊ฐํ•˜๋ฉด ํŽธํ• ๊ฑฐ ๊ฐ™์•„์š”!

2. Given

์‹œ์Šคํ…œ์ด ์–ด๋– ํ•œ ์ƒํƒœ์— ์žˆ์–ด์•ผํ•˜๋Š” ์ง€์— ๋Œ€ํ•ด ๊ธฐ์ˆ ํ•ฉ๋‹ˆ๋‹ค.

3. When

์œ ์ €์˜ ์•ก์…˜์„ ๊ธฐ์ˆ ํ• ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

4. Then

์ƒˆ๋กœ์šด ์ƒํƒœ์— ๋Œ€ํ•ด assertion์„ ํ• ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

5. And

Given/When/Then์„ ์‚ฌ์šฉํ•œ ๋’ค์— ์ถ”๊ฐ€์ ์ธ ๊ฒƒ์„ ๊ธฐ์ˆ ํ• ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค..

6. But

And์™€ ๋˜‘๊ฐ™์Šต๋‹ˆ๋‹ค.

7. Background

Givens๊ณผ ands๋ฅผ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค. BeforeEach๊ฐ™์€ ๊ธฐ๋Šฅ์ด๋ผ๊ณ  ๋ณด์‹œ๋ฉด ํŽธํ• ๊ฑฐ ๊ฐ™์•„์š”.

๊ธฐ๋ณธ์ ์ธ Gherkin์˜ ์‚ฌ์šฉ ์˜ˆ๋ฅผ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

Feature: ์—ฌ๊ธฐ์— feature ์„ค๋ช…์ด ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.
    Background:
       Given I open the page # ๊ฐ๊ฐ์˜ ์‹œ๋‚˜๋ฆฌ์˜ค๊ฐ€ ์‹œ์ž‘๋˜๊ธฐ์ „์— ์‹คํ–‰์ด ๋ฉ๋‹ˆ๋‹ค.

    Scenario: Opening the page # ์‹œ๋‚˜๋ฆฌ์˜ค์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค
        Given bblah
        When Ballhhahhh
        And Balleah
        But Balla
        Then the page display "Main Heading"

๐Ÿ“Œ Good And Bad Gherkin example

1. Good Gherkin

  • ํ•˜๋‚˜์˜ scenario์—๋Š” ํ•˜๋‚˜์˜ ํ–‰๋™๋งŒ!
  • 3์ธ์นญ์œผ๋กœ ์“ธ๊ฒƒ
  • Given์€ ๋Šฅ๋™์ ์ธ ์–ด์ฒด๋กœ, When๊ณผ Then์€ ์ˆ˜๋™์ ์ธ ์–ด์ฒด๋กœ
  • action์ด ๋ฒŒ์–ด์ง€๋Š” ๊ฑธ ํ† ๋Œ€๋กœ ์ž‘์„ฑ, ์–ด๋–ป๊ฒŒ action์ด ๋™์ž‘ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ๊ธฐ์ˆ ํ•˜์ง€ ๋ง๊ฒƒ
  • ์Šคํ… ๋ฐ”์ด ์Šคํ…์œผ๋กœ ์ž‘์„ฑํ•˜์ง€ ๋ง๊ฒƒ
  • ์‹œ๋‚˜๋ฆฌ์˜ค ๊ฐ„์—๋Š” 2 blank lines์œผ๋กœ ๊ตฌ๋ณ„ํ•  ๊ฒƒ

์ข‹์€ ์˜ˆ์ œ:

Feature: Google Searching

    Scenario: Search from the search bar
        Given a web browser is at the Google home page
        When the user enters "panda" into the search bar
        Then links related to "panda" are shown on the results page

    Scenario: Image search
        Given Google search results for "panda" are shown
        When the user clicks on the "Images" link at the top of the results page
        Then images related to "panda" are shown on the results page

2. Bad Gherkin

์œ„์— ๋งํ•œ Good Gherkin์— ๋ฐ˜ํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ๋“ค!

๋‚˜์œ ์˜ˆ์ œ:

# ์ผ์ธ์นญ... ์ ˆ์ฐจ์ง€ํ–ฅ...
Feature: Subscribers see different sets of stock images based on their subscription level 

Scenario: Free subscribers see only the free articles
    Given users with a free subscription can access "FreeArticle1" but not "PaidArticle1" 
    When I type "freeFrieda@example.com" in the email field
    And I type "validPassword123" in the password field
    And I press the "Submit" button
    Then I see "FreeArticle1" on the home page
    And I do not see "PaidArticle1" on the home page

Scenario: Subscriber with a paid subscription can access "FreeArticle1" and "PaidArticle1"
    Given I am on the login page
    When I type "paidPattya@example.com" in the email field
    And I type "validPassword123" in the password field
    And I press the "Submit" button
    Then I see "FreeArticle1" and "PaidArticle1" on the home page  

๐Ÿ“Œ Conclusion

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” Gherkin์˜ ๊ธฐ๋ณธ์ ์ธ ์šฉ๋ฒ•๊ณผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์ด์ œ ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ด๊ฒƒ์„ ํ† ๋Œ€๋กœ ์–ด๋–ป๊ฒŒ cypress์—์„œ ๋™์ž‘ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๐ŸŽ‰

๐Ÿ“Œ Reference

  • Kyle Gherkin
๋ฐ˜์‘ํ˜•

'Vue BDD' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Vue BDD - Cypress Mock Api  (0) 2020.10.13
Vue BDD - Cypress ์ ์šฉํ•˜๊ธฐ  (0) 2020.10.13
Vue BDD - Setting  (0) 2020.10.06
Vue BDD - Intro  (0) 2020.10.05
  1. ๐Ÿ“Œ ๋ชฉ์ฐจ
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ Gherkin?์ด ๋ญ”๋ฐ?
  4. ๐Ÿ“Œ Gherkin ํ‚ค์›Œ๋“œ
  5. 1. Scenario
  6. 2. Given
  7. 3. When
  8. 4. Then
  9. 5. And
  10. 6. But
  11. 7. Background
  12. ๐Ÿ“Œ Good And Bad Gherkin example
  13. 1. Good Gherkin
  14. 2. Bad Gherkin
  15. ๐Ÿ“Œ Conclusion
  16. ๐Ÿ“Œ Reference
'Vue BDD' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • Vue BDD - Cypress Mock Api
  • Vue BDD - Cypress ์ ์šฉํ•˜๊ธฐ
  • Vue BDD - Setting
  • Vue BDD - Intro
eddie0329
eddie0329
Front-end Developer
๋ฐ˜์‘ํ˜•
eddie0329
Eddie Sunny's Blog
eddie0329
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (100)
    • Summary of Book (0)
    • Vue Study (11)
    • Vue TDD (9)
    • Vue BDD (5)
    • Design Pattern (9)
    • Javascript Study (3)
    • React Study (15)
    • React TDD (1)
    • Vue Storybook (2)
    • Refactoring (0)
    • Graphql_Apollo (3)
    • Svelte (8)
    • Open Source (1)
    • D3 (4)
    • Typescript (1)
    • CSS (2)
    • Android (0)
    • Java (0)
    • Kotlin (0)
    • ์žก๋‹ด (0)
    • Swift (19)
    • Rust (2)
    • ํšŒ์‚ฌ์ด์•ผ๊ธฐ (2)
    • ReactNative Study (2)
    • Vitest (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • Home

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • CSS
  • storybook6
  • slot ํŒจํ„ด
  • swift
  • vue3
  • Nextjs
  • TDD
  • Javascript
  • javascript pattern
  • react useRef
  • vue storybook
  • client only
  • Vue test
  • Kotlin
  • apollo
  • D3
  • swift5
  • vue bdd
  • react
  • Design Pattern
  • Vue
  • React Native
  • Cypress
  • jest
  • TypeScript
  • BDD
  • svelte
  • vue tdd
  • vue cypress
  • react-component-slot

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
eddie0329
Vue BDD - Gherkin
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.