Unit testing component with angulartics2 - Can't bind to 'angularticsCategory' since it isn't a known property of 'div' - unit-testing

Question

I am starting a project using Angular 2.0.0 stable release created with angular-cli 1.0.0-beta.14 and angulartics 1.1.9.
I am trying to start some simple unit testing and am recording clicks on a button component
<div class="sidebar-toggle" (click)="toggleSideBar()" angulartics2On="click" angularticsCategory="{{ expanded ? 'expand': 'collapse' }}">
//divContent
</div>
However, when I run the test which is simple bootstrapping the component I get the error
Can't bind to 'angularticsCategory' since it isn't a known property of 'div'
The app works fine but the issue only comes up in testing. I can't find an example where someone is having the same error in testing. I know I am missing something like not properly exposing the angulartics2 lib in my karma.conf OR not injecting the Angulartics or a mocked dependency in my Testbed config.
Really lost and would like to know if anyone is having similar problems. Can provide more code snippets if needed but don't want to dump the whole file nobody's got time to read that!

Answer 1

In my case to get Angulatics2 unit tests to work I had to:
1) Import Angulartics2Module into the root 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) Enable tracking in 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) Import Angulartics2Module.forRoot() and Angulartics2 provider in to 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();
});
});
and for any other component.spec.ts files that you have using the Angulatics2 directives.