signoz/frontend/src/components/RouteTab/RouteTab.test.tsx
Palash Gupta ed65c92fc7
feat: layout is updated for logs-settings (#3220)
* 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>
2023-08-03 12:52:39 +05:30

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();
});
});