Utilities for testing Angular directives which contain React components with ngReact.
These utilities are not for testing React components directly - for that I would recommend using Enzyme.
ngreact-test-utils
provides two functions - compile()
and simulate()
:
-
compile()
encapsulates all of the usual bootstrapping to set up Angular directives to test, in addition to flushing$timeout
to allow anyngReact
components to be added to the DOM. This function can also be used for Angular directives which do not use ngReact. -
simulate()
fires both Angular and React events for a given element, allowing the same tests to be run when Angular directives are migrated to React components with the use of ngReact.
npm i -D ngreact-test-utils
import {simulate, compile} from 'ngreact-test-utils';
Both angular
and angular-mocks
must be loaded to use.
See the test/ directory for example usage
Compiles an Angular directive and flushes $timeout
in order to compile any ngReact directives
-
el
(string) Element to compile -
scope
(object) Values to add to the directive's scope
(Object) Object containing the following:
-
el
(Object) The compiled Angular element -
scope
(Scope) The Angular scope for the element -
update
(Function) update([scope]) Merges any supplied values provided byscope
into the current scope, runs ascope.$digest
and flushes$timeout
to ensure ngReact directives are recompiled -
destroy
(Function) destroy() Destroys the element and scope
Fires both .triggerHandler()
on the element for Angular and generates a Synthetic Event for React using React Test Utils' simulate() method.
-
el
(HTMLElement|Object) Raw DOM Node or Angular element to fire the event on -
event
(string) Event to fire. Can either be in lowercase or using React's lower camelCase conventions - the appropriate conversion will occur internally -
eventData
(Object) Additional data to pass to the event. By defaultbubbles
is set to true.
A number of convenience methods are also available for simulate
for common events. For all other events, or for additional flexibility, use simulate()
directly.
-
note 1: For
keyUp
,keyDown
andkeyPress
,keyCode
,which
andcharCode
will all be set to the value ofkeyCode
, which should be a number. To usekey
, this must be passed ineventData
-
note 2:
value
will be set on the raw DOM node's.value
property prior to firing a change event. If you do not require this behaviour, usesimulate()
directly.