Select: Portal select menu to document.body (#36398)

* ValueMappings: Force overflowing modal content to scroll

* ValueMappings: Update unit tests

* Select: Portal Select to document.body, close menu on scroll

* Select: Fix tests + apply updates from https://github.com/grafana/grafana/pull/32833

* ValueMappingsEditorModal: Revert to using selectEvent in the tests

* Select: Fix remaining unit tests

* Portal: Rewrite Portal as a functional component so we can use useTheme2

* Modal: Remove modal styles from this PR

* Update E2E tests

* More unit test fixes

* Select: Fix remaining E2E tests

* Select: Create util method to select an option in tests
This commit is contained in:
Ashley Harrison
2021-07-14 14:04:23 +01:00
committed by GitHub
parent f41f00dec4
commit 54f8996acf
34 changed files with 178 additions and 237 deletions

View File

@@ -1,8 +1,9 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { selectOptionInTest } from '@grafana/ui';
import { byRole, byText } from 'testing-library-selector';
import { byRole } from 'testing-library-selector';
import { Props, GeneralSettingsUnconnected as GeneralSettings } from './GeneralSettings';
import { DashboardModel } from '../../state';
@@ -45,11 +46,6 @@ const setupTestContext = (options: Partial<Props>) => {
return { rerender, props };
};
const clickSelectOption = async (selectElement: HTMLElement, optionText: string): Promise<void> => {
userEvent.click(byRole('textbox').get(selectElement));
userEvent.click(byText(optionText).get(selectElement));
};
describe('General Settings', () => {
describe('when component is mounted with timezone', () => {
it('should render correctly', () => {
@@ -66,7 +62,9 @@ describe('General Settings', () => {
it('should call update function', async () => {
const { props } = setupTestContext({});
userEvent.click(screen.getByLabelText('Time zone picker select container'));
await clickSelectOption(screen.getByLabelText('Time zone picker select container'), 'Browser Time');
const timeZonePicker = screen.getByLabelText('Time zone picker select container');
userEvent.click(byRole('textbox').get(timeZonePicker));
await selectOptionInTest(timeZonePicker, 'Browser Time');
expect(props.updateTimeZone).toHaveBeenCalledWith('browser');
expect(props.dashboard.timezone).toBe('browser');
});