An Angular testing library for creating mock services, components, directives, pipes and modules in unit tests.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Individual mock creation functions for all Angular constructs. Provides precise control over mock behavior and supports both automatic and manual mock configuration.
Creates mock implementations of Angular components with configurable behavior.
/**
* Creates a mock component with default behavior
* @param component - Component class to mock
* @returns Mock component class
*/
function MockComponent<T>(component: AnyType<T>): AnyType<T>;
/**
* Creates multiple mock components
* @param components - Array of component classes to mock
* @returns Array of mock component classes
*/
function MockComponents(...components: Array<AnyType<any>>): Array<AnyType<any>>;
/**
* Type for mocked components
*/
type MockedComponent<T> = T;Usage Examples:
import { MockComponent, MockComponents } from "ng-mocks";
// Mock a single component
const MockHeaderComponent = MockComponent(HeaderComponent);
// Mock multiple components
const [MockHeader, MockFooter, MockSidebar] = MockComponents(
HeaderComponent,
FooterComponent,
SidebarComponent
);
// Use in TestBed
TestBed.configureTestingModule({
declarations: [
TestComponent,
MockHeaderComponent,
MockFooter
]
});Creates mock implementations of services with optional property overrides.
/**
* Creates a mock service instance with optional overrides
* @param service - Service class to mock
* @param overrides - Partial implementation to override default behavior
* @returns Mock service instance
*/
function MockService<T>(service: AnyType<T>, overrides?: Partial<T>): T;Usage Examples:
import { MockService } from "ng-mocks";
// Mock service with default behavior
const mockAuthService = MockService(AuthService);
// Mock service with custom behavior
const mockHttpService = MockService(HttpService, {
get: jasmine.createSpy('get').and.returnValue(of({ data: 'test' })),
post: jasmine.createSpy('post').and.returnValue(of({ success: true })),
isAuthenticated: true
});
// Use in providers
TestBed.configureTestingModule({
providers: [
{ provide: AuthService, useValue: mockAuthService },
{ provide: HttpService, useValue: mockHttpService }
]
});Creates mock implementations of Angular modules.
/**
* Creates a mock module
* @param module - Module class to mock
* @returns Mock module class
*/
function MockModule<T>(module: AnyType<T>): AnyType<T>;
/**
* Type for mocked modules
*/
type MockedModule<T> = T;Usage Examples:
import { MockModule } from "ng-mocks";
// Mock a module
const MockSharedModule = MockModule(SharedModule);
const MockFeatureModule = MockModule(FeatureModule);
// Use in imports
TestBed.configureTestingModule({
imports: [
CommonModule,
MockSharedModule,
MockFeatureModule
]
});Creates mock implementations of Angular directives.
/**
* Creates a mock directive
* @param directive - Directive class to mock
* @returns Mock directive class
*/
function MockDirective<T>(directive: AnyType<T>): AnyType<T>;
/**
* Creates multiple mock directives
* @param directives - Array of directive classes to mock
* @returns Array of mock directive classes
*/
function MockDirectives(...directives: Array<AnyType<any>>): Array<AnyType<any>>;
/**
* Type for mocked directives
*/
type MockedDirective<T> = T;Usage Examples:
import { MockDirective, MockDirectives } from "ng-mocks";
// Mock a single directive
const MockHighlightDirective = MockDirective(HighlightDirective);
// Mock multiple directives
const mockDirectives = MockDirectives(
HighlightDirective,
TooltipDirective,
DragDropDirective
);
// Use in TestBed
TestBed.configureTestingModule({
declarations: [
TestComponent,
MockHighlightDirective,
...mockDirectives
]
});Creates mock implementations of Angular pipes with optional transform functions.
/**
* Creates a mock pipe with default behavior
* @param pipe - Pipe class to mock
* @param transform - Optional custom transform implementation
* @returns Mock pipe class
*/
function MockPipe<T>(pipe: AnyType<T>, transform?: any): AnyType<T>;
/**
* Creates multiple mock pipes
* @param pipes - Array of pipe classes to mock
* @returns Array of mock pipe classes
*/
function MockPipes(...pipes: Array<AnyType<any>>): Array<AnyType<any>>;
/**
* Type for mocked pipes
*/
type MockedPipe<T> = T;Usage Examples:
import { MockPipe, MockPipes } from "ng-mocks";
// Mock pipe with default behavior (returns input unchanged)
const MockCurrencyPipe = MockPipe(CurrencyPipe);
// Mock pipe with custom transform
const MockDatePipe = MockPipe(DatePipe, (value: Date) =>
value ? value.toISOString() : ''
);
// Mock multiple pipes
const mockPipes = MockPipes(
CurrencyPipe,
DatePipe,
UpperCasePipe
);
// Use in TestBed
TestBed.configureTestingModule({
declarations: [
TestComponent,
MockDatePipe,
...mockPipes
]
});Creates mocks for any type of Angular declaration.
/**
* Creates a mock of any Angular declaration
* @param declaration - Declaration to mock (component, directive, pipe, etc.)
* @returns Mock declaration
*/
function MockDeclaration<T>(declaration: AnyType<T>): AnyType<T>;
/**
* Creates multiple mock declarations
* @param declarations - Array of declarations to mock
* @returns Array of mock declarations
*/
function MockDeclarations(...declarations: Array<AnyType<any>>): Array<AnyType<any>>;Usage Examples:
import { MockDeclaration, MockDeclarations } from "ng-mocks";
// Mock any declaration type
const MockSomething = MockDeclaration(SomeDeclaration);
// Mock multiple mixed declarations
const mocks = MockDeclarations(
MyComponent,
MyDirective,
MyPipe,
MyService
);Creates mock providers for dependency injection.
/**
* Creates mock providers with various overload signatures
*/
function MockProvider(provider: any): Provider;
function MockProvider(token: any, useValue: any): Provider;
function MockProvider(token: any, useFactory: Function, deps?: any[]): Provider;
function MockProvider(token: any, useClass: any): Provider;
function MockProvider(token: any, useExisting: any): Provider;
/**
* Creates multiple mock providers
* @param providers - Array of providers to mock
* @returns Array of mock providers
*/
function MockProviders(...providers: any[]): Provider[];Usage Examples:
import { MockProvider, MockProviders } from "ng-mocks";
// Mock a service provider
const mockAuthProvider = MockProvider(AuthService);
// Mock with specific value
const mockConfigProvider = MockProvider(APP_CONFIG, {
apiUrl: 'http://test-api.com',
timeout: 5000
});
// Mock with factory
const mockFactoryProvider = MockProvider(
DatabaseService,
() => ({ query: jasmine.createSpy('query') }),
[HttpClient]
);
// Mock multiple providers
const mockProviders = MockProviders(
AuthService,
UserService,
APP_CONFIG
);
// Use in TestBed
TestBed.configureTestingModule({
providers: [
mockAuthProvider,
mockConfigProvider,
...mockProviders
]
});Control default behavior and configuration of mocks.
Auto-stubbing with spies:
import { ngMocks } from "ng-mocks";
// Configure automatic spy creation
ngMocks.autoSpy('jasmine'); // For Jasmine
ngMocks.autoSpy('jest'); // For Jest
// Custom spy factory
ngMocks.autoSpy((name: string) => {
return jasmine.createSpy(name);
});Default mock configurations:
// Set default behavior for all mocks of a service
ngMocks.defaultMock(AuthService, (instance) => ({
isAuthenticated: true,
user: { id: 1, name: 'Test User' }
}));
// Set configuration flags for declarations
ngMocks.defaultConfig(MyComponent, { shallow: true });Global mock settings:
// Always keep certain declarations
ngMocks.globalKeep(CommonModule);
ngMocks.globalKeep(RouterModule);
// Always mock certain declarations
ngMocks.globalMock(HttpClientModule);
// Always exclude certain declarations
ngMocks.globalExclude(ProblematicModule);