ken/muxplex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct sidebar element IDs, add missing CSS classes, and align test mocks

Browse Source 
Three-part consistency defect identified in code review:

1. HTML: Four sidebar elements missing CSS class attributes so all CSS
   rules targeting .session-sidebar, .sidebar-toggle-btn,
   .sidebar-collapse-btn, and .sidebar-list applied to zero elements.
   Added class= attributes to all four.

2. JS: initSidebar(), toggleSidebar(), and bindSidebarClickAway() called
   $('sidebar') and $('collapse-btn') — neither ID exists in the DOM.
   Corrected to $('session-sidebar') and $('sidebar-collapse-btn').

3. Tests: initSidebar/toggleSidebar mocks matched the wrong IDs, masking
   the defect. Updated all six mock conditions to match corrected IDs.

4. Coverage gap: test_html_element_classes did not verify new sidebar
   elements carry CSS classes. Added four entries for session-sidebar,
   sidebar-toggle-btn, sidebar-collapse-btn, and sidebar-list — these
   entries would have caught Defect 1 on Task 1's test run.

All 136 JS + 167 Python tests pass. Zero regressions.
This commit is contained in:
Brian Krabach
2026-03-27 18:02:29 -07:00
parent b62bd3e361
commit f41061f85f
4 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/tests/test_app.mjs
+12 -12
View File
@@ -1829,8 +1829,8 @@ test('initSidebar defaults to open (removes sidebar--collapsed) on wide screens
const mockCollapseBtn = { textContent: '' };
const origGetById = globalThis.document.getElementById;
globalThis.document.getElementById = (id) => {
if (id === 'sidebar') return mockSidebar;
if (id === 'collapse-btn') return mockCollapseBtn;
if (id === 'session-sidebar') return mockSidebar;
if (id === 'sidebar-collapse-btn') return mockCollapseBtn;
return null;
};
@@ -1856,8 +1856,8 @@ test('initSidebar defaults to closed (adds sidebar--collapsed) on narrow screens
const mockCollapseBtn = { textContent: '' };
const origGetById = globalThis.document.getElementById;
globalThis.document.getElementById = (id) => {
if (id === 'sidebar') return mockSidebar;
if (id === 'collapse-btn') return mockCollapseBtn;
if (id === 'session-sidebar') return mockSidebar;
if (id === 'sidebar-collapse-btn') return mockCollapseBtn;
return null;
};
@@ -1883,8 +1883,8 @@ test('initSidebar respects stored value true regardless of screen width — even
const mockCollapseBtn = { textContent: '' };
const origGetById = globalThis.document.getElementById;
globalThis.document.getElementById = (id) => {
if (id === 'sidebar') return mockSidebar;
if (id === 'collapse-btn') return mockCollapseBtn;
if (id === 'session-sidebar') return mockSidebar;
if (id === 'sidebar-collapse-btn') return mockCollapseBtn;
return null;
};
@@ -1908,8 +1908,8 @@ test('toggleSidebar persists state to localStorage — from true toggles to fals
const mockCollapseBtn = { textContent: '' };
const origGetById = globalThis.document.getElementById;
globalThis.document.getElementById = (id) => {
if (id === 'sidebar') return mockSidebar;
if (id === 'collapse-btn') return mockCollapseBtn;
if (id === 'session-sidebar') return mockSidebar;
if (id === 'sidebar-collapse-btn') return mockCollapseBtn;
return null;
};
@@ -1930,8 +1930,8 @@ test('toggleSidebar adds sidebar--collapsed class when closing (from open)', ()
const mockCollapseBtn = { textContent: '' };
const origGetById = globalThis.document.getElementById;
globalThis.document.getElementById = (id) => {
if (id === 'sidebar') return mockSidebar;
if (id === 'collapse-btn') return mockCollapseBtn;
if (id === 'session-sidebar') return mockSidebar;
if (id === 'sidebar-collapse-btn') return mockCollapseBtn;
return null;
};
@@ -1952,8 +1952,8 @@ test('toggleSidebar removes sidebar--collapsed class when opening (from closed)
const mockCollapseBtn = { textContent: '' };
const origGetById = globalThis.document.getElementById;
globalThis.document.getElementById = (id) => {
if (id === 'sidebar') return mockSidebar;
if (id === 'collapse-btn') return mockCollapseBtn;
if (id === 'session-sidebar') return mockSidebar;
if (id === 'sidebar-collapse-btn') return mockCollapseBtn;
return null;
};