mirror of
https://github.com/grafana/grafana.git
synced 2025-09-21 20:13:25 +08:00

* Update dependency @testing-library/user-event to v14 * everything is async... * everything is async pt.2 * Fix cascader tests * hack the yarn.lock file to remove the old version of @testing-library/dom * some more fixes! * MOAR FIXES * more fixes * remove a bunch of places where we're wrapping in act() * down to 7 failing tests... * Fix arrow tests * Fix rest of NavBarItem tests * Fix last tests * Use {Enter} instead of {enter} * Revert "Use {Enter} instead of {enter}" This reverts commit e72453bb522245cbc2acd0736929fbb351ad070a. * remove some unused act imports * Fix LibraryPanelsSearch tests * more stable test * More consistent test... Co-authored-by: Renovate Bot <bot@renovateapp.com>
118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { Select, InlineField } from '@grafana/ui';
|
|
import { useCreatableSelectPersistedBehaviour } from './useCreatableSelectPersistedBehaviour';
|
|
import userEvent from '@testing-library/user-event';
|
|
|
|
describe('useCreatableSelectPersistedBehaviour', () => {
|
|
it('Should make a Select accept custom values', async () => {
|
|
const MyComp = (_: { force?: boolean }) => (
|
|
<InlineField label="label">
|
|
<Select
|
|
menuShouldPortal
|
|
inputId="select"
|
|
{...useCreatableSelectPersistedBehaviour({
|
|
options: [{ label: 'Option 1', value: 'Option 1' }],
|
|
onChange() {},
|
|
})}
|
|
/>
|
|
</InlineField>
|
|
);
|
|
|
|
const { rerender } = render(<MyComp />);
|
|
|
|
const input = screen.getByLabelText('label') as HTMLInputElement;
|
|
expect(input).toBeInTheDocument();
|
|
|
|
// we open the menu
|
|
await userEvent.click(input);
|
|
|
|
expect(screen.getByText('Option 1')).toBeInTheDocument();
|
|
|
|
// we type in the input 'Option 2', which should prompt an option creation
|
|
await userEvent.type(input, 'Option 2');
|
|
const creatableOption = screen.getByLabelText('Select option');
|
|
expect(creatableOption).toHaveTextContent('Create: Option 2');
|
|
|
|
// we click on the creatable option to trigger its creation
|
|
await userEvent.click(creatableOption);
|
|
|
|
// Forcing a rerender
|
|
rerender(<MyComp force={true} />);
|
|
|
|
// we open the menu again
|
|
await userEvent.click(input);
|
|
// the created option should be available
|
|
expect(screen.getByText('Option 2')).toBeInTheDocument();
|
|
});
|
|
|
|
it('Should handle onChange properly', async () => {
|
|
const onChange = jest.fn();
|
|
const MyComp = () => (
|
|
<InlineField label="label">
|
|
<Select
|
|
menuShouldPortal
|
|
inputId="select"
|
|
{...useCreatableSelectPersistedBehaviour({
|
|
options: [{ label: 'Option 1', value: 'Option 1' }],
|
|
onChange,
|
|
})}
|
|
/>
|
|
</InlineField>
|
|
);
|
|
|
|
render(<MyComp />);
|
|
|
|
const input = screen.getByLabelText('label') as HTMLInputElement;
|
|
expect(input).toBeInTheDocument();
|
|
|
|
// we open the menu
|
|
await userEvent.click(input);
|
|
|
|
const option1 = screen.getByText('Option 1');
|
|
expect(option1).toBeInTheDocument();
|
|
|
|
// Should call onChange when selecting an already existing option
|
|
await userEvent.click(option1);
|
|
expect(onChange).toHaveBeenLastCalledWith(
|
|
{ value: 'Option 1', label: 'Option 1' },
|
|
{ action: 'select-option', name: undefined, option: undefined }
|
|
);
|
|
|
|
await userEvent.click(input);
|
|
|
|
// we type in the input 'Option 2', which should prompt an option creation
|
|
await userEvent.type(input, 'Option 2');
|
|
await userEvent.click(screen.getByLabelText('Select option'));
|
|
|
|
expect(onChange).toHaveBeenLastCalledWith({ value: 'Option 2' });
|
|
});
|
|
|
|
it('Should create an option for value if value is not in options', async () => {
|
|
const MyComp = (_: { force?: boolean }) => (
|
|
<InlineField label="label">
|
|
<Select
|
|
menuShouldPortal
|
|
inputId="select"
|
|
{...useCreatableSelectPersistedBehaviour({
|
|
options: [{ label: 'Option 1', value: 'Option 1' }],
|
|
value: 'Option 2',
|
|
onChange() {},
|
|
})}
|
|
/>
|
|
</InlineField>
|
|
);
|
|
|
|
render(<MyComp />);
|
|
|
|
const input = screen.getByLabelText('label') as HTMLInputElement;
|
|
expect(input).toBeInTheDocument();
|
|
|
|
// we open the menu
|
|
await userEvent.click(input);
|
|
|
|
// we expect 2 elemnts having "Option 2": the input itself and the option.
|
|
expect(screen.getAllByText('Option 2')).toHaveLength(2);
|
|
});
|
|
});
|