Question

我正在启动一个Angular 4项目，我已使用ng new [myProjectName]完成了该项目并使用ng g c [componentName]生成了组件。基本上，我让Angular命令行框架为我处理核心必需品（例如生成spec ts文件，向app.module.ts添加组件）。几个月前我已经在我的机器上安装并运行了Selenium（我正在接受SDET培训，在此期间我学习了Angular，Selenium WebDriver，Protractor等等）。

当我在项目的根文件夹中说ng test时，一切都很好。但是，当我开始将Selenium代码放入我的组件的spec ts文件中时，地狱就会崩溃。

我在我的banner.component.html中添加了一些商业代码：

<nav>
    <button id="menuButton" (click)="toggleMenuVisible()">
        <div id="menuBars">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </button>
    <a id="pageTitle" routerLink="/home">Open Source Roads</a>
</nav>
<!-- NOTE: <menu> here corresponds to MenuComponent, not the HTML5 menu tag -->
<menu *ngIf="menuVisible"></menu>

在banner.component.ts中添加了一些业务逻辑：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit {

  public menuVisible = false;

  constructor() { }

  ngOnInit() {
  }

  public toggleMenuVisible() { 
    this.menuVisible = !this.menuVisible;
  }

}

然后在banner.component.spec.ts：

中放入一些虚拟的Selenium代码

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BannerComponent } from './banner.component';
import { element, by } from 'protractor';

describe('BannerComponent', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BannerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should toggle menu on/off when menu button is clicked', () => { 
    // reset component's menuVisible to false
    component.menuVisible = false;
    // click the menuButton
    expect(element(by.id('menuButton'))).toBeTruthy() // this is causing a slew of errors on the console. WHY.jpeg
  })
});

在此之后运行ng test会生成可怕的红色文本屏幕，然后在浏览器中尝试启动Karma 2次失败。

如何解决这个问题，以便我可以回到测试驱动开发？

Answer 1

如果您在某个测试中有"import 'jasmine'"，请尝试删除它或将其添加到karma.conf.js：

webpack: { node: { tls: 'empty', } }

希望有所帮助。

<强>更新

另一个解决方案是安装json-loader，以便webpack可以处理*.json个文件。然后将加载器和新节点对象添加到webpack.config.js，如下所示：

$ npm install --save-dev json-loader

<强> webpack.config.js

var path = require('path');

module.exports = {
  entry: 'index',
  output: {
    path: path.join(__dirname, 'scripts'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.json$/, loader: 'json-loader' }
    ]
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js']
  },
  node: {
    console: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

Answer 2

为什么不应该将Protractor与TestBed一起使用

运行ng test时，您正在运行TestBed样式测试，而不是Protractor。将Protractor导入单元样式测试时，这些当前不能同时工作。

而不是调用element(by.id(...)).click()考虑使用你可以从灯具中获得的nativeElement。调用click方法后，可以检查组件中设置的变量。接下来，您将致电detectChanges并查看视图。

代码段

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BannerComponent } from './banner.component';

describe('BannerComponent', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BannerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should toggle menu on/off when menu button is clicked', () => { 
    // reset component's menuVisible to false
    component.menuVisible = false;

    // click the menuButton
    let menuButton = fixture.debugElement.nativeElement
        .querySelector('[id="menuButton"]');
    menuButton.click();
    // after the click we could check to see if the component class
    // has variables changed because of the click.
    expect(component.menuVisible).toBeTruthy();

    fixture.detectChanges();
    // we could now detect changes in the view
  })
});

使用nativeElement

进行测试的另一个示例

以下是这方面的一个例子：

在检测到更改之前检查组件变量是否已更改。请参阅https://github.com/angular-seattle/protractor-new-hope/blob/master/src/app/tractor-control/tractor-control.component.spec.ts#L36
检测到更改后检查组件视图是否已更改。请参阅https://github.com/angular-seattle/protractor-new-hope/blob/master/src/app/tractor-control/tractor-control.component.spec.ts#L43

或者，您可以调用detectChanges并对组件变量和视图运行两个检查。

运行包含Selenium代码的测试时，量角器意外的控制台错误

2 个答案:

为什么不应该将Protractor与TestBed一起使用

代码段

使用nativeElement