Question

我尝试创建与4.8.x兼容的Wordpress主题，根据[本教程]呈现单个帖子和帖子列表：1

运行测试脚本时，收到以下错误：

ERROR in C:/MyTheme/src/app/posts/post-list/post-list.component.spec.ts 
(9,25): Expected 2 arguments, but got 0.

ERROR in C:/MyTheme/src/app/posts/post-single/post-single.component.spec.ts 
(8,25): Expected 2 arguments, but got 0.

两个组件的代码非常相似，并调用PostsService，定义为：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Post } from './post';
import { environment} from '../../environments/environment';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class PostsService {
private _wpBase = environment.wpBase;

constructor(private http: HttpClient)    { }

getPosts():Observable<Post[]> {
    return this.http.get<Post[]>(this._wpBase + 'posts');
  }

getPost(slug: string): Observable<Post[]> {
    return this.http.get<Post[]>(this._wpBase + 'posts?slug=${slug}');
  }
}

我的post-list-component包括以下内容：

import { Component, OnInit } from '@angular/core';
import { Post } from '../post';
import { PostsService} from '../posts.service';
import { HttpErrorResponse } from '@angular/common/http';
import {Router} from '@angular/router';

@Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
styleUrls: ['./post-list.component.css'],
providers: [PostsService]
})
export class PostListComponent implements OnInit {
posts: Post[];

constructor( private  postsService: PostsService, private router: Router ){}
ngOnInit() {
    this.postsService.getPosts().subscribe(
        (posts: Post[]) => this.posts = posts,
        (err: HttpErrorResponse) => err.error instanceof Error ?
    console.log('An error has occurred:', 
    err.error.message):console.log('Backend returned code $(err.status), 
    body was: ${err.error}'));
}

selectPost(slug) {
    this.router.navigate([slug]);
}
}

以下post.list.component.spec.ts：

中引发了错误

/* tslint:disable:no-unused-variable */

import { TestBed, async } from '@angular/core/testing';
import { PostListComponent } from './post-list.component';
import {Router} from "@angular/router";

describe('Component: PostList', () => {
    it('should create an instance', () => {
    let component = new PostListComponent();
    expect(component).toBeTruthy();
});
});

我不确定如何解决错误。在我看来，PostLisComponent（）需要根据错误传递2个参数，但是不清楚应该传递什么参数。任何人都可以帮助我更好地理解如何解决错误吗？

Answer 1

因为构造函数使用TestBed

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PostListComponent } from './post-list.component';

describe('PostListComponent ', () => {
    let component: PostListComponent ;
    let fixture: ComponentFixture<PostListComponent >;

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ PostListComponent ]
})
.compileComponents();}));
beforeEach(() => {
  fixture = TestBed.createComponent(PostListComponent );
  component = fixture.componentInstance;
  fixture.detectChanges();
});
it('should create an instance', () => {
  expect(component).toBeTruthy();
});
});

Answer 2

关于TestBed来自Angular's Testing Guide，以及它适合这种情况的原因：

TestBed是Angular测试的第一个也是最重要的实用程序...实际上，您将测试的组件与其自身分离应用程序模块并将其重新附加到动态构造的 角度测试模块专门为这组测试量身定制。

现在，您正在静态构建而不是使用TestBed进行动态构建，导致错误，因为PostListComponent的构造函数包含两个需要填充的参数在静态构建的情况下。

角度组件期待2个参数

2 个答案: