Files
grafana/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
Ashley Harrison d832bde270 Upgrade @testing-library/user-event to v14 (#47898)
* 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>
2022-04-21 13:15:21 +01:00

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);
});
});