Issue 1:
I'm submitting a feature request (check one with "x")

[ x ] feature request

Current behavior

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.

For example:

// Component used to setup our test.
@Component({
selector: 'my-comp',
template: '<my-component [someInput]="foo" [otherInput]="bar"></my-component>',
directives: [MyComponent],
})
class MyTestComponent {
foo = 'abc';
bar = 123;
}

Expected/desired behavior

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.

Consider something along the lines of:

const foo = 'abc';
const bar = 123;
const fixture = TestBed.compile(MyComponent,
'<my-component [someData]="foo" [otherData]="bar"></my-component>', {foo, bar});

What is the motivation / use case for changing the behavior?

More concise testing

Easier to test different template bindings

Please tell us about your environment:

Angular version: 2.0.0-rc.5

Browser: [ all ]

Language: [ all ]

Issue 2:
I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

TBH I'm not sure if this is a bug, a feature request, or just a product of my ignorance/incomplete docs.

Current behavior

When I have a component using ChangeDetectionStrategy.OnPush, I can create a test fixture via const fixture = TestBed.createComponent(TestComponent) but can't figure out how to force a change detection after altering one of the input properties. Just calling fixture.detectChanges() like I would for a ChangeDetectionStrategy.Default component doesn't seem to do it. I've also tried in conjunction with fixture.changeDetectorRef.markForCheck() but still no luck. However, if I wrap my OnPush component in another component for testing purposes, it works as expected.

Expected behavior

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).

Minimal reproduction of the problem with instructions

test.component:

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
selector: 'my-test',
template: '<p>{{ content }}</p>',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent {
@Input() content: string;
}

test.component.spec.ts (this test fails w/ OnPush but passes with Default):

import { TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { TestComponent } from './test.component';

describe('Test Component', () => {
beforeEach(() => {
TestBed.configureTestingModule({declarations: [TestComponent]});
});
it('should render the bound content within a p element', () => {
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!');
});
});

test.component.wrapped.spec.ts (this passes with OnPush or Default):

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: '<my-test [content]="content"></my-test>'
})
class WrapperComponent {
content: string;
}
describe('Test Component (Wrapped)', () => {
beforeEach(() => {
TestBed.configureTestingModule({declarations: [TestComponent, WrapperComponent]});
});

it('should render the bound content within a p element', () => {
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!');
});
});

What is the motivation / use case for changing the behavior?

Would prefer to use roughly the same testing patterns regardless of which change detection strategy I'm using.

Please tell us about your environment:

Angular version: 2.1.0

Browser: all

Language: TS 2.0.3