portainer/app/react/components/NavTabs/NavTabs.test.tsx

59 lines
1.6 KiB
TypeScript
Raw Normal View History

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { NavTabs, Option } from './NavTabs';
test('should show titles', async () => {
const options = [
{ children: 'Content 1', id: 'option1', label: 'Option 1' },
{ children: 'Content 2', id: 'option2', label: 'Option 2' },
];
const { findByText } = renderComponent(options);
const heading = await findByText(options[0].label);
expect(heading).toBeTruthy();
const heading2 = await findByText(options[1].label);
expect(heading2).toBeTruthy();
});
test('should show selected id content', async () => {
const options = [
{ children: 'Content 1', id: 'option1', label: 'Option 1' },
{ children: 'Content 2', id: 'option2', label: 'Option 2' },
];
const selected = options[1];
const { findByText } = renderComponent(options, selected.id);
const content = await findByText(selected.children);
expect(content).toBeTruthy();
});
test('should call onSelect when clicked with id', async () => {
const options = [
{ children: 'Content 1', id: 'option1', label: 'Option 1' },
{ children: 'Content 2', id: 'option2', label: 'Option 2' },
];
const onSelect = jest.fn();
const { findByText } = renderComponent(options, options[1].id, onSelect);
const heading = await findByText(options[0].label);
userEvent.click(heading);
expect(onSelect).toHaveBeenCalledWith(options[0].id);
});
function renderComponent(
options: Option[] = [],
selectedId?: string | number,
onSelect?: (id: string | number) => void
) {
return render(
<NavTabs options={options} selectedId={selectedId} onSelect={onSelect} />
);
}