Angular 10 测试：组件解析器数据订阅错误

Question

过去几天我一直在努力了解ng test 和@angular/cli 在创建组件时创建的所有规范文件以及其他方面的内容。

当我在自己的作品集网站上工作时，我遇到了一个我似乎无法理解或解决的问题。

我有这个组件（很普通的东西）：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser'
import { ProjectDetails } from './project-details'

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

  // Class variables
  currentContent: ProjectDetails

  constructor(
    private route : ActivatedRoute,
    private title: Title
    ) { }

  ngOnInit() {
    // Assign the data to local variable for use
    this.route.data.subscribe(content => {
      this.currentContent = content.project.view //<-- This line causes the issue

      // Set the title for the Projects view
      this.title.setTitle(this.currentContent.view_title)
    })
  }

}

还有这个规范文件（更多普通的东西）：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing'
import { ProjectsDetailsComponent } from './projects-details.component';
import { ProjectDetails } from './project-details'

describe('ProjectsDetailsComponent', () => {
  let component: ProjectsDetailsComponent;
  let fixture: ComponentFixture<ProjectsDetailsComponent>;
  const projectDetails : ProjectDetails = { /* valid object content */ }

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[
        RouterTestingModule
      ],
      declarations: [ ProjectsDetailsComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProjectsDetailsComponent);
    component = fixture.componentInstance;
    component.currentContent = projectDetails
    fixture.detectChanges();
  });

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

运行测试时，我收到此错误：

TypeError: content.project is undefined in http://localhost:9876/_karma_webpack_/main.js (line 1576)

所以，我不确定这里到底发生了什么。无论我做什么，错误都会出现。我有一个类似的设置组件，它没有这个问题，并且并排比较显示除了导入之外，spec.ts 文件中没有任何差异。

我尝试将文件更改为：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing'
import { ProjectsDetailsComponent } from './projects-details.component';
import { ProjectDetails } from './project-details'
import { ActivatedRoute } from '@angular/router';

describe('ProjectsDetailsComponent', () => {
  let component: ProjectsDetailsComponent;
  let fixture: ComponentFixture<ProjectsDetailsComponent>;
  const projectDetails : ProjectDetails = {/* valid content */}

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      // imports:[
      //   RouterTestingModule
      // ],
      providers: [
        { provide: ActivatedRoute, useValue: projectDetails }
      ],
      declarations: [ ProjectsDetailsComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProjectsDetailsComponent);
    component = fixture.componentInstance;
    component.currentContent = projectDetails
    fixture.detectChanges();
  });

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

这将错误更改为这个（这让我更加困惑）：

TypeError: this.route.data is undefined in http://localhost:9876/_karma_webpack_/main.js (line 1575)

社区的问题：我该如何解决这个问题？出现此错误的原因是什么？

Answer 1

不要提供原始的projectDetails，而是在其数据属性中提供一个 Observable：

import {of} from 'rxjs';

...        
beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
         // Properly provide the activated route mock object.
         { provide: ActivatedRoute, useValue: { data: of(projectDetails) } }
      ],
      declarations: [ ProjectsDetailsComponent ]
    })
    .compileComponents();
  }));
...

如果你看一下你是如何访问路由数据的，你会发现它使用了一个 Observable：

this.route.data.subscribe(content => {...});