Not called angular hooks when disabled detectChanges and setInput called

[ntvsx193]

ngOnInit, ngAfterViewInit and other hooks not called when use createComponentFactory + detectChanges = false + setInput

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

ngOnInit, ngAfterViewInit and other hooks not called

Expected behavior

ngOnInit, ngAfterViewInit and other hooks called

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-testing-senb4a?file=app%2Fapp.component.spec.ts

Environment

Angular version: 11.2.9

Browser:
- [x] Chrome (desktop) version 92.0.4515.107
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 14.17.4
- Platform:  Mac

[NetanelBasal]

You need to call detectChanges()

[ntvsx193]

Why are u close problem?
setInput is calling detectChanges, but insatance of caller DC is debugElement on element, not root.

dom-spectator.ts:

public setInput(input: any, value?: any): void {
  setProps(this.instance, input, value, false);
  this.debugElement.injector.get(ChangeDetectorRef).detectChanges();
}

public detectChanges(): void {
  this.fixture.detectChanges();
}

Unfortunately, you use root in createHostFactory, in setHostInput spectator-host/spectator-host.ts:

public setHostInput(input: any, value?: any): void {
  setProps(this.hostComponent, input, value, false);
  this.detectChanges();
}

Why use different instances of DC?

[NetanelBasal]

It's an Angular design. When you call detectChanges it will call ngOnInit. This is not a Spectator issue. That's why I closed it.

[ntvsx193]

Yes, of couse, DC trigger hooks.
I expected from doc spectator, DC called in every setInput and setHostInput with calling angular hooks (not for ngOnChanges)
And I see in code of caller DC for setInput and setHostInput.
The ChangeDetectorRef not calling angular hooks. This service was designed for calling DC in one of more components without trigger angular hooks of him components (where getting instance of ChangeDetectorRef)

[NetanelBasal]

Count on setInput to trigger hooks is not a good design in my opinion.

[ntvsx193]

Why not? I think it is so better for UX when using setInput setHostInput.
It is already work for setHostInput

Now, we work around this problem by using duplicate code.
If setInput trigger of root DC:

const createComponent = createComponentFactory({
  component: AppComponent,
  imports: [AppModule],
  declareComponent: false,
  detectChanges: false
});

...

spectator = createComponent();

Now, we use it, duplicate:

const createHost = createHostFactory({
  component: AppComponent,
  imports: [AppModule],
  declareComponent: false,
  detectChanges: false
});

...

spectator = createHost(`
  <my-app
    [bind1]="bind1"
    [bind2]="bind2"
    [bind3]="bind3"
  ></my-app>
`);

One more other case:

@Component({ template: '' })
class TestHostComponent {
  @Input() bind1: string;
  @Input() bind2: string;
  @Input() bind3: string;
}

const createHost = createHostFactory({
  component: AppComponent,
  host: TestHostComponent,
  imports: [AppModule],
  declareComponent: false,
  detectChanges: false
});

...

spectator = createHost(`
  <my-app
    [bind1]="bind1"
    [bind2]="bind2"
    [bind3]="bind3"
  ></my-app>
`);

[ntvsx193]

The first usecase is so better and save some "boilerplate" code

[NetanelBasal]

You're welcome to create a PR

[ntvsx193]

The only solution I see is use root DC in setInput.
I dont't know, can you planning use isolate DC for setInput? Maybe it is a feature +)

[ntvsx193]

I push PR, 1 test down.

it('should be defined', () => {
    host = createHost(`<app-form-input [enableSubnet]="true"></app-form-input>`, {
      detectChanges: true,
      props: {
        subnetControl: group
      }
    });

    expect(host.component).toBeDefined();
    expect(host.query('p')).not.toBeNull();
    host.setInput('enableSubnet', false);
    expect(host.query('p')).toBeNull();
  });

Interesting test example.
1 input enableSubnet in template with static value true.
Are you sure for use it as example? It will break on first call spectator.detectChanges(). Any intenal input of change will be revert to static value from template. For example - any click, setTimeout and other events...

[ntvsx193]

I think it will be displayed as:

it('should be defined', () => {
  host = createHost(`<app-form-input [enableSubnet]="enableSubnet"></app-form-input>`, {
    detectChanges: true,
    props: {
      enableSubnet: true,
      subnetControl: group
    }
  });

  expect(host.component).toBeDefined();
  expect(host.query('p')).not.toBeNull();
  host.setHostInput('enableSubnet', false);
  expect(host.query('p')).toBeNull();
});

[ntvsx193]

I'm undestand why used manual detectChanges from ChangeDetectorRef.
Angular not see changing inputs and skip DC via fixture.detectChanges
I rewrite solution on ChangeDetectorRef.markForCheck + fixture.detectChanges.