标签: karma-jasmine

我是Angular测试的新手,发现很难理解如何对我的控制器进样进行简单的测试,得到错误:

Error: [$injector:unpr] Unknown provider: localStorageServiceProvider <- localStorageService

控制器:

angular.module('myApp.home', [])
.controller('HomeCtrl', ['$scope','localStorageService',function($scope,localStorageService) {
// ...
}]);

测试:

describe('myApp.home module', function() {
    var $scope;
    var localStorageService;

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

    describe('home controller', function(){

      it('should ....', inject(function($controller,_$rootScope_,_localStorageService_) {
        $scope = _$rootScope_.$new();
        localStorageService = _localStorageService_;

        var headerCtrl = $controller('HomeCtrl',{"$scope" : $scope, "localStorageService" : localStorageService});
        expect(headerCtrl).toBeDefined();
      }));

    });
});

在我的karma.conf.js引用中:

files : [
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-route/angular-route.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/angular-local-storage/dist/angular-local-storage.js',
      'app/js/controllers/*.js'
    ]

我正在为Angular2中的服务构建一些单元测试.

在我的服务中,我有以下代码:

var hash: string; hash = this.window.location.hash;

但是,当我运行包含此代码的测试时,它将失败.

利用Window的所有功能会很棒,但是当我使用PhantomJs时,我认为这不可行(我也尝试过使用Chrome产生相同结果的功能).

在AngularJs中,我会使用模拟$ Window(或者至少是有问题的属性),但由于Angular2单元测试没有很多文档,我不知道如何做到这一点.

有人可以帮忙吗？

我看到这篇帖子后很兴奋地尝试了,但我无法让它发挥作用.试图保持这个简单只是为了弄清楚什么是错的,但即使这样也是失败的.

export class SomeService {
...
private _myValue: Boolean = false;
get myValue(): Boolean {
    return this._myValue;
}
set myValue(helper: Boolean) {
    this._myValue = helper;
}

在我的单元测试中,我有:

 it('should ', inject([SomeService], (someService: SomeService) => {         
    let oldValue = someService.myValue;    
    expect(oldValue).toBe(false); // passes, clearly we can use our getter
    someService.myValue = true;    
    expect(someService.myValue).toBe(true); // passed, clearly the setter worked

    spyOnProperty(someService, 'myValue', 'getter').and.returnValue(false); // Property myValue does not have access type getter

    //spyOnProperty(someService, 'myValue', 'get').and.returnValue(false);same error if tried this way

    expect(someService.myValue).toBe(false); …

有什么命令可以让karma-jasmine单元测试在遇到第一次测试失败时停止测试.例如,在python中,命令如下:

py.test -x             # stop after first failure
py.test --maxfail=2    # stop after two failures

目前我正在使用node_modules/karma/bin/karma start它运行所有测试并且只在执行完所有操作后停止

我有以下控制器ViewMeetingCtrl.js

(function () {
    'use strict';
    angular.module('MyApp').controller('ViewMeetingCtrl', ViewMeetingCtrl);

    ViewMeetingCtrl.$inject = ['$scope', '$state', '$http', '$translate', 'notificationService', 'meetingService', '$modal', 'meeting', 'attachmentService'];

    function ViewMeetingCtrl($scope, $state, $http, $translate, notificationService, meetingService, $modal, meeting, attachmentService) {
        $scope.meeting = meeting; 

        $scope.cancelMeeting = cancelMeeting;

        function cancelMeeting(meetingId, companyId) {
            meetingService.sendCancelNotices(companyId, meetingId)
                .success(function () {
                    $state.go('company.view');
                });
        }      
    }
})();

我能够成功地调用spyOn for cancelMeeting(),但不能调用sendCancelNotices方法.我想要做的是,我想测试,只要cancelMeeting()被调用,它调用sendCancelNotices()方法.我知道我应该使用createSpy方法来执行此操作.但我不知道该怎么做.

下面是测试用例ViewMeetingCtrlSpec.js

describe('ViewMeetingCtrl CreateSpy --> Spying --> cancelMeeting', function () {
        var $rootScope, scope, $controller , $q  ;


        var sendCancelNoticesSpy …

我正在尝试使用AngularFire 2 auth为示例Angular 2应用程序设置单元测试,该组件非常简单:

import { Component } from '@angular/core';
import { AngularFire, AuthProviders } from 'angularfire2';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  isLoggedIn: boolean;

  constructor(public af: AngularFire) {
    this.af.auth.subscribe(auth => {
      if (auth) {
        this.isLoggedIn = true;
      } else {
        this.isLoggedIn = false;
      }
    });
  }

  loginWithFacebook() {
    this.af.auth.login({
      provider: AuthProviders.Facebook
    });
  }

  logout() {
    this.af.auth.logout();
  }
}

我做的是周围包裹login,并logout在AngularFire方法,所以我想使用一个模拟检查,如果这些方法被称为,但我不知道从哪里开始,我试图做我的spec文件如下:

import { provide } from '@angular/core';
import { …

我正在为Angular 2项目使用Angular-CLI(webpack版本),我也需要使用jQuery(遗憾的是.在我的情况下,它是Semantic-UI的依赖,我用它来处理菜单下拉菜单).

我使用它的方式:

npm install jquery --save

然后列在数组中的angular-cli.json文件中scripts:

scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
]

所以它被包含在bundle文件中,这个文件自动用于root html文件:

<script type="text/javascript" src="scripts.bundle.js">

然后declare var $: any;在我需要它的文件中,它运行良好.

但是ng test测试存在问题,因为Karma会抛出错误$ is not defined.

我有一个规范代码来测试这样

 it('login test', () => {

      const fixture = TestBed.createComponent(component);
      fixture.detectChanges();
      let authService = fixture.debugElement.injector.get(Auth);
      spyOn(authService, 'login').and.returnValue('');

      const elements = fixture.nativeElement;
      fixture.componentInstance.login();
      expect(authService.login).toHaveBeenCalled();
    });

和这样的实现代码

login() {

    this.auth.login(this.username, this.password).subscribe(() => {

      }
    });
  }

它给出了错误:

this.auth.login(...).subscribe不是一个函数

为什么会发生这种错误？

我一直无法使用webpack 4运行我的测试茉莉花测试套件.升级webpack后,几乎每个测试都会出现以下错误:

Error: <spyOn> : getField is not declared writable or has no setter 

这是由于我们用于为简单函数创建spys的常见模式是:

import * as mod from 'my/module';
//...
const funcSpy = spyOn(mod, 'myFunc');

我玩过,module.rules[].type但没有一个选项似乎可以做到这一点.

这个webpack GH问题表明ECMA模块是不可写的,对网络有意义,但实际上没有测试的解决方法吗？

相关包版本:

"jasmine-core": "2.6.4",
"typescript": "2.5.3",
"webpack": "4.1.1",
"webpack-cli": "^2.0.12",
"karma": "^0.13.22",
"karma-jasmine": "^1.1.0",
"karma-webpack": "^2.0.13",

我有一个Angular 6应用程序,并编写一些单元测试,试图确定一个元素是否可见,仅仅基于*ngIf指令的布尔结果.

标记:

<div class="header" *ngIf="show">
    <div>...</div>
</div>

规范文件:

it('should hide contents if show is false', () => {
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    expect(debugElement.query(By.css('.header')).nativeElement.style.hidden).toBe(true);
});

我似乎无法hidden从div中获取属性.angular是否使用另一种方法使用*ngIf指令从DOM中隐藏元素？我需要从另一个房产nativeElement？

谢谢!