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进行评论，并且能够从提供的链接中找出所需的内容，因此，如果其他人遇到此问题，请在此处发布答案

因此，在您的测试中，您需要在测试模块中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）的答案。

但是我有

npm i date-fns@1.29.0

在组件中。

所以在测试中我必须使用

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

也许这会帮助某人。

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

2 个答案: