简体   繁体   English

如何在 Angular 组件的单元测试中提供 ControlContainer?

[英]How do I provide ControlContainer inside an Angular component's unit test?

As per the title, how can I provide ControlContainer inside an Angular unit test?根据标题,如何在 Angular 单元测试中提供ControlContainer

The following is the error produced:以下是产生的错误:

NullInjectorError: StaticInjectorError(DynamicTestModule)[ChildFormComponent -> ControlContainer]:
      StaticInjectorError(Platform: core)[ChildFormComponent -> ControlContainer]:
        NullInjectorError: No provider for ControlContainer!

My attempt to provide ControlContainer :我尝试提供ControlContainer

  beforeEach(() => {
    const parentFixture = TestBed.createComponent(ParentFormComponent);
    const parentComponent = parentFixture.componentInstance;
    parentComponent.initForm();
    fixture = TestBed.createComponent(ChildFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

I have seen other solutions that use:我见过其他使用以下解决方案的解决方案:

declarations: [
  ...MY_DECLARATIONS
],
imports: [
  ...MY_IMPORTS
],
providers: [
  {
    provide: ControlContainer,
    useValue: MyFormGroupDirective
  }
]

I have had no luck but if there is anyone here who is able to shed some light;我没有运气,但如果这里有人能够阐明; I would deeply appreciate it.我会深深地感激它。

I was able to derive the solution from this post:我能够从这篇文章中得出解决方案:

How to mock ControlContainer in angular unit test? 如何在角度单元测试中模拟 ControlContainer?

What I ended up doing was:我最终做的是:

let component: MyChildComponent;
let fixture: ComponentFixture<MyChildComponent>
let fg: FormGroup;
let fgd: FormGroupDirective;

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ ...MY_DECLARATIONS ],
    imports: [ ...MY_IMPORTS ],
    providers: [
      { provide: ControlContainer, useValue: fgd }
    ]
  });

});

beforeEach(() => {
  const parentFixture = TestBed.createComponent(MyParentComponent);
  const parentComponent = parentFixture.componentInstance;
  fg = parentComponent.form;
  fgd = new FormGroupDirective([], []);
  fgd.form = fg;

  const childFixture = TestBed.createComponent(MyChildComponent);
  const childComponent = childFixture.componentInstance;

  childFixture.detectChanges();
});

What I wanted to do was attach the initialized parent form group to the child.我想做的是将初始化的父表单组附加到子表单组。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在角度单元测试中模拟 ControlContainer? - How to mock ControlContainer in angular unit test? 如何在 Angular 2 单元测试中访问被覆盖的子组件的模板? - How do I access the overridden child component's template in an Angular 2 unit test? 我如何对使用 ngComponentOutlet 创建的角度组件进行单元测试? - How do i Unit test an angular component created with ngComponentOutlet? 如何在Angular 2单元测试中测试共享组件的方法? - How to test shared component's method in Angular 2 unit testing? 如何对从服务订阅 EventEmitter 的 angular 组件进行单元测试? - How do I unit test an angular component that subscribes to an EventEmitter from a service? Angular:单元测试未发出组件的输出 - Angular: Unit test that a component's output is not emitted 如何在角度组件内提供/模拟Angularfirestore模块以进行默认测试? - How to provide/mock Angularfirestore module inside angular component for default test to pass? 如何在另一个 Angular 组件中显示 Angular 组件 - How do i display a Angular component inside another Angular component 如何对Angular HttpClient 204响应进行单元测试? - How do I unit test an Angular HttpClient 204 response? 如何为authguard单元测试canActivate of Angular? - How do I unit test canActivate of Angular for authguard?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM