HTML Test Fixtures

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What are HTML Test Fixtures? Why do we use them? How HTML Fixtures work Creating test fixtures Resetting fixtures Real-world examples Interview questions What are HTML Test Fixtures? An HTML Test Fixture is a sample HTML structure used during testing. It creates a temporary HTML page where JavaScript can interact with DOM elements. Simple Definition: An HTML Test Fixture is a fake HTML page used for testing JavaScript code. Why Do We Need HTML Test Fixtures? Without fixtures: No DOM elements exist. JavaScript cannot find elements. DOM-related tests fail. Fixtures provide a controlled environment for testing. Real-Life Example 🏠 Imagine testing a TV remote. Without TV Remote │ No TV │ Can't Test With TV Remote │ TV │ Testing Works The TV is like an HTML Fixture. HTML Fixture Example <div id = "app" > <h1 id = "title" > Welcome </h1> <button id = "btn" > Click </button> </div> This HTML is loaded only for testing. JavaScript Example const title = document . getElementById( "title" ); console . log( title . textContent); Output Welcome Test Fixture Flow Create Fixture │ ▼ Load HTML │ ▼ Run JavaScript │ ▼ Verify Output │ ▼ Remove Fixture Jest Example beforeEach (() => { document . body . innerHTML = ` <button id="btn"> Click Me </button> ` ; }); This creates a fresh HTML fixture before every test. Test Example test ( "button exists" , () => { const button = document . getElementById( "btn" ); expect ( button ) . not . toBeNull(); }); Reset Fixture afterEach (() => { document . body . innerHTML = "" ; }); This removes the test HTML after each test. Complete Example beforeEach (() => { document . body . innerHTML = ` <input id="name" /> ` ; }); test ( "input exists" , () => { const input = document . getElementById( "name" ); expect ( input ) . not . toBeNull(); }); afterEach (() => { document . body . innerHTML = "" ; }); Testing DOM Changes HTML Fixture <p id = "message" ></p> JavaScript const message = document . getElementById( "message" ); message . textContent = "Hello" ; Test expect ( message . textContent) . toBe( "Hello" ); Button Click Example Fixture <button id = "btn" > Click </button> JavaScript const btn = document . getElementById( "btn" ); btn . click(); Test expect ( btn ) . not . toBeNull(); Form Fixture <form> <input id = "email" type = "email" /> <button> Submit </button> </form> Test const input = document . getElementById( "email" ); input . value = "test@example.com" ; expect ( input . value) . toBe( "test@example.com" ); Table Fixture <table> <tr> <td> Ajay </td> </tr> </table> Test const td = document . querySelector( "td" ); expect ( td . textContent) . toBe( "Ajay" ); DOM Testing Flow HTML Fixture │ ▼ JavaScript │ ▼ DOM Updated │ ▼ Assertions Folder Structure project/ │ ├── src/ ├── tests/ │ ├── fixtures/ │ │ ├── login.html │ │ ├── form.html │ │ └── table.html │ │ │ └── app.test.js │ └── package.json Popular Testing Libraries Library Purpose Jest Test Runner JSDOM Simulates Browser DOM Testing Library DOM Testing Cypress End-to-End Testing Playwright End-to-End Testing Real-Life Example 🛒 Shopping Website Product Page HTML │ ▼ Fixture Loaded │ ▼ Add to Cart Button │ ▼ Button Click Tested Benefits of HTML Fixtures ✅ Reusable ✅ Predictable ✅ Easy to maintain ✅ Independent tests ✅ Faster testing Best Practices ✅ Create a fresh fixture before every test. ✅ Remove the fixture after each test. ✅ Keep fixtures small and focused. ✅ Test one feature at a time. ✅ Use realistic HTML structures. ❌ Don't share the same fixture between unrelated tests. ❌ Don't make fixtures unnecessarily large. Interview Question What is an HTML Test Fixture? Answer An HTML Test Fixture is a temporary HTML structure used during testing to simulate a web page for JavaScript DOM operations. Why are HTML Fixtures used? Answer To provide DOM elements so JavaScript code can be tested without a real browser page. Which object usually contains the fixture? Answer document . body Which function is commonly used to prepare fixtures? Answer beforeEach () Which function is commonly used to clean up fixtures? Answer afterEach () Best Practices Checklist ✅ Practice Recommended Small Fixtures ✅ Fresh Fixture Per Test ✅ Cleanup After Test ✅ Independent Tests ✅ DOM Assertions ✅ Key Points ✅ HTML Test Fixtures simulate HTML pages for testing. ✅ They are commonly used for DOM testing. ✅ beforeEach() prepares a fresh fixture. ✅ afterEach() cleans up the DOM after each test. ✅ Fixtures help keep tests isolated, reliable, and repeatable. ✅ Tools like Jest, JSDOM, and Testing Library work well with HTML fixtures. 🧠 Easy Formula Create HTML Fixture │ ▼ Load into document.body │ ▼ Run JavaScript │ ▼ Check Result │ ▼ Remove Fixture Fixture = Test HTML beforeEach() = Create Fixture document.body.innerHTML = Load HTML afterEach() = Cleanup expect() = Verify Result Remember: 📄 HTML Fixture = Temporary HTML for testing 🧪 Used to test JavaScript DOM manipulation 🔄 beforeEach() creates a fresh test environment 🧹 afterEach() cleans up after every test ✅ Fixtures make tests isolated, reusable, and reliable