test(navigation): snapshot sidebar for different plans (#8507)

Test navigation element by snapshot for all plans

frontend/src/component/common/ProjectIcon/ProjectIcon.tsx

@@ -4,4 +4,11 @@ import { ReactComponent as Svg } from 'assets/icons/projectIconSmall.svg';
 
 export const ProjectIcon: FC<ComponentProps<typeof SvgIcon>> = ({
     ...props
-}) => <SvgIcon component={Svg} viewBox={'0 0 14 10'} {...props} />;
+}) => (
+    <SvgIcon
+        component={Svg}
+        viewBox={'0 0 14 10'}
+        data-testid='UnleashProjectIcon'
+        {...props}
+    />
+);

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

@@ -11,7 +11,6 @@ import {
 import { type FC, useEffect } from 'react';
 import { useLastViewedProject } from 'hooks/useLastViewedProject';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
-import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
 
 const server = testServerSetup();
 
@@ -19,29 +18,8 @@ beforeEach(() => {
     window.localStorage.clear();
 });
 
-const TestNavigationSidebar: FC<{
-    project?: string;
-    flags?: LastViewedFlag[];
-}> = ({ project, flags }) => {
-    const { setLastViewed: setProject } = useLastViewedProject();
-    const { setLastViewed: setFlag } = useLastViewedFlags();
-
-    useEffect(() => {
-        setProject(project);
-        flags?.forEach((flag) => {
-            setFlag(flag);
-        });
-    }, []);
-
-    return (
-        <EventTimelineProvider>
-            <NavigationSidebar />
-        </EventTimelineProvider>
-    );
-};
-
 test('switch full mode and mini mode', () => {
-    render(<TestNavigationSidebar />);
+    render(<NavigationSidebar />);
 
     expect(screen.queryByText('Projects')).toBeInTheDocument();
     expect(screen.queryByText('Applications')).toBeInTheDocument();
@@ -64,7 +42,7 @@ test('switch full mode and mini mode', () => {
 });
 
 test('persist navigation mode and expansion selection in storage', async () => {
-    render(<TestNavigationSidebar />);
+    render(<NavigationSidebar />);
     const { value } = createLocalStorage('navigation-mode:v1', {});
     expect(value).toBe('full');
 
@@ -92,7 +70,7 @@ test('persist navigation mode and expansion selection in storage', async () => {
 test('select active item', async () => {
     render(
         <Routes>
-            <Route path={'/search'} element={<TestNavigationSidebar />} />
+            <Route path={'/search'} element={<NavigationSidebar />} />
         </Routes>,
         { route: '/search' },
     );
@@ -107,6 +85,23 @@ test('print recent projects and flags', async () => {
         name: 'projectNameA',
     });
 
+    const TestNavigationSidebar: FC<{
+        project?: string;
+        flags?: LastViewedFlag[];
+    }> = ({ project, flags }) => {
+        const { setLastViewed: setProject } = useLastViewedProject();
+        const { setLastViewed: setFlag } = useLastViewedFlags();
+
+        useEffect(() => {
+            setProject(project);
+            flags?.forEach((flag) => {
+                setFlag(flag);
+            });
+        }, []);
+
+        return <NavigationSidebar />;
+    };
+
     render(
         <TestNavigationSidebar
             project={'projectA'}
@@ -117,3 +112,68 @@ test('print recent projects and flags', async () => {
     await screen.findByText('projectNameA');
     await screen.findByText('featureA');
 });
+
+describe('order of items in navigation', () => {
+    const flags = {
+        personalDashboardUI: true,
+    };
+
+    const getLinks = async () => {
+        const configureButton = await screen.findByRole('button', {
+            name: /configure/i,
+        });
+        configureButton.click();
+        await waitFor(() =>
+            expect(configureButton.getAttribute('aria-expanded')).toBe('true'),
+        );
+        const adminButton = await screen.findByRole('button', {
+            name: /admin/i,
+        });
+        adminButton.click();
+        await waitFor(() =>
+            expect(adminButton.getAttribute('aria-expanded')).toBe('true'),
+        );
+
+        const links = await screen.findAllByRole('link');
+        return links.map((el: HTMLElement) => ({
+            text: el.textContent,
+            icon: el.querySelector('svg')?.getAttribute('data-testid'),
+        }));
+    };
+
+    test('menu for open-source', async () => {
+        testServerRoute(server, '/api/admin/ui-config', {
+            flags,
+        });
+        render(<NavigationSidebar />);
+
+        expect(await getLinks()).toMatchSnapshot();
+    });
+
+    test('menu for pro plan', async () => {
+        testServerRoute(server, '/api/admin/ui-config', {
+            flags,
+            versionInfo: {
+                current: { enterprise: 'version' },
+            },
+            environment: 'Pro',
+        });
+
+        render(<NavigationSidebar />);
+
+        expect(await getLinks()).toMatchSnapshot();
+    });
+
+    test('menu for enterprise plan', async () => {
+        testServerRoute(server, '/api/admin/ui-config', {
+            flags,
+            versionInfo: {
+                current: { enterprise: 'version' },
+            },
+            environment: 'Enterprise',
+        });
+        render(<NavigationSidebar />);
+
+        expect(await getLinks()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,284 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`order of items in navigation > menu for enterprise plan 1`] = `
+[
+  {
+    "icon": "DashboardOutlinedIcon",
+    "text": "Dashboard",
+  },
+  {
+    "icon": "UnleashProjectIcon",
+    "text": "Projects",
+  },
+  {
+    "icon": "SearchIcon",
+    "text": "Search",
+  },
+  {
+    "icon": "AutoFixNormalIcon",
+    "text": "Playground",
+  },
+  {
+    "icon": "InsightsIcon",
+    "text": "Insights",
+  },
+  {
+    "icon": "AppsOutlinedIcon",
+    "text": "Applications",
+  },
+  {
+    "icon": "AccountTreeOutlinedIcon",
+    "text": "Context fields",
+  },
+  {
+    "icon": "OutlinedFlagIcon",
+    "text": "Feature flag types",
+  },
+  {
+    "icon": "ExtensionOutlinedIcon",
+    "text": "Strategy types",
+  },
+  {
+    "icon": "CloudOutlinedIcon",
+    "text": "Environments",
+  },
+  {
+    "icon": "LabelImportantOutlinedIcon",
+    "text": "Tag types",
+  },
+  {
+    "icon": "IntegrationInstructionsOutlinedIcon",
+    "text": "Integrations",
+  },
+  {
+    "icon": "DonutLargeOutlinedIcon",
+    "text": "Segments",
+  },
+  {
+    "icon": "GroupOutlinedIcon",
+    "text": "Users",
+  },
+  {
+    "icon": "ComputerIcon",
+    "text": "Service accounts",
+  },
+  {
+    "icon": "GroupsOutlinedIcon",
+    "text": "Groups",
+  },
+  {
+    "icon": "AdminPanelSettingsOutlinedIcon",
+    "text": "Roles",
+  },
+  {
+    "icon": "KeyOutlinedIcon",
+    "text": "API access",
+  },
+  {
+    "icon": "AssignmentOutlinedIcon",
+    "text": "Single sign-on",
+  },
+  {
+    "icon": "BuildOutlinedIcon",
+    "text": "Maintenance",
+  },
+  {
+    "icon": "ViewCarouselIcon",
+    "text": "Banners",
+  },
+  {
+    "icon": "QueryStatsOutlinedIcon",
+    "text": "Instance stats",
+  },
+  {
+    "icon": "ShieldOutlinedIcon",
+    "text": "Instance privacy",
+  },
+  {
+    "icon": "HistoryOutlinedIcon",
+    "text": "Login history",
+  },
+  {
+    "icon": "EventNoteOutlinedIcon",
+    "text": "Event log",
+  },
+]
+`;
+
+exports[`order of items in navigation > menu for open-source 1`] = `
+[
+  {
+    "icon": "DashboardOutlinedIcon",
+    "text": "Dashboard",
+  },
+  {
+    "icon": "UnleashProjectIcon",
+    "text": "Projects",
+  },
+  {
+    "icon": "SearchIcon",
+    "text": "Search",
+  },
+  {
+    "icon": "AutoFixNormalIcon",
+    "text": "Playground",
+  },
+  {
+    "icon": "AppsOutlinedIcon",
+    "text": "Applications",
+  },
+  {
+    "icon": "AccountTreeOutlinedIcon",
+    "text": "Context fields",
+  },
+  {
+    "icon": "OutlinedFlagIcon",
+    "text": "Feature flag types",
+  },
+  {
+    "icon": "ExtensionOutlinedIcon",
+    "text": "Strategy types",
+  },
+  {
+    "icon": "LabelImportantOutlinedIcon",
+    "text": "Tag types",
+  },
+  {
+    "icon": "IntegrationInstructionsOutlinedIcon",
+    "text": "Integrations",
+  },
+  {
+    "icon": "DonutLargeOutlinedIcon",
+    "text": "Segments",
+  },
+  {
+    "icon": "GroupOutlinedIcon",
+    "text": "Users",
+  },
+  {
+    "icon": "KeyOutlinedIcon",
+    "text": "API access",
+  },
+  {
+    "icon": "BuildOutlinedIcon",
+    "text": "Maintenance",
+  },
+  {
+    "icon": "QueryStatsOutlinedIcon",
+    "text": "Instance stats",
+  },
+  {
+    "icon": "ShieldOutlinedIcon",
+    "text": "Instance privacy",
+  },
+  {
+    "icon": "EventNoteOutlinedIcon",
+    "text": "Event log",
+  },
+]
+`;
+
+exports[`order of items in navigation > menu for pro plan 1`] = `
+[
+  {
+    "icon": "DashboardOutlinedIcon",
+    "text": "Dashboard",
+  },
+  {
+    "icon": "UnleashProjectIcon",
+    "text": "Projects",
+  },
+  {
+    "icon": "SearchIcon",
+    "text": "Search",
+  },
+  {
+    "icon": "AutoFixNormalIcon",
+    "text": "Playground",
+  },
+  {
+    "icon": "InsightsIcon",
+    "text": "Insights",
+  },
+  {
+    "icon": "AppsOutlinedIcon",
+    "text": "Applications",
+  },
+  {
+    "icon": "AccountTreeOutlinedIcon",
+    "text": "Context fields",
+  },
+  {
+    "icon": "OutlinedFlagIcon",
+    "text": "Feature flag types",
+  },
+  {
+    "icon": "ExtensionOutlinedIcon",
+    "text": "Strategy types",
+  },
+  {
+    "icon": "CloudOutlinedIcon",
+    "text": "Environments",
+  },
+  {
+    "icon": "LabelImportantOutlinedIcon",
+    "text": "Tag types",
+  },
+  {
+    "icon": "IntegrationInstructionsOutlinedIcon",
+    "text": "Integrations",
+  },
+  {
+    "icon": "DonutLargeOutlinedIcon",
+    "text": "Segments",
+  },
+  {
+    "icon": "GroupOutlinedIcon",
+    "text": "Users",
+  },
+  {
+    "icon": "ComputerIcon",
+    "text": "Service accounts",
+  },
+  {
+    "icon": "GroupsOutlinedIcon",
+    "text": "Groups",
+  },
+  {
+    "icon": "AdminPanelSettingsOutlinedIcon",
+    "text": "Roles",
+  },
+  {
+    "icon": "KeyOutlinedIcon",
+    "text": "API access",
+  },
+  {
+    "icon": "AssignmentOutlinedIcon",
+    "text": "Single sign-on",
+  },
+  {
+    "icon": "BuildOutlinedIcon",
+    "text": "Maintenance",
+  },
+  {
+    "icon": "ViewCarouselIcon",
+    "text": "Banners",
+  },
+  {
+    "icon": "QueryStatsOutlinedIcon",
+    "text": "Instance stats",
+  },
+  {
+    "icon": "ShieldOutlinedIcon",
+    "text": "Instance privacy",
+  },
+  {
+    "icon": "HistoryOutlinedIcon",
+    "text": "Login history",
+  },
+  {
+    "icon": "EventNoteOutlinedIcon",
+    "text": "Event log",
+  },
+]
+`;