131 lines
3.3 KiB
TypeScript
131 lines
3.3 KiB
TypeScript
import { http, HttpResponse } from 'msw';
|
|
import { render, waitFor } from '@testing-library/react';
|
|
import { Mock } from 'vitest';
|
|
|
|
import { server } from '@/setup-tests/server';
|
|
import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
|
|
import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
|
|
import { StackType } from '@/react/common/stacks/types';
|
|
|
|
import { CustomTemplateSelector } from './CustomTemplateSelector';
|
|
|
|
const mockCustomTemplates: CustomTemplate[] = [
|
|
{
|
|
Id: 1,
|
|
Title: 'Nginx Template',
|
|
Description: 'Web server template',
|
|
ProjectPath: '/data/custom_template/1',
|
|
EntryPoint: 'docker-compose.yml',
|
|
CreatedByUserId: 1,
|
|
Note: 'Nginx note',
|
|
Platform: 1,
|
|
Logo: '',
|
|
Type: StackType.DockerCompose,
|
|
Variables: [],
|
|
IsComposeFormat: false,
|
|
EdgeTemplate: false,
|
|
},
|
|
{
|
|
Id: 2,
|
|
Title: 'Redis Template',
|
|
Description: '',
|
|
ProjectPath: '/data/custom_template/2',
|
|
EntryPoint: 'docker-compose.yml',
|
|
CreatedByUserId: 1,
|
|
Note: '',
|
|
Platform: 1,
|
|
Logo: '',
|
|
Type: StackType.DockerCompose,
|
|
Variables: [],
|
|
IsComposeFormat: false,
|
|
EdgeTemplate: false,
|
|
},
|
|
];
|
|
|
|
test('should render the component with label', async () => {
|
|
const { getByText } = await renderComponent({}, []);
|
|
|
|
expect(getByText('Template')).toBeInTheDocument();
|
|
});
|
|
|
|
test('should show message when no templates are available', async () => {
|
|
const queries = await renderComponent({}, []);
|
|
|
|
await waitFor(() => {
|
|
expect(
|
|
queries.getByText('No custom templates are available.')
|
|
).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
test('should show link to create template when newTemplatePath is provided', async () => {
|
|
const queries = await renderComponent(
|
|
{ newTemplatePath: '/templates/new' },
|
|
[]
|
|
);
|
|
|
|
await waitFor(() => {
|
|
const link = queries.getByRole('link', { name: /custom template view/i });
|
|
expect(link).toBeInTheDocument();
|
|
expect(link).toHaveAttribute('href', '/templates/new');
|
|
});
|
|
});
|
|
|
|
test('should render select with templates', async () => {
|
|
const queries = await renderComponent({}, mockCustomTemplates);
|
|
|
|
await waitFor(() => {
|
|
const combobox = queries.getByRole('combobox');
|
|
expect(combobox).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
test('should display error message when provided', async () => {
|
|
const queries = await renderComponent(
|
|
{ error: 'This field is required' },
|
|
mockCustomTemplates
|
|
);
|
|
|
|
await waitFor(() => {
|
|
expect(queries.getByText('This field is required')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
async function renderComponent(
|
|
{
|
|
value,
|
|
onChange = vi.fn(),
|
|
error,
|
|
stackType,
|
|
newTemplatePath,
|
|
}: {
|
|
value?: number;
|
|
onChange?: Mock;
|
|
error?: string;
|
|
stackType?: StackType;
|
|
newTemplatePath?: string;
|
|
} = {},
|
|
templates: CustomTemplate[] = []
|
|
) {
|
|
server.use(
|
|
http.get('/api/custom_templates', () => HttpResponse.json(templates))
|
|
);
|
|
|
|
const Component = withTestQueryProvider(CustomTemplateSelector);
|
|
|
|
const queries = render(
|
|
<Component
|
|
value={value}
|
|
onChange={onChange}
|
|
error={error}
|
|
stackType={stackType}
|
|
newTemplatePath={newTemplatePath}
|
|
/>
|
|
);
|
|
|
|
const labelElement = await queries.findByText('Template');
|
|
expect(labelElement).toBeInTheDocument();
|
|
|
|
return queries;
|
|
}
|