or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-fixtures.mdevent-spying.mdhtml-fixtures.mdindex.mdjquery-matchers.mdjson-fixtures.md
tile.json

tessl/npm-jasmine-jquery

jQuery matchers and fixture loader for Jasmine framework

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jasmine-jquery@2.1.x

To install, run

npx @tessl/cli install tessl/npm-jasmine-jquery@2.1.0

index.mddocs/

jasmine-jquery

jasmine-jquery is a comprehensive testing library that extends the Jasmine JavaScript Testing Framework with jQuery-specific matchers and fixture loading capabilities. It provides custom matchers for testing jQuery DOM elements, an API for handling HTML, CSS, and JSON fixtures with automatic cleanup, event spying functionality, and cross-browser compatibility.

Package Information

  • Package Name: jasmine-jquery
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install jasmine-jquery or bower install jasmine-jquery

Core Imports

Browser (script tag):

<script src="path/to/jasmine-jquery.js"></script>
<!-- All functionality available globally -->

CommonJS/Node.js:

require('jasmine-jquery');
// Extends jasmine global object and window

Basic Usage

// HTML fixtures
loadFixtures('user-form.html');
$('#submit-button').click();
expect($('#error-message')).toBeVisible();

// jQuery matchers  
expect($('#my-element')).toHaveClass('active');
expect($('input[name="email"]')).toHaveValue('test@example.com');
expect($('.modal')).toBeHidden();

// Event spying
var clickSpy = spyOnEvent('#button', 'click');
$('#button').click();
expect(clickSpy).toHaveBeenTriggered();

Architecture

jasmine-jquery operates by extending Jasmine's global objects and window:

  • Matcher Extensions: Adds custom matchers to Jasmine's matcher registry via jasmine.addMatchers()
  • Factory Pattern: Provides singleton factories (jasmine.getFixtures(), etc.) for fixture management
  • Global Shortcuts: Registers convenient global functions (loadFixtures(), spyOnEvent(), etc.)
  • Automatic Cleanup: Uses Jasmine's afterEach hooks for automatic fixture and spy cleanup
  • UMD Module: Works in both browser and Node.js environments

Capabilities

jQuery DOM Matchers

Comprehensive set of custom matchers for testing jQuery elements, including visibility, content, attributes, CSS properties, and form states.

// Element state matchers
expect(element).toBeVisible();
expect(element).toBeHidden();
expect(element).toBeChecked();
expect(element).toBeSelected();
expect(element).toBeDisabled();
expect(element).toBeFocused();
expect(element).toBeEmpty();
expect(element).toBeInDOM();
expect(element).toExist();

// Content and attribute matchers  
expect(element).toHaveClass(className);
expect(element).toHaveAttr(attributeName, attributeValue);
expect(element).toHaveProp(propertyName, propertyValue);
expect(element).toHaveId(id);
expect(element).toHaveText(text);
expect(element).toHaveHtml(html);
expect(element).toHaveValue(value);
expect(element).toHaveData(key, value);
expect(element).toHaveCss(cssProperties);
expect(element).toHaveLength(length);

// Containment and matching matchers
expect(element).toContainElement(selector);
expect(element).toContainText(text);  
expect(element).toContainHtml(html);
expect(element).toBeMatchedBy(selector);

// Event handling matchers
expect(element).toHandle(eventName);
expect(element).toHandleWith(eventName, eventHandler);

jQuery Matchers

HTML Fixtures

HTML fixture management system for loading external HTML files into test DOM with automatic cleanup and caching.

// Global fixture functions
function loadFixtures(...fixtureUrls);
function appendLoadFixtures(...fixtureUrls);
function readFixtures(...fixtureUrls);
function setFixtures(html);
function appendSetFixtures(html);
function preloadFixtures(...fixtureUrls);
function sandbox(attributes);

// Fixture management via jasmine.getFixtures()
interface Fixtures {
  fixturesPath: string;
  containerId: string;  
  load(...fixtureUrls): void;
  appendLoad(...fixtureUrls): void;
  read(...fixtureUrls): string;
  set(html): void;
  appendSet(html): void;
  preload(...fixtureUrls): void;
  clearCache(): void;
  cleanUp(): void;
  sandbox(attributes): jQuery;
}

HTML Fixtures

CSS Style Fixtures

CSS fixture management for loading external CSS files into test DOM with automatic cleanup and style isolation.

// Global style fixture functions
function loadStyleFixtures(...fixtureUrls);  
function appendLoadStyleFixtures(...fixtureUrls);
function setStyleFixtures(css);
function appendSetStyleFixtures(css);
function preloadStyleFixtures(...fixtureUrls);

// Style fixture management via jasmine.getStyleFixtures()
interface StyleFixtures {
  fixturesPath: string;
  load(...fixtureUrls): void;
  appendLoad(...fixtureUrls): void;
  set(css): void;
  appendSet(css): void;
  preload(...fixtureUrls): void;
  clearCache(): void;
  cleanUp(): void;
}

CSS Fixtures

JSON Fixtures

JSON fixture management for loading test data from external JSON files with automatic caching.

// Global JSON fixture functions  
function loadJSONFixtures(...fixtureUrls);
function getJSONFixture(fixtureUrl);

// JSON fixture management via jasmine.getJSONFixtures()
interface JSONFixtures {
  fixturesPath: string;
  load(...fixtureUrls): object;
  read(...fixtureUrls): object;
  clearCache(): void;
}

JSON Fixtures

Event Spying

Event spy system for testing jQuery event triggers, with support for event prevention and propagation control.

// Global event spy function
function spyOnEvent(selector, eventName);

// Event spy object returned by spyOnEvent()
interface EventSpy {
  selector: string;
  eventName: string;
  handler: Function;
  reset(): void;
  calls: {
    count(): number;
    any(): boolean;
  };
}

// Event spy matchers
expect(eventName).toHaveBeenTriggeredOn(selector);
expect(eventSpy).toHaveBeenTriggered();
expect(eventName).toHaveBeenTriggeredOnAndWith(selector, expectedArgs);
expect(eventName).toHaveBeenPreventedOn(selector);  
expect(eventSpy).toHaveBeenPrevented();
expect(eventName).toHaveBeenStoppedOn(selector);
expect(eventSpy).toHaveBeenStopped();

Event Spying

Factory Functions and Utilities

Core factory functions and utility methods for advanced usage and debugging.

// Factory functions for fixture management
function jasmine.getFixtures(): Fixtures;
function jasmine.getStyleFixtures(): StyleFixtures;
function jasmine.getJSONFixtures(): JSONFixtures;

// Utility functions
function jasmine.jQuery.browserTagCaseIndependentHtml(html: string): string;
function jasmine.jQuery.elementToString(element: jQuery|HTMLElement): string;
function jasmine.spiedEventsKey(selector: string, eventName: string): string;

Automatic Lifecycle Management

jasmine-jquery automatically manages test isolation through Jasmine lifecycle hooks:

// Automatic beforeEach hook registers all matchers and custom equality testers
beforeEach(function() {
  jasmine.addMatchers({ /* all jQuery matchers */ });
  jasmine.getEnv().addCustomEqualityTester(/* jQuery element comparisons */);
});

// Automatic afterEach hook cleans up all fixtures and spies
afterEach(function() {
  jasmine.getFixtures().cleanUp();
  jasmine.getStyleFixtures().cleanUp(); 
  jasmine.jQuery.events.cleanUp();
});

Custom Equality Testing

jasmine-jquery registers custom equality testers for seamless jQuery element comparison:

// Enables direct jQuery element comparison in expectations
expect($('#element')).toEqual($('#element')); // Works automatically
expect($('<div/>')).toEqual('<div></div>'); // Cross-type comparison supported

Factory Functions

Core factory functions for accessing fixture management singletons.

// HTML fixture management singleton
function jasmine.getFixtures(): Fixtures;

// CSS style fixture management singleton
function jasmine.getStyleFixtures(): StyleFixtures;

// JSON fixture management singleton
function jasmine.getJSONFixtures(): JSONFixtures;

Utility Functions

Cross-browser compatibility and debugging utilities.

// Cross-browser HTML normalization
function jasmine.jQuery.browserTagCaseIndependentHtml(html: string): string;

// Element-to-string conversion for debugging
function jasmine.jQuery.elementToString(element: jQuery|HTMLElement): string;

// Event spy key generation (internal utility)  
function jasmine.spiedEventsKey(selector: string, eventName: string): string;

Advanced Event System

Low-level event spy system methods for advanced usage.

// Event spy data access and control
interface jasmine.jQuery.events {
  // Get arguments passed to spied event
  args(selector: string, eventName: string): Array;
  
  // Check if event was triggered (boolean)
  wasTriggered(selector: string, eventName: string): boolean;
  
  // Check if event was triggered with specific arguments
  wasTriggeredWith(selector: string, eventName: string, expectedArgs: any, util: object, customEqualityTesters: Array): boolean;
  
  // Check if event default was prevented
  wasPrevented(selector: string, eventName: string): boolean;
  
  // Check if event propagation was stopped
  wasStopped(selector: string, eventName: string): boolean;
  
  // Clean up all event spies (called automatically)
  cleanUp(): void;
  
  // Create event spy (internal method)
  spyOn(selector: string, eventName: string): EventSpy;
}

Error Handling

jasmine-jquery provides specific error messages for common failure scenarios:

// Fixture loading errors
// "Fixture could not be loaded: [url] (status: [status], message: [message])"
// "Script could not be loaded: [url] (status: [status], message: [message])"

// JSON fixture loading errors  
// "JSONFixture could not be loaded: [url] (status: [status], message: [message])"

// Event spy errors
// "There is no spy for [eventName] on [selector]. Make sure to create a spy using spyOnEvent."

Types

// Configuration interfaces
interface FixtureConfig {
  fixturesPath?: string;
  containerId?: string;
}

interface StyleFixtureConfig {
  fixturesPath?: string;  
}

interface JSONFixtureConfig {
  fixturesPath?: string;
}

// Enhanced EventSpy interface
interface EventSpy {
  selector: string;
  eventName: string;
  handler: Function;
  reset(): void;
  calls: {
    count(): number;
    any(): boolean;
  };
}

// Internal cache structure
interface FixtureCache {
  [filename: string]: string;
}

// jQuery utility functions
interface jasmine.jQuery {
  browserTagCaseIndependentHtml(html: string): string;
  elementToString(element: jQuery|HTMLElement): string;
  events: jasmine.jQuery.events;
}