HTML Fixtures

/**
 * Loads fixture(s) from one or more files and automatically appends to DOM
 * Cleans up any existing fixtures first
 * @param fixtureUrls - One or more fixture file URLs/paths
 */
function loadFixtures(...fixtureUrls);

// Load single fixture
loadFixtures('user-form.html');

// Load multiple fixtures  
loadFixtures('header.html', 'navigation.html', 'footer.html');

// Test the loaded content
expect($('#user-form')).toExist();
expect($('#submit-button')).toBeVisible();

/**
 * Loads fixture(s) and appends to existing fixture container
 * Does not clean up existing fixtures first
 * @param fixtureUrls - One or more fixture file URLs/paths
 */
function appendLoadFixtures(...fixtureUrls);

/**
 * Loads fixture(s) from files and returns combined HTML as string
 * Does not append to DOM - useful for processing HTML directly
 * @param fixtureUrls - One or more fixture file URLs/paths
 * @returns Combined HTML content as string
 */
function readFixtures(...fixtureUrls);

var htmlContent = readFixtures('template.html', 'partial.html');
var processedHtml = someProcessingFunction(htmlContent);
setFixtures(processedHtml);

/**
 * Sets fixture HTML directly and appends to DOM
 * Cleans up any existing fixtures first
 * @param html - HTML string or jQuery element
 * @returns jQuery element representing the fixture container
 */
function setFixtures(html);

// Set HTML string
setFixtures('<div id="test-container"><p>Test content</p></div>');

// Set jQuery element
var $element = $('<form><input name="email" /></form>');
setFixtures($element);

// Chain with jQuery operations
var $fixture = setFixtures('<div class="widget"></div>');
$fixture.find('.widget').addClass('active');

/**
 * Sets fixture HTML and appends to existing fixture container  
 * Does not clean up existing fixtures first
 * @param html - HTML string or jQuery element
 */
function appendSetFixtures(html);

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

// Pre-load fixtures before test suite runs
beforeAll(function() {
  preloadFixtures('user-form.html', 'modal.html', 'table.html');
});

// Later loads will use cache (faster, no AJAX)
it('should test user form', function() {
  loadFixtures('user-form.html'); // Loaded from cache
  // ... test code
});

/**
 * Creates empty DIV element with optional attributes for quick fixture creation
 * @param attributes - Optional object with HTML attributes to set
 * @returns jQuery element representing the sandbox DIV
 */
function sandbox(attributes);

// Basic sandbox
var $sandbox = sandbox();
// Returns: <div id="sandbox"></div>

// Sandbox with custom attributes
var $custom = sandbox({
  id: 'my-test-area',
  class: 'test-container',
  'data-test': 'true'
});
// Returns: <div id="my-test-area" class="test-container" data-test="true"></div>

// Use with setFixtures for quick test setup
setFixtures(sandbox({class: 'widget-container'}));
$('#sandbox').append('<div class="widget">Content</div>');

/**
 * HTML Fixture management singleton
 */
interface Fixtures {
  /** DOM container ID for fixtures (default: 'jasmine-fixtures') */
  containerId: string;
  
  /** File path for fixture files (default: 'spec/javascripts/fixtures') */
  fixturesPath: string;
  
  /** Internal cache object for loaded fixtures */
  fixturesCache_: object;

  /** Load fixtures from files and create/replace container */
  load(...fixtureUrls): void;
  
  /** Load fixtures and append to existing container */
  appendLoad(...fixtureUrls): void;
  
  /** Load fixtures from files and return as string */
  read(...fixtureUrls): string;
  
  /** Set HTML directly and create/replace container */
  set(html): jQuery;
  
  /** Set HTML directly and append to existing container */
  appendSet(html): void;
  
  /** Pre-load fixtures into cache */
  preload(...fixtureUrls): void;
  
  /** Clear fixture cache */
  clearCache(): void;
  
  /** Remove fixture container from DOM */
  cleanUp(): void;
  
  /** Create sandbox DIV element */
  sandbox(attributes): jQuery;
}

// Access the singleton
var fixtures = jasmine.getFixtures();

// Customize fixture path
jasmine.getFixtures().fixturesPath = 'test/fixtures/html';

// Customize container ID  
jasmine.getFixtures().containerId = 'my-test-container';

// Use fixture methods directly
jasmine.getFixtures().load('modal.html');
jasmine.getFixtures().clearCache();

<!-- user-widget.html -->
<div id="user-widget">
  <h3>User Profile</h3>
  <div class="user-info"></div>
</div>
<script src="user-widget-behavior.js"></script>

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

try {
  loadFixtures('missing-file.html');
} catch (error) {
  console.log('Fixture loading failed:', error.message);
}

{
  fixturesPath: 'spec/javascripts/fixtures',  // Default HTML fixture directory
  containerId: 'jasmine-fixtures'             // Default DOM container ID
}

// Set custom fixture path
jasmine.getFixtures().fixturesPath = 'test/html-fixtures';

// Set custom container ID
jasmine.getFixtures().containerId = 'test-workspace';

// Verify configuration
expect(jasmine.getFixtures().fixturesPath).toBe('test/html-fixtures');

// Preload before jasmine-ajax interferes with AJAX
beforeAll(function() {
  preloadFixtures('form.html', 'modal.html', 'table.html');
});

// Later fixture loads will use cache instead of AJAX
it('should work with jasmine-ajax', function() {
  loadFixtures('form.html'); // Uses cache, not blocked by jasmine-ajax
  // ... test code
});