mirror of
https://github.com/portainer/portainer.git
synced 2025-07-28 09:49:40 +02:00
124 lines
3 KiB
TypeScript
124 lines
3 KiB
TypeScript
|
import { render, screen } from '@testing-library/react';
|
|||
|
|
|||
|
import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
|
|||
|
|
|||
|
import { DescribeModal } from './DescribeModal';
|
|||
|
|
|||
|
const mockUseDescribeResource = vi.fn();
|
|||
|
|
|||
|
vi.mock('yaml-schema', () => ({}));
|
|||
|
vi.mock('./queries/useDescribeResource', () => ({
|
|||
|
useDescribeResource: (...args: unknown[]) => mockUseDescribeResource(...args),
|
|||
|
}));
|
|||
|
|
|||
|
function renderComponent({
|
|||
|
name = 'test-resource',
|
|||
|
resourceType = 'Deployment',
|
|||
|
namespace = 'default',
|
|||
|
onDismiss = vi.fn(),
|
|||
|
} = {}) {
|
|||
|
const Wrapped = withTestQueryProvider(DescribeModal);
|
|||
|
return render(
|
|||
|
<Wrapped
|
|||
|
name={name}
|
|||
|
resourceType={resourceType}
|
|||
|
namespace={namespace}
|
|||
|
onDismiss={onDismiss}
|
|||
|
/>
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
describe('DescribeModal', () => {
|
|||
|
beforeEach(() => {
|
|||
|
mockUseDescribeResource.mockReset();
|
|||
|
});
|
|||
|
|
|||
|
it('should display loading state initially', () => {
|
|||
|
mockUseDescribeResource.mockReturnValue({
|
|||
|
isLoading: true,
|
|||
|
data: undefined,
|
|||
|
isError: false,
|
|||
|
});
|
|||
|
|
|||
|
renderComponent();
|
|||
|
expect(screen.getByText('Loading...')).toBeInTheDocument();
|
|||
|
});
|
|||
|
|
|||
|
it('should display resource details when data is loaded successfully', () => {
|
|||
|
const mockDescribeData = {
|
|||
|
describe: 'Name: test-resource\nNamespace: default\nStatus: Running',
|
|||
|
};
|
|||
|
|
|||
|
mockUseDescribeResource.mockReturnValue({
|
|||
|
isLoading: false,
|
|||
|
data: mockDescribeData,
|
|||
|
isError: false,
|
|||
|
});
|
|||
|
|
|||
|
renderComponent();
|
|||
|
|
|||
|
// Check for modal title
|
|||
|
expect(screen.getByText('Describe Deployment')).toBeInTheDocument();
|
|||
|
|
|||
|
// Check for content
|
|||
|
const editor = screen.getByTestId('describe-resource');
|
|||
|
expect(editor).toBeInTheDocument();
|
|||
|
expect(editor).toHaveTextContent('Name: test-resource');
|
|||
|
expect(editor).toHaveTextContent('Namespace: default');
|
|||
|
expect(editor).toHaveTextContent('Status: Running');
|
|||
|
});
|
|||
|
|
|||
|
it('should display error message when query fails', () => {
|
|||
|
mockUseDescribeResource.mockReturnValue({
|
|||
|
isLoading: false,
|
|||
|
data: undefined,
|
|||
|
isError: true,
|
|||
|
});
|
|||
|
|
|||
|
renderComponent();
|
|||
|
|
|||
|
expect(
|
|||
|
screen.getByText('Error loading resource details')
|
|||
|
).toBeInTheDocument();
|
|||
|
});
|
|||
|
|
|||
|
it('should call onDismiss when modal is closed', () => {
|
|||
|
mockUseDescribeResource.mockReturnValue({
|
|||
|
isLoading: false,
|
|||
|
data: { describe: '' },
|
|||
|
isError: false,
|
|||
|
});
|
|||
|
|
|||
|
const onDismiss = vi.fn();
|
|||
|
renderComponent({ onDismiss });
|
|||
|
|
|||
|
// Find and click the close button
|
|||
|
const closeButton = screen.getByText('×');
|
|||
|
closeButton.click();
|
|||
|
|
|||
|
expect(onDismiss).toHaveBeenCalled();
|
|||
|
});
|
|||
|
|
|||
|
it('should pass correct parameters to useDescribeResource', () => {
|
|||
|
mockUseDescribeResource.mockReturnValue({
|
|||
|
isLoading: true,
|
|||
|
data: undefined,
|
|||
|
isError: false,
|
|||
|
});
|
|||
|
|
|||
|
const props = {
|
|||
|
name: 'my-resource',
|
|||
|
resourceType: 'Pod',
|
|||
|
namespace: 'kube-system',
|
|||
|
};
|
|||
|
|
|||
|
renderComponent(props);
|
|||
|
|
|||
|
expect(mockUseDescribeResource).toHaveBeenCalledWith(
|
|||
|
props.name,
|
|||
|
props.resourceType,
|
|||
|
props.namespace
|
|||
|
);
|
|||
|
});
|
|||
|
});
|