Как смоделировать ControlContainer в угловом модульном тесте? - PullRequest
Новая
       9

Как смоделировать ControlContainer в угловом модульном тесте?

0 голосов
/ 10 января 2019

Как я могу смоделировать экземпляр 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 для настройки провайдера, это содержимое моего spec-файла: 

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, чтобы проверить свой компонент?

1 Ответ

0 голосов
/ 14 января 2019

Спасибо @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();
  }));

И все, инжектор конструктора удовлетворен.

...