我正在創建自己的angular bootstrap 庫，目前我一直在為導航欄撰寫單元測驗。
我已經將有問題的單元測驗提煉為基本要素，以下是摘要：
單元測驗
describe('BsNavbarDropdownComponent', () => {
let component: BsNavbarDropdownTestComponent;
let fixture: ComponentFixture<BsNavbarDropdownTestComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes([])
],
declarations: [
// Component to test
BsNavbarDropdownComponent,
// Mock components
BsNavbarItemMockComponent,
// Testbench
BsNavbarDropdownTestComponent
],
providers: [
{ provide: BsNavbarItemComponent, useClass: BsNavbarItemMockComponent }
]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(BsNavbarDropdownTestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@Component({
selector: 'bs-navbar-test',
template: `
<bs-navbar-item>
<a [routerLink]='[]'>dropdown</a>
<bs-navbar-dropdown>
<bs-navbar-item>
<a [routerLink]='["/b", "c"]'>bc</a>
</bs-navbar-item>
</bs-navbar-dropdown>
</bs-navbar-item>`
})
class BsNavbarDropdownTestComponent {
}
@Component({
selector: 'bs-navbar-item',
template: `
<li>
<ng-content></ng-content>
</li>`
})
class BsNavbarItemMockComponent {
}
單元測驗
@Component({
selector: 'bs-navbar-dropdown',
templateUrl: './navbar-dropdown.component.html',
styleUrls: ['./navbar-dropdown.component.scss']
})
export class BsNavbarDropdownComponent {
constructor(
@Host() @Inject(forwardRef(() => BsNavbarItemComponent)) navbarItem: BsNavbarItemComponent
) {
this.navbarItem = navbarItem;
}
navbarItem: BsNavbarItemComponent;
}
在BsNavbarDropdownTestComponent它的盲目顯然，bs-navbar-dropdown（BsNavbarDropdownComponent）有一個父標記bs-navbar-item（BsNavbarItemMockComponent）。在單元測驗中，我正在注入BsNavbarItemComponent，它位于作為BsNavbarItemMockComponent.
然而，單元測驗似乎仍然沒有成功。
npm run nx run-many -- --target=test --projects=ng-bootstrap-demo --with-deps --watch=false --browsers=ChromeHeadless
結果：
FAIL xxx-ng-bootstrap libs/xxx-ng-bootstrap/src/lib/components/navbar/navbar-dropdown/navbar-dropdown.component.spec.ts
● BsNavbarDropdownComponent ? should create
NG0201: No provider for BsNavbarItemComponent found in NodeInjector. Find more at https://angular.io/errors/NG0201
同樣，請注意該模塊具有以下提供程式：
providers: [
{ provide: BsNavbarItemComponent, useClass: BsNavbarItemMockComponent }
]
那么這有什么問題呢？為什么BsNavbarItemComponent在單元測驗中找不到提供者？
uj5u.com熱心網友回復：
由于注入的@Host注釋，模塊提供程式沒有被注入。
所以你的模擬組件應該可以被原始組件令牌注入
@Component({
selector: 'bs-navbar-item',
template: `
<li>
<ng-content></ng-content>
</li>`,
providers: [provide: BsNavbarItemComponent, useExisting: forwardRef(() => BsNavbarItemMockComponent)]
})
class BsNavbarItemMockComponent {
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/379987.html