Update mock component to allow setting values on a parent reactive form via the component about ng-mocks

[vespertilian]

@ike18t Will do! Hopefully I can find some time this weekend.

[vespertilian]

Yeah I had a great weekend, I was actually at a JavaScript camp. https://ix.campjs.com. So I figured it would be a good place to get the work done but every-time I tried to go to Github the 100+ other devs were also trying to download something, so I just gave up on the third timeout attempt.

I could have tried harder, but there were also waterfall walks and mountain vistas to checkout.

https://twitter.com/campjs

[ike18t]

fe547af

[getsaf]

Thanks for the request, I have a little experience with Reactive Forms but I'm not following your question. Do you mind setting up a quick StackBlitz project to describe the issue? Don't worry about creating test in the StackBlitz, just a component that is representative of this issue so I can follow along with this feature request.

Thanks!

[vespertilian]

Here it is

https://stackblitz.com/github/vespertilian/testing-reactive-forms-third-party-components

Might be easier to pull it and run it from the CLI

https://github.com/vespertilian/testing-reactive-forms-third-party-components

  it('should update the form when you fill in the type "select" field', () => {
    const {fixture, component} = setup();
    const typeSelect: MockMdSelectComponent = fixture.debugElement.query(By.css('mat-select')).componentInstance;

    typeSelect.propagateChange('Ninja');
    expect(component.warriorForm.value.type).toEqual('Ninja');
  });

Basically when testing forms I prefer to drive the form not just use for formController instance in the component controller as that does not tell you if you have bound to the form via "formControlName"

[vespertilian]

@getsaf Just checking in, you are probably busy, which is fine. If there is anything else I can do to help move this issue along please let me know.

[ike18t]

@vespertilian What do you think about writeValue triggering the change callback? Would that solve your problem?

[vespertilian]

Hey @ike18t, sorry for the late reply this slipped by me.

I had thought that as well initially, it's just as write value is normally used to set the value on the custom form control, I was concerned this will lead to unexpected behaviour, or hard to discover bugs.

I think this would work when you just grab the custom form control from the debug element and call writeValue.

However say you, or some other part of your test calls myFormControl.setValue(name: 'vespert'), if we bound it to writeValue on the form control, the value will be propagated back out, which would not usually happen as write value is normally only called when angular reactive formsl changes the value, so if you were say subscribing to value changes you would get a false output.

Also not sure if binding the input and output together could lead to some type of infinite feedback loop / weird change detection issues.

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

# it's these two 'fn' we want to be able to mock out and manually activate 
registerOnChange(fn: any): void
registerOnTouched(fn: any): void

We could do it with a getter and setter on value and touched maybe?

formControl.value = 'vespert'

I still think

  propagateChange = (_: any) => {};
  setTouched = (_: any) => {};
  // or
  __propagateChange = (_: any) => {};
  __setTouched = (_: any) => {};

is the clearest and cleanest way to accomplish this, I would probably go with the __ just in case someone has a function on there custom form control called propagateChange.

[ike18t]

@vespertilian Fair enough. I don't have that much experience dealing with reactive forms so I'm going to have to lean on your experience. Feel free to submit a PR.

[vespertilian]

@ike18t No internet this weekend, it will have to be some time next week!

[ike18t]

@vespertilian A weekend w/o internet? Are you OK? Did you survive?

[ike18t]

Wow! That is awesome!