mirror of
https://github.com/portainer/portainer.git
synced 2025-07-23 15:29:42 +02:00
Co-authored-by: Cara Ryan <cara.ryan@portainer.io> Co-authored-by: James Player <james.player@portainer.io> Co-authored-by: stevensbkang <skan070@gmail.com>
123 lines
3 KiB
TypeScript
123 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
|
||
);
|
||
});
|
||
});
|