[Cypress] TDD vs BDD

1. TDD

TDD (Test Drive Development)는 테스트 주도 개발이라고 합니다. 테스트를 먼저 작성하고 테스트의 패스여부를 기준으로 개발을 진행하는 것입니다. 테스트가 모두 통과 될 때까지 테스트 -> 코드 작성 -> 테스트를 반복합니다. 

 

TDD는 초기에 테스트 코드를 작성해야하는 초기투자시간이 필요한 단점이 있지만, 코드의 품질 향상 및 장기적인 측면에서 개발과 테스트를 동시에 함으로 써 오류를 조기에 잡아내어 궁극적으로는 개발속도가 향상 될 수 있습니다. 

2. BDD

BDD (Behavior Driven Development)는 행동 주도 개발이라고 합니다. 사용자의 행위에 기준을 두고 테스트하며 개발을 진행하는 것입니다. 

 

BDD는 TDD의 한 종류로 볼 수 있는데, TDD에서 사용자의 행위란 측면까지 고려하여 테스트를 작성하는 것입니다. 사용자의 행위가 중점이 되는 개발 방법이기 때문에 기능적으로 구현되는 메소드, 모듈의 측면 보다 사용자의 Action을 조금 더 강조하고 있으며, 프론트엔드 개발에 사용되기 적합합니다.

 

3. TDD vs BDD

TDD와 BDD는 어떠한 측면에 중점을 두는 것이 효과적인지 프로젝트 특성에 따라 선택하여 사용하는 것이 좋습니다.

 

Module

// template
<template> 
 <input type="number" data-cy="수량" />
 <input type="button" data-cy="구매버튼" value="구매버튼" />
 <input type="text" readOnly data-cy="결과"/>
</template>

// 상품구매.js
export default function Goods() {
  const haveMoney = 2000000;
  
  this.buyGoods = (name, price) => {
    if (price <= haveMoney) {
      return '상품 구매 완료';
    }
    return '잔액이 부족합니다.';
  }
}

TDD

// goods.cy.ts - TDD
import Goods from '../../src/js/상품구매.js';

describe("상품구매 기능", () => {
  const goods = new Goods();
  
  it("상품 구매 테스트", () => {
    expect(goods.buyGoods('공책', 10000, 20)).to.equal('상품 구매 완료');
  });
  
  it("잔액 초과 테스트", () => {
    expect(goods.buyGoods('공책', 10000, 2000)).to.equal('잔액이 부족합니다.');
  });
});

TDD의 테스트 코드는 기능적인 테스트를 중점으로 테스트를 작성합니다.

BDD

// goods.cy.ts - BDD
describe("상품구매 기능", () => {
  before(() => {
    cy.visit('/');
  })
  
  it("상품 구매 테스트", () => {
    cy.get('[data-cy=수량]').type(20);
    cy.get('[data-cy=구매버튼]').click();
    cy.get('[data-cy=결과]').should('have.text', '상품 구매 완료')
  });
  
  it("잔액 초과 테스트", () => {
    cy.get('[data-cy=수량]').type(2000);
    cy.get('[data-cy=구매버튼]').click();
    cy.get('[data-cy=결과]').should('have.text', '잔액이 부족합니다.')
  });
});

BDD의 테스트 코드는 사용자 액션 (click, typing, scroll등)을 중점으로 나타날 수 있는 결과에 대한 테스트를 작성합니다.

 

 

 

 

참고사이트

https://tv.kakao.com/channel/3693125/cliplink/414004682