JavaScriptMVC로 시작하는 프로젝트를 완성하고 테스트 프로그램을 만드는 방법

JavaScriptMVC는 테스트에 큰 중점을 두고 있습니다. JavaScriptMVC 프레임워크는 FuncUnit 모듈을 사용하여 기능 및 단위 테스트를 보다 쉽게 ​​작성할 수 있도록 하며, 테스트는 브라우저에서 실행되거나 완전히 자동화될 수 있습니다.

레시피 모듈을 빌드하면 자동으로 테스트 코드가 생성됩니다. 다음 문서에서는 다음 5가지 작업을 수행하는 방법을 안내합니다.

1. 단위 테스트를 실행합니다.
2. 단위 테스트를 이해합니다.
3. 기능 테스트를 수행합니다.
4. 기능 테스트를 이해합니다.
5. 테스트는 좋은 기능입니다.

1. 유닛 테스트 실행

FuncUnit은 Jquery의 QUnit 도구를 사용하여 모듈과 기본 플러그인을 테스트합니다. 브라우저나 Envjs에서 이러한 테스트를 실행할 수 있습니다.

브라우저에서 단위 테스트 실행

cookbook/qunit.html을 열면 다음 그림을 볼 수 있습니다.

두 번째 방법이 어떻게 실행되는지 살펴보겠습니다. 먼저 Envjs 환경에서 테스트를 실행해 보겠습니다.

Envjs 환경에서 단위 테스트 수행

Envjs는 기본 스크립트 브라우저입니다. FuncUnit은 이 시뮬레이션 환경에서 테스트를 실행할 수 있습니다.

Window DOC 콘솔에 다음 명령을 입력하세요:
js funcunit/run envjs cookbook/qunit.html

이렇게 하면 qunit.html이 시뮬레이션된 브라우저 환경에서 실행됩니다. 다음을 입력합니다.

2. 단위 테스트 이해

FuncUnit은 QUnit 도구의 어설션을 사용하여 테스트 기능을 모듈로 결합합니다. 단위 테스트를 더 잘 이해하려면 QUnit의 도움말 문서를 읽어보세요.
cookbook/qunit.html은 스틸 모듈을 로드하고, cookbook/test/qunit/qunit.js 파일을 스틸 로드하며, 이 파일은 모든 유닛 테스트 파일을 로드합니다:
cookbook/test/qunit/cookbook_test. js
Cookbook/test/qunit/recipe_test.js

모든 스크립트가 로드되면 테스트의 어설션이 실행됩니다.

cookbook/test/qunit/recipe_test.js 파일을 열고 findAll 테스트가 어떻게 작동하는지 살펴보겠습니다.
//테스트 생성
test("findAll", function(){
//다음 테스트 실행 방지
stop(2000);

//레시피 요청
Cookbook.Models.Recipe.findAll({}, function(recipes){

//뭔가 있는지 확인
ok(recipes)

//뭔가가 있는지 확인 최소 1개의 레시피가 있어야 합니다
ok(recipes.length)

//레시피가 올바른지 확인
ok(recipes[0].name)
ok(recipes[0]. 설명)

//다음 테스트 시작 허용
start()
});
})

3. 기능 테스트 실행

기능 테스트는 시뮬레이션된 사용자 인터페이스 상호 작용으로 생성된 마우스 및 키보드 이벤트를 테스트하는 데 사용됩니다.

Chef 매뉴얼의 기능 테스트는 레시피 생성 및 목록 인터페이스의 대화형 작업을 테스트하는 것입니다.

www.2cto.com 브라우저에서 기능 테스트를 실행하세요

cookbook/funcunit.html을 열면 다음 그림을 볼 수 있습니다:

Selenium 환경에서 기능 테스트를 실행합니다.

Selenium은 브라우저를 자동으로 로드하고 이를 FuncUnit 모듈에 캡슐화할 수 있습니다.

다음 명령을 실행합니다:
js funcunitrun selenium cookbookfuncunit.html

Windows 시스템을 사용하는 경우 Firefox 및 IE 브라우저가 열립니다. 이번 테스트 결과는 다음과 같습니다.

IE에서 테스트 진행 시 Exception이 발생한다면 IE 브라우저의 설정을 수정해야 합니다. 자세한 내용은 FuncUnit 도움말 문서를 참조하세요.

4. 기능 테스트 이해

FuncUnit과 QUnit은 다른 페이지를 열 수 있습니다. 이 예에서는 cookbook/cookbook.html에서 이 페이지에는 대화형 작업이 있으며 여기에서 일부 정보를 얻습니다.

FuncUnit 모듈이 FuncUnit 플러그인을 로드하기 때문에 cookbook/funcunit.html 페이지는 qunit.html처럼 작동합니다. Jquery API와 마찬가지로 FuncUnit은 "S" 별칭을 사용하여 호출됩니다.

cookbookrecipecreatecreate_test.js 파일을 열면 다음 코드가 표시됩니다.

test("create recipe", function(){

//이름 필드에 Ice를 입력하세요.
S("[name=name]").type("Ice")

//설명 필드에 Cold Water를 입력하세요
S("[name=description]").type ( "Cold Water")

//제출 버튼 클릭
S("[type=submit]").click()

//두 번째 레시피가 존재할 때까지 대기
S('.recipe:nth-child(2)').exists()

//첫 번째 td의 텍스트를 가져옵니다
S('.recipe:nth-child(2) td :first').text(function(text){

//얼음이 있는지 확인
ok(text.match(/Ice/), "Typed Ice");
} ) ;

})

이번 테스트 케이스는 레시피를 생성하여 리스트에 추가하는 테스트임을 쉽게 알 수 있습니다.

5. 테스트는 좋은 기능입니다.

FuncUnit을 사용하면 가독성과 선형 구문에 대한 웹 테스트가 가능합니다. JavaScriptMVC는 이러한 테스트 기능을 제공하며 웹 개발에 큰 기여를 합니다.