使用RequireJS运行Karma + Jasmine测试 - 开始

救命!..._ _ _...SOS!

目前,我有一个练习项目,以满足KarmaJS和单元测试的需求.广泛的问题是,我真的没有透视Karma在幕后所做的事情,而且我似乎无法在相关领域找到足够的文件.没有进一步延迟......

这是我的文件夹结构:

root
    |-/lib
        |-/[dependencies] (/angular, /angular-mocks, /bootstrap, /etc)  # from bower
    |-/src                                                              
        |-/[unreferenced directories] (/js, /css, /views)               # not referenced anywhere
        |-app.js                                                        # sets up angular.module('app', ...)
        |-globals.js                                                    # may be referenced in RequireJS main file; not used.
        |-index.html                                                    # loads bootstrap.css and RequireJS main file
        |-main.js                                                       # .config + require(['app', 'etc'])
        |-routeMap.js                                                   # sets up a single route
        |-test-file.js                                                  # *** simple define(function(){ return {...}; })
    |-/test
        |-/spec …

我们正在运行测试使用karma和phantomjs 上周,我们的测试神秘地开始崩溃phantomJS,错误为-1073741819.

基于此线程,Chutzpah似乎代码表明PhantomJS的本机内存故障.

经过进一步调查,我们一直看到幻像在750MB左右的内存中崩溃.

有没有办法配置Karma,以便它不会遇到这个限制？或者告诉它冲洗幽灵的方法？

到目前为止,我们只进行了大约1200次测试 我们大约是项目的1/4,因此5000个UI测试似乎不可能.

我使用John papa angular style guide我的控制器看起来像:

遵循风格约翰爸爸风格控制器风格指南:

function testController() {

    var vm = this;

    vm.model = { name: "controllerAs vm test" };
}

我的测试代码如下:

describe('Controller: testController', function () {

    beforeEach(module('myApp'));

    var testController;

    beforeEach(inject(function ($controller) {
        scope = {};

        testController = $controller('testController', {
        });

    }));

    it('should have vm.model defined and testController.vm.model is equal to controllerAs vm test', function () { 
        expect(testController.vm).toBeDefined();  
        expect(testController.vm.model).toBeDefined();     
        expect(testController.vm.model.name).toEqual("controllerAs vm test");
    });
});

结果:

测试失败:结果消息:预期未定义要定义.在堆栈

所以我的问题是我们如何测试vm.model和其他变量呢？我没有在指南中找到适当的指导线:控制器

我有一个简单的AngularJs应用程序设置,看起来有点像这样:

client
    vendor
        angular
        bootstrap
        jquery
        ...
    app.module.js
    app.controller.js
    ...
node_modules
    angular-mocks
    ...

我正在设置一个karma.conf.js文件,我想要包含angular\angular.js来自vendor.我不想包含任何其他内容vendor.

以下是我在相关karma.conf.js部分的内容:

files: [
    'client/vendor/angular/angular.js',
    'client/**/*.js',
    'client/**/*.spec.js'
],
exclude: [
    'client/vendor/**/*.js'
],

我遇到的问题很简单:我angular.js明确地包括在内files,但它在exclude部分模式中被排除在外.

我怎样才能排除client/vendor除angular/angular.js(以后可能是其他人)以外的所有内容？该client目录包含许多文件,子文件夹等,其中包含我自己的.js文件,因此仅将我想要包含的所有内容移动到自己的文件夹中并不容易.

取消评论最后一个规格.一切都崩溃了......为什么？

describe('test', function() {
  var index = 1;

  it('test 1', function() {
    expect(index).toBe(1);
    index++;
  });

  it('test 2', function() {
    expect(index).toBe(2);
    index++;
  });

  it('test 3', function() {
    expect(index).toBe(3);
    index++;
  });

  it('test 4', function() {
    expect(index).toBe(4);
    index++;
  });

  it('test 5', function() {
    expect(index).toBe(5);
    index++;
  });

  it('test 6', function() {
    expect(index).toBe(6);
    index++;
  });

  it('test 7', function() {
    expect(index).toBe(7);
    index++;
  });

  it('test 8', function() {
    expect(index).toBe(8);
    index++;
  });

  it('test 9', function() {
    expect(index).toBe(9);
    index++;
  });

  it('test 10', function() {
    expect(index).toBe(10);
    index++;
  });

  // it('test …

我有一个角度CLI项目设置.我做了一个使用角度材料组件的表格,比如<md-card>.

我刚刚开始编写我的第一个Karma/Jasmine单元测试,遵循angular docs中的步骤.

这是我的组件模板:

<md-card [ngClass]="'dialog-card'">
<md-card-title [ngClass]="'dialog-title'">
    {{title}}
</md-card-title>
<md-card-content>

    <form (ngSubmit)="login()" #loginForm="ngForm">

        <md-input-container class="md-block">
            <input md-input [(ngModel)]="user.email" 
                name="userEmail" type="email" placeholder="Email" 
                ngControl="userEmail" 
            required>
        </md-input-container>
        <br>

        <md-input-container class="md-block">
            <input md-input [(ngModel)]="user.password" 
                name="userPassword" type="password" placeholder="Password" 
                ngControl="userPassword" 
            required>
        </md-input-container>
        <br>

        <tm-message msgText="Wrong username or password" *ngIf="showError"></tm-message>
        <br>


        <button md-button type="submit" [disabled]="!loginForm.form.valid">Login</button>

        <p (click)="openForgotPasswordModal()">Forgot Password?</p>

    </form>

</md-card-content>

这是我的业力规范:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { …

在最近发布的webpack 1.14.0/karma 1.4.0/karma-webpack 2.2.0之后,当karma开始其webpack构建时,我现在看到了很多这些消息.

webpack: wait until bundle finished:

有时我看到多达6-8个,他们似乎正在使构建更长.例如,这个:

Hash: 255562a2a96fffe34fae
Version: webpack 1.14.0
Time: 408ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
ts-loader: Using typescript@2.1.5 and C:\git\project\tsconfig.json

到目前为止,它还没有阻止我的构建,但至少它似乎现在已经锁定,即使是暂时的.其他人看到这个？如果它是我的结果,我想要清理它,但正如我所说,我的配置文件没有改变,但现在已经出现了最近发布的karma/webpack系列产品过去3周.

我的问题是:

1. 这条消息是什么意思？
2. 如何解决创建它们的问题？

我的API调用使用JWT进行身份验证.我正在尝试为服务方法编写代码.所有请求都有这个拦截器:

public interceptBefore(request: InterceptedRequest): InterceptedRequest {
        // Do whatever with request: get info or edit it
        this.slimLoadingBarService.start();
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser && currentUser.data.token) {
            request.options.headers.append('Authorization', 'Bearer ' + currentUser.data.token);
        }
        return request;
    }

我想测试的服务方法:

getAll(page: number, pageSize: number, company: string): Observable<any> {
        return this.http.get(`${this.conf.apiUrl}/jobs`)
            .map((response: Response) => response.json());
    }

开始代码:

import { MockBackend, MockConnection } from '@angular/http/testing';
import { Http, BaseRequestOptions, Response, ResponseOptions, RequestMethod } from '@angular/http';
import { JobListService } from './job-list.service';
import { inject, TestBed } …

我有一个获得3个参数的函数.我想检查一下这个函数没有抛出错误.我做了这样的事情:

expect(myFunc).not.toThrow();

问题是myFunc需要争论.我该如何发送论据？

PS我试图传递它的参数,但我得到的错误myFunc(arg1, arg2, arg3)不是函数.

上下文

我有一个组件.在其中,ngOnInit函数调用组件的另一个函数来检索用户List.我想制作两个系列的小说:

• 首先测试ngOnInit是否正确触发并填充用户列表
• 我想第二次测试我的刷新函数,它也调用getUserList()

第一个测试,使用ngOnInit触发器,当我调用fixture.detectChanges()时可以正常工作.

问题

我的问题是在测试刷新功能时:只要我调用fixture.detectChanges(),就会触发ngOnInit,然后我无法知道结果的来源以及我的refresh()函数是否会被正确测试.

在我对refresh()方法进行第二系列测试之前,有没有办法"删除"或"阻止" ngOnInit() 所以它没有被调用fixture.detectChanges()？

我试着看,overrideComponent但它似乎不允许删除ngOnInit().

或者除了fixture.detectChanges在我的情况下使用之外,有没有办法检测更改？

码

这是组件,存根服务和我的spec文件的代码.

零件

import { Component, OnInit, ViewContainerRef } from '@angular/core';

import { UserManagementService } from '../../shared/services/global.api';
import { UserListItemComponent } from './user-list-item.component';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  public userList = [];

  constructor(
    private _userManagementService: UserManagementService,    
  ) { }

  ngOnInit() {
    this.getUserList();
  }

  onRefreshUserList() {
    this.getUserList();
  }

  getUserList(notifyWhenComplete = false) { …