or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

browser-mocking.md http-backend.md index.md testing-utilities.md time-control.md

tile.json

HTTP Backend Mocking

Mock HTTP backend implementation that intercepts HTTP requests and provides controlled responses for testing. Angular Mocks provides two variants: unit testing backend with strict expectations and end-to-end backend with pass-through capabilities.

Capabilities

Unit Testing HTTP Backend

Strict mock HTTP backend for unit testing that requires all requests to be explicitly expected and provides controlled responses.

/**
 * Set up an expectation for an HTTP request
 * @param {string} method - HTTP method (GET, POST, PUT, DELETE, etc.)
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {*} data - Expected request data (optional)
 * @param {Object|Function} headers - Expected headers (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.expect(method, url, data?, headers?);

/**
 * Define backend behavior for HTTP requests (can handle multiple requests)
 * @param {string} method - HTTP method
 * @param {string|RegExp|Function} url - URL or URL matcher  
 * @param {*} data - Expected request data (optional)
 * @param {Object|Function} headers - Expected headers (optional)
 * @param {Array} keys - Keys for URL parameters (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.when(method, url, data?, headers?, keys?);

/**
 * Flush pending HTTP requests
 * @param {number} count - Number of requests to flush (optional, flushes all if not specified)
 */
$httpBackend.flush(count?);

/**
 * Verify that all expected requests have been made
 * @throws {Error} If there are outstanding expectations
 */
$httpBackend.verifyNoOutstandingExpectation();

/**
 * Verify that no requests are pending
 * @throws {Error} If there are pending requests
 */
$httpBackend.verifyNoOutstandingRequest();

/**
 * Reset expectations (does not affect when() definitions)
 */
$httpBackend.resetExpectations();

HTTP Method Shortcuts (Expectations)

Convenience methods for setting up expectations for specific HTTP methods:

/**
 * Expect a GET request
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {Object|Function} headers - Expected headers (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.expectGET(url, headers?);

/**
 * Expect a POST request
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {*} data - Expected request data (optional)
 * @param {Object|Function} headers - Expected headers (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.expectPOST(url, data?, headers?);

/**
 * Expect a PUT request
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {*} data - Expected request data (optional)
 * @param {Object|Function} headers - Expected headers (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.expectPUT(url, data?, headers?);

/**
 * Expect a DELETE request
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {Object|Function} headers - Expected headers (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.expectDELETE(url, headers?);

/**
 * Expect a PATCH request
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {*} data - Expected request data (optional)
 * @param {Object|Function} headers - Expected headers (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.expectPATCH(url, data?, headers?);

/**
 * Expect a HEAD request
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {Object|Function} headers - Expected headers (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.expectHEAD(url, headers?);

/**
 * Expect a JSONP request
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.expectJSONP(url);

HTTP Method Shortcuts (Definitions)

Convenience methods for defining backend behavior for specific HTTP methods:

/**
 * Define behavior for GET requests
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {Object|Function} headers - Expected headers (optional)
 * @param {Array} keys - Keys for URL parameters (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.whenGET(url, headers?, keys?);

/**
 * Define behavior for POST requests
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {*} data - Expected request data (optional)
 * @param {Object|Function} headers - Expected headers (optional)
 * @param {Array} keys - Keys for URL parameters (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.whenPOST(url, data?, headers?, keys?);

/**
 * Define behavior for PUT requests
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {*} data - Expected request data (optional)
 * @param {Object|Function} headers - Expected headers (optional)
 * @param {Array} keys - Keys for URL parameters (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.whenPUT(url, data?, headers?, keys?);

/**
 * Define behavior for DELETE requests
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {Object|Function} headers - Expected headers (optional)
 * @param {Array} keys - Keys for URL parameters (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.whenDELETE(url, headers?, keys?);

/**
 * Define behavior for PATCH requests
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {*} data - Expected request data (optional)
 * @param {Object|Function} headers - Expected headers (optional)
 * @param {Array} keys - Keys for URL parameters (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.whenPATCH(url, data?, headers?, keys?);

/**
 * Define behavior for HEAD requests
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {Object|Function} headers - Expected headers (optional)
 * @param {Array} keys - Keys for URL parameters (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.whenHEAD(url, headers?, keys?);

/**
 * Define behavior for JSONP requests
 * @param {string|RegExp|Function} url - URL or URL matcher
 * @param {Array} keys - Keys for URL parameters (optional)
 * @returns {RequestHandler} Handler for configuring response
 */
$httpBackend.whenJSONP(url, keys?);

Request Handler

Response configuration for expected or defined requests:

interface RequestHandler {
  /**
   * Configure response for the request
   * @param {number} status - HTTP status code
   * @param {*} data - Response data (optional)
   * @param {Object} headers - Response headers (optional)
   * @param {string} statusText - HTTP status text (optional)
   * @returns {RequestHandler} Self for chaining
   */
  respond(status, data?, headers?, statusText?): RequestHandler;
  
  /**
   * Allow request to pass through to actual backend (E2E only)
   * @returns {RequestHandler} Self for chaining
   */
  passThrough(): RequestHandler;
}

End-to-End HTTP Backend (ngMockE2E)

HTTP backend for end-to-end testing that can pass requests through to actual backend or provide mock responses:

// Available in ngMockE2E module
angular.module('myApp', ['ngMockE2E'])
  .run(function($httpBackend) {
    // Allow templates to be loaded normally
    $httpBackend.whenGET(/\.html$/).passThrough();
    
    // Mock API endpoints
    $httpBackend.whenGET('/api/users').respond([{id: 1, name: 'John'}]);
    
    // Pass through all other requests
    $httpBackend.whenGET(/.*/).passThrough();
  });

Usage Examples

Basic Unit Testing:

describe('UserService', function() {
  var UserService, $httpBackend;
  
  beforeEach(module('myApp'));
  beforeEach(inject(function(_UserService_, _$httpBackend_) {
    UserService = _UserService_;
    $httpBackend = _$httpBackend_;
  }));
  
  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });
  
  it('should fetch user data', function() {
    var userData = {id: 1, name: 'John Doe'};
    
    $httpBackend.expectGET('/api/users/1').respond(200, userData);
    
    var result;
    UserService.getUser(1).then(function(data) {
      result = data;
    });
    
    $httpBackend.flush();
    
    expect(result).toEqual(userData);
  });
});

Multiple Requests:

it('should handle multiple requests', function() {
  $httpBackend.whenGET('/api/users').respond([{id: 1}, {id: 2}]);
  $httpBackend.whenPOST('/api/users', {name: 'Jane'}).respond(201, {id: 3, name: 'Jane'});
  
  UserService.getUsers();
  UserService.createUser({name: 'Jane'});
  
  $httpBackend.flush();
});

E2E Testing Setup:

angular.module('myApp', ['ngMockE2E'])
  .run(function($httpBackend) {
    // Mock specific endpoints
    $httpBackend.whenPOST('/api/login').respond(function(method, url, data) {
      var credentials = JSON.parse(data);
      if (credentials.username === 'admin' && credentials.password === 'secret') {
        return [200, {token: 'abc123'}];
      }
      return [401, {error: 'Invalid credentials'}];
    });
    
    // Pass through all other requests
    $httpBackend.whenGET(/.*/).passThrough();
    $httpBackend.whenPOST(/(?!\/api\/login).*/).passThrough();
  });

Types

// URL Matcher Types
type UrlMatcher = string | RegExp | ((url: string) => boolean);

// Header Matcher Types  
type HeaderMatcher = Object | ((headers: Object) => boolean);

// Response Function Type
type ResponseFunction = (method: string, url: string, data: any, headers: Object, params: Object) => [number, any, Object, string];