setInputs should call detectChanges

[ssougnez]

Description

Hello,

I'm currently testing a very simple component that applies on a "button" to style it and add some capabilities.
This component uses the OnPush change strategy, so I have a test like this:

describe('ng-ui-button', () => {
  let spectator: SpectatorHost<ButtonComponent>;
  const createComponent = createHostFactory(ButtonComponent);

  it('should honor the color property', () => {
    spectator = createComponent(`<button ng-ui-button color="primary">Test</button>`);

    expect(spectator.element).toHaveClass('ng-ui-btn-primary');

    spectator.setInput('color', 'secondary');
    spectator.detectChanges();

    expect(spectator.element).toHaveClass('ng-ui-btn-secondary');

    spectator.setInput('color', 'tertiary');
    spectator.detectChanges();

    expect(spectator.element).toHaveClass('ng-ui-btn-tertiary');

    spectator.setInput('color', 'success');
    spectator.detectChanges();

    expect(spectator.element).toHaveClass('ng-ui-btn-success');
  });
});

It works well but I was wondering why I had to call "detectChanges" after every "setInput". If I'm not mistaken, Angular performs a digest cycle when an input is updated, so shouldn't spectator do the same?

Proposed solution

Call detectChanges from setInput

Alternatives considered

None

Do you want to create a pull request?

No

[NetanelBasal]

Can you share the component code, please?

[ssougnez]

OK but don't steal it from it to become rich, eh? :-D

@Component({
  selector: 'button[ng-ui-button]',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[attr.aria-disabled]': 'disabled === true || loading === true',
    '[attr.disabled]': 'disabled === true || loading === true ? "" : null',
    '[class]': '"ng-ui-btn-" + color + " ng-ui-btn-" + size',
    '[class.ng-ui-btn-light]': 'light',
    '[class.ng-ui-btn-reverse]': 'iconPosition === "right"',
    '[class.ng-ui-btn-link]': 'link === true'
  }
})
export class ButtonComponent {

  /******************************************************** BINDINGS ********************************************************/

  @Input()
  public color: ColorScheme | 'secondary' | 'tertiary' = 'primary';

  @Input()
  public icon: string | null = null;

  @Input()
  public iconBrush: Brush = this._iconOptions?.defaultButtonBrush || 'regular';

  @Input()
  public disabled = false;

  @Input()
  public light = false;

  @Input()
  public loading = false;

  @Input()
  public size: Size = 'fit';

  @Input()
  public link: boolean = false;

  @Input()
  public iconPosition: Position = 'left';

  /******************************************************** LIFE CYCLE ********************************************************/

  constructor(@Optional() @Inject(NG_UI_ICON_OPTIONS) private _iconOptions: NgUiIconOptions) { }

}

[NetanelBasal]

I see. This is because when calling setInput it'll run change detection on the component and not on the host.