test: some of the test case is added (#2607)

* test: some of the test case is added

* fix: build is fixed

* chore: tsc is fixed

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -0,0 +1,90 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+
+import RouteTab from './index';
+
+function DummyComponent1(): JSX.Element {
+	return <div>Dummy Component 1</div>;
+}
+function DummyComponent2(): JSX.Element {
+	return <div>Dummy Component 2</div>;
+}
+
+const testRoutes = [
+	{
+		name: 'Tab1',
+		route: '/tab1',
+		Component: DummyComponent1,
+	},
+	{
+		name: 'Tab2',
+		route: '/tab2',
+		Component: DummyComponent2,
+	},
+];
+
+describe('RouteTab component', () => {
+	test('renders correctly', () => {
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		expect(screen.getByRole('tab', { name: 'Tab1' })).toBeInTheDocument();
+		expect(screen.getByRole('tab', { name: 'Tab2' })).toBeInTheDocument();
+	});
+
+	test('renders correct number of tabs', () => {
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		const tabs = screen.getAllByRole('tab');
+		expect(tabs.length).toBe(testRoutes.length);
+	});
+
+	test('sets provided activeKey as active tab', () => {
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab2" />
+			</Router>,
+		);
+		expect(
+			screen.getByRole('tab', { name: 'Tab2', selected: true }),
+		).toBeInTheDocument();
+	});
+
+	test('navigates to correct route on tab click', () => {
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		expect(history.location.pathname).toBe('/');
+		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
+		expect(history.location.pathname).toBe('/tab2');
+	});
+
+	test('calls onChangeHandler on tab change', () => {
+		const onChangeHandler = jest.fn();
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab
+					routes={testRoutes}
+					activeKey="Tab1"
+					onChangeHandler={onChangeHandler}
+					history={history}
+				/>
+			</Router>,
+		);
+		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
+		expect(onChangeHandler).toHaveBeenCalled();
+	});
+});

frontend/src/components/RouteTab/index.tsx

@@ -1,10 +1,11 @@
 import { Tabs, TabsProps } from 'antd';
-import history from 'lib/history';
+import { History } from 'history';
 
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
+	history,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const onChange = (activeRoute: string): void => {
@@ -47,6 +48,7 @@ interface RouteTabProps {
 	}[];
 	activeKey: TabsProps['activeKey'];
 	onChangeHandler?: VoidFunction;
+	history: History<unknown>;
 }
 
 RouteTab.defaultProps = {

frontend/src/container/MetricsApplication/index.tsx

@@ -1,7 +1,8 @@
 import RouteTab from 'components/RouteTab';
 import ROUTES from 'constants/routes';
 import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
-import { memo } from 'react';
+import history from 'lib/history';
+import { memo, useMemo } from 'react';
 import { generatePath, useParams } from 'react-router-dom';
 import { useLocation } from 'react-use';
 
@@ -52,35 +53,37 @@ function ServiceMetrics(): JSX.Element {
 
 	const activeKey = getActiveKey();
 
+	const routes = useMemo(
+		() => [
+			{
+				Component: OverViewTab,
+				name: overMetrics,
+				route: `${generatePath(ROUTES.SERVICE_METRICS, {
+					servicename,
+				})}?tab=${overMetrics}`,
+			},
+			{
+				Component: DbCallTab,
+				name: dbCallMetrics,
+				route: `${generatePath(ROUTES.SERVICE_METRICS, {
+					servicename,
+				})}?tab=${dbCallMetrics}`,
+			},
+			{
+				Component: ExternalTab,
+				name: externalMetrics,
+				route: `${generatePath(ROUTES.SERVICE_METRICS, {
+					servicename,
+				})}?tab=${externalMetrics}`,
+			},
+		],
+		[servicename],
+	);
+
 	return (
 		<>
 			<ResourceAttributesFilter />
-			<RouteTab
-				routes={[
-					{
-						Component: OverViewTab,
-						name: overMetrics,
-						route: `${generatePath(ROUTES.SERVICE_METRICS, {
-							servicename,
-						})}?tab=${overMetrics}`,
-					},
-					{
-						Component: DbCallTab,
-						name: dbCallMetrics,
-						route: `${generatePath(ROUTES.SERVICE_METRICS, {
-							servicename,
-						})}?tab=${dbCallMetrics}`,
-					},
-					{
-						Component: ExternalTab,
-						name: externalMetrics,
-						route: `${generatePath(ROUTES.SERVICE_METRICS, {
-							servicename,
-						})}?tab=${externalMetrics}`,
-					},
-				]}
-				activeKey={activeKey}
-			/>
+			<RouteTab routes={routes} history={history} activeKey={activeKey} />
 		</>
 	);
 }

frontend/src/hooks/useComponentPermission.test.ts

@@ -0,0 +1,100 @@
+import { renderHook } from '@testing-library/react';
+import { ComponentTypes } from 'utils/permission';
+
+import useComponentPermission from './useComponentPermission';
+
+describe('useComponentPermission', () => {
+	const componentList: ComponentTypes[] = [
+		'current_org_settings',
+		'invite_members',
+		'create_new_dashboards',
+		'import_dashboard',
+		'export_dashboard',
+		'add_new_alert',
+		'add_new_channel',
+		'set_retention_period',
+		'action',
+		'save_layout',
+		'edit_dashboard',
+		'delete_widget',
+		'new_dashboard',
+		'new_alert_action',
+		'edit_widget',
+		'add_panel',
+	];
+
+	it('should return correct permissions for ADMIN role', () => {
+		const { result } = renderHook(() =>
+			useComponentPermission(componentList, 'ADMIN'),
+		);
+		const expectedResult = [
+			true, // current_org_settings
+			true, // invite_members
+			true, // create_new_dashboards
+			true, // import_dashboard
+			true, // export_dashboard
+			true, // add_new_alert
+			true, // add_new_channel
+			true, // set_retention_period
+			true, // action
+			true, // save_layout
+			true, // edit_dashboard
+			true, // delete_widget
+			true, // new_dashboard
+			true, // new_alert_action
+			true, // edit_widget
+			true, // add_panel
+		];
+		expect(result.current).toEqual(expectedResult);
+	});
+
+	it('should return correct permissions for EDITOR role', () => {
+		const { result } = renderHook(() =>
+			useComponentPermission(componentList, 'EDITOR'),
+		);
+		const expectedResult = [
+			false, // current_org_settings
+			false, // invite_members
+			true, // create_new_dashboards
+			true, // import_dashboard
+			true, // export_dashboard
+			true, // add_new_alert
+			false, // add_new_channel
+			false, // set_retention_period
+			true, // action
+			true, // save_layout
+			true, // edit_dashboard
+			true, // delete_widget
+			true, // new_dashboard
+			false, // new_alert_action
+			true, // edit_widget
+			true, // add_panel
+		];
+		expect(result.current).toEqual(expectedResult);
+	});
+
+	it('should return correct permissions for VIEWER role', () => {
+		const { result } = renderHook(() =>
+			useComponentPermission(componentList, 'VIEWER'),
+		);
+		const expectedResult = [
+			false, // current_org_settings
+			false, // invite_members
+			false, // create_new_dashboards
+			false, // import_dashboard
+			true, // export_dashboard
+			false, // add_new_alert
+			false, // add_new_channel
+			false, // set_retention_period
+			false, // action
+			false, // save_layout
+			false, // edit_dashboard
+			false, // delete_widget
+			false, // new_dashboard
+			false, // new_alert_action
+			false, // edit_widget
+			false, // add_panel
+		];
+		expect(result.current).toEqual(expectedResult);
+	});
+});

frontend/src/pages/AlertChannelCreate/index.tsx

@@ -11,6 +11,7 @@ function SettingsPage(): JSX.Element {
 	const { t } = useTranslation();
 	return (
 		<RouteTab
+			history={history}
 			{...{
 				routes: [
 					{

frontend/src/pages/AllErrors/index.tsx

@@ -2,25 +2,31 @@ import RouteTab from 'components/RouteTab';
 import ROUTES from 'constants/routes';
 import AllErrorsContainer from 'container/AllError';
 import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
+import history from 'lib/history';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 function AllErrors(): JSX.Element {
 	const { t } = useTranslation();
 
+	const routes = useMemo(
+		() => [
+			{
+				Component: AllErrorsContainer,
+				name: t('routes.all_errors'),
+				route: ROUTES.ALL_ERROR,
+			},
+		],
+		[t],
+	);
+
 	return (
 		<>
 			<ResourceAttributesFilter />
 			<RouteTab
-				{...{
-					routes: [
-						{
-							Component: AllErrorsContainer,
-							name: t('routes.all_errors'),
-							route: ROUTES.ALL_ERROR,
-						},
-					],
-					activeKey: t('routes.all_errors'),
-				}}
+				routes={routes}
+				activeKey={t('routes.all_errors')}
+				history={history}
 			/>
 		</>
 	);

frontend/src/pages/Settings/index.tsx

@@ -52,10 +52,9 @@ function SettingsPage(): JSX.Element {
 
 	return (
 		<RouteTab
-			{...{
-				routes: common,
-				activeKey: getActiveKey(pathName),
-			}}
+			routes={common}
+			activeKey={getActiveKey(pathName)}
+			history={history}
 		/>
 	);
 }