test: navigation sidebar (#7172)

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx

@@ -59,6 +59,7 @@ export const ConfigureNavigationList: FC<{
         <List>
             {routes.map((route) => (
                 <DynamicListItem
+                    key={route.title}
                     href={route.path}
                     text={route.title}
                     onClick={onClick}
@@ -82,6 +83,7 @@ export const AdminNavigationList: FC<{
         <List>
             {routes.map((route) => (
                 <DynamicListItem
+                    key={route.title}
                     onClick={onClick}
                     href={route.path}
                     text={route.title}
@@ -104,7 +106,11 @@ export const OtherLinksList = () => {
     return (
         <List>
             {uiConfig.links.map((link) => (
-                <ExternalFullListItem href={link.href} text={link.value}>
+                <ExternalFullListItem
+                    href={link.href}
+                    text={link.value}
+                    key={link.value}
+                >
                     <IconRenderer path={link.value} />
                 </ExternalFullListItem>
             ))}

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx

@@ -0,0 +1,56 @@
+import { render } from 'utils/testRenderer';
+import { NavigationSidebar } from './NavigationSidebar';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { createLocalStorage } from 'utils/createLocalStorage';
+
+beforeEach(() => {
+    window.localStorage.clear();
+});
+
+test('switch full mode and mini mode', () => {
+    render(<NavigationSidebar />);
+
+    expect(screen.queryByText('Projects')).toBeInTheDocument();
+    expect(screen.queryByText('Applications')).toBeInTheDocument();
+    expect(screen.queryByText('Users')).toBeInTheDocument();
+
+    const hide = screen.getByText('Hide (⌘ + B)');
+    hide.click();
+
+    expect(screen.queryByText('Projects')).not.toBeInTheDocument();
+    expect(screen.queryByText('Applications')).not.toBeInTheDocument();
+    expect(screen.queryByText('Users')).not.toBeInTheDocument();
+
+    const expand = screen.getByTestId('expand-navigation');
+    fireEvent.click(expand);
+
+    expect(screen.queryByText('Projects')).toBeInTheDocument();
+    expect(screen.queryByText('Applications')).toBeInTheDocument();
+    expect(screen.queryByText('Users')).toBeInTheDocument();
+});
+
+test('persist navigation mode and expansion selection in storage', async () => {
+    render(<NavigationSidebar />);
+    const { value } = createLocalStorage('navigation-mode:v1', {});
+    expect(value).toBe('full');
+
+    const configure = screen.getByText('Configure');
+    configure.click(); // expand
+    configure.click(); // hide
+    const admin = screen.getByText('Admin');
+    admin.click();
+
+    const hide = screen.getByText('Hide (⌘ + B)');
+    hide.click();
+
+    await waitFor(() => {
+        const { value } = createLocalStorage('navigation-mode:v1', {});
+        expect(value).toBe('mini');
+
+        const { value: expanded } = createLocalStorage(
+            'navigation-expanded:v1',
+            {},
+        );
+        expect(expanded).toEqual(['admin']);
+    });
+});

frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx

@@ -35,7 +35,7 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
                     <ChevronLeftIcon />
                 ) : (
                     <Tooltip title='Expand (⌘ + B)' placement='right'>
-                        <ChevronRightIcon />
+                        <ChevronRightIcon data-testid='expand-navigation' />
                     </Tooltip>
                 )}
             </IconButton>