Unit testing 带角度2的单元测试组件-Can和#x27；t绑定到'；角度散点法'；因为它不是'；t'的已知属性；分区'；

我正在使用Angular cli 1.0.0-beta.14和angulartics 1.1.9创建的Angular 2.0.0稳定版启动一个项目

我正在尝试开始一些简单的单元测试，并记录对按钮组件的点击

<div class="sidebar-toggle" (click)="toggleSideBar()" angulartics2On="click" angularticsCategory="{{ expanded ? 'expand': 'collapse' }}">
   //divContent
</div>

//divContent

然而，当我运行简单的组件引导测试时，我得到了错误

无法绑定到“angularticsCategory”，因为它不是“div”的已知属性

该应用程序运行良好，但问题只在测试中出现。我找不到有人在测试中出现相同错误的例子。我知道我遗漏了一些东西，比如没有在karma.conf中正确地公开angulartics2库，或者没有在我的测试床配置中注入Angulartics或模拟依赖项

---

真的很失落，想知道是否有人有类似的问题。如果需要，可以提供更多的代码片段，但不想转储整个文件—没有人有时间阅读

在我的情况下，要让Angulatics2单元测试正常工作，我必须：

1）将Angulartics2模块导入根app.module.ts

import { Angulartics2Module } from 'angulartics2';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { environment } from '../environments/environment';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    BrowserModule,
    Angulartics2Module.forRoot({ developerMode: !environment.production }),
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2/gst';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(
    public angulartics2GoogleGlobalSiteTag: Angulartics2GoogleGlobalSiteTag,
  ) {
    this.angulartics2GoogleGlobalSiteTag.startTracking();
  }
}

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Angulartics2, Angulartics2Module } from 'angulartics2';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        Angulartics2Module.forRoot(),
        HttpClientTestingModule,
      ],
      declarations: [
        AppComponent,
        HeaderComponent,
      ],
      providers: [
        Angulartics2,
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});

2）在app.component.ts中启用跟踪

import { Angulartics2Module } from 'angulartics2';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { environment } from '../environments/environment';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    BrowserModule,
    Angulartics2Module.forRoot({ developerMode: !environment.production }),
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2/gst';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(
    public angulartics2GoogleGlobalSiteTag: Angulartics2GoogleGlobalSiteTag,
  ) {
    this.angulartics2GoogleGlobalSiteTag.startTracking();
  }
}

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Angulartics2, Angulartics2Module } from 'angulartics2';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        Angulartics2Module.forRoot(),
        HttpClientTestingModule,
      ],
      declarations: [
        AppComponent,
        HeaderComponent,
      ],
      providers: [
        Angulartics2,
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});

3）将Angulartics2Module.forRoot（）和Angulartics2提供程序导入到app.component.spec.ts中

import { Angulartics2Module } from 'angulartics2';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { environment } from '../environments/environment';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    BrowserModule,
    Angulartics2Module.forRoot({ developerMode: !environment.production }),
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2/gst';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(
    public angulartics2GoogleGlobalSiteTag: Angulartics2GoogleGlobalSiteTag,
  ) {
    this.angulartics2GoogleGlobalSiteTag.startTracking();
  }
}

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Angulartics2, Angulartics2Module } from 'angulartics2';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        Angulartics2Module.forRoot(),
        HttpClientTestingModule,
      ],
      declarations: [
        AppComponent,
        HeaderComponent,
      ],
      providers: [
        Angulartics2,
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});

---

对于使用Angulatics2指令的任何其他component.spec.ts文件。

我从未使用过此库，但看看，有一个

Angulatics2模块

。您将其导入到您的测试床配置中了吗？谢谢，将该模块添加到测试床配置中的

imports

属性中起到了作用。谢谢你真的在使用Angular 2.0.0吗？为什么？我只是好奇：）