emit.md

🏠   →   Documentation   →   Built-In Functionality   →   emit

Other Predicates:   attributes ・ callLifeCycleHook ・call ・ clicked ・ debug ・ detectChanges ・ emit ・ provider ・ state ・ waitFakeAsync

---

This predicate emits an event on the target(s) associated with it. It optionally takes a configuration parameter which allows to further adjust its behavior.

Signature

emit(eventNameOrDispatcher?: Events<Html, Component> | EventDispatcher, arg?: any);

where the type constraint Html and Component refers to the HTML- and component-type of the subject associated with this predicate.

Please Note

the emit predicate is one of the few predicates that is additionally baked into ngtx' base api; so the following code example are doing one and the same thing:

When(the.DropDown)
  .does(emit('valueChange', 'Item 1'))
  .expect(host)
  .to(haveState({ value: 'item 1' }));

and:

When(the.DropDown)
  .emits('valueChange', 'Item 1')
  .expect(host)
  .to(haveState({ value: 'item 1' }));

This was done in order to improve the readability for this very common use case.

Examples

import { state, emit, nativeEvent } from '@centigrade/ngtx';

class the {
  static Input() {
    return get('input');
  }
  static SearchButton() {
    return get(ButtonComponent);
  }
}

it('should apply the value of the drop-down when it emits the valueChange event', () => {
  When(the.DropDown)
    .emits('valueChange', 'Item 1')
    .expect(host)
    .to(haveState({ value: 'item 1' }));
});

it('should update the text on input event', () => {
  When(host)
    .has(state({ searchText: '' }))
    .and(the.Input)
    .emits(nativeEvent('input', new KeyboardEvent({ key: 'x' })))
    .expect(host)
    .to(haveState({ searchText: 'x' }));
});