Angular Mocks

Angular Mocks is a comprehensive testing utility library that provides mock implementations and testing helpers for AngularJS applications. It includes mock services like $httpBackend for simulating HTTP requests, $timeout and $interval for controlling time-based operations in tests, and $browser for mocking browser-specific functionality. The library offers dependency injection helpers, module loading utilities, and browser event simulation capabilities, enabling developers to write isolated, fast-running tests without external dependencies.

Package Information

• Package Name: angular-mocks
• Package Type: npm
• Language: JavaScript
• Installation: npm install angular-mocks

Core Imports

Angular Mocks is typically included as a script tag in testing environments or loaded via module loaders:

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-mocks/angular-mocks.js"></script>

For module-based loading:

// CommonJS
require('angular-mocks');

// The library automatically registers the ngMock module and global functions
// window.module, window.inject, and window.browserTrigger become available

Basic Usage

// In your test setup - angular-mocks automatically loads ngMock module
describe('MyService', function() {
  var MyService, $httpBackend;
  
  // Load your application module
  beforeEach(module('myApp'));
  
  // Inject dependencies 
  beforeEach(inject(function(_MyService_, _$httpBackend_) {
    MyService = _MyService_;
    $httpBackend = _$httpBackend_;
  }));
  
  it('should make HTTP request', function() {
    // Set up mock HTTP response
    $httpBackend.expectGET('/api/data').respond(200, {result: 'success'});
    
    // Execute your code
    MyService.fetchData();
    
    // Verify the request was made
    $httpBackend.flush();
    $httpBackend.verifyNoOutstandingExpectation();
  });
});

Architecture

Angular Mocks is built around several key components:

• Mock Services: Drop-in replacements for core AngularJS services ($httpBackend, $timeout, $interval, $browser, $log)
• Service Decorators: Enhanced versions of existing services with testing utilities
• Global Test Utilities: Functions for module loading (module) and dependency injection (inject)
• Event Simulation: Browser event triggering capabilities for DOM testing
• Module System: Provides ngMock module for unit testing and ngMockE2E for end-to-end testing

Capabilities

HTTP Backend Mocking

Complete mock HTTP backend implementation with request expectations and response definitions. Supports both unit testing with strict expectations and end-to-end testing with pass-through capabilities.

// Unit testing HTTP backend
$httpBackend.expect(method, url, data?, headers?);
$httpBackend.when(method, url, data?, headers?, keys?);
$httpBackend.flush(count?);
$httpBackend.verifyNoOutstandingExpectation();

HTTP Backend Mocking

Time Control

Mock implementations of time-based services that provide synchronous control over asynchronous operations in tests.

// Timeout control
$timeout.flush(delay?);
$timeout.verifyNoPendingTasks();

// Interval control  
$interval.flush(millis?);

Time Control

Browser Service Mocking

Mock browser service providing controlled implementations of URL handling, cookie management, and deferred task execution.

// Browser service
$browser.url(url?, replace?, state?);
$browser.defer(fn, delay?, taskType?);
$browser.defer.flush(delay?);

Browser Service Mocking

Testing Utilities

Essential testing utilities for module configuration, dependency injection, debugging, and browser event simulation.

// Global test functions
module(...modules);
inject(...functions);
browserTrigger(element, eventType?, eventData?);

// Debugging utilities
angular.mock.dump(object);

Testing Utilities

Global Functions

Angular Mocks automatically provides these global functions when loaded:

• module() - Configure modules for dependency injection
• inject() - Inject dependencies into test functions
• browserTrigger() - Trigger DOM events for testing

Modules

• ngMock - Main testing module (automatically loaded when angular-mocks.js is included)
• ngMockE2E - End-to-end testing module (load explicitly with angular.module('myApp', ['ngMockE2E']))

Common Types

// HTTP Backend Types
interface RequestHandler {
  respond(status, data?, headers?, statusText?): RequestHandler;
  passThrough(): RequestHandler;
}

// Browser Mock Types  
interface MockBrowser {
  url(url?: string, replace?: boolean, state?: any): string;
  defer(fn: Function, delay?: number, taskType?: string): number;
  cookies(name?: string, value?: string): string | object;
}

// Test Utility Types
interface MockLog {
  log: { logs: any[][] };
  warn: { logs: any[][] };
  info: { logs: any[][] };
  error: { logs: any[][] };
  debug: { logs: any[][] };
  assertEmpty(): void;
  reset(): void;
}