Jasmine은 자바스크립트 테스트 도구로, 자바스크립트 코드를 테스트하는 데 사용됩니다. 이번 예시에서는 Jasmine을 활용하여 자바스크립트 UI 컴포넌트를 테스트하는 방법을 알아보겠습니다.

Jasmine 설치

먼저, Jasmine을 설치해야합니다. Jasmine은 NPM(Node Package Manager)을 통해 설치할 수 있습니다. 다음 명령어를 터미널에서 실행하여 Jasmine을 설치합니다.

npm install jasmine

테스트할 컴포넌트 작성

마크업과 자바스크립트를 통해 작성된 UI 컴포넌트가 있다고 가정해보겠습니다. 예를 들어, 다음과 같은 HTML 코드와 자바스크립트 코드를 가진 컴포넌트가 있다고 가정해봅시다.

<div id="my-component">
  <button class="btn">Click Me</button>
  <span class="message"></span>
</div>

class MyComponent {
  constructor() {
    this.button = document.querySelector('.btn');
    this.message = document.querySelector('.message');
    this.button.addEventListener('click', this.showMessage);
  }

  showMessage() {
    this.message.textContent = 'Button Clicked!';
  }
}

Jasmine 테스트 작성

이제 Jasmine을 통해 위에서 작성한 컴포넌트를 테스트해보겠습니다. Jasmine은 테스트 코드와 테스트 대상 코드를 분리하여 작성하는 것을 권장합니다.

새로운 디렉토리를 만들고, 그 안에 spec 디렉토리를 생성합니다. 그리고 my-component.spec.js라는 이름으로 테스트 파일을 생성합니다.

describe('MyComponent', () => {
  let myComponent;

  beforeEach(() => {
    document.body.innerHTML = `
      <div id="my-component">
        <button class="btn">Click Me</button>
        <span class="message"></span>
      </div>
    `;

    myComponent = new MyComponent();
  });

  it('should display message when button is clicked', () => {
    const button = document.querySelector('.btn');
    const message = document.querySelector('.message');

    button.click();

    expect(message.textContent).toBe('Button Clicked!');
  });
});

위 코드를 실행하면, Jasmine은 MyComponent 클래스의 showMessage 메소드를 호출하는지 여부를 확인하고, 메시지가 올바르게 표시되는지 테스트합니다.

테스트 실행

테스트를 실행하기 위해서는 Jasmine을 실행해야합니다. jasmine 명령어를 통해 테스트 수트를 실행할 수 있습니다.

npx jasmine spec/my-component.spec.js

테스트를 실행하면 Jasmine은 테스트 결과를 보고해줍니다.

결론

Jasmine을 사용하여 자바스크립트 UI 컴포넌트를 테스트하는 방법에 대해 알아보았습니다. Jasmine을 사용하면 테스트 코드를 작성하여 컴포넌트의 동작을 검증할 수 있습니다. 이를 통해 버그를 사전에 발견하고, 개발자들 사이의 협업을 원활하게 할 수 있습니다.