-
- 
-
+
@@ -122,7 +139,12 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
{initials && (
+
+
{localize('com_auth_title')}
@@ -105,7 +119,8 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
aria-label={collapsed ? localize(item.labelKey) : undefined}
title={collapsed ? localize(item.labelKey) : undefined}
className={cn(
- 'flex h-8 items-center gap-2.5 overflow-hidden rounded-md px-2.5 text-sm whitespace-nowrap no-underline transition-colors duration-100',
+ 'flex h-8 items-center overflow-hidden rounded-md px-2.5 text-sm whitespace-nowrap no-underline transition-colors duration-100',
+ collapsed ? 'justify-center gap-0' : 'gap-2.5',
isActive(item.path)
? 'bg-(--cui-color-background-active) font-medium text-(--cui-color-text-default)'
: 'font-normal text-(--cui-color-text-muted) hover:bg-(--cui-color-background-hover) hover:text-(--cui-color-text-default)',
@@ -114,7 +129,9 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
- {localize(item.labelKey)}
+
+ {localize(item.labelKey)}
+
))}
-
+
{user && (
-
+
{user.name || ''}
@@ -186,7 +210,10 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
onClick={onToggle}
aria-label={localize(collapsed ? 'com_nav_expand_sidebar' : 'com_nav_collapse_sidebar')}
title={localize(collapsed ? 'com_nav_expand_sidebar' : 'com_nav_collapse_sidebar')}
- className="flex w-full shrink-0 cursor-pointer items-center justify-center border-t border-(--cui-color-stroke-default) bg-transparent py-3 text-(--cui-color-text-muted) transition-colors hover:bg-(--cui-color-background-hover) hover:text-(--cui-color-text-default)"
+ className={cn(
+ 'sidebar-toggle',
+ 'flex w-full shrink-0 cursor-pointer items-center justify-center border-t border-(--cui-color-stroke-default) bg-transparent py-3 text-(--cui-color-text-muted) transition-colors hover:bg-(--cui-color-background-hover) hover:text-(--cui-color-text-default)',
+ )}
>
{}} />);
-
-describe('Sidebar', () => {
- it('centers the logo, nav icons, and avatar with no gap when collapsed', () => {
- const { container } = renderSidebar(true);
- const logoRow = container.querySelector('img')?.parentElement;
- expect(logoRow).toHaveClass('justify-center', 'gap-0');
- expect(logoRow).not.toHaveClass('gap-2.5');
- const link = container.querySelector('a[href="/"]');
- expect(link).toHaveClass('justify-center', 'gap-0');
- expect(link).not.toHaveClass('gap-2.5');
- const userRow = container.querySelector('div.border-t')?.firstElementChild;
- expect(userRow).toHaveClass('justify-center', 'gap-0');
- expect(userRow).not.toHaveClass('overflow-hidden');
- });
-
- it('restores gaps and left alignment when expanded', () => {
- const { container } = renderSidebar(false);
- const link = container.querySelector('a[href="/"]');
- expect(link).toHaveClass('gap-2.5');
- expect(link).not.toHaveClass('justify-center');
- const userRow = container.querySelector('div.border-t')?.firstElementChild;
- expect(userRow).toHaveClass('gap-2.5');
- expect(userRow).not.toHaveClass('overflow-hidden');
- });
-
- it('applies the sidebar-toggle class to the collapse toggle', () => {
- const { getByLabelText } = renderSidebar(true);
- expect(getByLabelText('com_nav_expand_sidebar')).toHaveClass('sidebar-toggle');
- });
-});
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 677e14e1..c34a38aa 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -90,7 +90,7 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
![]( "{collapsed")
diff --git a/src/components/__tests__/Sidebar.test.tsx b/src/components/__tests__/Sidebar.test.tsx
new file mode 100644
index 00000000..907449f7
--- /dev/null
+++ b/src/components/__tests__/Sidebar.test.tsx
@@ -0,0 +1,84 @@
+import { describe, it, expect, vi } from 'vitest';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { renderWithLayoutProviders } from '@/test/layout-test-utils';
+import { Sidebar } from '../Sidebar';
+
+vi.mock('@/server', async () => {
+ const { SystemCapabilities } = await import('@/constants');
+ return {
+ adminLogoutFn: vi.fn().mockResolvedValue({ error: false, redirect: '' }),
+ getEffectiveCapabilitiesFn: vi.fn().mockResolvedValue({
+ capabilities: [
+ SystemCapabilities.ACCESS_ADMIN,
+ SystemCapabilities.READ_CONFIGS,
+ SystemCapabilities.READ_ROLES,
+ ],
+ }),
+ };
+});
+
+const user = { name: 'Ada Lovelace', email: 'ada@example.com' };
+
+const renderSidebar = (collapsed: boolean, onToggle: () => void = () => {}) =>
+ renderWithLayoutProviders(
+
+
+
+
+ ,
+ );
+}
diff --git a/src/test/setup.ts b/src/test/setup.ts
index bb02c60c..aa9762a4 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1 +1,25 @@
import '@testing-library/jest-dom/vitest';
+
+if (typeof window !== 'undefined') {
+ window.scrollTo = () => {};
+
+ window.matchMedia ??= (query: string): MediaQueryList =>
+ ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: () => {},
+ removeListener: () => {},
+ addEventListener: () => {},
+ removeEventListener: () => {},
+ dispatchEvent: () => false,
+ }) as MediaQueryList;
+
+ window.ResizeObserver ??= class {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ };
+
+ Element.prototype.scrollIntoView ??= () => {};
+}
From efdc6b449f6890c11a0a3c0d8f23f5e7c4aa6e3a Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Fri, 14 Aug 2026 08:53:19 -0700
Subject: [PATCH 4/4] refactor: move the layout render options into the types
barrel
Locally defined interfaces live in src/types and are consumed through the types namespace import per the repo convention, so the test helper's options type moves next to SidebarProps in layout.ts.
---
src/test/layout-test-utils.tsx | 7 +------
src/types/layout.ts | 5 +++++
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/test/layout-test-utils.tsx b/src/test/layout-test-utils.tsx
index 3ed070d2..55872b04 100644
--- a/src/test/layout-test-utils.tsx
+++ b/src/test/layout-test-utils.tsx
@@ -16,14 +16,9 @@ import { ThemeProvider } from '@/contexts/ThemeContext';
const APP_PATHS = ['/', '/configuration', '/access', '/grants', '/help'];
-interface LayoutRenderOptions {
- user?: t.SidebarProps['user'];
- path?: string;
-}
-
export function renderWithLayoutProviders(
ui: ReactNode,
- { user = null, path = '/' }: LayoutRenderOptions = {},
+ { user = null, path = '/' }: t.LayoutRenderOptions = {},
): RenderResult {
const rootRoute = createRootRoute();
const appRoute = createRoute({
diff --git a/src/types/layout.ts b/src/types/layout.ts
index 7563e578..80833cd9 100644
--- a/src/types/layout.ts
+++ b/src/types/layout.ts
@@ -39,3 +39,8 @@ export interface SettingsDialogProps {
open: boolean;
onClose: () => void;
}
+
+export interface LayoutRenderOptions {
+ user?: SidebarProps['user'];
+ path?: string;
+}
{children}
, {
- Trigger: ({ children }: { children: ReactNode }) => {children}
,
- Content: () => null,
- Item: () => null,
- }),
-}));
-
-vi.mock('@/hooks', () => ({
- useLocalize: () => (key: string) => key,
- useCapabilities: () => ({ hasCapability: () => true }),
- useStripAriaExpanded: () => ({ current: null }),
-}));
-
-vi.mock('@/server', () => ({ adminLogoutFn: vi.fn() }));
-
-vi.mock('./SettingsDialog', () => ({ SettingsDialog: () => null }));
-
-const user = { name: 'Ada Lovelace', email: 'ada@example.com' };
-
-const renderSidebar = (collapsed: boolean) =>
- render(