<p dir="auto"><strong>I'm submitting a feature request</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ x ] feature request"><pre class="notranslate"><code class="notranslate">[ x ] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Currently when testing a component we need to manually create a new component for testing inputs set on the template which is pretty verbose and difficult to test templates with optional bindings and various input parameters.</p>
<p dir="auto">For example:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Component used to setup our test.
@Component({
  selector: 'my-comp',
  template: '&lt;my-component [someInput]=&quot;foo&quot; [otherInput]=&quot;bar&quot;&gt;&lt;/my-component&gt;',
  directives: [MyComponent],
})
class MyTestComponent {
  foo = 'abc';
  bar = 123;
}"><pre class="notranslate"><span class="pl-c">// Component used to setup our test.</span>
@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'my-comp'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">'&lt;my-component [someInput]="foo" [otherInput]="bar"&gt;&lt;/my-component&gt;'</span><span class="pl-kos">,</span>
  <span class="pl-c1">directives</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-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MyTestComponent</span> <span class="pl-kos">{</span>
  <span class="pl-c1">foo</span> <span class="pl-c1">=</span> <span class="pl-s">'abc'</span><span class="pl-kos">;</span>
  <span class="pl-c1">bar</span> <span class="pl-c1">=</span> <span class="pl-c1">123</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Instead, it would be nice to have TestBed create an on-the-fly test wrapper for our component so that we can pass in the component, the template using the component, and a set of bindings for the template.</p>
<p dir="auto">Consider something along the lines of:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const foo = 'abc';
const bar = 123;
const fixture = TestBed.compile(MyComponent, 
    '&lt;my-component [someData]=&quot;foo&quot; [otherData]=&quot;bar&quot;&gt;&lt;/my-component&gt;', {foo, bar});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">foo</span> <span class="pl-c1">=</span> <span class="pl-s">'abc'</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">bar</span> <span class="pl-c1">=</span> <span class="pl-c1">123</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">fixture</span> <span class="pl-c1">=</span> <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">compile</span><span class="pl-kos">(</span><span class="pl-smi">MyComponent</span><span class="pl-kos">,</span> 
    <span class="pl-s">'&lt;my-component [someData]="foo" [otherData]="bar"&gt;&lt;/my-component&gt;'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>foo<span class="pl-kos">,</span> bar<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<ul dir="auto">
<li>More concise testing</li>
<li>Easier to test different template bindings</li>
</ul>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> [ all ]</li>
<li><strong>Language:</strong> [ all ]</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto">TBH I'm not sure if this is a bug, a feature request, or just a product of my ignorance/incomplete docs.</p>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">When I have a component using <code class="notranslate">ChangeDetectionStrategy.OnPush</code>, I can create a test fixture via <code class="notranslate">const fixture = TestBed.createComponent(TestComponent)</code> but can't figure out how to force a change detection after altering one of the input properties. Just calling <code class="notranslate">fixture.detectChanges()</code> like I would for a <code class="notranslate">ChangeDetectionStrategy.Default</code> component doesn't seem to do it. I've also tried in conjunction with <code class="notranslate">fixture.changeDetectorRef.markForCheck()</code> but still no luck. However, if I wrap my OnPush component in another component for testing purposes, it works as expected.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Should be some way to force a change detection on a OnPush component when changing its inputs directly via the component fixture (rather than via a wrapper component).</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">test.component:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'my-test',
  template: '&lt;p&gt;{{ content }}&lt;/p&gt;',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent {
  @Input() content: string;
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">Component</span><span class="pl-kos">,</span> <span class="pl-smi">Input</span><span class="pl-kos">,</span> <span class="pl-smi">ChangeDetectionStrategy</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'my-test'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">'&lt;p&gt;{{ content }}&lt;/p&gt;'</span><span class="pl-kos">,</span>
  <span class="pl-c1">changeDetection</span>: <span class="pl-smi">ChangeDetectionStrategy</span><span class="pl-kos">.</span><span class="pl-c1">OnPush</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">TestComponent</span> <span class="pl-kos">{</span>
  @<span class="pl-smi">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">content</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">test.component.spec.ts (this test fails w/ OnPush but passes with Default):</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { TestComponent } from './test.component';

describe('Test Component', () =&gt; {
  beforeEach(() =&gt; {
    TestBed.configureTestingModule({declarations: [TestComponent]});
  });
  it('should render the bound content within a p element', () =&gt; {
    const fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    const p = fixture.debugElement.query(By.css('p'));
    expect((p.nativeElement as HTMLParagraphElement).innerText).toBeFalsy();
    fixture.componentInstance.content = 'Test!';
    fixture.detectChanges();
    expect((p.nativeElement as HTMLParagraphElement).innerText).toEqual('Test!');
  });
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">TestBed</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core/testing'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">By</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/platform-browser'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">TestComponent</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./test.component'</span><span class="pl-kos">;</span>

<span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-s">'Test Component'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-en">beforeEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">configureTestingModule</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">declarations</span>: <span class="pl-kos">[</span><span class="pl-smi">TestComponent</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><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should render the bound content within a p element'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">fixture</span> <span class="pl-c1">=</span> <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">createComponent</span><span class="pl-kos">(</span><span class="pl-smi">TestComponent</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">const</span> <span class="pl-s1">p</span> <span class="pl-c1">=</span> <span class="pl-s1">fixture</span><span class="pl-kos">.</span><span class="pl-c1">debugElement</span><span class="pl-kos">.</span><span class="pl-en">query</span><span class="pl-kos">(</span><span class="pl-smi">By</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'p'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">p</span><span class="pl-kos">.</span><span class="pl-c1">nativeElement</span> <span class="pl-k">as</span> <span class="pl-smi">HTMLParagraphElement</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">innerText</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeFalsy</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">content</span> <span class="pl-c1">=</span> <span class="pl-s">'Test!'</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-en">expect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">p</span><span class="pl-kos">.</span><span class="pl-c1">nativeElement</span> <span class="pl-k">as</span> <span class="pl-smi">HTMLParagraphElement</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">innerText</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toEqual</span><span class="pl-kos">(</span><span class="pl-s">'Test!'</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>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">test.component.wrapped.spec.ts (this passes with OnPush or Default):</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { TestComponent } from './test.component';

@Component({
  selector: 'my-wrapper',
  template: '&lt;my-test [content]=&quot;content&quot;&gt;&lt;/my-test&gt;'
})
class WrapperComponent {
  content: string;
}
describe('Test Component (Wrapped)', () =&gt; {
  beforeEach(() =&gt; {
    TestBed.configureTestingModule({declarations: [TestComponent, WrapperComponent]});
  });

  it('should render the bound content within a p element', () =&gt; {
    const fixture = TestBed.createComponent(WrapperComponent);
    fixture.detectChanges();
    const p = fixture.debugElement.query(By.css('p'));
    expect((p.nativeElement as HTMLParagraphElement).innerText).toBeFalsy();
    fixture.componentInstance.content = 'Test!';
    fixture.detectChanges();
    expect((p.nativeElement as HTMLParagraphElement).innerText).toEqual('Test!');
  });
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">TestBed</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core/testing'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">By</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/platform-browser'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">TestComponent</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./test.component'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'my-wrapper'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">'&lt;my-test [content]="content"&gt;&lt;/my-test&gt;'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">WrapperComponent</span> <span class="pl-kos">{</span>
  <span class="pl-c1">content</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-s">'Test Component (Wrapped)'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-en">beforeEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">configureTestingModule</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">declarations</span>: <span class="pl-kos">[</span><span class="pl-smi">TestComponent</span><span class="pl-kos">,</span> <span class="pl-smi">WrapperComponent</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><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should render the bound content within a p element'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">fixture</span> <span class="pl-c1">=</span> <span class="pl-smi">TestBed</span><span class="pl-kos">.</span><span class="pl-en">createComponent</span><span class="pl-kos">(</span><span class="pl-smi">WrapperComponent</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">const</span> <span class="pl-s1">p</span> <span class="pl-c1">=</span> <span class="pl-s1">fixture</span><span class="pl-kos">.</span><span class="pl-c1">debugElement</span><span class="pl-kos">.</span><span class="pl-en">query</span><span class="pl-kos">(</span><span class="pl-smi">By</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'p'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">p</span><span class="pl-kos">.</span><span class="pl-c1">nativeElement</span> <span class="pl-k">as</span> <span class="pl-smi">HTMLParagraphElement</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">innerText</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeFalsy</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">content</span> <span class="pl-c1">=</span> <span class="pl-s">'Test!'</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-en">expect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">p</span><span class="pl-kos">.</span><span class="pl-c1">nativeElement</span> <span class="pl-k">as</span> <span class="pl-smi">HTMLParagraphElement</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">innerText</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toEqual</span><span class="pl-kos">(</span><span class="pl-s">'Test!'</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>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">Would prefer to use roughly the same testing patterns regardless of which change detection strategy I'm using.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.1.0</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> TS 2.0.3</li>
</ul>