Search Component Test

testIgnoringCustomElements.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
    MdIconModule,
    MdInputModule,
} from '@angular/material';

import { TsSearchComponent } from './search.component';

describe('TsSearchComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        BrowserAnimationsModule,
        FormsModule,
        MdIconModule,
        MdInputModule,
      ],
      declarations: [
        TsSearchComponent,
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
      ],
    })
      .compileComponents()
      .then(() => {
        this.fixture = TestBed.createComponent(TsSearchComponent);
        this.component = this.fixture.componentInstance;
        this.fixture.detectChanges();
      });
  }));


  it('should be created', () => {
    expect(this.component).toBeTruthy();
  });

});

testIgnoringCustomElementsErrors.sh

Error: Uncaught (in promise): Error: No value accessor for form control with name: 'query'
Error: No value accessor for form control with name: 'query'

testWithMockInput.ts

import {
  Component,
  Input,
  ViewChild,
} from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
    MdIconModule,
    MdInputModule,
} from '@angular/material';
import { Observable } from 'rxjs/Observable';

import { TsSearchComponent } from './search.component';
import { ElementBase } from '../utilities/element-base';

/* tslint:disable:component-class-suffix */
@Component({
  selector: `ts-input`,
  template: ``,
})
class TsInputComponentMock extends ElementBase<string> {
  @ViewChild(NgModel) model: NgModel;
  public validationEnabled: boolean = false;
  public failures;
  @Input() label: string;
  @Input() isDisabled: boolean = false;
  @Input() prefixIcon: string;
  @Input() canClear: boolean = false;
  @Input() initialValue: string;
  @Input() isFocused: boolean;
  @Input() hideRequiredMarker: boolean = true;
  @Input() hint: string;
}
/* tslint-enable: component-class-suffix */

describe('TsSearchComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        BrowserAnimationsModule,
        FormsModule,
        MdIconModule,
        MdInputModule,
      ],
      declarations: [
        TsInputComponentMock,
        TsSearchComponent,
      ],
    })
      .compileComponents()
      .then(() => {
        this.fixture = TestBed.createComponent(TsSearchComponent);
        this.component = this.fixture.componentInstance;
        this.fixture.detectChanges();
      });
  }));


  it('should be created', () => {
    expect(component).toBeTruthy();
  });

});

testWithMockInputErrors.sh

[1] 16 06 2017 10:35:51.639:INFO [watcher]: Changed file "/Users/bc/code/Terminus/terminus-ui/src/lib/src/search/search.component.spec.js".
[1] Chrome 58.0.3029 (Mac OS X 10.12.5) ERROR
[1]   {
[1]     "originalErr": {},
[1]     "__zone_symbol__currentTask": {
[1]       "type": "microTask",
[1]       "state": "notScheduled",
[1]       "source": "Promise.then",
[1]       "zone": "<root>",
[1]       "cancelFn": null,
[1]       "runCount": 0
[1]     }
[1]   }
[1]
[1] Chrome 58.0.3029 (Mac OS X 10.12.5) ERROR
[1]   {
[1]     "originalErr": {},
[1]     "__zone_symbol__currentTask": {
[1]       "type": "microTask",
[1]       "state": "notScheduled",
[1]       "source": "Promise.then",
[1]       "zone": "<root>",
[1]       "cancelFn": null,
[1]       "runCount": 0
[1]     }
[1]   }
[1]