TEST FILE
import { async, ComponentFixture, TestBed } from
'@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
import { ManagePageComponent } from './manage-page.component';
import { MatIconModule } from '@angular/material/icon';
import { RouterTestingModule } from '@angular/router/testing';
import {MatTableModule} from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { HttpClientModule } from '@angular/common/http';
describe('ManagePageComponent', () => {
let component: ManagePageComponent;
let fixture: ComponentFixture<ManagePageComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ManagePageComponent ],
imports: [
BrowserAnimationsModule,
RouterTestingModule,
MatIconModule,
MatTableModule,
MatTabsModule,
HttpClientModule,
],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ManagePageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
component file
import { Component, OnInit } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-manage-page',
templateUrl: './manage-page.component.html',
styleUrls: ['./manage-page.component.scss'],
})
export class ManagePageComponent implements OnInit {
goEdit() {
this.router.navigate(['manage', 'edit']);
}
constructor(private router: Router) { }
ngOnInit() {
}
}
HTML
<div class="jumbotron">
<h1>Create and Edit</h1>
<p>What inspires you today...</p>
<div class="add-button">
<div class="sub-button tl" (click)="goEdit()">
<mat-icon>work</mat-icon>
</div>
<div class="sub-button tr" (click)="goEdit()">
<mat-icon>description</mat-icon>
</div>
<div class="sub-button bl" (click)="goEdit()">
<mat-icon>description</mat-icon>
</div>
<div class="sub-button br" (click)="goEdit()">
<mat-icon>invert_colors</mat-icon>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
The application functions properly, however, the error only manifests during Karma test. I have included BrowseAnimationsModule in the app.module.ts file within the imports: [] array. Despite trying various solutions found online, none have resolved my issue… Feeling desperate...
I am utilizing Angular CLI and have included "@angular/animations": "^6.1.3" in the package.json.