markdown-converter/tests/sidebar.test.js

/**
 * @jest-environment jsdom
 */

/**
 * Tests for SidebarManager
 * Tests panel registration, toggling, expand/collapse behavior
 */

describe('SidebarManager', () => {
  let SidebarManager;

  beforeEach(() => {
    document.body.innerHTML = `
            <div class="sidebar collapsed" id="sidebar">
                <div class="sidebar-icons">
                    <button class="sidebar-icon" data-panel="test1"></button>
                    <button class="sidebar-icon" data-panel="test2"></button>
                </div>
                <div class="sidebar-panel" id="sidebar-panel">
                    <div class="sidebar-panel-header">
                        <span class="sidebar-panel-title"></span>
                        <button class="sidebar-panel-close"></button>
                    </div>
                    <div class="sidebar-panel-content" id="sidebar-panel-content"></div>
                </div>
            </div>
        `;
    SidebarManager = require('../src/sidebar/sidebar-manager').SidebarManager;
  });

  test('starts collapsed', () => {
    new SidebarManager();
    expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
  });

  test('expands on panel toggle', () => {
    const mgr = new SidebarManager();
    mgr.registerPanel('test1', {
      title: 'Test 1',
      render: (c) => {
        c.innerHTML = 'hello';
      },
    });
    mgr.togglePanel('test1');
    expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(false);
    expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Test 1');
  });

  test('collapses on second toggle', () => {
    const mgr = new SidebarManager();
    mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
    mgr.togglePanel('test1');
    mgr.togglePanel('test1');
    expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
  });

  test('switches panels', () => {
    const mgr = new SidebarManager();
    mgr.registerPanel('test1', {
      title: 'Panel 1',
      render: (c) => {
        c.innerHTML = 'one';
      },
    });
    mgr.registerPanel('test2', {
      title: 'Panel 2',
      render: (c) => {
        c.innerHTML = 'two';
      },
    });
    mgr.togglePanel('test1');
    mgr.togglePanel('test2');
    expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Panel 2');
    expect(document.getElementById('sidebar-panel-content').innerHTML).toBe('two');
  });

  test('collapse resets active panel', () => {
    const mgr = new SidebarManager();
    mgr.registerPanel('test1', { title: 'Test', render: () => {} });
    mgr.expand('test1');
    mgr.collapse();
    expect(mgr.activePanel).toBe(null);
  });

  test('expand sets active icon', () => {
    const mgr = new SidebarManager();
    mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
    mgr.expand('test1');
    const btn = document.querySelector('[data-panel="test1"]');
    expect(btn.classList.contains('active')).toBe(true);
  });

  test('collapse removes active icon', () => {
    const mgr = new SidebarManager();
    mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
    mgr.expand('test1');
    mgr.collapse();
    const btn = document.querySelector('[data-panel="test1"]');
    expect(btn.classList.contains('active')).toBe(false);
  });

  test('expand with unregistered panel does nothing', () => {
    const mgr = new SidebarManager();
    mgr.expand('nonexistent');
    expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
    expect(mgr.activePanel).toBe(null);
  });

  test('render function receives panel content element', () => {
    const mgr = new SidebarManager();
    const renderFn = jest.fn();
    mgr.registerPanel('test1', { title: 'Test 1', render: renderFn });
    mgr.expand('test1');
    expect(renderFn).toHaveBeenCalledWith(document.getElementById('sidebar-panel-content'));
  });

  test('clicking sidebar icon toggles panel', () => {
    const mgr = new SidebarManager();
    mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
    const btn = document.querySelector('[data-panel="test1"]');
    btn.click();
    expect(mgr.activePanel).toBe('test1');
    btn.click();
    expect(mgr.activePanel).toBe(null);
  });

  test('clicking close button collapses sidebar', () => {
    const mgr = new SidebarManager();
    mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
    mgr.expand('test1');
    document.querySelector('.sidebar-panel-close').click();
    expect(mgr.activePanel).toBe(null);
    expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
  });
});