mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-01 04:32:03 +08:00

* feat: layout is updated * feat: layout is updated * feat: layout is updated * chore: types and build pipeline is fixed --------- Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { createMemoryHistory } from 'history';
|
|
import { Router } from 'react-router-dom';
|
|
|
|
import RouteTab from './index';
|
|
import { RouteTabProps } from './types';
|
|
|
|
function DummyComponent1(): JSX.Element {
|
|
return <div>Dummy Component 1</div>;
|
|
}
|
|
function DummyComponent2(): JSX.Element {
|
|
return <div>Dummy Component 2</div>;
|
|
}
|
|
|
|
const testRoutes: RouteTabProps['routes'] = [
|
|
{
|
|
name: 'Tab1',
|
|
route: '/tab1',
|
|
Component: DummyComponent1,
|
|
key: 'Tab1',
|
|
},
|
|
{
|
|
name: 'Tab2',
|
|
route: '/tab2',
|
|
Component: DummyComponent2,
|
|
key: 'Tab2',
|
|
},
|
|
];
|
|
|
|
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();
|
|
});
|
|
});
|