Guide for testing EDS blocks using test.html files and the development server. Covers test file structure, EDS core integration, testing patterns, and debugging workflows for Adobe Edge Delivery Services blocks.
Guide developers through testing Adobe Edge Delivery Services (EDS) blocks using test.html files, the development server, and proper EDS integration patterns.
Automatically activates when:
test.html files in block directoriesEvery block should have a test.html file in its directory:
blocks/your-block/
├── your-block.js
├── your-block.css
├── README.md
├── EXAMPLE.md
└── test.html ← Create this file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Block Test - EDS Native Pattern</title>
<!-- EDS Core Styles -->
<link rel="stylesheet" href="/styles/styles.css">
<link rel="stylesheet" href="/styles/fonts.css">
<link rel="stylesheet" href="/styles/lazy-styles.css">
<!-- Note: Block CSS is loaded automatically by EDS -->
<style>
/* Test-specific styling */
body {
padding: 2rem;
background: var(--light-color);
}
.test-content {
max-width: 1200px;
margin: 0 auto;
background: var(--background-color);
padding: 2rem;
border-radius: 8px;
}
.test-section {
margin: 2rem 0;
padding: 1rem;
border: 1px solid var(--dark-color);
border-radius: 4px;
}
/* EDS pattern - ensure body appears */
body.appear {
display: block;
}
</style>
</head>
<body>
<div class="test-content">
<h1>Your Block Test Page</h1>
<div class="test-section">
<h2>Test Case 1: Basic Usage</h2>
<!-- Your block with test content -->
<div class="your-block block">
<div>
<div>Title 1</div>
<div>Description 1</div>
</div>
<div>
<div>Title 2</div>
<div>Description 2</div>
</div>
</div>
</div>
<div class="test-section">
<h2>Test Case 2: With Images</h2>
<div class="your-block block">
<div>
<div>
<picture>
<img src="/images/test-image.jpg" alt="Test">
</picture>
</div>
<div>Content with image</div>
</div>
</div>
</div>
</div>
<!-- EDS Core Scripts -->
<script type="module">
import {
sampleRUM,
loadBlock,
loadCSS
} from '/scripts/aem.js';
// Initialize RUM (optional for testing)
sampleRUM('top');
window.addEventListener('load', () => sampleRUM('load'));
// Load all blocks on the page
const blocks = document.querySelectorAll('.block');
for (const block of blocks) {
try {
await loadBlock(block);
console.log(`✅ Block loaded: ${block.className}`);
} catch (error) {
console.error(`❌ Block failed: ${block.className}`, error);
}
}
// Add body.appear class (EDS pattern)
document.body.classList.add('appear');
</script>
</body>
</html>
npm run debug
The server starts on http://localhost:3000 with: