使用angulartics2的单元测试组件-无法绑定到“angularticsCategory”，因为它不是“div”的已知属性

Question

我正在开始一个使用角2.0.0稳定版本创建的项目，这个版本是用Angular 1.0.0-beta.14和angulartics 1.1.9创建的。

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

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

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

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

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

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

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

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