85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { screen, within } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { render } from 'lib/testHelpers';
|
|
import PageContainer from 'components/PageContainer/PageContainer';
|
|
import { useClusters } from 'lib/hooks/api/clusters';
|
|
import { Cluster, ServerStatus } from 'generated-sources';
|
|
|
|
const burgerButtonOptions = { name: 'burger' };
|
|
|
|
jest.mock('components/Version/Version', () => () => <div>Version</div>);
|
|
interface DataType {
|
|
data: Cluster[] | undefined;
|
|
}
|
|
jest.mock('lib/hooks/api/clusters');
|
|
const mockedNavigate = jest.fn();
|
|
jest.mock('react-router-dom', () => ({
|
|
...jest.requireActual('react-router-dom'),
|
|
useNavigate: () => mockedNavigate,
|
|
}));
|
|
describe('Page Container', () => {
|
|
const renderComponent = (hasDynamicConfig: boolean, data: DataType) => {
|
|
const useClustersMock = useClusters as jest.Mock;
|
|
useClustersMock.mockReturnValue(data);
|
|
Object.defineProperty(window, 'matchMedia', {
|
|
writable: true,
|
|
value: jest.fn().mockImplementation(() => ({
|
|
matches: false,
|
|
addListener: jest.fn(),
|
|
})),
|
|
});
|
|
render(
|
|
<PageContainer setDarkMode={jest.fn()}>
|
|
<div>child</div>
|
|
</PageContainer>,
|
|
{
|
|
globalSettings: { hasDynamicConfig },
|
|
}
|
|
);
|
|
};
|
|
|
|
it('handle burger click correctly', async () => {
|
|
renderComponent(false, { data: undefined });
|
|
const burger = within(screen.getByLabelText('Page Header')).getByRole(
|
|
'button',
|
|
burgerButtonOptions
|
|
);
|
|
const overlay = screen.getByLabelText('Overlay');
|
|
expect(screen.getByLabelText('Sidebar')).toBeInTheDocument();
|
|
expect(overlay).toBeInTheDocument();
|
|
expect(overlay).toHaveStyleRule('visibility: hidden');
|
|
expect(burger).toHaveStyleRule('display: none');
|
|
await userEvent.click(burger);
|
|
expect(overlay).toHaveStyleRule('visibility: visible');
|
|
});
|
|
|
|
it('render the inner container', async () => {
|
|
renderComponent(false, { data: undefined });
|
|
expect(screen.getByText('child')).toBeInTheDocument();
|
|
});
|
|
|
|
describe('Redirect to the Wizard page', () => {
|
|
it('redirects to new cluster configuration page if there are no clusters and dynamic config is enabled', async () => {
|
|
await renderComponent(true, { data: undefined });
|
|
|
|
expect(mockedNavigate).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not navigate to new cluster config page when there are clusters', async () => {
|
|
await renderComponent(true, {
|
|
data: [{ name: 'Cluster 1', status: ServerStatus.ONLINE }],
|
|
});
|
|
|
|
expect(mockedNavigate).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not navigate to new cluster config page when there are no clusters and hasDynamicConfig is false', async () => {
|
|
await renderComponent(false, {
|
|
data: [],
|
|
});
|
|
|
|
expect(mockedNavigate).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|