Angular 2+ 测试组件答案

【问题标题】：Angular 2+ testing a componentAngular 2+ 测试组件
【发布时间】：2019-01-22 17:06:35
【问题描述】：

我有以下调用 API 的服务：

export class MoviesService {

    constructor(private httpClient: HttpClient) { }

    // Return an obsevable with all the movies from the API
    getAllMovies(): Observable<Movie[]> {
        return this.httpClient.get<EmbeddedTitle>("http://localhost:8080/api/movies", { params: params })
        .pipe(
            map(response => {
                return response;
            }
            ));
}

下面是注入该服务并调用 getAllMovies 方法的组件：

export class MoviesListingComponent implements OnInit {

    public movies: Movie[];

    constructor(private moviesService: MoviesService) { }

    ngOnInit(): void {
        this.getAllMovies();
    }

    // Subscribe to method service (getAllMovies) and assign the results to a class object (movies)
    getAllMovies(): void {
        this.moviesService.getAllMovies()
            .subscribe(movies => {
                this.movies = movies;
            });
    }

}

我想知道如何使用 Jasmine 对组件的方法 getAllMovies 进行单元测试。

【问题讨论】：

标签： javascript angular unit-testing jasmine angular6

【解决方案1】：

getAllMovies() 方法改变了你的“movies”变量的值，并且你的组件依赖于保存数据的服务，你的工作是模拟服务并创建一个 getAllMovies 来返回虚拟数据并确保你的电影字段包含您模拟的数据

【讨论】：