<p dir="auto">I was trying to write a unit test which relied on code that was intended to run during <code class="notranslate">ngOnChanges</code>,</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="it('should emit an event when the message has changed', injectAsync([TestComponentBuilder], (tcb) =&gt; {
  return tcb.createAsync(MyComponent, (fixture) =&gt; 
    var result = fixture.componentInstance.change.first().toPromise().then((change) =&gt; {
       //expectations
    });
   fixture.componentInstance.message = 'some message';
   fixture.detectChanges();
   return result;   
});"><pre class="notranslate"><span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should emit an event when the message has changed'</span><span class="pl-kos">,</span> <span class="pl-en">injectAsync</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-smi">TestComponentBuilder</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">tcb</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s1">tcb</span><span class="pl-kos">.</span><span class="pl-en">createAsync</span><span class="pl-kos">(</span><span class="pl-smi">MyComponent</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">fixture</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> 
    <span class="pl-s1">var</span> <span class="pl-s1">result</span> <span class="pl-c1">=</span> <span class="pl-s1">fixture</span><span class="pl-kos">.</span><span class="pl-c1">componentInstance</span><span class="pl-kos">.</span><span class="pl-c1">change</span><span class="pl-kos">.</span><span class="pl-en">first</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toPromise</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">change</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
       <span class="pl-c">//expectations</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-s1">fixture</span><span class="pl-kos">.</span><span class="pl-c1">componentInstance</span><span class="pl-kos">.</span><span class="pl-c1">message</span> <span class="pl-c1">=</span> <span class="pl-s">'some message'</span><span class="pl-kos"></span><span class="pl-kos">;</span>
   <span class="pl-s1">fixture</span><span class="pl-kos">.</span><span class="pl-en">detectChanges</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-k">return</span> <span class="pl-s1">result</span><span class="pl-kos">;</span>   
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos"></span><span class="pl-kos">;</span></pre></div>
<p dir="auto">However this does nothing as the change detector will not detect that the input property has changed, since I'm modifying the value on the child component.</p>
<p dir="auto">I eventually solved the issue by wrapping the test component in another component as follows:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@ng.Component({
   selector: 'my-component-host'
   template: '&lt;my-component [message]=&quot;message&quot; (change)=&quot;onChange.emit($event)&quot;&gt;&lt;/my-component&gt;
   directives: [MyComponent]
}) 
class MyComponentHost {
   message: string;
   onChange = new EventEmitter();
}"><pre class="notranslate">@<span class="pl-s1">ng</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
   <span class="pl-c1">selector</span>: <span class="pl-s">'my-component-host'</span>
   <span class="pl-s1">template</span>: '&lt;my-component [message]="message" (change)="onChange.emit($event)"&gt;&lt;/my-component&gt;
   directives: [MyComponent]
}) 
class MyComponentHost {
   message: string;
   onChange = new EventEmitter();
}</pre></div>
<p dir="auto">And then ran the test on the host component instead. However, this is needlessly cumbersome and verbose for what should be a simple unit test.</p>
<p dir="auto">Would it be possible to add a method like <code class="notranslate">ComponentFixture.bindInput(input: string, toValue: any)</code> which would modify one of the component's input properties so that the change is detected during change detection?</p>
<p dir="auto">Our package.json lists many peer dependencies as just dependencies, but should be reflected as peer dependencies:</p>
<ul dir="auto">
<li>reflect-metadata</li>
<li>rxjs</li>
<li>zone.js</li>
<li>es6-shim</li>
</ul>
<p dir="auto">This is to make sure duplicates don't end up in bundles, and to make sure Angular is sharing the same instances of modules. This is particularly important with RxJS where importing operators has a side effect of monkey-patching the <code class="notranslate">Observable</code> imported from <code class="notranslate">rxjs/Observable</code>.</p>