Change input after initial render

[Wykks]

Hi!

What's the correct way to change input after initial render ?
Because componentProperties only set input on the first render, but we cannot test subsequent input changes this way (which leads to subsequent calls to ngOnChanges).

For now, this works :

component.fixture.componentInstance.myInput = 'stuff';
component.detectChanges();

But accessing fixture is not recommended (https://testing-library.com/docs/angular-testing-library/api#fixture, and I agree with this), and since I do not consider testing dynamic input change is testing an implementation detail, I believe there's should be another way, right ?

Edit: Maybe something like this :

// component is a RenderResult here
component.setComponentInputs({
   myInput: 'value'
});
// And call detectChanges / ngOnChanges automatically

Also, thanks for this library it's really usefull !

[timdeschryver]

Hi, thanks for the feedback!

When this lib was created I had the opinion that dynamic input change was a bad practice, but now that I read this issue I'm rethinking it.

What do you think the API should look like, something as the following?

// rerender has a componentProperties parameter
rerender({
  myInput: 'foo'
})

Internally, we'll update the properties and run a CD cycle.

[Wykks]

rerender seems a weird name for something that should "just" change inputs. But I get the idea 😄

Also, thinking more about it, although it would be useful when using a host/wrapper component; without that, we would still need to manually call ngOnChanges afterwards.

Do you think it would be a bad idea to automatically call ngOnChanges here too (with generatedSimpleChanges params) ? (also on render too, but that would be a breaking change...).
I know, "This would be perilous" angular/angular#6235 (comment); but in practice, it's not a change angular would make easily so...

[timdeschryver]

rerender is taken from the other testing libraries, to keep the API consistent.

We'll first do that, and see what we can do about ngOnChanges afterwards.

[timdeschryver]

Are you interested in creating this feature @Wykks ?

[timdeschryver]

🎉 This issue has been resolved in version 8.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[miluoshi]

@timdeschryver ngOnChanges could be called automatically both on the first render and on rerender if a component implements it. Could we implement this into the library?

See this pseudo-code:

import { SimpleChange } from '@angular/core';
import { ComponentFixture } from '@angular/core/testing';
import { render } from '@testing-library/angular';

const setupComponent = async () => {
  const someProps = {};
  
  const { rerender, fixture } = await render(SomeComponent, { componentProperties: someProps });
  
  const getChangesObj = (
    oldProps: Partial<SomeComponent> | null, 
    newProps: Partial<SomeComponent>, 
    isFirstChange: boolean
  ) => {
    return Object.keys(newProps).reduce((changes, key) => ({
      ...changes,
      [key]: new SimpleChange(isFirstChange ? null : oldProps[key], newProps[key], false)
    }), {});
  };
  
  // Run ngOnChanges on initial render
  if ('ngOnChanges' in fixture.componentInstance) {
    fixture.componentInstance.ngOnChanges(getChangesObj(null, someProps, true));
  }
  
  const updatedRerender = (props: Partial<SomeComponent>) => {
    const changes = getChangesObj(fixture.componentInstance, props, false);

    rerender(props);

    if ('ngOnChanges' in fixture.componentInstance) {
      fixture.componentInstance.ngOnChanges(changes);
    }
  }

  return {
    rerender: updatedRerender
  };
}

[timdeschryver]

@miluoshi do you want to create a PR for this?

[miluoshi]

@miluoshi do you want to create a PR for this?

@timdeschryver Sure, here it is 🙂
#110

[timdeschryver]

🎉 This issue has been resolved in version 9.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀