test: add tests for ? keypress crash (#2262) and sidebar re-render (UX-972)

- use-developer-view: verify hook doesn't crash on ? keypress, reads
  localStorage correctly, and handles invalid JSON gracefully
- sidebar: verify TracingService defaults to unsupported, Transcripts
  item appears after endpointCompatibility loads, and store selector
  triggers re-render

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: malinskibeniamin

frontend/src/components/layout/sidebar.test.tsx

@@ -0,0 +1,86 @@
+import { act, renderHook } from '@testing-library/react';
+import { createGroupedSidebarItems } from 'utils/route-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import type { EndpointCompatibility } from '../../state/rest-interfaces';
+import { Feature, useSupportedFeaturesStore } from '../../state/supported-features';
+
+// Mock config to enable embedded + ADP mode (required for Transcripts route visibility)
+vi.mock('../../config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../config')>();
+  return {
+    ...actual,
+    isEmbedded: () => true,
+    isAdpEnabled: () => true,
+  };
+});
+
+describe('SidebarNavigation re-renders on endpointCompatibility change (UX-972)', () => {
+  afterEach(() => {
+    // Reset store to initial state between tests
+    useSupportedFeaturesStore.setState({
+      endpointCompatibility: null,
+      tracingService: false,
+    });
+  });
+
+  it('TracingService defaults to unsupported when endpointCompatibility is null', () => {
+    const state = useSupportedFeaturesStore.getState();
+    expect(state.endpointCompatibility).toBeNull();
+    expect(state.tracingService).toBe(false);
+  });
+
+  it('Transcripts item is hidden when TracingService is not supported', () => {
+    const groups = createGroupedSidebarItems();
+    const allItems = groups.flatMap((g) => g.items);
+    const transcripts = allItems.find((item) => item.to === '/transcripts');
+    expect(transcripts).toBeUndefined();
+  });
+
+  it('Transcripts item appears after endpointCompatibility loads with TracingService supported', () => {
+    const compatibility: EndpointCompatibility = {
+      kafkaVersion: '3.6.0',
+      endpoints: [
+        {
+          endpoint: Feature.TracingService.endpoint,
+          method: Feature.TracingService.method,
+          isSupported: true,
+        },
+      ],
+    };
+
+    act(() => {
+      useSupportedFeaturesStore.getState().setEndpointCompatibility(compatibility);
+    });
+
+    const groups = createGroupedSidebarItems();
+    const allItems = groups.flatMap((g) => g.items);
+    const transcripts = allItems.find((item) => item.to === '/transcripts');
+    expect(transcripts).toBeDefined();
+    expect(transcripts?.title).toBe('Transcripts');
+  });
+
+  it('store selector triggers re-render when endpointCompatibility changes', () => {
+    const selector = (s: { endpointCompatibility: EndpointCompatibility | null }) => s.endpointCompatibility;
+    const { result } = renderHook(() => useSupportedFeaturesStore(selector));
+
+    expect(result.current).toBeNull();
+
+    const compatibility: EndpointCompatibility = {
+      kafkaVersion: '3.6.0',
+      endpoints: [
+        {
+          endpoint: Feature.TracingService.endpoint,
+          method: Feature.TracingService.method,
+          isSupported: true,
+        },
+      ],
+    };
+
+    act(() => {
+      useSupportedFeaturesStore.getState().setEndpointCompatibility(compatibility);
+    });
+
+    expect(result.current).toBe(compatibility);
+  });
+});

frontend/src/hooks/use-developer-view.test.tsx

@@ -0,0 +1,68 @@
+import { renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import useDeveloperView from './use-developer-view';
+
+describe('useDeveloperView', () => {
+  const store: Record<string, string> = {};
+  const localStorageMock = {
+    getItem: vi.fn((key: string) => store[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value;
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key];
+    }),
+    clear: vi.fn(() => {
+      for (const key of Object.keys(store)) {
+        delete store[key];
+      }
+    }),
+    get length() {
+      return Object.keys(store).length;
+    },
+    key: vi.fn((index: number) => Object.keys(store)[index] ?? null),
+  };
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'localStorage', { value: localStorageMock, writable: true });
+    for (const key of Object.keys(store)) {
+      delete store[key];
+    }
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('returns false by default when localStorage has no stored value', () => {
+    const { result } = renderHook(() => useDeveloperView());
+    expect(result.current).toBe(false);
+  });
+
+  it('reads stored developer view preference from localStorage', () => {
+    store.dv = JSON.stringify(true);
+    const { result } = renderHook(() => useDeveloperView());
+    expect(result.current).toBe(true);
+  });
+
+  it('does not crash when pressing ? key', () => {
+    const { result } = renderHook(() => useDeveloperView());
+
+    // Simulate pressing '?' — this previously caused React error #301 in production
+    // when connected to vanilla Kafka (issue #2262)
+    expect(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: '?' }));
+    }).not.toThrow();
+
+    // Hook should still return a valid boolean
+    expect(typeof result.current).toBe('boolean');
+  });
+
+  it('returns false when localStorage contains invalid JSON', () => {
+    store.dv = 'not-json';
+    const { result } = renderHook(() => useDeveloperView());
+    expect(typeof result.current).toBe('boolean');
+  });
+});