业力测试:综合属性@transitionMessages。请在您的应用程序中包括“ BrowserAnimationsModule”或“ NoopAnimationsModule”

时间:2018-08-18 15:42:04

标签: javascript angular typescript angular-cli karma-jasmine

测试文件

[
    { 
        _id: 5b76e89b7275781a484e3b14,
        base_name: 'name1',
        friendly_name: 'my geate name',
        image_folder: 'img',
        instruction_folder: 'notice',
        fournitures_folder: 'fournitures',
        type: 'standard',
        cover: 'cover.jpg',
        owner: 'owner.jpg',
        sizes:
        [
            {
                name: 'size01',
                value: '48',
                naming: {
                    name: 'Prototype_01',
                    base_name: 'Prototype_01',
                    friendly_name: 'Prototype PAC 01',
                    type: 'standard',
                    size: '48',
                    nb_item: 3,
                    items: [
                        ...
                    ]
                }
            },
            {
                name: 'size02',
                value: '47',
                naming: {
                    name: 'Prototype_02',
                    base_name: 'Prototype_02',
                    friendly_name: 'Prototype PAC 02',
                    type: 'standard',
                    size: '47',
                    nb_item: 3,
                    items: [
                        ...
                    ]
                }
            },
            {
                ...
            }
        ],
        popularity: 5,
        woo_id: '51'
    },
    {
        ...
    }
]

组件文件

{
    name: 'Prototype_02',
    base_name: 'Prototype_02',
    friendly_name: 'Prototype PAC 02',
    type: 'standard',
    size: '47',
    nb_item: 3,
    items: [
        ...
    ]
}   

HTML

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

该应用程序运行正常,仅在业力测试中发生此错误。 我还导入了imports []数组中app.module.ts 文件中的BrowserAnimationsModule。 互联网上的所有解决方案都不适合我...绝望...

我使用了角度cli和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() { } } ,已经在package.json中

1 个答案:

答案 0 :(得分:0)

就我而言,它是通过在规格文件中导入NoopAnimationsModule来工作的。

请用NoopAnimationsModule替换BrowserAnimationsModule。

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

在beforeEach函数内部,进行如下更改,

 imports: [
        NoopAnimationsModule,
        RouterTestingModule,
        MatIconModule,
        MatTableModule,
        MatTabsModule,
        HttpClientModule,
      ],