From f4abf5308afe0c44968eb607346b61fc6ba8401b Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Tue, 22 Oct 2024 11:13:59 +0200 Subject: [PATCH] test(navigation): snapshot sidebar for different plans (#8507) Test navigation element by snapshot for all plans --- .../common/ProjectIcon/ProjectIcon.tsx | 9 +- .../NavigationSidebar.test.tsx | 110 +++++-- .../NavigationSidebar.test.tsx.snap | 284 ++++++++++++++++++ 3 files changed, 377 insertions(+), 26 deletions(-) create mode 100644 frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap diff --git a/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx b/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx index 761a4ffe94..32319c344c 100644 --- 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> = ({ ...props -}) => ; +}) => ( + +); diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx index ea0aacaf58..ad3ea8d197 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx +++ b/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 ( - - - - ); -}; - test('switch full mode and mini mode', () => { - render(); + render(); 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(); + render(); 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( - } /> + } /> , { 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 ; + }; + render( { 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(); + + expect(await getLinks()).toMatchSnapshot(); + }); + + test('menu for pro plan', async () => { + testServerRoute(server, '/api/admin/ui-config', { + flags, + versionInfo: { + current: { enterprise: 'version' }, + }, + environment: 'Pro', + }); + + render(); + + expect(await getLinks()).toMatchSnapshot(); + }); + + test('menu for enterprise plan', async () => { + testServerRoute(server, '/api/admin/ui-config', { + flags, + versionInfo: { + current: { enterprise: 'version' }, + }, + environment: 'Enterprise', + }); + render(); + + expect(await getLinks()).toMatchSnapshot(); + }); +}); diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap b/frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap new file mode 100644 index 0000000000..07aaa5b624 --- /dev/null +++ b/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", + }, +] +`;