Allow to get control value from MockControlValueAccessor

When testing angular components, we use the Page Object pattern to simulate the user experience and access the form field not through the component, but through view. Thus, we check the correctness of the bindings in the template and abstract from the internal implementation. In this case, we can change the Reactive Forms to Template-Driven Forms without changing the tests. So, I would like to refer to the control value not directly, but indirectly, through the template.

Example

ngOnInit() {
     this.loginService.getLogin().subscribe(login => this.loginControl.setValue(login));
 }

it('If login comes in, then it is put in the form field', () => {
    // arrange
    when(loginServiceMock.getLogin()).thenReturn('login');

    // act
    fixture.detectChanges();

    // assert
    expect(pageObject.loginInput.__value).toBe('login');
});

[vladiag]

@satanTime In your version you will work with controller of component, in our case we are trying to abstract of realisation and write test on component as Black Box. We have template and mocking of data and out tests writing as Controller not exists, in my opinion it’s better, than i will assert that i have formControl, than i will test that i call method on FormControl, after 2 weeks i decide to use NgModel and i will rewrite all my tests, just because i test realisation

[satanTime]

The thing about formControl and ngModel is that they should be mocked as all other dependencies in unit tests too, therefore there won’t be code that calls writeValue and therefore we cannot rely on assertions of writeValue, we can only check that we passed proper inputs / outputs and believe that real directives work as expected.