NG 프로젝트가 커지고 커지면 단위 테스트를 의제에 넣어야합니다. 때로는 팀이 먼저 테스트를 받고 일부는 기능을 먼저 구현 한 다음 기능 모듈을 테스트합니다. 이것은 고유 한 장점과 단점이 있습니다. 오늘날 우리는 주로 Karma와 Jasmine을 사용하여 NG 모듈의 단위 테스트를 수행하는 것에 대해 이야기합니다.
카르마는 무엇입니까?
Karma는 Chrome, Firfox, Phantomjs 등과 같은 다양한 환경에서 실행되는 단위 테스트를 제공하는 단위 테스트 실행 제어 프레임 워크입니다. 테스트 프레임 워크는 Jasmine, Mocha, Qunit 및 Nodejs가 환경으로 NPM 모듈을 지원합니다.
관련 NPM 모듈을 설치하고 테스트 할 때 ---- Save-DEV 매개 변수를 사용하는 것이 좋습니다. 이는 개발과 관련이 있기 때문입니다. 일반적으로 카르마를 실행하는 경우 다음 두 NPM 명령 만 필요합니다.
코드 사본은 다음과 같습니다.
npm karma-save-dev
NPM Karma-Junit-Reporter--save-dev를 설치하십시오
카르마를 설치할 때 일반적으로 사용되는 일부 모듈이 자동으로 설치됩니다. karma 코드의 package.json 파일의 PeerDependencies 속성을 참조하십시오.
코드 사본은 다음과 같습니다.
"Peerdependencies": {
"Karma-Jasmine": "~ 0.1.0",
"Karma-Requirejs": "~ 0.2.0",
"Karma-Coffee-Proprocessor": "~ 0.1.0",
"Karma-HTML2JS-Proprocessor": "~ 0.1.0",
"Karma-Chrome-Launcher": "~ 0.1.0",
"Karma-Firefox-Launcher": "~ 0.1.0",
"Karma-Phantomjs-Launcher": "~ 0.1.0",
"Karma-Script-Launcher": "~ 0.1.0"
}
그런 다음 일반적인 실행 프레임 워크에는 일반적으로 구성 파일이 필요합니다. 카르마에서는 karma.conf.js 일 수 있습니다. 내부의 코드는 Nodejs 스타일입니다. 일반적인 예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
module.exports = function (config) {
config.set ({
// 다음 파일의 기본 디렉토리
Basepath : '../',
// 테스트 환경에서로드 해야하는 JS 정보
파일 : [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/js/**/*. js',
'테스트/단위/**/*. js'
],,
// 위 파일의 변경 사항을 자동으로 듣는지 여부는 자동으로 테스트를 실행합니다.
Autowatch : 사실,
// 응용 프로그램 테스트 프레임 워크
프레임 워크 : [ 'Jasmine'],
// 코드를 테스트하는 데 어떤 환경을 사용할 수 있습니까? 여기 Chrome '가 있습니다
브라우저 : [ 'Chrome'],
// Chrome 브라우저 및 Jasmine 플러그인과 같은 플러그인
플러그인 : [
'Karma-Chrome-Launcher',
'Karma-Firefox-Launcher',
'카르마-자스민',
'Karma-Junit-Reporter'
],,
// 테스트 컨텐츠의 출력 및 내보내기에 사용되는 모듈 이름
기자 : [ 'Progress', 'Junit'],
// 출력 테스트 내용 파일의 정보 설정
Junitreporter : {
outputFile : 'test_out/init.xml',
Suite : 'Unit'
}
});
};
이에주의를 기울여야 할 때 위의 플러그인의 대부분은 카르마를 설치할 때 설치되었으므로 별도로 설치할 필요가 없습니다. 카르마 주니트 리포터 내보험자 수출 플러그인 만 별도로 설치해야합니다. 구성 파일에 대한 자세한 내용을 보려면 여기를 클릭하십시오.
그게 카르마에 관한 것입니다. 그것에 대해 더 알고 싶다면 여기를 클릭하십시오.
재스민이란 무엇입니까?
Jasmine은 JavaScript 코드를 테스트하기위한 행동 중심 개발 프레임 워크입니다. 다른 JavaScript 프레임 워크에 의존하지 않습니다. DOM이 필요하지 않습니다. 그리고 깨끗하고 명백한 구문이있어 쉽게 테스트를 작성할 수 있습니다.
위의 것은 Jasmine의 공식 문서에서 그것에 대한 설명이며, 다음은 중국어의 간단한 번역입니다.
Jasmine은 JS 프레임 워크 및 DOM에 의존하지 않는 행동 중심 테스트 프레임 워크입니다. 매우 깨끗하고 친근한 API 테스트 라이브러리입니다.
다음은 사용법을 설명하는 간단한 예입니다
테스트 파일 명령을 test.js로 정의하십시오
코드 사본은 다음과 같습니다.
설명 ( "사양 (설정 및 찢어짐 포함)", function () {
var foo;
이전에 (function () {
foo = 0;
foo += 1;
});
후 (function) {
foo = 0;
});
It ( "단지 함수이므로 모든 코드를 포함 할 수 있습니다", function () {
기대 (foo).
});
it ( "둘 이상의 기대를 가질 수 있습니다", function () {
기대 (foo).
기대 (true) .toequal (true);
});
});
위의 예는 공식 웹 사이트에서 나옵니다. 다음은 몇 가지 중요한 API 만 있습니다. 더 많은 사용을 보려면 여기를 클릭하십시오
1. 첫째, 모든 테스트 사례는 설명 함수에 의해 정의됩니다. 두 개의 매개 변수가 있습니다. 첫 번째는 테스트의 전체 중앙 내용을 설명하는 데 사용되며 두 번째 매개 변수는 일부 실제 테스트 코드를 작성하는 함수입니다.
2. 단일 특정 테스트 작업을 정의하는 데 사용되며 두 가지 매개 변수도 있습니다. 첫 번째는 테스트 내용을 설명하는 데 사용되며 두 번째 매개 변수는 일부 테스트 방법을 저장하는 함수입니다.
3. 기대는 주로 변수 또는 표현식의 값을 계산 한 다음 예상 값과 비교하거나 다른 이벤트를 수행하는 데 사용됩니다.
4. Beforeeach와 Aftereach는 주로 테스트 작업이 실행되기 전후에 몇 가지 작업을 수행하는 데 사용됩니다. 위의 예는 실행 전에 변수 값을 변경 한 다음 실행이 완료된 후 변수 값을 재설정하는 것입니다.
마지막으로, 설명 함수의 범위는 위의 하위 값에서 액세스 할 수 있습니다.
위의 테스트 예제를 실행하려면 Karar를 통해 실행할 수 있습니다. 명령 예제는 다음과 같습니다.
코드 사본은 다음과 같습니다.
karma start test/karma.conf.js
다음으로 NG의 컨트롤러, 지침 및 서비스 모듈의 단위 테스트에 중점을 둘 것입니다.
Ng에 대한 단위 테스트
NG 자체의 프레임 워크로 인해 모듈이 DI를 통해로드되고 인스턴스화되므로 Jasmine으로 테스트 스크립트의 쓰기를 용이하게하기 위해 공무원은 Angular-Mock.js 테스트 도구 클래스를 제공하여 모듈 정의,로드, 주입 등을 제공합니다.
NG-Mock의 몇 가지 일반적인 방법에 대해 이야기 해 봅시다
1.angular.mock.Module이 메소드는 창 네임 스페이스에도 호출하기에 매우 편리합니다.
모듈은 인젝트 메소드에 의해 주입 된 모듈 정보를 구성하는 데 사용됩니다. 매개 변수는 문자열, 함수 및 객체 일 수 있습니다. 다음과 같이 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
이전에 (모듈 ( 'myapp.filters'));
이전에 (module (function ($ prude)
$ provery.value ( '버전', 'test_ver');
});
이는 일반적으로 Prevereach 메소드에서 사용됩니다. 이렇게하면 인젝트 방법이 테스트 작업을 실행할 때 모듈 구성을 얻을 수 있기 때문입니다.
1.angular.mock.inject이 메소드는 창 네임 스페이스에 있으며 호출하기에 매우 편리합니다.
인젝트는 위에서 구성된 NG 모듈을 주입하는 데 사용됩니다. 그것의 테스트 기능에서 호출됩니다. 일반적인 호출 예제는 다음과 같습니다.
코드 사본은 다음과 같습니다.
Angular.Module ( 'myApplicationModule', [])
.Value ( 'mode', 'app')
.Value ( '버전', 'v1.0.1');
설명 ( 'myapp', function () {
// 테스트하려는 모듈을로드해야합니다.
// 기본적으로 "NG"모듈 만로드합니다.
Prevereach (module ( 'myApplicationModule'));
// inject ()는 주어진 모든 함수의 인수를 주입하는 데 사용됩니다.
It ( '버전을 제공해야합니다', Inject (function (mode, version) {
expling (version) .toequal ( 'V1.0.1');
예상 (모드).
});
// 인젝션 및 모듈 메소드는 IT 내부 또는 이전에 사용될 수 있습니다.
( '버전을 재정의하고 새 버전을 테스트해야한다', function () {
// module ()는 함수 또는 문자열을 가져옵니다 (모듈 별칭)
모듈 (function ($ prude) {
$ provery.value ( '버전', '재정의'); // 여기에서 버전을 재정의합니다
});
주입 (함수 (버전) {
expling (version).
});
});
});
위의 내용은 공무원이 제공 한 몇 가지 주사 예이며 코드는 이해하기 쉽습니다. 실제로 인젝트는 Angular.inject 메소드를 사용하여 생성 된 내장 의존성 주입 인스턴스입니다. 그런 다음 모듈 주입은 일반 NG 모듈의 종속성 처리와 동일합니다.
NG 몰을 간단히 소개 한 후 컨트롤러, 지침 및 필터를 사용하여 간단한 단위 테스트를 작성합니다.
컨트롤러의 단위 테스트
간단한 컨트롤러를 정의하십시오
코드 사본은 다음과 같습니다.
var myapp = angular.module ( 'myapp', []);
myapp.controller ( 'myController', function ($ scope) {
$ scope.spices = [{ "name": "pasilla", "spiciness": "mild"},
{ "이름": "Jalapeno", "Spiciness": "Hot Hot!"},
{ "이름": "Habanero", "Spiciness": "Lava Hot !!"}];
$ scope.spice = "Hello Feenan!";
});
그런 다음 테스트 스크립트를 작성합니다
코드 사본은 다음과 같습니다.
설명 ( 'myController function', function () {
설명 ( 'myController', function () {
var $ 범위;
이전에 (모듈 ( 'myapp'));
이전 (Inject) (함수 ($ rootscope, $ 컨트롤러) {
$ SCOPE = $ ROTSCOPE. $ new ();
$ 컨트롤러 ( 'myController', {$ scope : $ scope});
});
IT ( '향신료를 가진'향신료”모델을 만들어야한다 ', function () {
기대 ($ scope.spices.length) .tobe (3);
});
( '향신료의 기본값을 설정해야합니다', function () {
기대 ($ scope.spice) .tobe ( 'Hello Feedback!');
});
});
});
위의 내용은 $ RootScope를 사용하여 서브 스코프를 생성 한 다음이 매개 변수를 컨트롤러의 구성 방법 $ 컨트롤러로 전달합니다. 마지막으로 위의 방법이 실행됩니다. 그런 다음 서브 스코프의 배열 수와 문자열 변수가 예상 값과 같은지 여부를 확인합니다.
NG의 컨트롤러에 대해 더 알고 싶다면 여기를 클릭하십시오.
Ng의 지침의 단위 테스트
간단한 지시를 정의하십시오
코드 사본은 다음과 같습니다.
var app = angular.module ( 'myapp', []);
app.directive ( 'agreateye', function () {
반품 {
제한 : 'e',
교체 : true,
템플릿 : '<h1> lidless, 불꽃에서 잃어버린 1 회 </h1>'
};
});
그런 다음 간단한 테스트 스크립트를 작성합니다
코드 사본은 다음과 같습니다.
설명 ( '단위 테스트 큰 따옴표', function () {
var $ compile;
var $ rootscope;
// 지침이 포함 된 MyApp 모듈을로드하십시오
이전에 (모듈 ( 'myapp'));
// $ ROTSCOPE 및 $ COMPILE에 대한 참조를 저장합니다
//이 설명 블록의 모든 테스트에서 사용할 수 있습니다.
exeach (inject (_ $ compile_, _ $ rootscope _) {
// 인젝터는 일치시 매개 변수 이름 주위에서 밑줄 (_)을 풀립니다.
$ compile = _ $ compile_;
$ rootscope = _ $ rootscope_;
});
IT ( '요소를 적절한 내용으로 대체', function () {
// 지침을 포함하는 HTML 조각을 컴파일합니다
var element = $ compile ( "<a-great-eye> </a-great-eye>") ($ rootscope);
// 모든 시계를 발사하므로 스코프 표현식 1이 평가됩니다.
$ rootscope. $ digest ();
// 컴파일 된 요소에 템플릿 컨텐츠가 포함되어 있는지 확인합니다.
expling (element.html ()). tocontain ( "뚜껑이없고 불꽃에서 손실, 2 번");
});
});
위의 예는 공식 예제에서 나오며 위 명령은 HTML에서 사용됩니다.
코드 사본은 다음과 같습니다.
<a-great-eye> </a-great-eye>
테스트 스크립트는 먼저 두 개의 서비스 $ Compile과 $ Rootscope를 주입합니다. 하나는 HTML을 컴파일하고 다른 하나는 범위를 만드는 데 사용됩니다. _는 여기에 사용됩니다. NG에 주입 된 서비스가 전후에 추가되면 NG에 의해 처리됩니다. 이 두 서비스는 두 가지 내부 변수에 저장되므로 다음 테스트 사례를 호출 할 수 있습니다.
$ compile 메소드는 원래 명령어 HTML로 전달 된 다음 반환 된 함수가 $ rootscope로 전달되어 범위와 뷰의 바인딩을 완료합니다. 마지막으로 $ rootscope를 호출하십시오. $ 다이제스트 모든 청취를 트리거하여보기의 모델 컨텐츠가 업데이트되도록합니다.
그런 다음 현재 명령어의 해당 요소의 HTML 컨텐츠를 가져 와서 예상 값과 비교하십시오.
NG의 지침에 대해 더 알고 싶다면 여기를 클릭하십시오.
Ng의 필터 단위 테스트
간단한 필터를 정의하십시오
코드 사본은 다음과 같습니다.
var app = angular.module ( 'myapp', []);
app.filter ( 'interpolate', [ 'version', function (version) {
반환 함수 (텍스트) {
return string (text) .replace (//%버전/%/mg, 버전);
};
}]);
그런 다음 간단한 테스트 스크립트를 작성하십시오
코드 사본은 다음과 같습니다.
설명 ( '필터', function () {
이전에 (모듈 ( 'myapp'));
설명 ( 'interpolate', function () {
이전에 (module (function ($ prude)
$ provery.value ( '버전', 'test_ver');
});
it ( '버전을 대체해야합니다', Inject (function (interpolateFilter) {
expling (interpolateFilter ( ' % 이전 버전 %')). TOEQUAL ( 'Test_ver 이전');
});
});
});
위의 코드는 먼저 필터 모듈을 구성한 다음 버전 값을 정의합니다. 보간물은이 서비스에 의존하기 때문에 마지막으로 보간 필터를 주입합니다. 여기의 필터는 필터 접미사 뒤에 있어야하며 마지막으로 텍스트 내용의 필터 기능으로 전달하여 실행하고 예상 값과 비교합니다.
요약
테스트를 사용하여 NG를 개발하는 데 많은 이점이있어 모듈의 안정성을 보장 할 수 있습니다. 또 다른 것은 NG의 내부 운영 메커니즘을 심도있게 이해할 수 있다는 것입니다. 따라서 NG를 사용하여 개발하는 학생들은 가능한 한 빨리 테스트를 작성해야합니다!