unit-testing - 带有 angulartics2 的单元测试组件 - 无法绑定(bind)到 'angularticsCategory'，因为它不是 'div' 的已知属性

Question

我正在使用使用 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>

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

Can't bind to 'angularticsCategory' since it isn't a known property of 'div'

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

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

Answer 1

就我而言，要让 Angulatics2 单元测试正常工作，我必须:

1) 将 Angulartics2Module 导入根 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 { }

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

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();
  }
}

3) 将 Angulartics2Module.forRoot() 和 Angulartics2 提供程序导入 app.component.spec.ts

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 文件。