From 2b8e7c7504641ecad31a14f3af1630bf533e6f6f Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Sat, 20 Jun 2026 06:55:47 +0800
Subject: [PATCH] fix(tests): update recipes page tests for unified controls
 template

- Inject #customFilterIndicator DOM in beforeEach (raw template
  renderer doesn't process Jinja2 {% include %} tags)
- Fix selector from #customFilterText to .customFilterText
---
 tests/frontend/pages/recipesPage.test.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/tests/frontend/pages/recipesPage.test.js b/tests/frontend/pages/recipesPage.test.js
index d53cd098..21a61497 100644
--- a/tests/frontend/pages/recipesPage.test.js
+++ b/tests/frontend/pages/recipesPage.test.js
@@ -143,6 +143,19 @@ describe('RecipeManager', () => {
 
     renderRecipesPage();
 
+    // Inject controls DOM that would normally come from components/controls.html
+    // (raw template rendering doesn't process Jinja2 {% include %} tags)
+    const customFilterIndicator = document.createElement('div');
+    customFilterIndicator.id = 'customFilterIndicator';
+    customFilterIndicator.className = 'control-group hidden';
+    customFilterIndicator.innerHTML = `
+      <div class="filter-active">
+        <i class="fas fa-filter"></i> <span class="customFilterText" title=""></span>
+        <i class="fas fa-times-circle clear-filter"></i>
+      </div>
+    `;
+    document.body.appendChild(customFilterIndicator);
+
     ({ RecipeManager } = await import('../../../static/js/recipes.js'));
   });
 
@@ -288,7 +301,7 @@ describe('RecipeManager', () => {
     });
 
     const indicator = document.getElementById('customFilterIndicator');
-    const filterText = indicator.querySelector('#customFilterText');
+    const filterText = indicator.querySelector('.customFilterText');
 
     expect(filterText.innerHTML).toContain('Recipes using checkpoint:');
     expect(filterText.innerHTML).toContain('Flux Base');