[BUG] Sidebar E2E Tests Failing - Keyboard Shortcut & Breakpoint State #17

New Issue

santhoshj · 2026-02-18T23:11:28Z

santhoshj commented

2026-02-18 23:11:28 +00:00

Bug Description

Two E2E tests related to sidebar functionality are consistently failing:

Failing Tests

keyboard shortcut toggles sidebar (Chromium & Firefox)
all key breakpoints render expected sidebar state (Chromium & Firefox)

Test 1: Keyboard Shortcut Toggle

File: tests/e2e/layout.spec.ts:154

Expected Behavior:
Pressing Ctrl+\ should toggle sidebar state between expanded and collapsed.

Actual Behavior:
Sidebar state remains "expanded" after keyboard shortcut. The test expects state to change but it doesn't.

Error:

Error: expect(received).not.toBe(expected) // Object.is equality
Expected: not "expanded"
Received: "expanded"

Code:

test('keyboard shortcut toggles sidebar', async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 900 });
  await openDashboard(page);

  const before = await page.evaluate(() => document.documentElement.getAttribute('data-sidebar'));
  await page.keyboard.down('Control');
  await page.keyboard.press('\\');
  await page.keyboard.up('Control');

  await expect
    .poll(async () => page.evaluate(() => document.documentElement.getAttribute('data-sidebar')))
    .not.toBe(before);
});

Possible Cause:
Keyboard event listener may not be attached or the shortcut handler isn't updating the store properly.

Test 2: Breakpoint State Persistence

File: tests/e2e/layout.spec.ts:135

Expected Behavior:
Different viewport breakpoints should render sidebar in expected states:

xl (≥1280px): expanded (with localStorage set to 'expanded')
lg (1024-1279px): collapsed
md (768-1023px): hidden
sm (<768px): hidden

Actual Behavior:
At lg breakpoint (1024px), sidebar is "expanded" but expected to be "collapsed".

Error:

Error: expect(received).toBe(expected) // Object.is equality
Expected: "collapsed"
Received: "expanded"

Code:

const breakpoints = [
  { width: 1280, expected: 'expanded' },
  { width: 1024, expected: 'collapsed' },
  { width: 768, expected: 'hidden' },
  { width: 390, expected: 'hidden' },
];

Possible Cause:
Responsive initialization in Sidebar.svelte or layout store may not be applying breakpoint rules correctly on initial load.

src/lib/components/layout/Sidebar.svelte - Sidebar component
src/lib/components/layout/AppLayout.svelte - Layout wrapper
src/lib/stores/layout.ts - Sidebar state management
tests/e2e/layout.spec.ts - Failing tests

Environment

Frontend: SvelteKit + Tailwind CSS + DaisyUI
Test Runner: Playwright
Browsers: Chromium, Firefox

Run Tests

cd frontend
npm run test:e2e -- tests/e2e/layout.spec.ts --grep "keyboard shortcut\|all key breakpoints"

Screenshots Needed

Screenshot of sidebar at 1024px width (should be collapsed but showing expanded)
DevTools console after pressing Ctrl+\ (check for errors)
localStorage state showing headroom_sidebar_state value

## Bug Description Two E2E tests related to sidebar functionality are consistently failing: ### Failing Tests 1. **keyboard shortcut toggles sidebar** (Chromium & Firefox) 2. **all key breakpoints render expected sidebar state** (Chromium & Firefox) --- ## Test 1: Keyboard Shortcut Toggle **File:** `tests/e2e/layout.spec.ts:154` **Expected Behavior:** Pressing Ctrl+\\ should toggle sidebar state between expanded and collapsed. **Actual Behavior:** Sidebar state remains "expanded" after keyboard shortcut. The test expects state to change but it doesn't. **Error:** ``` Error: expect(received).not.toBe(expected) // Object.is equality Expected: not "expanded" Received: "expanded" ``` **Code:** ```typescript test('keyboard shortcut toggles sidebar', async ({ page }) => { await page.setViewportSize({ width: 1280, height: 900 }); await openDashboard(page); const before = await page.evaluate(() => document.documentElement.getAttribute('data-sidebar')); await page.keyboard.down('Control'); await page.keyboard.press('\\'); await page.keyboard.up('Control'); await expect .poll(async () => page.evaluate(() => document.documentElement.getAttribute('data-sidebar'))) .not.toBe(before); }); ``` **Possible Cause:** Keyboard event listener may not be attached or the shortcut handler isn't updating the store properly. --- ## Test 2: Breakpoint State Persistence **File:** `tests/e2e/layout.spec.ts:135` **Expected Behavior:** Different viewport breakpoints should render sidebar in expected states: - xl (≥1280px): expanded (with localStorage set to 'expanded') - lg (1024-1279px): collapsed - md (768-1023px): hidden - sm (<768px): hidden **Actual Behavior:** At lg breakpoint (1024px), sidebar is "expanded" but expected to be "collapsed". **Error:** ``` Error: expect(received).toBe(expected) // Object.is equality Expected: "collapsed" Received: "expanded" ``` **Code:** ```typescript const breakpoints = [ { width: 1280, expected: 'expanded' }, { width: 1024, expected: 'collapsed' }, { width: 768, expected: 'hidden' }, { width: 390, expected: 'hidden' }, ]; ``` **Possible Cause:** Responsive initialization in Sidebar.svelte or layout store may not be applying breakpoint rules correctly on initial load. --- ## Related Files - `src/lib/components/layout/Sidebar.svelte` - Sidebar component - `src/lib/components/layout/AppLayout.svelte` - Layout wrapper - `src/lib/stores/layout.ts` - Sidebar state management - `tests/e2e/layout.spec.ts` - Failing tests ## Environment - Frontend: SvelteKit + Tailwind CSS + DaisyUI - Test Runner: Playwright - Browsers: Chromium, Firefox ## Run Tests ```bash cd frontend npm run test:e2e -- tests/e2e/layout.spec.ts --grep "keyboard shortcut\|all key breakpoints" ``` ## Screenshots Needed 1. Screenshot of sidebar at 1024px width (should be collapsed but showing expanded) 2. DevTools console after pressing Ctrl+\\ (check for errors) 3. localStorage state showing `headroom_sidebar_state` value

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: santhoshj/headroom#17