🚨 AngularJS Enzyme
Unit testing utility for AngularJS (1.x), heavily inspired by the wonderful Enzyme API. ❤️
Therefore, it is well suited for organisations and individuals moving from AngularJS to React. It is test framework and runner agnostic, but the examples are written using Jest syntax.
An example showing the utility in use can be found here.
Available methods:
mount
mockComponent
Returned classes:
TestElementWrapper
mock
Usage
npm install angularjs-enzyme --save-dev
Module context
;
Non-module context
- Include the script from
node_modules/angularjs-enzyme/dist/angularjs-enzyme.js
. - Use the utility from the global context under the name
angularjsEnzyme
.
API
mount(tagName[, props]) => TestElementWrapper
Mounts the component with tagName
(String
) and optional props
(Object
) and returns a TestElementWrapper
with numerous helper methods. The props are attached to the $ctrl
available in the template scope. Only components with one-way bound props (<
) can be mounted.
Example
some-component.html
{{ $ctrl.title }}{{ $ctrl.text }}
;;; ;
mockComponent(name) => mock
By default, AngularJS renders the whole component tree. This function mocks a child component with name
(String
) in the component under test and returns a mock
. The child component won't be compiled and its controller won't be invoked, enabling testing the component under test in isolation. In addition, the returned mock
has methods useful for testing.
Example
;;; ;
TestElementWrapper
API
.length => Number
The number of elements in the wrapper.
Example
some-component.html
1 2 3
;
.html() => String
Returns HTML of the wrapper. It should only be used for logging purposes, in tests other methods should be preferred.
Example
some-component.html
Some title
;
.text() => String
Example
some-component.html
Some titleSome text
;
.hasClass(className) => Boolean
Returns whether the wrapper has a class with className
(String
) or not.
Example
some-component.html
Pay
; ;
.exists() => Boolean
Returns whether or not the wrapper contains any elements.
Example
some-component.html
Pay
; ;
.find(selector) => TestElementWrapper
Returns a TestElementWrapper
(for chaining) with every element matching the selector
(String
).
Example
some-component.html
Wrong Wrong Wrong Correct
;
.first() => TestElementWrapper
Returns a TestElementWrapper
(for chaining) for the first element.
Example
some-component.html
BalanceBank transferCard
;
.at(index) => TestElementWrapper
Returns a TestElementWrapper
(for chaining) for element at index
(Number
).
Example
some-component.html
BalanceBank transferCard
;
.map(fn) => Array<Any>
Maps the nodes in the wrapper to another array using fn
(Function
).
Example
some-component.html
One Two Three
;
.props() => Object
Returns all wrapper props/attributes.
Example
some-component.html
Send money
;
.prop(key) => String
Returns wrapper prop/attribute value with provided key
(String
).
Example
some-component.html
Send money
;
.simulate(event[, data]) => Self
Calls an event handler on the wrapper for passed event
with data
(optional), updates the view, and returns wrapper for chaining.
NOTE: event
should be written in camelCase and without the on
present in the event handler name. Currently, change
and click
events are supported, with change
requiring an event format.
Example
some-component.html
{{ $ctrl.text }}Click me
let component;let onClick;; ; ;
.setProps(props) => Self
Merges props
(Object
) with existing props and updates view to reflect them, returning itself for chaining.
Example
some-component.html
{{ $ctrl.title }}{{ $ctrl.text }}
;
mock
API
.exists() => Boolean
Returns whether or not the mocked component exists in the rendered template.
Example
some-component.html
Show child
let component;; ;
.props() => Object
Returns all mocked component props.
Example
some-component.html
Something else
let component;; ;
.prop(key) => Any
Returns mocked component prop value with the provided key
(String
).
Example
some-component.html
Something else
let component;; ;
.simulate(event[, data]) => Self
Calls an event handler on the mocked component for passed event
with data
(optional), updates the view, and returns mocked component for chaining.
NOTE: event
should be written in camelCase and without the on
present in the event handler name. So, to call onSomePropChange
, .simulate('somePropChange')
should be used.
Example
some-component.html
Something else
;
Contributing
- Run tests with
npm run test:watch
.npm test
will check for package and changelog version match, ESLint and Prettier format in addition. - Bump version number in
package.json
according to semver and add an item that a release will be based on toCHANGELOG.md
. - Submit your pull request from a feature branch and get code reviews.
- If the pull request is approved and the CircleCI build passes, you will be able to squash/rebase and merge.
- Code will automatically be released to GitHub and published to npm according to the version specified in the changelog and
package.json
.
Other
For features and bugs, feel free to add issues or contribute.