如何在 angular 单元测试中模拟 ControlContainer？

Question

如何模拟 ControlContainer 实例以便测试我的组件？

我有一个子组件在构造函数中注入了一个ControlContainer，所以它的用法是

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

组件本身是

@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;
  }

  ...

}

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

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();
  });
});

所以，重复这个问题，我如何模拟一个 ControlContainer 实例以便我可以测试我的组件？

Answer 1

感谢@KiraAG 的评论，并能够从提供的 link 中找出所需的内容，因此请在此处发布答案以防其他人遇到此问题

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

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

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

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

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

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

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

就这样，构造函数注入就满足了

Answer 2

我使用了 Neil Stevens 的回答。

但我有

viewProviders: [{provide: ControlContainer, useExisting: FormGroupDirective}],

在组件中。

所以在测试中我必须使用

providers: [{provide: FormGroupDirective, useValue: fgd}],

也许这会对某人有所帮助。

如何在 angular 单元测试中模拟 ControlContainer？

How to mock ControlContainer in angular unit test?

angular

angular-test