BDD 프레임워크의 한 종류인 Jasmine에 대해 알아보고 간단한 예제를 직접 구현해보자.
www.dailysmarty.com/posts/jasmine-specs
Jasmine Specs
introduction.js Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This gu
www.dailysmarty.com
* 본 포스팅은 위 문서를 참고하여 Jasmine에 대해 간단한 예제를 통해 탐구해본 내용입니다. 제가 영어를 잘 못해서 오역으로 잘못 해석된 부분이 있을 수 있으니 원문을 참고해주세요!
Jasmine은 자바스크립트를 위한 유닛 테스트프레임워크로 BDD프레임워크의 한 종류이다.
BDD(Behaivor Driven Development)란?
Jasmine 테스트 프레임워크를 사용하도록 설정된 Node.js 프로젝트 내에 있는 함수나 클래스들이 제대로 동작을 하는지 테스트하는 역할을 한다.
예를 들어 웹페이지에 "hello"문자열을 출력하는 함수가 있다고 가정하면 Jasmine은 해당 함수가 "hello"를 제대로 출력하는지 테스트하고 일치여부를 알려준다.
Jasmine 사용방법
github.com/jasmine/jasmine/releases
Releases · jasmine/jasmine
Simple JavaScript testing framework for browsers and node.js - jasmine/jasmine
github.com
위 사이트에서 가장 최신버전의 jasmine-standalone-(버전).zip 파일을 다운받아 프로젝트 폴더 안에서 압축을 풀어준다
↓ 압축을 풀어주면 다음과 같은 구조의 폴더가 생성된다.
spec 폴더와 src 폴더 안에는 기본적인 예제 파일이 들어있다. 지금을 필요하지 않기 때문에 지워준다.
먼저 src폴더 안에 HelloWorld.js 파일을 만들어주고 아래 코드를 입력한다.
helloWorld라는 함수를 실행하면 "Hello world!"라는 문자열을 출력하는 아주 간단한 함수를 만들었다.
그리고 spec 폴더 안에 HelloWorldSpec.js라는 파일을 만들고 아래 코드를 입력해준다.
- suite : 위 예제에서는 describe('Hello World')를 suite라고 부른다. 여러 개의 함수를 포함하며 이 애플리케이션의 컴포넌트이자 클래스이다. suite는 많은 수의 spec을 가질 수 있다.
- spec : 스펙은 자스민의 전역함수it를 호출하여 정의된다. 마치 문자열과 함수를 갖는 describe와 비슷한 개념이다. 먼저 jasmine의 전역함수인 it과 함께 두 개의 매개변수들로 정의된다. spec은 하나 이상의 기대치를 포함하고있다. 각각의 기대치는 참 또는 거짓의 결과값이 나오는데 spec이 통과가 되려면, 모든 기대치가 참이어야한다.
* describe와 it블록은 함수이기 때문에 테스트 실행에 필요한 실행가능한 코드를 포함할 수 있다. JS의 scoping 규정이 적용되므로, describe 안에 선언된 변수들은 suite 안에 있는 모든 it 블록에서 쓰일 수 있다.
- it : 테스트 케이스를 정의할 때 쓰이는 키워드이다.
it ( 'spec의 제목' , test case를 수행하는 함수)
- describe : 연관된 spec을 그룹으로 묶는 역할을 한다. 일반적으로 각각의 테스트파일의 가장 상위 레벨에 하나씩 가지고 있다.
describe('spec들의 집합의 제목', 함수)
- matcher: 위의 예제에서 helloWorld 함수의 결과값이 "Hello world!"와 같은지 테스트하는 부분이 있는데 이 부분을 matcher라고 한다. jasmine에는 기본으로 내장된 수많은 matcher가 있다.
- expect: 개발자가 기대하는 결과를 알려준다.
- beforeEach : 각각의 it콜백함수를 호출하기 전에 실행하는 코드이다.
마지막으로 SpecRunner.html 파일을 다음과 같이 수정해준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v3.6.0</title>
<!-- 자스민정보는 여기-->
<link rel="shortcut icon" type="image/png" href="lib/jasmine-3.6.0/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-3.6.0/jasmine.css">
<script src="lib/jasmine-3.6.0/jasmine.js"></script>
<script src="lib/jasmine-3.6.0/jasmine-html.js"></script>
<script src="lib/jasmine-3.6.0/boot.js"></script>
<!-- 소스파일(일치여부판단할 파일)은 여기... -->
<script rel="text/javacript" src="src/HelloWorld.js"></script>
<!-- 스펙파일은 여기... -->
<script rel="text/javascript" src="spec/HelloWorldSpec.js"></script>
</head>
<body>
<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
</body>
</html>첫 번째 주석을 단 구역인 자스민 정보 구역은 기본적으로 명시가 되어있었기 때문에 건들지 않았다.
두 번째 주석 구역에는 실행할 파일(일치 여부를 판단할 파일)의 js파일을 명시해준다.
세 번째 주석 구역에는 스펙파일, 즉 일치 여부를 판단하여 결과값을 내줄 파일을 명시해준다.
파일의 철자, 대소문자를 잘 확인하고 실행을 했는데,,
이런 오류가 나왔다.
SpecRunner.html 파일의 21번째 줄에 있는 코드에서 문제가 발생했다.
stackoverflow.com/questions/43276445/specreporter-is-not-a-constructor-error-on-jasmine
SpecReporter is not a constructor error on jasmine
I try to configure simple project on jasmine using node.js. I got following files: /*global jasmine */ var SpecReporter = require('jasmine-spec-reporter'); exports.config = { allScriptsTimeo...
stackoverflow.com
bcaudan/jasmine-spec-reporter
Real time console spec reporter for jasmine testing framework - bcaudan/jasmine-spec-reporter
github.com
위 두 개의 문서를 참고해서 SpecRunner.html파일을 수정했다.
require에 대해 알아본 결과 Node.js와 관련이 되어있고
require 관련 내용은 brower/client쪽에는 존재하지 않는 개념이라서 browserify를 이해해야한다고 하는데 모르겠다 진짜
↓↓↓↓↓켄님에게 질문...↓↓↓↓↓
해결해따!!!!
body태그 안에 있는 내용을 모두 지웠다.
내가 body태그 안에 작성했던 코드들은 브라우저 환경에서 쓰이는 코드가 아니라 노드환경에서 써야하는 코드였던 것 같다.
나중에 노드를 배우게 되면 다시 한 번 실행해봐야겠다.
조금 허무한 결말이지만,,, 아무튼 성공~!
↓Jasmine Reporter에 대한 정보
www.npmjs.com/package/jasmine-reporters
jasmine-reporters
Reporters for the Jasmine BDD Framework
www.npmjs.com
↓ Jasmine Document
Jasmine Documentation
FAST Low overhead, jasmine-core has no external dependencies. BATTERIES INCLUDED Comes out of the box with everything you need to test your code. NODE AND BROWSER Run your browser tests and Node.js tests with the same framework.
jasmine.github.io
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 배열(Array) (0) | 2021.03.10 |
|---|---|
| [Javascript] DOM이란? | DOM의 선택자 | DOM tree | node vs element (0) | 2021.03.09 |
| [JavaScript] 객체(Object) (0) | 2021.02.13 |
| [Javascript] 반복문(iterate, loop) (0) | 2021.02.11 |
| [JavaScript]조건문(Conditional statement) (0) | 2021.02.10 |
