Angular Component Expects 2 Arguments - wordpress

Question

I'm attempting to create a Wordpress theme compatible with 4.8.x that will render single posts and list of posts as per [this tutorial]:1
When I run the test script, I receive the following errors:
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.
The code for both components is very similar and calls into the PostsService which is defined as:
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}');
}
}
My post-list-component includes the following:
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]);
}
}
The error is thrown in the following 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();
});
});
I am not sure how to resolve the errors. It seems to me that PostLisComponent() needs to be passed 2 arguments as per the error, but it's not clear what arguments should be passed. Can anyone assist me in better understanding how to resolve the errors?

Answer 1

its because the constructor use 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

From Angular's Testing Guide in regards to the TestBed, and why it would fit such a scenario:
TestBed is the first and most important of the Angular testing
utilities ... In effect, you detach the tested component from its own
application module and re-attach it to a dynamically-constructed
Angular test module tailored specifically for this battery of tests.
Right now, you're statically constructing instead of dynamically constructing using the TestBed, which is causing the error since the constructor of the PostListComponent contains two parameters which would be required to be filled in case of static constructing.