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

Test navigation element by snapshot for all plans
Unleash · Oct 22, 2024 · f4abf53 · f4abf53
1 parent cbfdb8c
commit f4abf53
Show file tree

Hide file tree

Showing 3 changed files with 377 additions and 26 deletions.
diff --git a/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx b/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}
+    />
+);
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx
@@ -11,37 +11,15 @@ 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();
 
 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();
+    });
+});