feat: support run ngOnChanges hook for change bingins (#348) (#360)

Author: ntvsx193

README.md

@@ -161,7 +161,8 @@ const service = spectator.inject(QueryService, fromComponentInjector);
 ```ts
 spectator.detectChanges();
 ```
-- `setInput()` - Changes the value of an @Input() of the tested component:
+- `setInput()` - Changes the value of an @Input() of the tested component.
+  Method runs `ngOnChanges` with `SimpleChanges` manually if it exists.
 ```ts
 it('should...', () => {
   spectator.setInput('className', 'danger');

projects/spectator/src/lib/base/dom-spectator.ts

@@ -96,7 +96,7 @@ export abstract class DomSpectator<I> extends BaseSpectator {
   public setInput<K extends keyof I>(input: Partial<I>): void;
   public setInput<K extends keyof I>(input: K, inputValue: I[K]): void;
   public setInput(input: any, value?: any): void {
-    setProps(this.instance, input, value);
+    setProps(this.instance, input, value, false);
     this.debugElement.injector.get(ChangeDetectorRef).detectChanges();
   }
 

projects/spectator/src/lib/internals/query.ts

@@ -1,4 +1,4 @@
-import { DebugElement } from '@angular/core';
+import { DebugElement, SimpleChange, SimpleChanges } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
 import { DOMSelector } from '../dom-selectors';
@@ -26,17 +26,38 @@ export function getChildren<R>(debugElementRoot: DebugElement): (directiveOrSele
   };
 }
 
-export function setProps<T, K extends string | number | symbol, V>(instance: T, key: K, value: V): T & { [KEY in K]: V };
+export function setProps<T, K extends string | number | symbol, V>(
+  instance: T,
+  key: K,
+  value: V,
+  firstChange?: boolean
+): T & { [KEY in K]: V };
 export function setProps<T, KV>(instance: T, keyValues?: KV): T & KV;
-export function setProps(instance: any, keyOrKeyValues: any, value?: any): any {
+export function setProps(instance: any, keyOrKeyValues: any, value?: any, firstChange: boolean = true): any {
+  const changes: SimpleChanges = {};
+
+  const update = (key: string, newValue: any): void => {
+    if (instance[key] === newValue) {
+      return;
+    }
+
+    changes[key] = new SimpleChange(instance[key], newValue, firstChange);
+    instance[key] = newValue;
+  };
+
   if (isString(keyOrKeyValues)) {
-    instance[keyOrKeyValues] = value;
+    update(keyOrKeyValues, value);
   } else {
     // tslint:disable-next-line:forin
     for (const p in keyOrKeyValues) {
-      instance[p] = keyOrKeyValues[p];
+      update(p, keyOrKeyValues[p]);
     }
   }
 
+  if (Object.keys(changes).length) {
+    // tslint:disable-next-line:no-life-cycle-call
+    instance.ngOnChanges?.(changes);
+  }
+
   return instance;
 }

projects/spectator/src/lib/spectator-directive/spectator-directive.ts

@@ -36,7 +36,7 @@ export class SpectatorDirective<D, H = HostComponent> extends DomSpectator<D> {
   public setHostInput<K extends keyof H>(input: Partial<H>): void;
   public setHostInput<K extends keyof H>(input: K, inputValue: H[K]): void;
   public setHostInput(input: any, value?: any): void {
-    setProps(this.hostComponent, input, value);
+    setProps(this.hostComponent, input, value, false);
     this.detectChanges();
   }
 }

projects/spectator/src/lib/spectator-host/spectator-host.ts

@@ -50,7 +50,7 @@ export class SpectatorHost<C, H = HostComponent> extends Spectator<C> {
   public setHostInput<K extends keyof H>(input: Partial<H>): void;
   public setHostInput<K extends keyof H>(input: K, inputValue: H[K]): void;
   public setHostInput(input: any, value?: any): void {
-    setProps(this.hostComponent, input, value);
+    setProps(this.hostComponent, input, value, false);
     this.detectChanges();
   }
 }

projects/spectator/src/lib/spectator-pipe/spectator-pipe.ts

@@ -20,7 +20,7 @@ export class SpectatorPipe<P, H = HostComponent> extends BaseSpectator {
   public setHostInput<K extends keyof H>(input: Partial<H>): void;
   public setHostInput<K extends keyof H>(input: K, inputValue: H[K]): void;
   public setHostInput(input: any, value?: any): void {
-    setProps(this.hostComponent, input, value);
+    setProps(this.hostComponent, input, value, false);
     this.detectChanges();
   }
 }

projects/spectator/test/simple-changes/simple-changes.component.spec.ts

@@ -0,0 +1,54 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { CommonModule } from '@angular/common';
+
+import { SimpleChangesComponent } from './simple-changes.component';
+
+describe('SimpleChangesComponent', () => {
+  let spectator: Spectator<SimpleChangesComponent>;
+
+  const createComponent = createComponentFactory({
+    component: SimpleChangesComponent,
+    imports: [CommonModule]
+  });
+
+  it('should be sequence of calls is correct', () => {
+    spectator = createComponent({
+      props: { value: '1' }
+    });
+
+    const { hooks } = spectator.component;
+
+    expect(hooks.length).toBe(2);
+    expect(hooks[0]).toBe('ngOnChanges');
+    expect(hooks[1]).toBe('ngOnInit');
+  });
+
+  it('should be set first change value and next updates', () => {
+    spectator = createComponent({ props: { value: '1' } });
+
+    const { changes } = spectator.component;
+
+    expect(changes.length).toBe(1, 'size after compile');
+    expect(changes[0].currentValue).toBe('1', 'first change currentValue');
+    expect(changes[0].previousValue).toBe(undefined, 'first change previousValue');
+    expect(changes[0].firstChange).toBe(true, 'first change firstChange');
+
+    spectator.setInput({ value: '2' });
+
+    expect(changes.length).toBe(2, 'size after update');
+    expect(changes[1].currentValue).toBe('2', 'after update currentValue');
+    expect(changes[1].previousValue).toBe('1', 'after update previousValue');
+    expect(changes[1].firstChange).toBe(false, 'after update firstChange');
+  });
+
+  it('should not update when value is equal', () => {
+    spectator = createComponent({ props: { value: '1' } });
+
+    const { changes } = spectator.component;
+
+    expect(changes.length).toBe(1, 'size after compile');
+
+    spectator.setInput({ value: '1' });
+    expect(changes.length).toBe(1, 'not updated');
+  });
+});

projects/spectator/test/simple-changes/simple-changes.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges } from '@angular/core';
+
+// tslint:disable:template-no-call-expression
+
+@Component({
+  selector: 'app-simple-changes',
+  template: ``
+})
+export class SimpleChangesComponent implements OnInit, OnChanges {
+  @Input() public value;
+
+  public hooks: string[] = [];
+  public changes: SimpleChange[] = [];
+
+  public ngOnInit(): void {
+    this.hooks.push('ngOnInit');
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    this.hooks.push('ngOnChanges');
+
+    if ('value' in changes) {
+      this.changes.push(changes.value);
+    }
+  }
+}