fix: 🐛 component re-render when updating fields in lifecycle hook (#646)

* fix: 🐛 component re-render when updating fields in lifecycle hook

* test: ✅ fix incorrect assertion after prettier bump

projects/spectator/jest/test/ngonchanges-input/ngonchanges-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { NgOnChangesInputComponent } from '../../../test/ngonchanges-input/ngonchanges-input.component';
+
+describe('NgOnChangesInputComponent', () => {
+  describe('with Spectator', () => {
+    let spectator: Spectator<NgOnChangesInputComponent>;
+
+    const createComponent = createComponentFactory({
+      component: NgOnChangesInputComponent,
+    });
+
+    beforeEach(() => {
+      spectator = createComponent();
+    });
+
+    it('should re-render when updating fields in ngOnChanges', () => {
+      expect(spectator.query('button')).toBeDisabled();
+      expect(spectator.query('button')).toHaveText('Button disabled');
+
+      spectator.setInput({ btnDisabled: false });
+      expect(spectator.query('button')).not.toBeDisabled();
+      expect(spectator.query('button')).toHaveText('Button enabled');
+    });
+  });
+});

projects/spectator/src/lib/spectator/spectator.ts

@@ -44,11 +44,11 @@ export class Spectator<C> extends DomSpectator<C> {
   public setInput<K extends keyof C>(input: K, inputValue: InferInputSignal<C[K]>): void;
   public setInput(input: any, value?: any): void {
     setProps(this.fixture.componentRef, input, value);
-    // Force cd on the tested component
-    this.debugElement.injector.get(ChangeDetectorRef).detectChanges();
-
     // Force cd on the host component for cases such as: https://github.com/ngneat/spectator/issues/539
     this.detectChanges();
+
+    // Force cd on the tested component
+    this.debugElement.injector.get(ChangeDetectorRef).detectChanges();
   }
 
   public deferBlock(deferBlockIndex = 0): DeferBlocks {

projects/spectator/test/matchers/matcher-enhancements.component.spec.ts

@@ -15,7 +15,7 @@ describe('Matcher enhancements', () => {
       const el = spectator.queryAll('.text-check');
       expect(el).toHaveText(['It should', 'different text', 'another']);
       expect(el).toContainText(['It should', 'different text', 'another']);
-      expect(el).toHaveExactText(['It should have', 'Some different text', ' And another one ']);
+      expect(el).toHaveExactText(['It should have', 'Some different text', 'And another one']);
       expect(el).toHaveExactText(['It should have', 'Some different text', 'And another one'], { trim: true });
       expect(el).toHaveExactTrimmedText(['It should have', 'Some different text', 'And another one']);
     });

projects/spectator/test/ngonchanges-input/ngonchanges-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { NgOnChangesInputComponent } from './ngonchanges-input.component';
+
+describe('NgOnChangesInputComponent', () => {
+  describe('with Spectator', () => {
+    let spectator: Spectator<NgOnChangesInputComponent>;
+
+    const createComponent = createComponentFactory({
+      component: NgOnChangesInputComponent,
+    });
+
+    beforeEach(() => {
+      spectator = createComponent();
+    });
+
+    it('should re-render when updating fields in ngOnChanges', () => {
+      expect(spectator.query('button')).toBeDisabled();
+      expect(spectator.query('button')).toHaveText('Button disabled');
+
+      spectator.setInput({ btnDisabled: false });
+      expect(spectator.query('button')).not.toBeDisabled();
+      expect(spectator.query('button')).toHaveText('Button enabled');
+    });
+  });
+});

projects/spectator/test/ngonchanges-input/ngonchanges-input.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: `
+    <button [disabled]="btnDisabled">
+      {{ btnText }}
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgOnChangesInputComponent {
+  @Input()
+  btnDisabled = true;
+
+  btnText = 'Button disabled';
+
+  ngOnChanges() {
+    this.btnText = this.btnDisabled ? 'Button disabled' : 'Button enabled';
+  }
+}

projects/spectator/test/standalone/pipe/standalone.pipe.spec.ts

@@ -30,7 +30,7 @@ describe('StandalonePipe', () => {
       spectator = createPipe(`<div id="standalone">{{ thisField | standalone }}</div>`, { hostProps: { thisField: 'This' } });
     });
 
-    fit('should render and execute the StandalonePipe', () => {
+    it('should render and execute the StandalonePipe', () => {
       expect(spectator.element.querySelector('#standalone')).toContainText('This stands alone!');
     });
   });