Mock components, services and more out of annoying dependencies for simplification of Angular testing
ng-mocks
facilitates Angular testing and helps to:
- mock Components, Directives, Pipes, Modules, Services and Tokens
- reduce boilerplate in tests
- access declarations via simple interface
The current version of the library has been tested and can be used with:
Angular | ng-mocks | Jasmine | Jest | Ivy |
---|
17 | latest | yes | yes | yes |
16 | latest | yes | yes | yes |
15 | latest | yes | yes | yes |
14 | latest | yes | yes | yes |
13 | latest | yes | yes | yes |
12 | latest | yes | yes | yes |
11 | latest | yes | yes | yes |
10 | latest | yes | yes | yes |
9 | latest | yes | yes | yes |
8 | latest | yes | yes | |
7 | latest | yes | yes | |
6 | latest | yes | yes | |
5 | latest | yes | yes | |
Important links
Very short introduction
Global configuration for mocks in src/test.ts
.
In case of jest, src/setup-jest.ts
/ src/test-setup.ts
should be used.
ngMocks.autoSpy('jasmine');
ngMocks.defaultMock(AuthService, () => ({
isLoggedIn$: EMPTY,
currentUser$: EMPTY,
}));
An example of a spec for a profile edit component.
describe('profile:builder', () => {
MockInstance.scope();
beforeEach(() => {
return MockBuilder(
ProfileComponent,
ProfileModule,
).keep(ReactiveFormsModule);
});
it('should be created', () => {
const fixture = MockRender(ProfileComponent);
expect(
fixture.point.componentInstance,
).toEqual(assertion.any(ProfileComponent));
});
it('saves on ctrl+s hot key', () => {
const profile = {
email: 'test2@email.com',
firstName: 'testFirst2',
lastName: 'testLast2',
};
const spySave = MockInstance(
StorageService,
'save',
jasmine.createSpy(),
);
const { point } = MockRender(
ProfileComponent,
{ profile },
);
ngMocks.change(
'[name=email]',
'test3@em.ail',
);
expect(spySave).not.toHaveBeenCalled();
ngMocks.trigger(point, 'keyup.control.s');
expect(spySave).toHaveBeenCalledWith({
email: 'test3@em.ail',
firstName: profile.firstName,
lastName: profile.lastName,
});
});
});
Profit.
If you like ng-mocks
, please support it:
Thank you!
P.S. Feel free to contact us if you need help.