@Component({
  selector: 'text-counter',
  templateUrl: 'text-counter.component.html',
  styleUrls: ['text-counter.component.css']
})
export class TextCounterComponent implements OnChanges {

  @Input() inputText: string;
  @Input() min: number;
  @Input() max: number;
  @Input() tolerance: number = 20;

  message: string;
  messageClass: string;

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges) {

    const input: string = changes['inputText'].currentValue;

    function expandMessage(rawMessage, n) {
      return rawMessage.replace('%', n);
    }

    const settings = {
      initialPrompt: 'saisissez au moins % caractères',
      nToGoPrompt: 'il manque % caractères',
      nLeftPrompt: 'encore % caractères autorisés',
      tooLongByPrompt: 'trop long de % caractères'
    };

    const length = input ? input.length : 0;

    this.messageClass = 'lightblue';

    if (length === 0) {
      this.message = expandMessage(settings.initialPrompt, this.min);
    }
    else if (length > 0 && length < this.min) {
      this.message = expandMessage(settings.nToGoPrompt, this.min - length);
    }
    else if (length >= this.min && length <= this.max) {
      if (length > this.max - this.tolerance) {
        this.messageClass = 'Gold';
      }
      this.message = expandMessage(settings.nLeftPrompt, this.max - length);
    }
    else {
      this.messageClass = 'Red';
      this.message = expandMessage(settings.tooLongByPrompt, length - this.max);
    }
  }
}

<span class="form-text" [ngClass]="messageClass">
  {{message}}
</span>

@Component({
  selector: `test-host-component`,
  template: `<div>
           <text-counter
              [inputText]="valueFromHost"
              [min]="2"
              [max]="500">
            </text-counter>
            </div>`
})
export class TestHostComponent {
  /* using viewChild we get access to the TestComponent which is a child of TestHostComponent */
  @ViewChild(TextCounterComponent)
  public textCounterComponent: any;
  /* this is the variable which is passed as input to the TestComponent */
  public valueFromHost: string;
}

describe('Component: TextCounter', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TextCounterComponent, TestHostComponent]
    })
      .compileComponents();
  }));

  it('should indicate min message', () => {
    const hostComponentFixture = TestBed.createComponent(TestHostComponent);
    const textCounterComponentFixture = TestBed.createComponent(TextCounterComponent);

    const de: DebugElement = textCounterComponentFixture.debugElement.query(By.css('span'));
    const el: HTMLElement = de.nativeElement;
    let testHostComponent = hostComponentFixture.componentInstance;

    testHostComponent.valueFromHost = 'a';

    spyOn(testHostComponent.textCounterComponent, 'ngOnChanges').and.callThrough();
    hostComponentFixture.detectChanges();
    textCounterComponentFixture.detectChanges();
    expect(testHostComponent.textCounterComponent.ngOnChanges).toHaveBeenCalled();

    console.log('el.textContent: ', el.textContent);
    expect(el.textContent).toContain('il manque');//This fails!!
  });
});

Chrome 54.0.2840 (Mac OS X 10.12.1) Component: TextCounter should indicate min message FAILED
        Expected '

        ' to contain 'il manque'.