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

问题描述

如何模拟 ControlContainer 实例，以便可以测试组件?

我有一个子组件，该子组件将 ControlContainer 注入到构造函数中，因此其用法是

 < acr-score-card formGroupName ="score"></acr-score-card> 

而组件本身是

  @Component({选择器:"acr-score-card"，templateUrl:"./score-card.component.html"，styleUrls:['./score-card.component.scss']})导出类ScoreCardComponent实现OnInit {...形式:FormGroup；构造函数(私有ngControl:ControlContainer){}ngOnInit(){this.form =< FormGroup> this.ngControl.control;}...} 

当我在浏览器中运行时，一切正常，但由于无法确定如何模拟 ControlContainer 实例以设置提供程序，因此无法使单元测试正常工作，这就是内容我的规格文件:

  describe('ScoreCardComponent'，()=> {let组件:ScoreCardComponent;let fix:ComponentFixture< ScoreCardComponent> ;;beforeEach(async(()=> {TestBed.configureTestingModule({导入:[TestingModule]，声明:[ScoreCardComponent]，提供者:[/**这里是如何模拟ControlContainer */]模式:[NO_ERRORS_SCHEMA]}).compileComponents();}));beforeEach(()=> {夹具= TestBed.createComponent(ScoreCardComponent);组件= Fixture.componentInstance;Fixture.detectChanges();});it('should create'，()=> {Expect(component).toBeTruthy();});}); 

所以，要重复这个问题，我该如何模拟 ControlContainer 实例，以便测试我的组件?

解决方案

感谢@KiraAG进行评论，并能够从提供的链接中确定所需的内容，因此在此处发布答案，以防其他人遇到此问题

因此，在测试中，您需要在测试模块中提供 ControlContainer 实例，基本上是 FormGroupDirective 或 FormControlDirective ，具体取决于您希望传递给组件的内容.

例如，在测试文件中，创建 FormGroup ，它代表您正在使用的表单的一部分

  const fg:FormGroup = new FormGroup({'答案':新的FormControl('')，...}); 

接下来创建一个 FormGroupDirective 并将 form 属性设置为上面创建的 FormGroup

  const fgd:FormGroupDirective = new FormGroupDirective([]，[]);fgd.form = fg; 

现在，在测试模块设置中，您可以提供 ControlContainer

  beforeEach(async(()=> {TestBed.configureTestingModule({导入:[TestingModule]，声明:[ScoreCardComponent]，提供者:[{提供:ControlContainer，useValue:fgd}]模式:[NO_ERRORS_SCHEMA]}).compileComponents();})); 

就是这样，构造函数注入已满足.

How can I mock a ControlContainer instance so that I can test my component?

I have a child component that injects a ControlContainer into the constructor, so its usage is

<acr-score-card formGroupName="score"></acr-score-card>

and the component itself is

@Component({
  selector: 'acr-score-card',
  templateUrl: './score-card.component.html',
  styleUrls: ['./score-card.component.scss']
})
export class ScoreCardComponent implements OnInit {

  ...

  form: FormGroup;

  constructor(private ngControl: ControlContainer) { }

  ngOnInit() {
    this.form = <FormGroup>this.ngControl.control;
  }

  ...

}

Everything works fine when I run in the browser but I cannot get the unit tests to work as I am not sure how to mock the ControlContainer instance in order to setup the provider, this is the contents of my spec file:

describe('ScoreCardComponent', () => {
  let component: ScoreCardComponent;
  let fixture: ComponentFixture<ScoreCardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [TestingModule],
      declarations: [ScoreCardComponent],
      providers: [/** what goes here to mock the ControlContainer */]
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ScoreCardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

So, to repeat the question, how can I mock a ControlContainer instance so that I can test my component?

解决方案

Thanks to @KiraAG for comment and was able to work out what was required from provided link, so posting answer here in case anyone else comes across this question

So in your test you need to provide the ControlContainer instance in your test module, this is basically going to be either a FormGroupDirective or a FormControlDirective depending on what you expect to be passed to your component.

For example, in your test file create the FormGroup that represents the part of the form you are using

const fg: FormGroup = new FormGroup({
  'answer': new FormControl(''),
  ...
});

Next create a FormGroupDirective and set the form property to the FormGroup created above

const fgd: FormGroupDirective = new FormGroupDirective([], []);
fgd.form = fg;

Now in you test module setup you can provide the ControlContainer

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [TestingModule],
      declarations: [ScoreCardComponent],
      providers: [
        { provide: ControlContainer, useValue: fgd }
      ]
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

And that's it, the constructor injection is satisfied.

这篇关于如何在角单元测试中模拟ControlContainer?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！