https://github.com/dzikowski/angularjs-jest
Testing AngularJS applications with Jest
https://github.com/dzikowski/angularjs-jest
angularjs jest jest-snapshots
Last synced: 24 days ago
JSON representation
Testing AngularJS applications with Jest
- Host: GitHub
- URL: https://github.com/dzikowski/angularjs-jest
- Owner: dzikowski
- License: mit
- Created: 2018-12-05T12:15:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T08:29:42.000Z (over 2 years ago)
- Last Synced: 2025-04-21T02:39:52.705Z (about 1 month ago)
- Topics: angularjs, jest, jest-snapshots
- Language: JavaScript
- Homepage:
- Size: 1.14 MB
- Stars: 28
- Watchers: 2
- Forks: 4
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angularjs-jest
[](https://travis-ci.org/dzikowski/angularjs-jest)
[](https://www.npmjs.com/package/angularjs-jest)
[](https://www.npmjs.com/package/angularjs-jest)
Testing AngularJS applications with Jest. You can see the article on Medium for more information: [AngularJS and Jest. Three steps to improve your legacy frontend tests](https://blog.softwaremill.com/angularjs-and-jest-three-steps-to-improve-your-legacy-frontend-tests-90674c0017e4).
## Instalation
`npm install angularjs-jest --save-dev` or `yarn add --dev angularjs-jest`
Required libraries in your project:
- `angular` in version `1.5.0` or higher
- `angular-mocks` in version `1.5.0` or higher
- `jest` in version higher than `23.0.1`
## Usage
### Test app setup
```javascript
import { createTestApp } from 'angularjs-jest';
const testApp = createTestApp({
// modules to include in test app (optional)
modules: ['some.test.module'],
// services or service components to mock in test app (optional)
mocks: {
SomeSyncService: { get: () => 42 },
SomeAsyncService: { getAsync: () => Promise.resolve('42, I promise') },
},
// additional services or service components you want to access (optional)
access: ['$http']
});
```
### Testing the view
```javascript
testApp.$scope.name = 'Alice';
const element = testApp.render('Hello {{ name }}');
expected(element.text()).toEqual('Hello Alice')
```
The `render` function accepts any valid AngularJS template. For example you can use an arbitrary HTML code or the components you have defined in your application (you just need to remember to provide module names in the `modules` parameter of `createTestApp`).
### Asynchronous tests
Let's assume you have the following component defined in your app:
```javascript
module.component('asyncComponent', {
template: 'Answer: {{ $ctrl.answer }}',
controller(SomeAsyncService) {
this.$onInit = () => SomeAsyncService.getAsync().then((resp) => { this.answer = resp; });
}
})
```
You can test this component the following way:
```javascript
const element = testApp.render('');
// at first it contains no answer
expect(element.text().trim()).toEqual('Answer:');
// but then the promise resolves and the answer appears
await testApp.eventually(() => expect(element.text().trim()).toEqual('Answer: 42, I promise'));
```
The `eventually` function returns a `Promise`. This `Promise` is resolved if the provided function eventually passes, and it is rejected if the function fails to pass after several calls.
By default there is no delay between the calls, however it can be configured, which is useful when some services respond with delay. In the example below the assertion will be performed at most 10 times with 200 ms delay between the calls.
```javascript
await testApp.eventually(
() => expect(element.text().trim()).toEqual('Answer: 42, I promise'),
{ interval: 200, limit: 10 },
);
```
### Snapshot tests
The library provides a snapshot serializer for HTML code generated by AngularJS. It removes some of the clutter comments generated by AngularJS and reformats the HTML to be developer-friendly. It works out of the box:
```javascript
const element = testApp.render('Hello {{ name }}');
expect(element).toMatchSnapshot();
```
In case of an asynchronous component, when the state stabilizes after a few digest cycles, you should make an additional assertion to check if the component is ready. For example:
```javascript
const element = testApp.render('');
await testApp.eventually(() => expect(element.text()).toContain('42, I promise'));
expect(element).toMatchSnapshot();
```