chat on gitter npm version build status coverage status language grade

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 translation 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.

Reading: ng-mocks

To stay with the latest back translation, you can set the versions to <=13.0.2 in your package.json for @angular/* and @angular-devkit/* .

Important links

Very short introduction

global configuration for mocks in src/test.ts. In case of joke, src/setupJest.ts should be used .

 // All methods in mock declarations and providers
 // will be automatically spied on their initiation .
 // hypertext transfer protocol : //ng-mocks.sudo.eu/extra/auto-spy
 ngMocks. autoSpy ( 'jasmine ' ) ;  // or joke

 // ngMocks.defaultMock helps to customize mocks
 // globally. therefore, we can avoid copy-pasting
 // among tests .
 // hypertext transfer protocol : //ng-mocks.sudo.eu/api/ngMocks/defaultMock
 ngMocks. defaultMock ( AuthService,  ( )  = >  ( {
   isLoggedIn $:  EMPTY ,
   currentUser $:  EMPTY ,
 } ) ) ;

An exercise of a specification for a profile edit component .

 // Let 's think that there is a ProfileComponent
 // and it has 3 text fields : e-mail, firstName ,
 // lastName, and a exploiter can edit them .
 // In the postdate examination suite, we would like to
 // cover demeanor of the component .
 identify ( 'profile ',  ( )  = >  {
   // First of all, we would like to reuse the same
   // TestBed in every test .
   // ngMocks.faster suppresses readjust of TestBed
   // after each screen and allows to use TestBed ,
   // MockBuilder and MockRender in beforeAll .
   // hypertext transfer protocol : //ng-mocks.sudo.eu/api/ngMocks/faster
   ngMocks. fast ( ) ;

   // Let 's declare TestBed in beforeAll
   // alternatively of beforeEach .
   // The code mocks everything in SharedModule
   // and provides a mock AuthService .
   beforeAll ( ( )  = >  {
     render  TestBed. configureTestingModule ( {
       imports:  [
         MockModule ( SharedModule ),  // mock
         ReactiveFormsModule,  // veridical
       ] ,
       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 exchange detection, and creates a
     // wrapping component with a template like
     //

// hypertext transfer protocol : //ng-mocks.sudo.eu/api/MockRender
const repair = MockRender ( ProfileComponent ) ;
expect (
repair. point. componentInstance,

). toEqual ( jasmine. any ( ProfileComponent ) ) ;
} ) ;
// A quiz to ensure that the component listens
// on ctrl+s hotkey .
it ( 'saves on ctrl+s hot keystone ', ( ) = > {
// A bogus profile .
const profile = {
e-mail: 'test2 @ email.com ' ,
firstName: 'testFirst2 ' ,
lastName: 'testLast2 ' ,
} ;
// A spy to track save calls .
// MockInstance helps to configure mock
// providers, declarations and modules
// before their low-level formatting and custom .
// hypertext transfer protocol : //ng-mocks.sudo.eu/api/MockInstance
const spySave = MockInstance (
StorageService ,
'save ' ,
jasmine. createSpy ( 'StorageService.save ' ) ,
) ;
// Renders //.
// hypertext transfer protocol : //ng-mocks.sudo.eu/api/MockRender
const { point } = MockRender (
ProfileComponent ,
{ profile }, // bindings
) ;
// Let 's change the value of the kind control
// for electronic mail addresses with a random value .
// ngMocks.change finds a associate dominance
// value accessor and updates it by rights .
// hypertext transfer protocol : //ng-mocks.sudo.eu/api/ngMocks/change
ngMocks. change (
' [ name=email ] ', // cesium picker
'test3 @ em.ail ', // an e-mail address
) ;
// Let 's ensure that nothing has been called .
expect ( spySave ). not. toHaveBeenCalled ( ) ;
// Let 's assume that there is a host hearer
// for a keyboard combination of ctrl+s ,
// and we want to trigger it .
// ngMocks.trigger helps to emit events via
// bare interface .
// hypertext transfer protocol : //ng-mocks.sudo.eu/api/ngMocks/trigger
ngMocks. trip ( point, 'keyup.control.s ' ) ;
// The spy should be called with the drug user
// and the random e-mail address .
expect ( spySave ). toHaveBeenCalledWith ( {
electronic mail: 'test3 @ em.ail ' ,
firstName: profile. firstName ,
lastName: profile. lastName ,
} ) ;
} ) ;
} ) ; profit.

Extra

If you like ng-mocks, please support it :
Thank you !
P.S. Feel rid to contact us if you need help .