模板中的Angular 5单元测试对象导致[object ErrorEvent]抛出

时间:2018-01-21 20:04:47

标签: angular jasmine angular5

我在Angular 5中运行Jasmine测试时遇到错误。它似乎链接到模板文件中的对象绑定。如果我有3级深度绑定,我会收到以下错误

[object ErrorEvent] thrown

当我从

更改模板时,错误消失了
<p class="item__auth-name">{{shot.user.name}}</p>

<p class="item__auth-name">{{shot.user}}</p>

这是我的组件

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IShot } from '../../shared/models';

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {

  public shot: IShot;

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.shot = this.route.snapshot.data['shot'];
  }

}

这是我的spec文件

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SafePipe } from '../../core/pipes/safe.pipe';
import { DetailsComponent } from './details.component';
import { ActivatedRoute } from '@angular/router';

describe('DetailsComponent', () => {
  let component: DetailsComponent;
  let fixture: ComponentFixture<DetailsComponent>;
  let dataFromActivatedRoute = {
    id: 1
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DetailsComponent, SafePipe ]
    })
    .overrideComponent(DetailsComponent, {
      set: {
        providers: [
          {provide: ActivatedRoute, useValue: {
             snapshot: {
              data: {
                shot: dataFromActivatedRoute
              }
            }
          }}
        ]
      }})
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
      });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

});

删除spec文件中的fixture.detectChanges()也会删除错误,但不能解决问题。有没有人有这种行为的经验?

0 个答案:

没有答案