Simulate directive output in component unit test

Question

My Angular 5 component uses typeahead directive of ngx-bootstrap, like this:

<input [(ngModel)]="inputted"
   [typeahead]="days"
   (typeaheadOnSelect)="select($event)"
   class="form-control">

Now I want to test that my component does what is expected when the user selects an item in the typeahead. I need to simulate the typeahead directive's typeaheadOnSelect output. How can I access the directive in my unit test, to manually emit a typeaheadOnSelect event? This far I have come to this point:

const elem: DebugElement = fixture.debugElement.query(By.css('input'));

which gives me the input element. How do I find the underlying typeahead directive from there?

Estus Flask · Accepted Answer · 2018-02-10 12:19:47Z

3

As explained in this answer, directive instances can be retrieved from injector:

import { TypeaheadDirective } from 'ngx-bootstrap';

...
const elem: DebugElement = fixture.debugElement.query(By.css('input'));
const dir = elem.injector.get(TypeaheadDirective);

A proper way is to isolate unit tests from third-party units and provide stubs for ngx-bootstrap directives instead of importing its module. A stub can optionally expose its externals as local variables instead of using injector to get class instances:

let typeaheadOutput;

...
@Directive({ selector: '[typeahead]' }
class TypeaheadDirectiveMock {
  @Input() typeahead;
  @Output() typeaheadOnSelect = typeaheadOutput = new EventEmitter();
}

TestBed.configureTestingModule({ declarations: [TypeaheadDirectiveMock], ...})
.compileComponents();

answered Feb 10, 2018 at 12:19

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Simulate directive output in component unit test

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related