mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
test(navigation): snapshot sidebar for different plans (#8507)
Test navigation element by snapshot for all plans
This commit is contained in:
Tymoteusz Czech
GitHub
parent
cbfdb8ca6e
commit
f4abf5308a
@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -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",
|
||||
},
|
||||
]
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user