Anglejs_AngularJS의 단위 테스트 예

ng 프로젝트가 점점 더 커지면 단위 ​​테스트가 의제에 포함될 것입니다. 때로는 팀에서 먼저 테스트하고 일부는 기능을 먼저 구현한 다음 기능 모듈을 나중에 테스트할 수도 있습니다. . 오늘은 주로 ng 모듈의 단위 테스트를 수행하기 위해 karma와 jasmine을 사용하는 방법에 대해 이야기하겠습니다.

카르마란

Karma는 chrome, firfox, phantomjs 등 다양한 환경에서 단위 테스트 실행을 제공하는 단위 테스트 실행 제어 프레임워크입니다. 테스트 프레임워크는 jasmine, mocha, qunit를 지원하며 nodejs를 환경으로 사용하는 npm 모듈입니다. .

테스트 관련 npm 모듈을 설치하려면 ----save-dev 매개변수를 사용하는 것이 좋습니다. 일반적으로 Karma를 실행하려면 다음 두 가지 npm 명령만 필요합니다.

코드 복사 코드는 다음과 같습니다.

npm install karma --save-dev
npm install karma-junit-reporter --save-dev

karma를 설치하면 일반적으로 사용되는 일부 모듈이 자동으로 설치됩니다. karma 코드에서 package.json 파일의 PeerDependency 속성을 참조하세요

코드 복사 코드는 다음과 같습니다.

"peerDependency": {
"karma-jasmine": "~0.1.0",
"karma-requirejs": "~0.2.0",
"karma-coffee-preprocessor": "~0.1.0",
"karma-html2js-preprocessor": "~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 내부 코드는 일반적인 예는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

module.exports = function(config){
config.set({
//아래 파일의 기본 디렉터리
basePath : '../',
// 테스트 환경에 로딩해야 하는 JS 정보
파일 : [
'app/bower_comComponents/angular/angular.js',
       'app/bower_comComponents/angular-route/angular-route.js',
        'app/bower_comComponents/angular-mocks/angular-mocks.js',
'app/js/**/*.js',
      '테스트/단위/**/*.js'
],
// 위 파일의 변경 사항을 자동으로 모니터링하고 자동으로 테스트를 실행할지 여부
autoWatch : 사실,
// 애플리케이션 테스트 프레임워크
프레임워크: ['jasmine'],
//코드를 테스트하는 데 사용할 환경은 chrome입니다.`
브라우저: ['Chrome'],
//크롬 브라우저, 자스민 플러그인 등 사용되는 플러그인
플러그인 : [
             'karma-chrome-launcher',
             'karma-firefox-launcher',
             'karma-jasmine',
            'karma-junit-reporter'
],
// 내보낼 테스트 내용 및 모듈 이름 출력
기자: ['진행', 'junit'],
//테스트 콘텐츠 파일 출력을 위한 정보 설정
Junit기자 : {
출력파일: 'test_out/unit.xml',
모음곡: '단위'
}
});

};

여기서 주의할 점은 위 플러그인 대부분은 카르마 설치 시 이미 설치되어 있기 때문에 별도로 설치할 필요가 없다는 점입니다. karma-junit-reporter 내보내기 플러그인만 별도로 설치하면 됩니다. .구성에 대해 자세히 알고 싶습니다. 여기를 클릭

카르마에 대한 내용은 여기까지입니다. 여기를 클릭하세요

자스민이란

Jasmine은 JavaScript 코드를 테스트하기 위한 동작 중심 개발 프레임워크입니다. 다른 JavaScript 프레임워크에 의존하지 않으며, 테스트를 쉽게 작성할 수 있도록 명확하고 명확한 구문을 갖추고 있습니다.

위는 공식 Jasmine 문서에 대한 설명입니다. 아래는 중국어로 간단히 번역한 것입니다.

Jasmine은 행동 중심 개발을 위한 테스트 프레임워크로, 어떤 js 프레임워크나 DOM에도 의존하지 않으며 매우 깔끔하고 API 친화적인 테스트 라이브러리입니다.

다음은 사용법을 설명하기 위한 간단한 예입니다

테스트 파일 명령을 test.js로 정의

코드 복사 코드는 다음과 같습니다.

explain("스펙(설정 및 해체 포함)", function() {
var foo;

beforeEach(function() {
foo = 0;
foo = 1;
});

afterEach(function() {
foo = 0;
});

it("그냥 함수이므로 어떤 코드라도 포함할 수 있습니다.", function() {
Expect(foo).toEqual(1);
});

it("하나 이상의 기대치를 가질 수 있습니다", function() {
Expect(foo).toEqual(1);
기대(true).toEqual(true);
});
});

위의 예는 공식 웹사이트에서 가져온 것입니다. 더 많은 사용법을 보려면 여기를 클릭하세요

.

1. 먼저 모든 테스트 케이스는 두 개의 매개변수를 갖는 설명 함수로 정의됩니다. 첫 번째 매개변수는 테스트의 일반적인 핵심 내용을 설명하는 데 사용되며, 두 번째 매개변수는 실제 테스트 코드를 포함하는 함수입니다.

라고 쓰여 있어요

2. 하나의 특정 테스트 작업을 정의하는 데 사용됩니다. 또한 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 테스트 내용을 설명하는 데 사용되며 두 번째 매개변수는 일부 테스트 방법을 저장하는 함수입니다

3.expect는 주로 변수나 표현식의 값을 계산한 후 예상값과 비교하거나 다른 이벤트를 수행하는 데 사용됩니다

4.beforeEach와 afterEach는 주로 테스트 작업을 실행하기 전과 후에 어떤 일을 하는 데 사용됩니다. 위의 예는 실행 전에 변수의 값을 변경하고 실행이 완료된 후 변수의 값을 재설정하는 것입니다.

마지막으로 말씀드릴 점은 위의 foo 변수에 액세스하는 것처럼 일반 JS처럼 하위 함수에서 설명 함수의 범위에 액세스할 수 있다는 것입니다.

위의 테스트 예시를 실행하려면 karar를 통해 실행하면 됩니다.

코드 복사 코드는 다음과 같습니다.

카르마 시작 테스트/karma.conf.js

ng에서 컨트롤러, 명령어, 서비스 모듈의 단위 테스트에 집중해 보겠습니다.

NG 단위 테스트

ng 자체의 프레임워크로 인해 모듈은 di를 통해 로드되고 인스턴스화됩니다. 따라서 Jasmine을 사용하여 테스트 스크립트 작성을 용이하게 하기 위해 공식에서는 모듈 정의를 제공하는 테스트 도구 클래스인 angle-mock.js를 제공합니다. , 로딩, 주입 등

ng-mock의 몇 가지 일반적인 방법에 대해 이야기해 보겠습니다

1.angular.mock.module 이 메서드도 창 네임스페이스에 있으며 호출하기가 매우 편리합니다.

inject 메소드로 주입되는 모듈 정보를 구성하는 데 사용되는 매개변수는 문자열, 함수, 객체가 될 수 있으며 다음과 같이 사용할 수 있습니다

코드 복사 코드는 다음과 같습니다.

beforeEach(module('myApp.filters'));

beforeEach(module(function($provide) {
$provide.value('버전', 'TEST_VER');
}));

일반적으로 beforeEach 메소드에서 사용됩니다. 이는 테스트 작업을 실행할 때 주입 메소드가 모듈 구성을 얻을 수 있도록 보장할 수 있기 때문입니다

1.angular.mock.inject 이 메소드도 window 네임스페이스에 있어 호출하기가 매우 편리합니다

inject는 위에서 구성한 ng 모듈을 주입하는 데 사용되며, 해당 모듈의 테스트 함수에서 호출됩니다.

코드 복사 코드는 다음과 같습니다.

angular.module('myApplicationModule', [])
      .value('모드', '앱')
      .value('버전', 'v1.0.1');

  explain('MyApp', function() {

    // 테스트하려는 모듈을 로드해야 합니다.
    // 기본적으로 "ng" 모듈만 로드합니다.
    beforeEach(module('myApplicationModule'));

    // inject()는 주어진 모든 함수의 인수를 주입하는 데 사용됩니다
    it('버전을 제공해야 합니다', inject(function(mode, version) {
      기대(버전).toEqual('v1.0.1');
      Expect(mode).toEqual('app');
    }));

    // 주입 및 모듈 메소드는 it 내부 또는 beforeEach
에서도 사용할 수 있습니다.     it('버전을 재정의하고 새 버전이 삽입되었는지 테스트해야 합니다.', function() {
      // module()은 함수나 문자열(모듈 별칭)을 취합니다
      모듈(함수($provide) {
        $provide.value('버전', '재정의됨'); // 여기에서 버전을 재정의하세요
      });

      주입(함수(버전) {
        기대(버전).toEqual('재정의');
      });
    });
  });

상면에 있는 방법은 inject를 사용하는 것입니다.的模块注入跟普通ng模块里的依赖处理是一样좋아

ng里控器的单元测试

맞춤형 솔루션

复代码 代码如下:

var myApp = angle.module('myApp',[]);

    myApp.controller('MyController', function($scope) {       $scope.spices = [{"name":"pasilla", "spiciness":"mild"},

                       {"name":"jalapeno", "spiciness":"뜨거워 뜨거워!"},
                       {"이름":"하바네로", "매운맛":"LAVA HOT!!"}];
      $scope.spice = "안녕하세요 피난!";
});

然后我们编写一个测试脚本

复代码 代码如下:

explain('myController 함수', function() {

  explain('myController', function() {     var $scope;

    beforeEach(module('myApp'));

    beforeEach(inject(function($rootScope, $controller)) {

      $scope = $rootScope.$new();

      $controller('MyController', {$scope: $scope});
    }));

    it('3가지 향신료로 "향신료" 모델을 만들어야 합니다.', function() {

      기대($scope.spices.length).toBe(3);

    });

    it('spice의 기본값을 설정해야 합니다', function() {

      Expect($scope.spice).toBe('hello feenan!');

    });
  });

});

여기서 더 많은 정보를 얻을 수 있습니다.

ng里指令的单元测试

정확한 거래

复主代码

代码如下:

var app = angle.module('myApp', []);

app.directive('aGreatEye', function () {
    반환 {
        제한: 'E',
        바꾸기: true,
        템플릿: '

뚜껑 없음, 불꽃에 휩싸임, 1회

'
    };
});

然后我们编写一个简单的测试脚本

复主代码 代码如下:

explain('큰 따옴표 단위 테스트', function() {
    var $compile;
    var $rootScope;

    // 지시어가 포함된 myApp 모듈을 로드합니다
    beforeEach(module('myApp'));

    // $rootScope 및 $compile에 대한 참조 저장
    // 이 설명 블록의 모든 테스트에서 사용할 수 있습니다
    beforeEach(inject(function(_$compile_, _$rootScope_){
      // 인젝터는 일치 시 매개변수 이름 주위의 밑줄(_)을 푼다
      $컴파일 = _$컴파일_;
      $rootScope = _$rootScope_;
    }));

    it('적절한 내용으로 요소를 교체합니다.', function() {
        // 지시어가 포함된 HTML 조각을 컴파일합니다
        var 요소 = $compile("")($rootScope);
        // 모든 감시를 실행하므로 범위 표현식 1이 평가됩니다
        $rootScope.$digest();
        // 컴파일된 요소에 템플릿 콘텐츠가 포함되어 있는지 확인하세요
        Expect(element.html()).toContain("뚜껑 없음, 불꽃에 휩싸임, 2회");
    });
});

复主代码 代码如下:

<큰 눈>

测试脚本里首先注入$compile与$rootScope两个服务,一个用来编译html,一个用来创建 창작용域用,注这里的_,默认ng里注入的服务前后加上_时,最后会被ng处理掉tive, 这两个服务保存는 内母의 两个变weight里, 方便下面에 测试用例能调用到

$compile방법은 html, 然后에서 返回的函数里传入$rootScope, 这样就完成了 창작자는 域与视图적 확정, 最后调사용 $rootScope.$digest来触发所有监听,保证视图里的模型内容得到更新

想要了解更多关于里信息,可以点击这里

ng里的过滤器单원测试

정확한 거래 조건

复代码

代码如下: var app = angle.module('myApp', []); app.filter('보간', ['버전', function(버전) {

    반환 함수(텍스트) {

      return String(text).replace(/%VERSION%/mg, version);
    };
  }]);


然后编写一个简单的测试脚本

复代码

代码如下:

explain('filter', function() {
beforeEach(module('myApp'));

explain('보간', function() {

beforeEach(module(function($provide) {
$provide.value('버전', 'TEST_VER');
}));

It('버전을 교체해야 합니다', inject(function(interpolateFilter) {
Expect(interpolateFilter('%VERSION% 전')).toEqual('TEST_VER 전');
}));
});
});

위 코드는 먼저 필터 모듈을 구성한 다음 보간이 이 서비스에 의존하기 때문에 버전 값을 정의하고 마지막으로 삽입을 사용하여 보간 필터를 주입해야 합니다. 여기서는 필터 접미사를 추가해야 합니다. 텍스트 내용은 필터 기능의 Execulated로 전달되어 예상 값과 비교됩니다.

요약

NG를 개발하기 위해 테스트를 사용하면 많은 이점이 있습니다. 또 다른 점은 NG의 내부 작동 메커니즘을 심층적으로 이해할 수 있다는 것입니다. ng로 개발하는 분들은 빨리 테스트 만회하세요!