Làm thế nào để kiểm tra thành phần góc 2 với các thành phần lồng nhau bên trong với các phụ thuộc của riêng chúng? (TestBed.configureTestingModule)

Question

Tôi có một thành phần A sử dụng một thành phần B, C, D trong mẫu của nó:

###template-compA.html 

    <comp-b></comp-b> 
    <comp-c [myinput]="obj.myinput"></comp-c> 
    <comp-d ></comp-d> 

... vv

Để đơn giản hóa, chúng ta hãy nói của họ chỉ là một chỉ thị trong thành phần A:

###template-compA.html 

    <comp-b></comp-b> 

Comp-b của tôi có các phụ thuộc riêng của mình (dịch vụ hoặc comp khác).

Nếu tôi muốn kiểm tra comp-một cách này:

TestBed.configureTestingModule({ 
    declarations: [comp-A], 
    imports: [ReactiveFormsModule], 
}).overrideComponent(FAQListComponent, { 
    set: { 
    providers: [ 
     { provide: comp-AService, useValue: comp-AListSVC } 
    ] 
    } 
}) 
    .compileComponents(); 

nó sẽ không hoạt động đúng. Vì vậy, tôi làm:

TestBed.configureTestingModule({ 
    declarations: [comp-A, comp-B], 
    imports: [ReactiveFormsModule], 
}).overrideComponent(FAQListComponent, { 
    set: { 
    providers: [ 
     { provide: comp-AService, useValue: comp-AListSVC } 
    ] 
    } 
}) 
    .compileComponents(); 

Nó không hoạt động vì comp-b không có phụ thuộc riêng. Và ở đây tôi bối rối, làm thế nào tôi có thể làm bài kiểm tra đơn vị nếu tôi phải nhập khẩu và remock tất cả các thành phần khác mỗi lần duy nhất? Nó trông giống như một số lượng công việc rất lớn. Có cách nào khác không? Điều gì sẽ là thực hành tốt nhất để kiểm tra thành phần với các thành phần lồng nhau có phụ thuộc riêng của chúng?

Cảm ơn rất nhiều,

Stéphane.

Answer 1

Nếu bạn không cần phải tham khảo comp-b dưới mọi hình thức trong các thử nghiệm của bạn, bạn có thể thêm schemas: [NO_ERRORS_SCHEMA] để cấu hình TestBed hoặc ghi đè lên comp-A' một @yurzui mẫu s và xóa thẻ cho comp-b

Nếu bạn cần tham chiếu comp-b, bạn có thể không cần cung cấp phụ thuộc cụ thể trong ghi đè.

Đặt providers trong overrideComponent chỉ cần thiết nếu phụ thuộc được cung cấp trong chính thành phần đó. (Nếu bạn có một danh sách các nhà cung cấp trong comp-A.ts)

giả comp-b cần một comp-AService và comp-AService đang được cung cấp trong comp-A override của bạn, vì comp-b là con của comp-A nó sẽ có comp-AService cung cấp cho nó.

Nếu bạn đang cung cấp những phụ thuộc này trong app.module hoặc ở đâu đó cao hơn chính thành phần bạn không cần ghi đè.Ví dụ, nếu comp-b cần comp-AService & someOtherService đó đều được cung cấp trong app.module cấu hình TestBed của bạn của bạn có thể trông như thế này:

TestBed.configureTestingModule({ 
    declarations: [comp-A, comp-B], 
    imports: [ReactiveFormsModule], 
    providers: [ 
    { provide: comp-AService, useValue: comp-AListSVC }, 
    { provide: someOtherService, useValue: someOtherServiceSVC } 
    ] 
}) 

Edit:

Bạn có thể đọc thêm về kiểm nghiệm thành phần nông ở đây:

https://angular.io/guide/testing#shallow-component-tests-with-no_errors_schema

Answer 2

Tiếp theo 'lời khuyên s:

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [comp-a], 
     schemas: [NO_ERRORS_SCHEMA] 
    }) 
     .compileComponents(); 
    }));