Thử nghiệm đơn vị ở góc 2, tiêm phụ thuộc

Question

Bắt đầu với góc 2 sau khi dành thời gian với góc cạnh 1. Không có đơn vị thử nghiệm nhiều như nó là một điều dự án phụ, tôi đang cố gắng ít nhất bắt đầu OK ... Tôi bắt đầu với ví dụ từ AngularClass nếu điều đó tạo nên sự khác biệt.

Đấu tranh trong app.component.ts đã có các bit điều hướng của tôi. bit có liên quan của mẫu tại đây:

<nav class="navbar navbar-light bg-faded"> 
    <div class="container"> 
    <div class="nav navbar-nav"> 
     <a class="navbar-brand" [routerLink]=" ['./'] ">Navbar</a> 
     <loading class="nav-item nav-link pull-xs-right" [visible]="user === null"></loading> 
    </div> 
</div> 
</nav> 

<div class="container"> 
    <main> 
    <router-outlet></router-outlet> 
</main> 
</div> 

<footer> 
    <hr> 
    <div class="container"> 

</div> 
</footer> 

Component tự nó không chứa nhiều:

import { Component, ViewEncapsulation } from '@angular/core'; 
import { AuthService } from './_services'; 
import { User } from './_models'; 
import { Loading } from './_components'; 

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    template: require('./app.component.html'), 
    styles: [ 
     require('./app.style.css') 
    ] 
}) 
export class App { 
    user: User; 

    constructor(private auth: AuthService) { 

    } 

    ngOnInit() { 
     this.auth.getUser().subscribe(user => this.user = user); 
    } 
} 

Tất cả các module, linh kiện và các tuyến đường được bootstrapped thông qua các mô-đun App. Có thể đăng nếu cần.

Bài kiểm tra mà tôi phải viết cho nó đã giúp tôi có được mọi thứ cơ bản từ bộ định tuyến (có vẻ như vậy). Đầu tiên, [routerLink] is not a native attribute of 'a'. Ok, tôi sửa nó. Sau đó:

Error in ./App class App - inline template:3:6 caused by: No provider for Router! 

Vì vậy, tôi treo lên router, chỉ để tìm:

Error in ./App class App - inline template:3:6 caused by: No provider for ActivatedRoute! 

Mà tôi nói thêm, để tìm ra rằng:

Error in ./App class App - inline template:3:6 caused by: No provider for LocationStrategy! 

Đã đến lúc thử nghiệm trông giống như :

import { inject, TestBed, async } from '@angular/core/testing'; 
import { AuthService } from './_services'; 
import { Router, RouterModule, ActivatedRoute } from '@angular/router'; 
import { AppModule } from './app.module'; 

// Load the implementations that should be tested 
import { App } from './app.component'; 
import { Loading } from './_components'; 

describe('App',() => { 
    // provide our implementations or mocks to the dependency injector 
    beforeEach(() => TestBed.configureTestingModule({ 
     declarations: [App, Loading], 
     imports: [RouterModule], 
     providers: [ 
      { 
       provide: Router, 
       useClass: class { 
        navigate = jasmine.createSpy("navigate"); 
       } 
      }, { 
       provide: AuthService, 
       useClass: class { 
        getAccount = jasmine.createSpy("getAccount"); 
        isLoggedIn = jasmine.createSpy("isLoggedIn"); 
       } 
      }, { 
       provide: ActivatedRoute, 
       useClass: class { } 
      } 
     ] 
    })); 

    it('should exist', async(() => { 

     TestBed.compileComponents().then(() => { 
      const fixture = TestBed.createComponent(App); 

      // Access the dependency injected component instance 
      const controller = fixture.componentInstance; 

      expect(!!controller).toBe(true); 
     }); 
    })); 
}); 

Tôi đã mô phỏng đầu vào, thi s có vẻ sai với tôi. Tui bỏ lỡ điều gì vậy? Có cách nào thông minh hơn để tải toàn bộ ứng dụng vào bài kiểm tra hay không, thay vì bắt buột trong mọi phụ thuộc duy nhất, mọi lúc?

Answer 1

Để thử nghiệm, bạn nên sử dụng RouterTestingModule thay vì RouterModule. Nếu bạn muốn thêm tuyến đường mà bạn có thể sử dụng withRoutes

imports: [ 
    RouterTestingModule.withRoutes(Routes) // same any normal route config 
] 

Xem Cũng

• Angular 2 unit testing components with routerLink
• Second half of this post cho một ý tưởng về mô hình các ActivatedRoute. Đôi khi bạn không muốn toàn bộ cơ sở định tuyến khi kiểm tra đơn vị. Bạn chỉ có thể thử tuyến đường.