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:

Important links

• Documentation with examples of Angular testing
• CHANGELOG
• GitHub repo
• NPM package

• Live example on CodeSandbox
• Live example on StackBlitz

• start a discussion on GitHub
• ask a question on Stackoverflow
• report an issue on GitHub
• chat on gitter

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.

ts
1// All methods in mock declarations and providers
2// will be automatically spied on their creation.
3// https://ng-mocks.sudo.eu/extra/auto-spy
4ngMocks.autoSpy('jasmine'); // or jest
5
6// ngMocks.defaultMock helps to customize mocks
7// globally. Therefore, we can avoid copy-pasting
8// among tests.
9// https://ng-mocks.sudo.eu/api/ngMocks/defaultMock
10ngMocks.defaultMock(AuthService, () => ({
11  isLoggedIn$: EMPTY,
12  currentUser$: EMPTY,
13}));

An example of a spec for a profile edit component.

ts
1// Let's imagine that there is a ProfileComponent
2// and it has 3 text fields: email, firstName,
3// lastName, and a user can edit them.
4// In the following test suite, we would like to
5// cover behavior of the component.
6describe('profile:builder', () => {
7  // Helps to reset customizations after each test.
8  // Alternatively, you can enable
9  // automatic resetting in test.ts.
10  MockInstance.scope();
11
12  // Let's configure TestBed via MockBuilder.
13  // The code below says to mock everything in
14  // ProfileModule except ProfileComponent and
15  // ReactiveFormsModule.
16  beforeEach(() => {
17    // The result of MockBuilder should be returned.
18    // https://ng-mocks.sudo.eu/api/MockBuilder
19    return MockBuilder(
20      ProfileComponent,
21      ProfileModule,
22    ).keep(ReactiveFormsModule);
23    // // or old fashion way
24    // return TestBed.configureTestingModule({
25    //   imports: [
26    //     MockModule(SharedModule), // mock
27    //     ReactiveFormsModule, // real
28    //   ],
29    //   declarations: [
30    //     ProfileComponent, // real
31    //     MockPipe(CurrencyPipe), // mock
32    //     MockDirective(HoverDirective), // mock
33    //   ],
34    //   providers: [
35    //     MockProvider(AuthService), // mock
36    //   ],
37    // }).compileComponents();
38  });
39
40  // A test to ensure that ProfileComponent
41  // can be created.
42  it('should be created', () => {
43    // MockRender is an advanced version of
44    // TestBed.createComponent.
45    // It respects all lifecycle hooks,
46    // onPush change detection, and creates a
47    // wrapper component with a template like
48    // <app-root ...allInputs></profile>
49    // and renders it.
50    // It also respects all lifecycle hooks.
51    // https://ng-mocks.sudo.eu/api/MockRender
52    const fixture = MockRender(ProfileComponent);
53
54    expect(
55      fixture.point.componentInstance,
56    ).toEqual(assertion.any(ProfileComponent));
57  });
58
59  // A test to ensure that the component listens
60  // on ctrl+s hotkey.
61  it('saves on ctrl+s hot key', () => {
62    // A fake profile.
63    const profile = {
64      email: '[email protected]',
65      firstName: 'testFirst2',
66      lastName: 'testLast2',
67    };
68
69    // A spy to track save calls.
70    // MockInstance helps to configure mock
71    // providers, declarations and modules
72    // before their initialization and usage.
73    // https://ng-mocks.sudo.eu/api/MockInstance
74    const spySave = MockInstance(
75      StorageService,
76      'save',
77      jasmine.createSpy(), // or jest.fn()
78    );
79
80    // Renders <profile [profile]="params.profile">
81    // </profile>.
82    // https://ng-mocks.sudo.eu/api/MockRender
83    const { point } = MockRender(
84      ProfileComponent,
85      { profile }, // bindings
86    );
87
88    // Let's change the value of the form control
89    // for email addresses with a random value.
90    // ngMocks.change finds a related control
91    // value accessor and updates it properly.
92    // https://ng-mocks.sudo.eu/api/ngMocks/change
93    ngMocks.change(
94      '[name=email]', // css selector
95      '[email protected]', // an email address
96    );
97
98    // Let's ensure that nothing has been called.
99    expect(spySave).not.toHaveBeenCalled();
100
101    // Let's assume that there is a host listener
102    // for a keyboard combination of ctrl+s,
103    // and we want to trigger it.
104    // ngMocks.trigger helps to emit events via
105    // simple interface.
106    // https://ng-mocks.sudo.eu/api/ngMocks/trigger
107    ngMocks.trigger(point, 'keyup.control.s');
108
109    // The spy should be called with the user
110    // and the random email address.
111    expect(spySave).toHaveBeenCalledWith({
112      email: '[email protected]',
113      firstName: profile.firstName,
114      lastName: profile.lastName,
115    });
116  });
117});

Profit.

Extra

If you like ng-mocks, please support it:

• with a star on GitHub
• with a tweet

Thank you!

P.S. Feel free to contact us if you need help.