CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jasmine-jquery

jQuery matchers and fixture loader for Jasmine framework

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

css-fixtures.mddocs/

CSS Fixtures

CSS fixture management system for loading external CSS files into test DOM with automatic cleanup and style isolation. Essential for testing components that depend on specific CSS styles and layout behavior.

Capabilities

Global Style Fixture Functions

loadStyleFixtures

Loads CSS fixture(s) from files and applies to DOM.

/**
 * Loads CSS fixture(s) from one or more files and applies to DOM
 * Removes any existing style fixtures first
 * @param fixtureUrls - One or more CSS fixture file URLs/paths
 */
function loadStyleFixtures(...fixtureUrls);

Usage Examples:

// Load single CSS fixture
loadStyleFixtures('widget-styles.css');

// Load multiple CSS fixtures
loadStyleFixtures('base.css', 'layout.css', 'theme.css');

// Test CSS-dependent behavior
expect($('#widget')).toHaveCss({position: 'absolute'});
expect($('.button')).toHaveCss({display: 'inline-block'});

appendLoadStyleFixtures

Loads CSS fixtures and appends to existing styles.

/**
 * Loads CSS fixture(s) and appends to existing style fixtures
 * Does not remove existing style fixtures first
 * @param fixtureUrls - One or more CSS fixture file URLs/paths
 */
function appendLoadStyleFixtures(...fixtureUrls);

Usage Example:

// Load base styles first
loadStyleFixtures('base.css');

// Add additional styles without removing base
appendLoadStyleFixtures('theme.css', 'responsive.css');

setStyleFixtures

Sets CSS directly without loading from files.

/**
 * Sets CSS content directly and applies to DOM
 * Removes any existing style fixtures first
 * @param css - CSS string content
 */
function setStyleFixtures(css);

Usage Examples:

// Set CSS string directly
setStyleFixtures(`
  .test-element { 
    position: absolute; 
    left: 300px; 
    top: 100px; 
  }
  .hidden { display: none; }
`);

// Test CSS-dependent positioning
loadFixtures('<div class="test-element">Test</div>');
expect($('.test-element')).toHaveCss({left: '300px'});

appendSetStyleFixtures

Sets CSS directly and appends to existing styles.

/**
 * Sets CSS content directly and appends to existing style fixtures
 * Does not remove existing style fixtures first
 * @param css - CSS string content
 */
function appendSetStyleFixtures(css);

preloadStyleFixtures

Pre-loads CSS fixtures into cache without applying to DOM.

/**
 * Pre-loads CSS fixture(s) from files into cache without applying to DOM
 * Subsequent load calls will use cached content
 * @param fixtureUrls - One or more CSS fixture file URLs/paths
 */
function preloadStyleFixtures(...fixtureUrls);

Usage Example:

// Pre-load CSS fixtures before test suite runs
beforeAll(function() {
  preloadStyleFixtures('layout.css', 'components.css');
});

// Later loads will use cache (faster, no AJAX)
it('should test styled components', function() {
  loadStyleFixtures('layout.css'); // Loaded from cache
  // ... test code
});

Style Fixture Management Class

Access style fixture management through jasmine.getStyleFixtures():

/**
 * CSS Style Fixture management singleton
 */
interface StyleFixtures {
  /** File path for CSS fixture files (default: 'spec/javascripts/fixtures') */
  fixturesPath: string;
  
  /** Internal cache object for loaded CSS fixtures */
  fixturesCache_: object;
  
  /** Array of style DOM nodes added to document head */
  fixturesNodes_: HTMLStyleElement[];

  /** Load CSS fixtures from files and apply to DOM */
  load(...fixtureUrls): void;
  
  /** Load CSS fixtures and append to existing styles */
  appendLoad(...fixtureUrls): void;
  
  /** Set CSS directly and apply to DOM */
  set(css): void;
  
  /** Set CSS directly and append to existing styles */
  appendSet(css): void;
  
  /** Pre-load CSS fixtures into cache */
  preload(...fixtureUrls): void;
  
  /** Clear CSS fixture cache */
  clearCache(): void;
  
  /** Remove all style fixture nodes from DOM */
  cleanUp(): void;
}

// Access the singleton
var styleFixtures = jasmine.getStyleFixtures();

Configuration Example:

// Customize CSS fixture path
jasmine.getStyleFixtures().fixturesPath = 'test/fixtures/styles';

// Use style fixture methods directly
jasmine.getStyleFixtures().load('widget.css');
jasmine.getStyleFixtures().clearCache();

CSS Loading Behavior

File Loading

  • CSS files loaded via synchronous AJAX requests
  • Files loaded relative to fixturesPath configuration
  • Multiple files processed in order specified
  • CSS content extracted from HTML wrapper if needed

Style Application

  • CSS content wrapped in <style> elements
  • Style elements appended to document <head>
  • Styles immediately available for testing
  • Multiple style fixtures create separate <style> elements

Caching System

  • All loaded CSS fixtures automatically cached by filename
  • Cache persists across multiple test runs
  • Use clearCache() to purge cache if needed
  • preload() populates cache without DOM application

DOM Style Management

  • Style elements tracked in fixturesNodes_ array
  • Automatic cleanup between tests via afterEach hook
  • All fixture styles removed when cleanUp() called
  • Styles isolated to test environment

Why CSS Fixtures Are Needed

CSS fixtures solve browser-specific testing issues:

Problem Example:

// Without CSS fixtures - unreliable across browsers
$('#element').css('left', '300px');
expect($('#element').css('left')).toBe('300px'); // May return 'auto' in some browsers

Solution with CSS Fixtures:

// CSS fixture: element-positioning.css
// .positioned { position: absolute; }

// Test with CSS fixture
loadStyleFixtures('element-positioning.css');
loadFixtures('<div id="element" class="positioned"></div>');
$('#element').css('left', '300px');
expect($('#element').css('left')).toBe('300px'); // Reliable across browsers

Common Use Cases

Testing CSS-Dependent Layout

setStyleFixtures(`
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
  .grid-item { padding: 10px; }
`);

setFixtures(`
  <div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
  </div>
`);

// Test grid layout behavior
expect($('.grid')).toHaveCss({display: 'grid'});
expect($('.grid-item')).toHaveLength(2);

Testing Responsive Behavior

loadStyleFixtures('responsive.css');
setFixtures('<div class="responsive-widget">Widget</div>');

// Test responsive breakpoints
// (May require viewport manipulation in tests)
expect($('.responsive-widget')).toHaveCss({display: 'block'});

Testing Animation States

setStyleFixtures(`
  .animated { transition: opacity 0.3s ease; }
  .fade-out { opacity: 0; }
  .fade-in { opacity: 1; }
`);

setFixtures('<div class="animated fade-in">Content</div>');
expect($('.animated')).toHaveCss({opacity: '1'});

$('.animated').removeClass('fade-in').addClass('fade-out');
expect($('.animated')).toHaveCss({opacity: '0'});

Error Handling

The CSS fixture system throws errors for:

/**
 * Specific error messages thrown by CSS fixture system:
 * - "Fixture could not be loaded: [url] (status: [status], message: [message])"
 * 
 * These errors occur when:
 * - CSS fixture file doesn't exist at specified path
 * - Network/file access issues during AJAX loading  
 * - Invalid file paths or permission issues
 * - CSS files are corrupted or inaccessible
 */

Configuration

Default Configuration

{
  fixturesPath: 'spec/javascripts/fixtures'  // Default CSS fixture directory (same as HTML fixtures)
}

Custom Configuration

// Set custom CSS fixture path
jasmine.getStyleFixtures().fixturesPath = 'test/css-fixtures';

// Verify configuration
expect(jasmine.getStyleFixtures().fixturesPath).toBe('test/css-fixtures');

Integration Patterns

Combined with HTML Fixtures

// Load both HTML and CSS fixtures together
loadFixtures('modal.html');
loadStyleFixtures('modal.css');

// Test styled HTML behavior
expect($('#modal')).toBeVisible();
expect($('#modal')).toHaveCss({position: 'fixed'});

Testing CSS Framework Integration

// Load framework CSS for testing
loadStyleFixtures('bootstrap.css', 'custom-overrides.css');
setFixtures('<button class="btn btn-primary">Click me</button>');

expect($('.btn')).toHaveCss({display: 'inline-block'});
expect($('.btn-primary')).toHaveCss({backgroundColor: 'rgb(0, 123, 255)'});

Cross-Browser CSS Testing

describe('Cross-browser CSS behavior', function() {
  beforeEach(function() {
    loadStyleFixtures('cross-browser-fixes.css');
  });

  it('should position elements consistently', function() {
    setFixtures('<div class="positioned-element">Test</div>');
    $('.positioned-element').css('left', '100px');
    
    // Reliable across IE, Firefox, Chrome, Safari
    expect($('.positioned-element')).toHaveCss({left: '100px'});
  });
});

docs

css-fixtures.md

event-spying.md

html-fixtures.md

index.md

jquery-matchers.md

json-fixtures.md

tile.json