Package Exports
- ng-mocks
- ng-mocks/cjs/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-mocks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 |
---|---|---|---|---|
>13.0.2 | in progress | |||
<=13.0.2 | 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 |
PLEASE NOTE: If you are using Angular 13 or planning to use it,
please note that currently only Angular <=13.0.2
is supported,
work is in progress to implement support of Angular >13.0.2
.
Thank you for patience, understanding and support.
To stay with the latest supported version, you can set the versions to <=13.0.2
in your package.json
for @angular/*
and @angular-devkit/*
.
Important links
- Live example on StackBlitz
- Live example on CodeSandbox
Very short introduction
Global configuration for mocks in src/test.ts
.
In case of jest, src/setupJest.ts
should be used.
// All methods in mock declarations and providers
// will be automatically spied on their creation.
// https://ng-mocks.sudo.eu/extra/auto-spy
ngMocks.autoSpy('jasmine'); // or jest
// ngMocks.defaultMock helps to customize mocks
// globally. Therefore, we can avoid copy-pasting
// among tests.
// https://ng-mocks.sudo.eu/api/ngMocks/defaultMock
ngMocks.defaultMock(AuthService, () => ({
isLoggedIn$: EMPTY,
currentUser$: EMPTY,
}));
An example of a spec for a profile edit component.
// Let's imagine that there is a ProfileComponent
// and it has 3 text fields: email, firstName,
// lastName, and a user can edit them.
// In the following test suite, we would like to
// cover behavior of the component.
describe('profile', () => {
// First of all, we would like to reuse the same
// TestBed in every test.
// ngMocks.faster suppresses reset of TestBed
// after each test and allows to use TestBed,
// MockBuilder and MockRender in beforeAll.
// https://ng-mocks.sudo.eu/api/ngMocks/faster
ngMocks.faster();
// Let's declare TestBed in beforeAll
// instead of beforeEach.
// The code mocks everything in SharedModule
// and provides a mock AuthService.
beforeAll(() => {
return TestBed.configureTestingModule({
imports: [
MockModule(SharedModule), // mock
ReactiveFormsModule, // real
],
declarations: [
MockComponent(AvatarComponent), // mock
ProfileComponent, // real
],
providers: [
MockProvider(AuthService), // mock
],
}).compileComponents();
});
// A test to ensure that ProfileComponent
// can be created.
it('should be created', () => {
// MockRender is an advanced version of
// TestBed.createComponent.
// It respects all lifecycle hooks,
// onPush change detection, and creates a
// wrapper component with a template like
// <app-root ...allInputs></profile>
// https://ng-mocks.sudo.eu/api/MockRender
const fixture = MockRender(ProfileComponent);
expect(
fixture.point.componentInstance,
).toEqual(jasmine.any(ProfileComponent));
});
// A test to ensure that the component listens
// on ctrl+s hotkey.
it('saves on ctrl+s hot key', () => {
// A fake profile.
const profile = {
email: 'test2@email.com',
firstName: 'testFirst2',
lastName: 'testLast2',
};
// A spy to track save calls.
// MockInstance helps to configure mock
// providers, declarations and modules
// before their initialization and usage.
// https://ng-mocks.sudo.eu/api/MockInstance
const spySave = MockInstance(
StorageService,
'save',
jasmine.createSpy('StorageService.save'),
);
// Renders <profile [profile]="params.profile">
// </profile>.
// https://ng-mocks.sudo.eu/api/MockRender
const { point } = MockRender(
ProfileComponent,
{ profile }, // bindings
);
// Let's change the value of the form control
// for email addresses with a random value.
// ngMocks.change finds a related control
// value accessor and updates it properly.
// https://ng-mocks.sudo.eu/api/ngMocks/change
ngMocks.change(
'[name=email]', // css selector
'test3@em.ail', // an email address
);
// Let's ensure that nothing has been called.
expect(spySave).not.toHaveBeenCalled();
// Let's assume that there is a host listener
// for a keyboard combination of ctrl+s,
// and we want to trigger it.
// ngMocks.trigger helps to emit events via
// simple interface.
// https://ng-mocks.sudo.eu/api/ngMocks/trigger
ngMocks.trigger(point, 'keyup.control.s');
// The spy should be called with the user
// and the random email address.
expect(spySave).toHaveBeenCalledWith({
email: 'test3@em.ail',
firstName: profile.firstName,
lastName: profile.lastName,
});
});
});
Profit.
Extra
If you like ng-mocks
, please support it:
Thank you!
P.S. Feel free to contact us if you need help.