mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
feat(ui): write tests [EE-6685] (#11082)
This commit is contained in:
parent
513cd9c9b3
commit
a83321ebe6
10 changed files with 232 additions and 15 deletions
26
app/react/components/Badge/Badge.test.tsx
Normal file
26
app/react/components/Badge/Badge.test.tsx
Normal file
|
@ -0,0 +1,26 @@
|
|||
import { render } from '@/react-tools/test-utils';
|
||||
|
||||
import { Badge } from './Badge';
|
||||
|
||||
test('should render a Badge component with default type', () => {
|
||||
const { getByText } = render(<Badge>Default Badge</Badge>);
|
||||
const badgeElement = getByText('Default Badge');
|
||||
expect(badgeElement).toBeInTheDocument();
|
||||
expect(badgeElement).toHaveClass('text-blue-9 bg-blue-2');
|
||||
});
|
||||
|
||||
test('should render a Badge component with custom type', () => {
|
||||
const { getByText } = render(<Badge type="success">Success Badge</Badge>);
|
||||
const badgeElement = getByText('Success Badge');
|
||||
expect(badgeElement).toBeInTheDocument();
|
||||
expect(badgeElement).toHaveClass('text-success-9 bg-success-2');
|
||||
});
|
||||
|
||||
test('should render a Badge component with custom className', () => {
|
||||
const { getByText } = render(
|
||||
<Badge className="custom-class">Custom Badge</Badge>
|
||||
);
|
||||
const badgeElement = getByText('Custom Badge');
|
||||
expect(badgeElement).toBeInTheDocument();
|
||||
expect(badgeElement).toHaveClass('custom-class');
|
||||
});
|
|
@ -0,0 +1,90 @@
|
|||
import { FormikErrors } from 'formik';
|
||||
import { ComponentProps } from 'react';
|
||||
import { HttpResponse } from 'msw';
|
||||
|
||||
import { renderWithQueryClient, fireEvent } from '@/react-tools/test-utils';
|
||||
import { http, server } from '@/setup-tests/server';
|
||||
|
||||
import { ImageConfigFieldset } from './ImageConfigFieldset';
|
||||
import { Values } from './types';
|
||||
|
||||
vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
|
||||
...(await importOriginal()),
|
||||
useCurrentStateAndParams: vi.fn(() => ({
|
||||
params: { endpointId: 1 },
|
||||
})),
|
||||
}));
|
||||
|
||||
it('should render SimpleForm when useRegistry is true', () => {
|
||||
const { getByText } = render({ values: { useRegistry: true } });
|
||||
|
||||
expect(getByText('Advanced mode')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render AdvancedForm when useRegistry is false', () => {
|
||||
const { getByText } = render({ values: { useRegistry: false } });
|
||||
|
||||
expect(getByText('Simple mode')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call setFieldValue with useRegistry set to false when "Advanced mode" button is clicked', () => {
|
||||
const setFieldValue = vi.fn();
|
||||
const { getByText } = render({
|
||||
values: { useRegistry: true },
|
||||
setFieldValue,
|
||||
});
|
||||
|
||||
fireEvent.click(getByText('Advanced mode'));
|
||||
|
||||
expect(setFieldValue).toHaveBeenCalledWith('useRegistry', false);
|
||||
});
|
||||
|
||||
it('should call setFieldValue with useRegistry set to true when "Simple mode" button is clicked', () => {
|
||||
const setFieldValue = vi.fn();
|
||||
const { getByText } = render({
|
||||
values: { useRegistry: false },
|
||||
setFieldValue,
|
||||
});
|
||||
|
||||
fireEvent.click(getByText('Simple mode'));
|
||||
|
||||
expect(setFieldValue).toHaveBeenCalledWith('useRegistry', true);
|
||||
});
|
||||
|
||||
function render({
|
||||
values = {
|
||||
useRegistry: true,
|
||||
registryId: 123,
|
||||
image: '',
|
||||
},
|
||||
errors = {},
|
||||
setFieldValue = vi.fn(),
|
||||
onChangeImage = vi.fn(),
|
||||
onRateLimit = vi.fn(),
|
||||
}: {
|
||||
values?: Partial<Values>;
|
||||
errors?: FormikErrors<Values>;
|
||||
setFieldValue?: ComponentProps<typeof ImageConfigFieldset>['setFieldValue'];
|
||||
onChangeImage?: ComponentProps<typeof ImageConfigFieldset>['onChangeImage'];
|
||||
onRateLimit?: ComponentProps<typeof ImageConfigFieldset>['onRateLimit'];
|
||||
} = {}) {
|
||||
server.use(
|
||||
http.get('/api/registries/:id', () => HttpResponse.json({})),
|
||||
http.get('/api/endpoints/:id', () => HttpResponse.json({}))
|
||||
);
|
||||
|
||||
return renderWithQueryClient(
|
||||
<ImageConfigFieldset
|
||||
values={{
|
||||
useRegistry: true,
|
||||
registryId: 123,
|
||||
image: '',
|
||||
...values,
|
||||
}}
|
||||
errors={errors}
|
||||
setFieldValue={setFieldValue}
|
||||
onChangeImage={onChangeImage}
|
||||
onRateLimit={onRateLimit}
|
||||
/>
|
||||
);
|
||||
}
|
|
@ -42,7 +42,7 @@ test('should call onSelect when clicked with id', async () => {
|
|||
const { findByText } = renderComponent(options, options[1].id, onSelect);
|
||||
|
||||
const heading = await findByText(options[0].label);
|
||||
userEvent.click(heading);
|
||||
await userEvent.click(heading);
|
||||
|
||||
expect(onSelect).toHaveBeenCalledWith(options[0].id);
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue