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>

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

无法绑定到＆＃39; angularticsCategory＆＃39;因为它不是＆lt; div;＆＃39;
的已知属性

该应用程序工作正常，但问题只出现在测试中。我无法找到某人在测试中遇到同样错误的示例。我知道我遗漏了一些事情，比如没有在我的karma.conf中正确暴露angulartics2 lib或者没有在我的Testbed配置中注入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文件。

带有angulartics2的单元测试组件 - 无法绑定到angularticsCategory＆＃39;因为它不是“div”的已知属性。

1 个答案: