IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Adjust unit tests so they work with react 18 (#64698)

Browse Source 
tweak unit tests so they work with react 18
This commit is contained in:
Ashley Harrison
2023-03-14 17:24:04 +00:00
committed by GitHub
parent c29b6c07dc
commit 85e5326040
33 changed files with 452 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.test.tsx
View File

@@ -24,7 +24,8 @@ describe('ColorPickerInput', () => {
const mockOnChange = jest.fn(); const mockOnChange = jest.fn();
render(<ColorPickerInput onChange={mockOnChange} />); render(<ColorPickerInput onChange={mockOnChange} />);
await userEvent.type(screen.getByRole('textbox'), 'some text'); await userEvent.type(screen.getByRole('textbox'), 'some text');
screen.getByRole('textbox').blur(); // blur the input
await userEvent.click(document.body);
await waitFor(() => expect(mockOnChange).not.toHaveBeenCalled()); await waitFor(() => expect(mockOnChange).not.toHaveBeenCalled());
expect(screen.getByRole('textbox')).toHaveValue(''); expect(screen.getByRole('textbox')).toHaveValue('');
}); });

13
packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.test.tsx
View File

@@ -1,4 +1,5 @@
import { render, fireEvent, RenderResult } from '@testing-library/react'; import { render, RenderResult } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { RelativeTimeRange } from '@grafana/data'; import { RelativeTimeRange } from '@grafana/data';
@@ -20,10 +21,10 @@ describe('RelativeTimePicker', () => {
expect(getByText('now-15m to now')).toBeInTheDocument(); expect(getByText('now-15m to now')).toBeInTheDocument();
}); });
it('should open the picker when clicking the button', () => { it('should open the picker when clicking the button', async () => {
const { getByText } = setup({ from: 900, to: 0 }); const { getByText } = setup({ from: 900, to: 0 });
fireEvent.click(getByText('now-15m to now')); await userEvent.click(getByText('now-15m to now'));
expect(getByText('Specify time range')).toBeInTheDocument(); expect(getByText('Specify time range')).toBeInTheDocument();
expect(getByText('Example time ranges')).toBeInTheDocument(); expect(getByText('Example time ranges')).toBeInTheDocument();
@@ -35,11 +36,11 @@ describe('RelativeTimePicker', () => {
expect(queryByText('Example time ranges')).toBeNull(); expect(queryByText('Example time ranges')).toBeNull();
}); });
it('should not be able to apply range via quick options', () => { it('should not be able to apply range via quick options', async () => {
const { getByText, queryByText } = setup({ from: 900, to: 0 }); const { getByText, queryByText } = setup({ from: 900, to: 0 });
fireEvent.click(getByText('now-15m to now')); // open the picker await userEvent.click(getByText('now-15m to now')); // open the picker
fireEvent.click(getByText('Last 30 minutes')); // select the quick range, should close picker. await userEvent.click(getByText('Last 30 minutes')); // select the quick range, should close picker.
expect(queryByText('Specify time range')).toBeNull(); expect(queryByText('Specify time range')).toBeNull();
expect(queryByText('Example time ranges')).toBeNull(); expect(queryByText('Example time ranges')).toBeNull();

2
packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
View File

@@ -54,7 +54,7 @@ const ButtonSelectComponent = <T,>(props: Props<T>) => {
{...buttonProps} {...buttonProps}
{...restProps} {...restProps}
> >
{value?.label || value?.value} {value?.label || (value?.value != null ? String(value?.value) : null)}
</ToolbarButton> </ToolbarButton>
{state.isOpen && ( {state.isOpen && (
<div className={styles.menuWrapper}> <div className={styles.menuWrapper}>

6
packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx
View File

@@ -29,7 +29,8 @@ describe('Input', () => {
render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />); render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />);
const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT); const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT);
await userEvent.type(inputEl, 'abcde'); await userEvent.type(inputEl, 'abcde');
inputEl.blur(); // blur the field
await userEvent.click(document.body);
await screen.findByText(TEST_ERROR_MESSAGE); await screen.findByText(TEST_ERROR_MESSAGE);
}); });
@@ -37,7 +38,8 @@ describe('Input', () => {
render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />); render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />);
const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT); const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT);
await userEvent.type(inputEl, 'Hi'); await userEvent.type(inputEl, 'Hi');
inputEl.blur(); // blur the field
await userEvent.click(document.body);
const errorMessage = screen.queryByText(TEST_ERROR_MESSAGE); const errorMessage = screen.queryByText(TEST_ERROR_MESSAGE);
expect(errorMessage).not.toBeInTheDocument(); expect(errorMessage).not.toBeInTheDocument();
}); });

30
packages/grafana-ui/src/components/Toggletip/Toggletip.test.tsx
View File

@@ -1,4 +1,4 @@
import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
@@ -17,9 +17,9 @@ describe('Toggletip', () => {
); );
expect(screen.getByText('Click me!')).toBeInTheDocument(); expect(screen.getByText('Click me!')).toBeInTheDocument();
const button = screen.getByTestId('myButton'); const button = screen.getByTestId('myButton');
button.click(); await userEvent.click(button);
await waitFor(() => expect(screen.getByTestId('toggletip-content')).toBeInTheDocument()); expect(screen.getByTestId('toggletip-content')).toBeInTheDocument();
}); });
it('should close toogletip after click on close button', async () => { it('should close toogletip after click on close button', async () => {
@@ -32,18 +32,16 @@ describe('Toggletip', () => {
</Toggletip> </Toggletip>
); );
const button = screen.getByTestId('myButton'); const button = screen.getByTestId('myButton');
button.click(); await userEvent.click(button);
await waitFor(() => expect(screen.getByTestId('toggletip-content')).toBeInTheDocument()); expect(screen.getByTestId('toggletip-content')).toBeInTheDocument();
const closeButton = screen.getByTestId('toggletip-header-close'); const closeButton = screen.getByTestId('toggletip-header-close');
expect(closeButton).toBeInTheDocument(); expect(closeButton).toBeInTheDocument();
closeButton.click(); await userEvent.click(closeButton);
await waitFor(() => {
expect(closeSpy).toHaveBeenCalledTimes(1); expect(closeSpy).toHaveBeenCalledTimes(1);
}); });
});
it('should close toogletip after press ESC', async () => { it('should close toogletip after press ESC', async () => {
const closeSpy = jest.fn(); const closeSpy = jest.fn();
@@ -55,17 +53,13 @@ describe('Toggletip', () => {
</Toggletip> </Toggletip>
); );
const button = screen.getByTestId('myButton'); const button = screen.getByTestId('myButton');
button.click(); await userEvent.click(button);
await waitFor(() => expect(screen.getByTestId('toggletip-content')).toBeInTheDocument()); expect(screen.getByTestId('toggletip-content')).toBeInTheDocument();
fireEvent.keyDown(global.document, { await userEvent.keyboard('{escape}');
code: 'Escape',
key: 'Escape',
keyCode: 27,
});
await waitFor(() => expect(closeSpy).toHaveBeenCalledTimes(1)); expect(closeSpy).toHaveBeenCalledTimes(1);
}); });
it('should display the toogletip after press ENTER', async () => { it('should display the toogletip after press ENTER', async () => {
@@ -83,8 +77,8 @@ describe('Toggletip', () => {
// open toggletip with enter // open toggletip with enter
const button = screen.getByTestId('myButton'); const button = screen.getByTestId('myButton');
button.focus(); button.focus();
userEvent.keyboard('{enter}'); await userEvent.keyboard('{enter}');
await waitFor(() => expect(screen.getByTestId('toggletip-content')).toBeInTheDocument()); expect(screen.getByTestId('toggletip-content')).toBeInTheDocument();
}); });
}); });

22
public/app/core/components/Layers/LayerName.test.tsx
View File

@@ -1,16 +1,19 @@
import { fireEvent, render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { LayerNameProps, LayerName } from './LayerName'; import { LayerNameProps, LayerName } from './LayerName';
describe('LayerName', () => { describe('LayerName', () => {
it('Can edit title', () => { it('Can edit title', async () => {
const scenario = renderScenario({}); const scenario = renderScenario({});
screen.getByTestId('layer-name-div').click(); await userEvent.click(screen.getByTestId('layer-name-div'));
const input = screen.getByTestId('layer-name-input'); const input = screen.getByTestId('layer-name-input');
fireEvent.change(input, { target: { value: 'new name' } }); await userEvent.clear(input);
fireEvent.blur(input); await userEvent.type(input, 'new name');
// blur the element
await userEvent.click(document.body);
expect(jest.mocked(scenario.props.onChange).mock.calls[0][0]).toBe('new name'); expect(jest.mocked(scenario.props.onChange).mock.calls[0][0]).toBe('new name');
}); });
@@ -18,9 +21,9 @@ describe('LayerName', () => {
it('Show error when empty name is specified', async () => { it('Show error when empty name is specified', async () => {
renderScenario({}); renderScenario({});
screen.getByTestId('layer-name-div').click(); await userEvent.click(screen.getByTestId('layer-name-div'));
const input = screen.getByTestId('layer-name-input'); const input = screen.getByTestId('layer-name-input');
fireEvent.change(input, { target: { value: '' } }); await userEvent.clear(input);
const alert = await screen.findByRole('alert'); const alert = await screen.findByRole('alert');
expect(alert.textContent).toBe('An empty layer name is not allowed'); expect(alert.textContent).toBe('An empty layer name is not allowed');
@@ -29,9 +32,10 @@ describe('LayerName', () => {
it('Show error when other layer with same name exists', async () => { it('Show error when other layer with same name exists', async () => {
renderScenario({}); renderScenario({});
screen.getByTestId('layer-name-div').click(); await userEvent.click(screen.getByTestId('layer-name-div'));
const input = screen.getByTestId('layer-name-input'); const input = screen.getByTestId('layer-name-input');
fireEvent.change(input, { target: { value: 'Layer 2' } }); await userEvent.clear(input);
await userEvent.type(input, 'Layer 2');
const alert = await screen.findByRole('alert'); const alert = await screen.findByRole('alert');
expect(alert.textContent).toBe('Layer name already exists'); expect(alert.textContent).toBe('Layer name already exists');

12
public/app/core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, waitFor, within } from '@testing-library/react'; import { render, screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { byTestId } from 'testing-library-selector'; import { byTestId } from 'testing-library-selector';
@@ -34,7 +34,7 @@ async function getTestContext(
Object.assign(props, propOverrides); Object.assign(props, propOverrides);
render(<ReadonlyFolderPicker {...props} />); render(<ReadonlyFolderPicker {...props} />);
await waitFor(() => expect(getFoldersAsOptionsSpy).toHaveBeenCalledTimes(1)); await waitFor(() => expect(screen.queryByText(/Loading/)).not.toBeInTheDocument());
return { getFoldersAsOptionsSpy, getFolderAsOptionSpy, selectors }; return { getFoldersAsOptionsSpy, getFolderAsOptionSpy, selectors };
} }
@@ -93,14 +93,14 @@ describe('ReadonlyFolderPicker', () => {
it('then the first folder in all folders should be selected', async () => { it('then the first folder in all folders should be selected', async () => {
const { selectors } = await getTestContext({}, FOLDERS); const { selectors } = await getTestContext({}, FOLDERS);
expect(within(selectors.container.get()).getByText('General')).toBeInTheDocument(); expect(await within(selectors.container.get()).findByText('General')).toBeInTheDocument();
}); });
describe('and initialFolderId is passed in props and it matches an existing folder', () => { describe('and initialFolderId is passed in props and it matches an existing folder', () => {
it('then the folder with an id equal to initialFolderId should be selected', async () => { it('then the folder with an id equal to initialFolderId should be selected', async () => {
const { selectors } = await getTestContext({ initialFolderId: 1 }, FOLDERS); const { selectors } = await getTestContext({ initialFolderId: 1 }, FOLDERS);
expect(within(selectors.container.get()).getByText('Test')).toBeInTheDocument(); expect(await within(selectors.container.get()).findByText('Test')).toBeInTheDocument();
}); });
}); });
@@ -116,7 +116,7 @@ describe('ReadonlyFolderPicker', () => {
folderById folderById
); );
expect(within(selectors.container.get()).getByText('Outside api search')).toBeInTheDocument(); expect(await within(selectors.container.get()).findByText('Outside api search')).toBeInTheDocument();
expect(getFolderAsOptionSpy).toHaveBeenCalledTimes(1); expect(getFolderAsOptionSpy).toHaveBeenCalledTimes(1);
expect(getFolderAsOptionSpy).toHaveBeenCalledWith(50000); expect(getFolderAsOptionSpy).toHaveBeenCalledWith(50000);
}); });
@@ -130,7 +130,7 @@ describe('ReadonlyFolderPicker', () => {
undefined undefined
); );
expect(within(selectors.container.get()).getByText('General')).toBeInTheDocument(); expect(await within(selectors.container.get()).findByText('General')).toBeInTheDocument();
expect(getFolderAsOptionSpy).toHaveBeenCalledTimes(1); expect(getFolderAsOptionSpy).toHaveBeenCalledTimes(1);
expect(getFolderAsOptionSpy).toHaveBeenCalledWith(50000); expect(getFolderAsOptionSpy).toHaveBeenCalledWith(50000);
}); });

17
public/app/features/alerting/unified/AlertGroups.test.tsx
View File

@@ -73,7 +73,7 @@ describe('AlertGroups', () => {
await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled()); await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled());
const groups = ui.group.getAll(); const groups = await ui.group.findAll();
expect(groups).toHaveLength(2); expect(groups).toHaveLength(2);
expect(groups[0]).toHaveTextContent('No grouping'); expect(groups[0]).toHaveTextContent('No grouping');
@@ -105,7 +105,7 @@ describe('AlertGroups', () => {
renderAmNotifications(); renderAmNotifications();
await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled()); await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled());
let groups = ui.group.getAll(); let groups = await ui.group.findAll();
const groupByInput = ui.groupByInput.get(); const groupByInput = ui.groupByInput.get();
const groupByWrapper = ui.groupByContainer.get(); const groupByWrapper = ui.groupByContainer.get();
@@ -118,7 +118,7 @@ describe('AlertGroups', () => {
await waitFor(() => expect(groupByWrapper).toHaveTextContent('appName')); await waitFor(() => expect(groupByWrapper).toHaveTextContent('appName'));
groups = ui.group.getAll(); groups = await ui.group.findAll();
await waitFor(() => expect(ui.clearButton.get()).toBeInTheDocument()); await waitFor(() => expect(ui.clearButton.get()).toBeInTheDocument());
expect(groups).toHaveLength(3); expect(groups).toHaveLength(3);
@@ -132,7 +132,7 @@ describe('AlertGroups', () => {
await userEvent.type(groupByInput, 'env{enter}'); await userEvent.type(groupByInput, 'env{enter}');
await waitFor(() => expect(groupByWrapper).toHaveTextContent('env')); await waitFor(() => expect(groupByWrapper).toHaveTextContent('env'));
groups = ui.group.getAll(); groups = await ui.group.findAll();
expect(groups).toHaveLength(2); expect(groups).toHaveLength(2);
expect(groups[0]).toHaveTextContent('env=production'); expect(groups[0]).toHaveTextContent('env=production');
@@ -144,7 +144,7 @@ describe('AlertGroups', () => {
await userEvent.type(groupByInput, 'uniqueLabel{enter}'); await userEvent.type(groupByInput, 'uniqueLabel{enter}');
await waitFor(() => expect(groupByWrapper).toHaveTextContent('uniqueLabel')); await waitFor(() => expect(groupByWrapper).toHaveTextContent('uniqueLabel'));
groups = ui.group.getAll(); groups = await ui.group.findAll();
expect(groups).toHaveLength(2); expect(groups).toHaveLength(2);
expect(groups[0]).toHaveTextContent('No grouping'); expect(groups[0]).toHaveTextContent('No grouping');
expect(groups[1]).toHaveTextContent('uniqueLabel=true'); expect(groups[1]).toHaveTextContent('uniqueLabel=true');
@@ -159,9 +159,8 @@ describe('AlertGroups', () => {
return Promise.resolve(groups); return Promise.resolve(groups);
}); });
renderAmNotifications(); renderAmNotifications();
await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled()); await waitFor(() => {
const groups = ui.group.getAll(); expect(ui.group.getAll()).toHaveLength(1);
});
expect(groups).toHaveLength(1);
}); });
}); });

14
public/app/features/alerting/unified/PanelAlertTabContent.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, act, waitFor } from '@testing-library/react'; import { render, waitFor } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { TestProvider } from 'test/helpers/TestProvider'; import { TestProvider } from 'test/helpers/TestProvider';
import { byTestId } from 'testing-library-selector'; import { byTestId } from 'testing-library-selector';
@@ -68,13 +68,11 @@ const renderAlertTabContent = (
panel: PanelModel, panel: PanelModel,
initialStore?: ReturnType<typeof configureStore> initialStore?: ReturnType<typeof configureStore>
) => { ) => {
return act(async () => {
render( render(
<TestProvider store={initialStore}> <TestProvider store={initialStore}>
<PanelAlertTabContent dashboard={dashboard} panel={panel} /> <PanelAlertTabContent dashboard={dashboard} panel={panel} />
</TestProvider> </TestProvider>
); );
});
}; };
const rules = [ const rules = [
@@ -196,7 +194,7 @@ describe('PanelAlertTabContent', () => {
}); });
it('Will take into account panel maxDataPoints', async () => { it('Will take into account panel maxDataPoints', async () => {
await renderAlertTabContent( renderAlertTabContent(
dashboard, dashboard,
new PanelModel({ new PanelModel({
...panel, ...panel,
@@ -225,7 +223,7 @@ describe('PanelAlertTabContent', () => {
}); });
it('Will work with default datasource', async () => { it('Will work with default datasource', async () => {
await renderAlertTabContent( renderAlertTabContent(
dashboard, dashboard,
new PanelModel({ new PanelModel({
...panel, ...panel,
@@ -257,7 +255,7 @@ describe('PanelAlertTabContent', () => {
it('Will take into account datasource minInterval', async () => { it('Will take into account datasource minInterval', async () => {
(getDatasourceSrv() as unknown as MockDataSourceSrv).datasources[dataSources.prometheus.uid].interval = '7m'; (getDatasourceSrv() as unknown as MockDataSourceSrv).datasources[dataSources.prometheus.uid].interval = '7m';
await renderAlertTabContent( renderAlertTabContent(
dashboard, dashboard,
new PanelModel({ new PanelModel({
...panel, ...panel,
@@ -288,7 +286,7 @@ describe('PanelAlertTabContent', () => {
mocks.api.fetchRules.mockResolvedValue(rules); mocks.api.fetchRules.mockResolvedValue(rules);
mocks.api.fetchRulerRules.mockResolvedValue(rulerRules); mocks.api.fetchRulerRules.mockResolvedValue(rulerRules);
await renderAlertTabContent(dashboard, panel); renderAlertTabContent(dashboard, panel);
const rows = await ui.row.findAll(); const rows = await ui.row.findAll();
expect(rows).toHaveLength(1); expect(rows).toHaveLength(1);
@@ -331,7 +329,7 @@ describe('PanelAlertTabContent', () => {
const panelToRuleValuesSpy = jest.spyOn(ruleFormUtils, 'panelToRuleFormValues'); const panelToRuleValuesSpy = jest.spyOn(ruleFormUtils, 'panelToRuleFormValues');
const store = configureStore(); const store = configureStore();
await renderAlertTabContent(dashboard, panel, store); renderAlertTabContent(dashboard, panel, store);
store.dispatch( store.dispatch(
toKeyedAction( toKeyedAction(

27
public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx
View File

@@ -1,4 +1,5 @@
import { fireEvent, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react'; import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw'; import { rest } from 'msw';
import { setupServer } from 'msw/node'; import { setupServer } from 'msw/node';
@@ -198,11 +199,11 @@ describe('SharePublic - New config setup', () => {
it('when checkboxes are filled, then create button is enabled', async () => { it('when checkboxes are filled, then create button is enabled', async () => {
await renderSharePublicDashboard(); await renderSharePublicDashboard();
fireEvent.click(screen.getByTestId(selectors.WillBePublicCheckbox)); await userEvent.click(screen.getByTestId(selectors.WillBePublicCheckbox));
fireEvent.click(screen.getByTestId(selectors.LimitedDSCheckbox)); await userEvent.click(screen.getByTestId(selectors.LimitedDSCheckbox));
fireEvent.click(screen.getByTestId(selectors.CostIncreaseCheckbox)); await userEvent.click(screen.getByTestId(selectors.CostIncreaseCheckbox));
await waitFor(() => expect(screen.getByTestId(selectors.CreateButton)).toBeEnabled()); expect(screen.getByTestId(selectors.CreateButton)).toBeEnabled();
}); });
alertTests(); alertTests();
}); });
@@ -214,14 +215,16 @@ describe('SharePublic - Already persisted', () => {
it('when modal is opened, then delete button is enabled', async () => { it('when modal is opened, then delete button is enabled', async () => {
await renderSharePublicDashboard(); await renderSharePublicDashboard();
await waitForElementToBeRemoved(screen.getAllByTestId('Spinner')); await waitFor(() => {
expect(screen.getByTestId(selectors.DeleteButton)).toBeEnabled(); expect(screen.getByTestId(selectors.DeleteButton)).toBeEnabled();
}); });
});
it('when fetch is done, then inputs are checked and delete button is enabled', async () => { it('when fetch is done, then inputs are checked and delete button is enabled', async () => {
await renderSharePublicDashboard(); await renderSharePublicDashboard();
await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
await waitFor(() => {
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled(); expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
});
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeChecked(); expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeChecked();
expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeEnabled(); expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeEnabled();
@@ -236,7 +239,7 @@ describe('SharePublic - Already persisted', () => {
jest.spyOn(contextSrv, 'hasAccess').mockReturnValue(false); jest.spyOn(contextSrv, 'hasAccess').mockReturnValue(false);
await renderSharePublicDashboard(); await renderSharePublicDashboard();
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeDisabled(); expect(await screen.findByTestId(selectors.EnableTimeRangeSwitch)).toBeDisabled();
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeChecked(); expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeChecked();
expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeDisabled(); expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeDisabled();
@@ -261,12 +264,13 @@ describe('SharePublic - Already persisted', () => {
); );
await renderSharePublicDashboard(); await renderSharePublicDashboard();
await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
const enableTimeRangeSwitch = screen.getByTestId(selectors.EnableTimeRangeSwitch); const enableTimeRangeSwitch = await screen.findByTestId(selectors.EnableTimeRangeSwitch);
await waitFor(() => {
expect(enableTimeRangeSwitch).toBeEnabled(); expect(enableTimeRangeSwitch).toBeEnabled();
expect(enableTimeRangeSwitch).not.toBeChecked(); expect(enableTimeRangeSwitch).not.toBeChecked();
}); });
});
it('when pubdash is enabled, then link url is available', async () => { it('when pubdash is enabled, then link url is available', async () => {
await renderSharePublicDashboard(); await renderSharePublicDashboard();
expect(screen.getByTestId(selectors.CopyUrlInput)).toBeInTheDocument(); expect(screen.getByTestId(selectors.CopyUrlInput)).toBeInTheDocument();
@@ -288,9 +292,8 @@ describe('SharePublic - Already persisted', () => {
); );
await renderSharePublicDashboard(); await renderSharePublicDashboard();
await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
expect(screen.queryByTestId(selectors.CopyUrlInput)).toBeInTheDocument(); expect(await screen.findByTestId(selectors.CopyUrlInput)).toBeInTheDocument();
expect(screen.queryByTestId(selectors.CopyUrlButton)).not.toBeChecked(); expect(screen.queryByTestId(selectors.CopyUrlButton)).not.toBeChecked();
expect(screen.getByTestId(selectors.PauseSwitch)).toBeChecked(); expect(screen.getByTestId(selectors.PauseSwitch)).toBeChecked();

79
public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx
View File

@@ -1,4 +1,5 @@
import { fireEvent, render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { selectOptionInTest } from 'test/helpers/selectOptionInTest'; import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
@@ -44,19 +45,18 @@ const setup = (spy?: jest.Mock, propOverrides?: Partial<Props>) => {
render(<ValueMappingsEditorModal {...props} />); render(<ValueMappingsEditorModal {...props} />);
}; };
describe('Render', () => { describe('ValueMappingsEditorModal', () => {
it('should render component', () => { it('should render component', () => {
setup(); setup();
}); });
});
describe('On remove mapping', () => { describe('On remove mapping', () => {
it('Should remove mapping at index 0', () => { it('Should remove mapping at index 0', async () => {
const onChangeSpy = jest.fn(); const onChangeSpy = jest.fn();
setup(onChangeSpy); setup(onChangeSpy);
screen.getAllByTestId('remove-value-mapping')[0].click(); await userEvent.click(screen.getAllByTestId('remove-value-mapping')[0]);
screen.getByText('Update').click(); await userEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([ expect(onChangeSpy).toBeCalledWith([
{ {
@@ -72,23 +72,27 @@ describe('On remove mapping', () => {
}, },
]); ]);
}); });
}); });
describe('When adding and updating value mapp', () => { describe('When adding and updating value mapp', () => {
it('should be 3', async () => { it('should be 3', async () => {
const onChangeSpy = jest.fn(); const onChangeSpy = jest.fn();
setup(onChangeSpy); setup(onChangeSpy);
fireEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping'))); await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(selectors.components.ValuePicker.select('Add a new mapping')); const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);
await selectOptionInTest(selectComponent, 'Value'); await selectOptionInTest(selectComponent, 'Value');
const input = (await screen.findAllByPlaceholderText('Exact value to match'))[1]; const input = (await screen.findAllByPlaceholderText('Exact value to match'))[1];
fireEvent.change(input, { target: { value: 'New' } }); await userEvent.clear(input);
fireEvent.change(screen.getAllByPlaceholderText('Optional display text')[2], { target: { value: 'display' } }); await userEvent.type(input, 'New');
fireEvent.click(screen.getByText('Update')); await userEvent.clear(screen.getAllByPlaceholderText('Optional display text')[2]);
await userEvent.type(screen.getAllByPlaceholderText('Optional display text')[2], 'display');
await userEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([ expect(onChangeSpy).toBeCalledWith([
{ {
@@ -117,23 +121,30 @@ describe('When adding and updating value mapp', () => {
}, },
]); ]);
}); });
}); });
describe('When adding and updating range map', () => { describe('When adding and updating range map', () => {
it('should add new range map', async () => { it('should add new range map', async () => {
const onChangeSpy = jest.fn(); const onChangeSpy = jest.fn();
setup(onChangeSpy, { value: [] }); setup(onChangeSpy, { value: [] });
screen.getAllByTestId('remove-value-mapping')[0].click(); await userEvent.click(screen.getAllByTestId('remove-value-mapping')[0]);
fireEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping'))); await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(selectors.components.ValuePicker.select('Add a new mapping')); const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);
await selectOptionInTest(selectComponent, 'Range'); await selectOptionInTest(selectComponent, 'Range');
fireEvent.change(screen.getByPlaceholderText('Range start'), { target: { value: '10' } }); await userEvent.clear(screen.getByPlaceholderText('Range start'));
fireEvent.change(screen.getByPlaceholderText('Range end'), { target: { value: '20' } }); await userEvent.type(screen.getByPlaceholderText('Range start'), '10');
fireEvent.change(screen.getByPlaceholderText('Optional display text'), { target: { value: 'display' } });
fireEvent.click(screen.getByText('Update')); await userEvent.clear(screen.getByPlaceholderText('Range end'));
await userEvent.type(screen.getByPlaceholderText('Range end'), '20');
await userEvent.clear(screen.getByPlaceholderText('Optional display text'));
await userEvent.type(screen.getByPlaceholderText('Optional display text'), 'display');
await userEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([ expect(onChangeSpy).toBeCalledWith([
{ {
@@ -149,22 +160,27 @@ describe('When adding and updating range map', () => {
}, },
]); ]);
}); });
}); });
describe('When adding and updating regex map', () => { describe('When adding and updating regex map', () => {
it('should add new regex map', async () => { it('should add new regex map', async () => {
const onChangeSpy = jest.fn(); const onChangeSpy = jest.fn();
setup(onChangeSpy, { value: [] }); setup(onChangeSpy, { value: [] });
screen.getAllByTestId('remove-value-mapping')[0].click(); await userEvent.click(screen.getAllByTestId('remove-value-mapping')[0]);
fireEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping'))); await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(selectors.components.ValuePicker.select('Add a new mapping')); const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);
await selectOptionInTest(selectComponent, 'Regex'); await selectOptionInTest(selectComponent, 'Regex');
fireEvent.change(screen.getByPlaceholderText('Regular expression'), { target: { value: '(.*).example.com' } }); await userEvent.clear(screen.getByPlaceholderText('Regular expression'));
fireEvent.change(screen.getByPlaceholderText('Optional display text'), { target: { value: '$1' } }); await userEvent.type(screen.getByPlaceholderText('Regular expression'), '(.*).example.com');
fireEvent.click(screen.getByText('Update')); await userEvent.clear(screen.getByPlaceholderText('Optional display text'));
await userEvent.type(screen.getByPlaceholderText('Optional display text'), '$1');
await userEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([ expect(onChangeSpy).toBeCalledWith([
{ {
@@ -179,4 +195,5 @@ describe('When adding and updating regex map', () => {
}, },
]); ]);
}); });
});
}); });

16
public/app/features/explore/Logs.test.tsx
View File

@@ -1,4 +1,5 @@
import { render, screen, fireEvent } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { LoadingState, LogLevel, LogRowModel, MutableDataFrame, toUtc, EventBusSrv } from '@grafana/data'; import { LoadingState, LogLevel, LogRowModel, MutableDataFrame, toUtc, EventBusSrv } from '@grafana/data';
@@ -44,14 +45,6 @@ describe('Logs', () => {
); );
}; };
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.useRealTimers();
});
it('should render logs', () => { it('should render logs', () => {
setup(); setup();
const logsSection = screen.getByTestId('logRows'); const logsSection = screen.getByTestId('logRows');
@@ -189,11 +182,10 @@ describe('Logs', () => {
expect(scanningStopped).toHaveBeenCalled(); expect(scanningStopped).toHaveBeenCalled();
}); });
it('should flip the order', () => { it('should flip the order', async () => {
setup(); setup();
const oldestFirstSelection = screen.getByLabelText('Oldest first'); const oldestFirstSelection = screen.getByLabelText('Oldest first');
fireEvent.click(oldestFirstSelection); await userEvent.click(oldestFirstSelection);
jest.advanceTimersByTime(1000);
const logsSection = screen.getByTestId('logRows'); const logsSection = screen.getByTestId('logRows');
let logRows = logsSection.querySelectorAll('tr'); let logRows = logsSection.querySelectorAll('tr');
expect(logRows.length).toBe(3); expect(logRows.length).toBe(3);

45
public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
View File

@@ -1,4 +1,5 @@
import { render, screen, fireEvent, getByText, waitFor } from '@testing-library/react'; import { fireEvent, render, screen, getByText, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { DataSourceApi, DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data'; import { DataSourceApi, DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data';
@@ -198,10 +199,8 @@ describe('RichHistoryCard', () => {
}); });
const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' }); const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' });
expect(copyQueriesButton).toBeInTheDocument(); expect(copyQueriesButton).toBeInTheDocument();
fireEvent.click(copyQueriesButton); await userEvent.click(copyQueriesButton);
await waitFor(() => {
expect(copyStringToClipboard).toHaveBeenCalledTimes(1); expect(copyStringToClipboard).toHaveBeenCalledTimes(1);
});
expect(copyStringToClipboard).toHaveBeenCalledWith(JSON.stringify({ query: 'query1' })); expect(copyStringToClipboard).toHaveBeenCalledWith(JSON.stringify({ query: 'query1' }));
}); });
@@ -219,10 +218,8 @@ describe('RichHistoryCard', () => {
}); });
const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' }); const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' });
expect(copyQueriesButton).toBeInTheDocument(); expect(copyQueriesButton).toBeInTheDocument();
fireEvent.click(copyQueriesButton); await userEvent.click(copyQueriesButton);
await waitFor(() => {
expect(copyStringToClipboard).toHaveBeenCalledTimes(1); expect(copyStringToClipboard).toHaveBeenCalledTimes(1);
});
expect(copyStringToClipboard).toHaveBeenCalledWith(JSON.stringify({ query: 'query1' })); expect(copyStringToClipboard).toHaveBeenCalledWith(JSON.stringify({ query: 'query1' }));
}); });
@@ -240,10 +237,8 @@ describe('RichHistoryCard', () => {
}); });
const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' }); const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' });
expect(copyQueriesButton).toBeInTheDocument(); expect(copyQueriesButton).toBeInTheDocument();
fireEvent.click(copyQueriesButton); await userEvent.click(copyQueriesButton);
await waitFor(() => {
expect(copyStringToClipboard).toHaveBeenCalledTimes(1); expect(copyStringToClipboard).toHaveBeenCalledTimes(1);
});
expect(copyStringToClipboard).toHaveBeenCalledWith('query1'); expect(copyStringToClipboard).toHaveBeenCalledWith('query1');
}); });
@@ -264,10 +259,8 @@ describe('RichHistoryCard', () => {
}); });
const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' }); const copyQueriesButton = await screen.findByRole('button', { name: 'Copy query to clipboard' });
expect(copyQueriesButton).toBeInTheDocument(); expect(copyQueriesButton).toBeInTheDocument();
fireEvent.click(copyQueriesButton); await userEvent.click(copyQueriesButton);
await waitFor(() => {
expect(copyStringToClipboard).toHaveBeenCalledTimes(1); expect(copyStringToClipboard).toHaveBeenCalledTimes(1);
});
expect(copyStringToClipboard).toHaveBeenCalledWith(`query1\n${JSON.stringify({ query: 'query2' })}`); expect(copyStringToClipboard).toHaveBeenCalledWith(`query1\n${JSON.stringify({ query: 'query2' })}`);
}); });
}); });
@@ -345,7 +338,7 @@ describe('RichHistoryCard', () => {
}); });
const runQueryButton = await screen.findByRole('button', { name: /run query/i }); const runQueryButton = await screen.findByRole('button', { name: /run query/i });
fireEvent.click(runQueryButton); await userEvent.click(runQueryButton);
expect(setQueries).toHaveBeenCalledWith(expect.any(String), queries); expect(setQueries).toHaveBeenCalledWith(expect.any(String), queries);
expect(changeDatasource).not.toHaveBeenCalled(); expect(changeDatasource).not.toHaveBeenCalled();
@@ -373,7 +366,7 @@ describe('RichHistoryCard', () => {
}); });
const runQueryButton = await screen.findByRole('button', { name: /run query/i }); const runQueryButton = await screen.findByRole('button', { name: /run query/i });
fireEvent.click(runQueryButton); await userEvent.click(runQueryButton);
await waitFor(() => { await waitFor(() => {
expect(setQueries).toHaveBeenCalledWith(expect.any(String), queries); expect(setQueries).toHaveBeenCalledWith(expect.any(String), queries);
@@ -406,15 +399,16 @@ describe('RichHistoryCard', () => {
it('should open update comment form when edit comment button clicked', async () => { it('should open update comment form when edit comment button clicked', async () => {
setup({ query: starredQueryWithComment }); setup({ query: starredQueryWithComment });
const editComment = await screen.findByTitle('Edit comment'); const editComment = await screen.findByTitle('Edit comment');
fireEvent.click(editComment); await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form'); const updateCommentForm = await screen.findByLabelText('Update comment form');
expect(updateCommentForm).toBeInTheDocument(); expect(updateCommentForm).toBeInTheDocument();
}); });
it('should close update comment form when escape key pressed', async () => { it('should close update comment form when escape key pressed', async () => {
setup({ query: starredQueryWithComment }); setup({ query: starredQueryWithComment });
const editComment = await screen.findByTitle('Edit comment'); const editComment = await screen.findByTitle('Edit comment');
fireEvent.click(editComment); await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form'); const updateCommentForm = await screen.findByLabelText('Update comment form');
await userEvent.click(updateCommentForm);
fireEvent.keyDown(getByText(updateCommentForm, starredQueryWithComment.comment), { fireEvent.keyDown(getByText(updateCommentForm, starredQueryWithComment.comment), {
key: 'Escape', key: 'Escape',
}); });
@@ -424,8 +418,9 @@ describe('RichHistoryCard', () => {
it('should close update comment form when enter and shift keys pressed', async () => { it('should close update comment form when enter and shift keys pressed', async () => {
setup({ query: starredQueryWithComment }); setup({ query: starredQueryWithComment });
const editComment = await screen.findByTitle('Edit comment'); const editComment = await screen.findByTitle('Edit comment');
fireEvent.click(editComment); await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form'); const updateCommentForm = await screen.findByLabelText('Update comment form');
await userEvent.click(updateCommentForm);
fireEvent.keyDown(getByText(updateCommentForm, starredQueryWithComment.comment), { fireEvent.keyDown(getByText(updateCommentForm, starredQueryWithComment.comment), {
key: 'Enter', key: 'Enter',
shiftKey: true, shiftKey: true,
@@ -436,8 +431,9 @@ describe('RichHistoryCard', () => {
it('should close update comment form when enter and ctrl keys pressed', async () => { it('should close update comment form when enter and ctrl keys pressed', async () => {
setup({ query: starredQueryWithComment }); setup({ query: starredQueryWithComment });
const editComment = await screen.findByTitle('Edit comment'); const editComment = await screen.findByTitle('Edit comment');
fireEvent.click(editComment); await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form'); const updateCommentForm = await screen.findByLabelText('Update comment form');
await userEvent.click(updateCommentForm);
fireEvent.keyDown(getByText(updateCommentForm, starredQueryWithComment.comment), { fireEvent.keyDown(getByText(updateCommentForm, starredQueryWithComment.comment), {
key: 'Enter', key: 'Enter',
ctrlKey: true, ctrlKey: true,
@@ -448,8 +444,9 @@ describe('RichHistoryCard', () => {
it('should not close update comment form when enter key pressed', async () => { it('should not close update comment form when enter key pressed', async () => {
setup({ query: starredQueryWithComment }); setup({ query: starredQueryWithComment });
const editComment = await screen.findByTitle('Edit comment'); const editComment = await screen.findByTitle('Edit comment');
fireEvent.click(editComment); await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form'); const updateCommentForm = await screen.findByLabelText('Update comment form');
await userEvent.click(updateCommentForm);
fireEvent.keyDown(getByText(updateCommentForm, starredQueryWithComment.comment), { fireEvent.keyDown(getByText(updateCommentForm, starredQueryWithComment.comment), {
key: 'Enter', key: 'Enter',
shiftKey: false, shiftKey: false,
@@ -464,14 +461,14 @@ describe('RichHistoryCard', () => {
setup(); setup();
const starButton = await screen.findByTitle('Star query'); const starButton = await screen.findByTitle('Star query');
expect(starButton).toBeInTheDocument(); expect(starButton).toBeInTheDocument();
fireEvent.click(starButton); await userEvent.click(starButton);
expect(starRichHistoryMock).toBeCalledWith(starredQueryWithComment.id, true); expect(starRichHistoryMock).toBeCalledWith(starredQueryWithComment.id, true);
}); });
it('should have title "Unstar query", if not starred', async () => { it('should have title "Unstar query", if not starred', async () => {
setup({ query: starredQueryWithComment }); setup({ query: starredQueryWithComment });
const unstarButton = await screen.findByTitle('Unstar query'); const unstarButton = await screen.findByTitle('Unstar query');
expect(unstarButton).toBeInTheDocument(); expect(unstarButton).toBeInTheDocument();
fireEvent.click(unstarButton); await userEvent.click(unstarButton);
expect(starRichHistoryMock).toBeCalledWith(starredQueryWithComment.id, false); expect(starRichHistoryMock).toBeCalledWith(starredQueryWithComment.id, false);
}); });
}); });
@@ -481,13 +478,13 @@ describe('RichHistoryCard', () => {
setup(); setup();
const deleteButton = await screen.findByTitle('Delete query'); const deleteButton = await screen.findByTitle('Delete query');
expect(deleteButton).toBeInTheDocument(); expect(deleteButton).toBeInTheDocument();
fireEvent.click(deleteButton); await userEvent.click(deleteButton);
expect(deleteRichHistoryMock).toBeCalledWith(starredQueryWithComment.id); expect(deleteRichHistoryMock).toBeCalledWith(starredQueryWithComment.id);
}); });
it('should display modal before deleting if starred', async () => { it('should display modal before deleting if starred', async () => {
setup({ query: starredQueryWithComment }); setup({ query: starredQueryWithComment });
const deleteButton = await screen.findByTitle('Delete query'); const deleteButton = await screen.findByTitle('Delete query');
fireEvent.click(deleteButton); await userEvent.click(deleteButton);
expect(deleteRichHistoryMock).not.toBeCalled(); expect(deleteRichHistoryMock).not.toBeCalled();
expect(appEvents.publish).toHaveBeenCalledWith(new ShowConfirmModalEvent(expect.anything())); expect(appEvents.publish).toHaveBeenCalledWith(new ShowConfirmModalEvent(expect.anything()));
}); });

5
public/app/features/explore/SupplementaryResultError.test.tsx
View File

@@ -1,4 +1,5 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { SupplementaryResultError } from './SupplementaryResultError'; import { SupplementaryResultError } from './SupplementaryResultError';
@@ -13,7 +14,7 @@ describe('SupplementaryResultError', () => {
expect(screen.getByText(error.data.message)).toBeInTheDocument(); expect(screen.getByText(error.data.message)).toBeInTheDocument();
}); });
it('shows long warning message', () => { it('shows long warning message', async () => {
// we make a long message // we make a long message
const messagePart = 'One two three four five six seven eight nine ten.'; const messagePart = 'One two three four five six seven eight nine ten.';
const message = messagePart.repeat(3); const message = messagePart.repeat(3);
@@ -24,7 +25,7 @@ describe('SupplementaryResultError', () => {
expect(screen.getByText(title)).toBeInTheDocument(); expect(screen.getByText(title)).toBeInTheDocument();
expect(screen.queryByText(message)).not.toBeInTheDocument(); expect(screen.queryByText(message)).not.toBeInTheDocument();
const button = screen.getByText('Show details'); const button = screen.getByText('Show details');
button.click(); await userEvent.click(button);
expect(screen.getByText(message)).toBeInTheDocument(); expect(screen.getByText(message)).toBeInTheDocument();
}); });
}); });

5
public/app/features/explore/TraceView/components/common/CopyIcon.test.tsx
View File

@@ -13,6 +13,7 @@
// limitations under the License. // limitations under the License.
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import CopyIcon from './CopyIcon'; import CopyIcon from './CopyIcon';
@@ -43,11 +44,11 @@ describe('<CopyIcon />', () => {
expect(() => render(<CopyIcon {...props} />)).not.toThrow(); expect(() => render(<CopyIcon {...props} />)).not.toThrow();
}); });
it('copies when clicked', () => { it('copies when clicked', async () => {
render(<CopyIcon {...props} />); render(<CopyIcon {...props} />);
const button = screen.getByRole('button'); const button = screen.getByRole('button');
button.click(); await userEvent.click(button);
expect(copySpy).toHaveBeenCalledWith(props.copyText); expect(copySpy).toHaveBeenCalledWith(props.copyText);
}); });

4
public/app/features/logs/components/LogRows.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, screen } from '@testing-library/react'; import { act, render, screen } from '@testing-library/react';
import { range } from 'lodash'; import { range } from 'lodash';
import React from 'react'; import React from 'react';
@@ -55,7 +55,9 @@ describe('LogRows', () => {
expect(screen.queryAllByRole('row')).toHaveLength(2); expect(screen.queryAllByRole('row')).toHaveLength(2);
expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1'); expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
act(() => {
jest.runAllTimers(); jest.runAllTimers();
});
rerender( rerender(
<LogRows <LogRows
logRows={rows} logRows={rows}

3
public/app/features/playlist/PlaylistEditPage.test.tsx
View File

@@ -56,7 +56,7 @@ describe('PlaylistEditPage', () => {
it('then it should load playlist and header should be correct', async () => { it('then it should load playlist and header should be correct', async () => {
await getTestContext(); await getTestContext();
expect(screen.getByRole('heading', { name: /edit playlist/i })).toBeInTheDocument(); expect(await screen.findByRole('heading', { name: /edit playlist/i })).toBeInTheDocument();
expect(screen.getByRole('textbox', { name: /playlist name/i })).toHaveValue('Test Playlist'); expect(screen.getByRole('textbox', { name: /playlist name/i })).toHaveValue('Test Playlist');
expect(screen.getByRole('textbox', { name: /playlist interval/i })).toHaveValue('5s'); expect(screen.getByRole('textbox', { name: /playlist interval/i })).toHaveValue('5s');
expect(screen.getAllByRole('row')).toHaveLength(1); expect(screen.getAllByRole('row')).toHaveLength(1);
@@ -67,6 +67,7 @@ describe('PlaylistEditPage', () => {
it('then correct api should be called', async () => { it('then correct api should be called', async () => {
const { putMock } = await getTestContext(); const { putMock } = await getTestContext();
expect(await screen.findByRole('heading', { name: /edit playlist/i })).toBeInTheDocument();
expect(locationService.getLocation().pathname).toEqual('/'); expect(locationService.getLocation().pathname).toEqual('/');
await userEvent.clear(screen.getByRole('textbox', { name: /playlist name/i })); await userEvent.clear(screen.getByRole('textbox', { name: /playlist name/i }));
await userEvent.type(screen.getByRole('textbox', { name: /playlist name/i }), 'A Name'); await userEvent.type(screen.getByRole('textbox', { name: /playlist name/i }), 'A Name');

23
public/app/features/query/components/QueryEditorRowHeader.test.tsx
View File

@@ -1,4 +1,5 @@
import { fireEvent, render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { openMenu } from 'react-select-event'; import { openMenu } from 'react-select-event';
@@ -30,13 +31,16 @@ jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => {
}); });
describe('QueryEditorRowHeader', () => { describe('QueryEditorRowHeader', () => {
it('Can edit title', () => { it('Can edit title', async () => {
const scenario = renderScenario({}); const scenario = renderScenario({});
screen.getByTestId('query-name-div').click(); await userEvent.click(screen.getByTestId('query-name-div'));
const input = screen.getByTestId('query-name-input'); const input = screen.getByTestId('query-name-input');
fireEvent.change(input, { target: { value: 'new name' } }); await userEvent.clear(input);
fireEvent.blur(input); await userEvent.type(input, 'new name');
// blur the field
await userEvent.click(document.body);
expect(jest.mocked(scenario.props.onChange).mock.calls[0][0].refId).toBe('new name'); expect(jest.mocked(scenario.props.onChange).mock.calls[0][0].refId).toBe('new name');
}); });
@@ -44,9 +48,10 @@ describe('QueryEditorRowHeader', () => {
it('Show error when other query with same name exists', async () => { it('Show error when other query with same name exists', async () => {
renderScenario({}); renderScenario({});
screen.getByTestId('query-name-div').click(); await userEvent.click(screen.getByTestId('query-name-div'));
const input = screen.getByTestId('query-name-input'); const input = screen.getByTestId('query-name-input');
fireEvent.change(input, { target: { value: 'B' } }); await userEvent.clear(input);
await userEvent.type(input, 'B');
const alert = await screen.findByRole('alert'); const alert = await screen.findByRole('alert');
expect(alert.textContent).toBe('Query name already exists'); expect(alert.textContent).toBe('Query name already exists');
@@ -55,9 +60,9 @@ describe('QueryEditorRowHeader', () => {
it('Show error when empty name is specified', async () => { it('Show error when empty name is specified', async () => {
renderScenario({}); renderScenario({});
screen.getByTestId('query-name-div').click(); await userEvent.click(screen.getByTestId('query-name-div'));
const input = screen.getByTestId('query-name-input'); const input = screen.getByTestId('query-name-input');
fireEvent.change(input, { target: { value: '' } }); await userEvent.clear(input);
const alert = await screen.findByRole('alert'); const alert = await screen.findByRole('alert');
expect(alert.textContent).toBe('An empty query name is not allowed'); expect(alert.textContent).toBe('An empty query name is not allowed');

5
public/app/plugins/datasource/azuremonitor/components/DefaultSubscription.test.tsx
View File

@@ -1,4 +1,5 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { createMockInstanceSetttings } from '../__mocks__/instanceSettings'; import { createMockInstanceSetttings } from '../__mocks__/instanceSettings';
@@ -36,7 +37,7 @@ describe('DefaultSubscription', () => {
expect(screen.getByTestId(selectors.components.configEditor.loadSubscriptions.button)).toBeDisabled(); expect(screen.getByTestId(selectors.components.configEditor.loadSubscriptions.button)).toBeDisabled();
}); });
it('should enable load subscriptions if credentials are complete and set default subscription', () => { it('should enable load subscriptions if credentials are complete and set default subscription', async () => {
const props = { const props = {
...defaultProps, ...defaultProps,
credentials: { ...defaultProps.credentials, clientSecret: 'client_secret' }, credentials: { ...defaultProps.credentials, clientSecret: 'client_secret' },
@@ -45,7 +46,7 @@ describe('DefaultSubscription', () => {
const { rerender } = render(<DefaultSubscription {...props} />); const { rerender } = render(<DefaultSubscription {...props} />);
expect(screen.getByTestId(selectors.components.configEditor.loadSubscriptions.button)).not.toBeDisabled(); expect(screen.getByTestId(selectors.components.configEditor.loadSubscriptions.button)).not.toBeDisabled();
screen.getByTestId(selectors.components.configEditor.loadSubscriptions.button).click(); await userEvent.click(screen.getByTestId(selectors.components.configEditor.loadSubscriptions.button));
rerender( rerender(
<DefaultSubscription <DefaultSubscription
{...props} {...props}

3
public/app/plugins/datasource/azuremonitor/components/ResourcePicker/AdvancedMulti.test.tsx
View File

@@ -1,4 +1,5 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import AdvancedMulti from './AdvancedMulti'; import AdvancedMulti from './AdvancedMulti';
@@ -9,7 +10,7 @@ describe('AdvancedMulti', () => {
const renderAdvanced = jest.fn().mockReturnValue(<div>details!</div>); const renderAdvanced = jest.fn().mockReturnValue(<div>details!</div>);
render(<AdvancedMulti onChange={onChange} resources={[{}]} renderAdvanced={renderAdvanced} />); render(<AdvancedMulti onChange={onChange} resources={[{}]} renderAdvanced={renderAdvanced} />);
const advancedSection = screen.getByText('Advanced'); const advancedSection = screen.getByText('Advanced');
advancedSection.click(); await userEvent.click(advancedSection);
expect(await screen.findByText('details!')).toBeInTheDocument(); expect(await screen.findByText('details!')).toBeInTheDocument();
}); });

16
public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, screen, act } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import React from 'react'; import React from 'react';
import selectEvent from 'react-select-event'; import selectEvent from 'react-select-event';
@@ -89,7 +89,7 @@ describe('QueryEditor', () => {
expect(await screen.findByText('Match exact')).toBeInTheDocument(); expect(await screen.findByText('Match exact')).toBeInTheDocument();
}); });
it('shoud display wildcard option in dimension value dropdown', async () => { it('should display wildcard option in dimension value dropdown', async () => {
const props = setup(); const props = setup();
if (props.query.queryMode !== 'Metrics') { if (props.query.queryMode !== 'Metrics') {
fail(`expected props.query.queryMode to be 'Metrics', got '${props.query.queryMode}' instead`); fail(`expected props.query.queryMode to be 'Metrics', got '${props.query.queryMode}' instead`);
@@ -112,8 +112,7 @@ describe('QueryEditor', () => {
}); });
describe('when dynamic labels feature toggle is enabled', () => { describe('when dynamic labels feature toggle is enabled', () => {
it('shoud render label field', async () => { it('should render label field', async () => {
await act(async () => {
const props = setup(); const props = setup();
const originalValue = config.featureToggles.cloudWatchDynamicLabels; const originalValue = config.featureToggles.cloudWatchDynamicLabels;
config.featureToggles.cloudWatchDynamicLabels = true; config.featureToggles.cloudWatchDynamicLabels = true;
@@ -125,18 +124,16 @@ describe('QueryEditor', () => {
/> />
); );
expect(screen.getByText('Label')).toBeInTheDocument(); expect(await screen.findByText('Label')).toBeInTheDocument();
expect(screen.queryByText('Alias')).toBeNull(); expect(screen.queryByText('Alias')).toBeNull();
expect(screen.getByText("Period: ${PROP('Period')} InstanceId: ${PROP('Dim.InstanceId')}")); expect(screen.getByText("Period: ${PROP('Period')} InstanceId: ${PROP('Dim.InstanceId')}"));
config.featureToggles.cloudWatchDynamicLabels = originalValue; config.featureToggles.cloudWatchDynamicLabels = originalValue;
}); });
}); });
});
describe('when dynamic labels feature toggle is disabled', () => { describe('when dynamic labels feature toggle is disabled', () => {
it('shoud render alias field', async () => { it('should render alias field', async () => {
await act(async () => {
const props = setup(); const props = setup();
const originalValue = config.featureToggles.cloudWatchDynamicLabels; const originalValue = config.featureToggles.cloudWatchDynamicLabels;
config.featureToggles.cloudWatchDynamicLabels = false; config.featureToggles.cloudWatchDynamicLabels = false;
@@ -144,12 +141,11 @@ describe('QueryEditor', () => {
const expected = 'Period: {{period}} InstanceId: {{InstanceId}}'; const expected = 'Period: {{period}} InstanceId: {{InstanceId}}';
render(<MetricsQueryEditor {...props} query={{ ...props.query, refId: 'A', alias: expected }} />); render(<MetricsQueryEditor {...props} query={{ ...props.query, refId: 'A', alias: expected }} />);
expect(await screen.getByText('Alias')).toBeInTheDocument(); expect(await screen.findByText('Alias')).toBeInTheDocument();
expect(screen.queryByText('Label')).toBeNull(); expect(screen.queryByText('Label')).toBeNull();
expect(screen.getByLabelText('Alias - optional')).toHaveValue(expected); expect(screen.getByLabelText('Alias - optional')).toHaveValue(expected);
config.featureToggles.cloudWatchDynamicLabels = originalValue; config.featureToggles.cloudWatchDynamicLabels = originalValue;
}); });
}); });
});
}); });

10
public/app/plugins/datasource/cloudwatch/components/QueryHeader.test.tsx
View File

@@ -1,4 +1,4 @@
import { act, render, screen, waitFor } from '@testing-library/react'; import { render, screen, waitFor } from '@testing-library/react';
import React from 'react'; import React from 'react';
import selectEvent from 'react-select-event'; import selectEvent from 'react-select-event';
@@ -40,9 +40,7 @@ describe('QueryHeader', () => {
/> />
); );
await waitFor(() => expect(screen.queryByText('us-east-1')).toBeInTheDocument()); await waitFor(() => expect(screen.queryByText('us-east-1')).toBeInTheDocument());
await act(async () => {
await selectEvent.select(screen.getByLabelText(/Region/), 'us-east-2', { container: document.body }); await selectEvent.select(screen.getByLabelText(/Region/), 'us-east-2', { container: document.body });
});
expect(onChange).toHaveBeenCalledWith({ expect(onChange).toHaveBeenCalledWith({
...validMetricSearchBuilderQuery, ...validMetricSearchBuilderQuery,
region: 'us-east-2', region: 'us-east-2',
@@ -65,9 +63,7 @@ describe('QueryHeader', () => {
/> />
); );
await waitFor(() => expect(screen.queryByText('us-east-1')).toBeInTheDocument()); await waitFor(() => expect(screen.queryByText('us-east-1')).toBeInTheDocument());
await act(async () => {
await selectEvent.select(screen.getByLabelText(/Region/), 'us-east-2', { container: document.body }); await selectEvent.select(screen.getByLabelText(/Region/), 'us-east-2', { container: document.body });
});
expect(onChange).toHaveBeenCalledWith({ expect(onChange).toHaveBeenCalledWith({
...validMetricSearchBuilderQuery, ...validMetricSearchBuilderQuery,
region: 'us-east-2', region: 'us-east-2',
@@ -90,9 +86,7 @@ describe('QueryHeader', () => {
/> />
); );
await waitFor(() => expect(screen.queryByText('us-east-1')).toBeInTheDocument()); await waitFor(() => expect(screen.queryByText('us-east-1')).toBeInTheDocument());
await act(async () => {
await selectEvent.select(screen.getByLabelText(/Region/), 'us-east-2', { container: document.body }); await selectEvent.select(screen.getByLabelText(/Region/), 'us-east-2', { container: document.body });
});
expect(datasource.resources.isMonitoringAccount).not.toHaveBeenCalledWith('us-east-2'); expect(datasource.resources.isMonitoringAccount).not.toHaveBeenCalledWith('us-east-2');
}); });
@@ -111,9 +105,7 @@ describe('QueryHeader', () => {
/> />
); );
await waitFor(() => expect(screen.queryByText('us-east-1')).toBeInTheDocument()); await waitFor(() => expect(screen.queryByText('us-east-1')).toBeInTheDocument());
await act(async () => {
await selectEvent.select(screen.getByLabelText(/Region/), 'us-east-2', { container: document.body }); await selectEvent.select(screen.getByLabelText(/Region/), 'us-east-2', { container: document.body });
});
expect(datasource.resources.isMonitoringAccount).not.toHaveBeenCalledWith(); expect(datasource.resources.isMonitoringAccount).not.toHaveBeenCalledWith();
}); });
}); });

11
public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.test.tsx
View File

@@ -1,4 +1,5 @@
import { render, screen, waitFor } from '@testing-library/react'; import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import selectEvent from 'react-select-event'; import selectEvent from 'react-select-event';
@@ -66,12 +67,12 @@ describe('Cloudwatch SQLGroupBy', () => {
const addButton = screen.getByRole('button', { name: 'Add' }); const addButton = screen.getByRole('button', { name: 'Add' });
expect(addButton).toBeInTheDocument(); expect(addButton).toBeInTheDocument();
addButton.click(); await userEvent.click(addButton);
expect(await screen.findByText('Choose')).toBeInTheDocument(); expect(screen.getByText('Choose')).toBeInTheDocument();
selectEvent.openMenu(screen.getByLabelText(/Group by/)); selectEvent.openMenu(screen.getByLabelText(/Group by/));
expect(await screen.findByText('Template Variables')).toBeInTheDocument(); expect(screen.getByText('Template Variables')).toBeInTheDocument();
}); });
it('should allow removing a dimension filter', async () => { it('should allow removing a dimension filter', async () => {
@@ -84,10 +85,8 @@ describe('Cloudwatch SQLGroupBy', () => {
const removeButton = screen.getByRole('button', { name: 'remove' }); const removeButton = screen.getByRole('button', { name: 'remove' });
expect(removeButton).toBeInTheDocument(); expect(removeButton).toBeInTheDocument();
removeButton.click(); await userEvent.click(removeButton);
await waitFor(() => {
expect(screen.queryByText('InstanceId')).not.toBeInTheDocument(); expect(screen.queryByText('InstanceId')).not.toBeInTheDocument();
}); });
});
}); });

28
public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, RenderResult, waitFor } from '@testing-library/react'; import { render, RenderResult, screen } from '@testing-library/react';
import { noop } from 'lodash'; import { noop } from 'lodash';
import React from 'react'; import React from 'react';
@@ -35,30 +35,30 @@ function setup(app: CoreApp): RenderResult {
} }
describe('LokiQueryEditorByApp', () => { describe('LokiQueryEditorByApp', () => {
it('should render simplified query editor for cloud alerting', () => { it('should render simplified query editor for cloud alerting', async () => {
const { getByTestId, queryByTestId } = setup(CoreApp.CloudAlerting); setup(CoreApp.CloudAlerting);
expect(getByTestId(alertingTestIds.editor)).toBeInTheDocument(); expect(await screen.findByTestId(alertingTestIds.editor)).toBeInTheDocument();
expect(queryByTestId(regularTestIds.editor)).toBeNull(); expect(screen.queryByTestId(regularTestIds.editor)).toBeNull();
}); });
it('should render regular query editor for unknown apps', async () => { it('should render regular query editor for unknown apps', async () => {
const { getByTestId, queryByTestId } = setup(CoreApp.Unknown); setup(CoreApp.Unknown);
expect(await waitFor(() => getByTestId(regularTestIds.editor))).toBeInTheDocument(); expect(await screen.findByTestId(regularTestIds.editor)).toBeInTheDocument();
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); expect(screen.queryByTestId(alertingTestIds.editor)).toBeNull();
}); });
it('should render regular query editor for explore', async () => { it('should render regular query editor for explore', async () => {
const { getByTestId, queryByTestId } = setup(CoreApp.Explore); setup(CoreApp.Explore);
expect(await waitFor(() => getByTestId(regularTestIds.editor))).toBeInTheDocument(); expect(await screen.findByTestId(regularTestIds.editor)).toBeInTheDocument();
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); expect(screen.queryByTestId(alertingTestIds.editor)).toBeNull();
}); });
it('should render regular query editor for dashboard', async () => { it('should render regular query editor for dashboard', async () => {
const { findByTestId, queryByTestId } = setup(CoreApp.Dashboard); setup(CoreApp.Dashboard);
expect(await findByTestId(regularTestIds.editor)).toBeInTheDocument(); expect(await screen.findByTestId(regularTestIds.editor)).toBeInTheDocument();
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); expect(screen.queryByTestId(alertingTestIds.editor)).toBeNull();
}); });
}); });

9
public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, screen } from '@testing-library/react'; import { render, screen, waitFor } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { LokiDatasource } from '../../datasource'; import { LokiDatasource } from '../../datasource';
@@ -33,14 +33,15 @@ describe('LabelBrowserModal', () => {
it('renders the label browser modal when open', async () => { it('renders the label browser modal when open', async () => {
render(<LabelBrowserModal {...props} />); render(<LabelBrowserModal {...props} />);
expect(await screen.findByText(/Loading/)).not.toBeInTheDocument(); await waitFor(() => {
expect(screen.queryByText(/Loading/)).not.toBeInTheDocument();
});
expect(screen.getByRole('heading', { name: /label browser/i })).toBeInTheDocument(); expect(screen.getByRole('heading', { name: /label browser/i })).toBeInTheDocument();
}); });
it("doesn't render the label browser modal when closed", async () => { it("doesn't render the label browser modal when closed", async () => {
render(<LabelBrowserModal {...props} isOpen={false} />); render(<LabelBrowserModal {...props} isOpen={false} />);
expect(screen.queryByRole('heading', { name: /label browser/i })).toBeNull(); expect(screen.queryByRole('heading', { name: /label browser/i })).not.toBeInTheDocument();
}); });
}); });

10
public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.test.tsx
View File

@@ -1,4 +1,4 @@
import { fireEvent, render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
@@ -11,10 +11,10 @@ describe('LokiQueryBuilderOptions', () => {
it('Can change query type', async () => { it('Can change query type', async () => {
const { props } = setup(); const { props } = setup();
screen.getByTitle('Click to edit options').click(); await userEvent.click(screen.getByTitle('Click to edit options'));
expect(screen.getByLabelText('Range')).toBeChecked(); expect(screen.getByLabelText('Range')).toBeChecked();
screen.getByLabelText('Instant').click(); await userEvent.click(screen.getByLabelText('Instant'));
expect(props.onChange).toHaveBeenCalledWith({ expect(props.onChange).toHaveBeenCalledWith({
...props.query, ...props.query,
@@ -25,11 +25,11 @@ describe('LokiQueryBuilderOptions', () => {
it('Can change legend format', async () => { it('Can change legend format', async () => {
const { props } = setup(); const { props } = setup();
screen.getByTitle('Click to edit options').click(); await userEvent.click(screen.getByTitle('Click to edit options'));
const element = screen.getByLabelText('Legend'); const element = screen.getByLabelText('Legend');
await userEvent.type(element, 'asd'); await userEvent.type(element, 'asd');
fireEvent.keyDown(element, { key: 'Enter', code: 'Enter', charCode: 13 }); await userEvent.keyboard('{enter}');
expect(props.onChange).toHaveBeenCalledWith({ expect(props.onChange).toHaveBeenCalledWith({
...props.query, ...props.query,

31
public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, RenderResult } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import { noop } from 'lodash'; import { noop } from 'lodash';
import React from 'react'; import React from 'react';
@@ -22,7 +22,7 @@ jest.mock('./monaco-query-field/MonacoQueryFieldLazy', () => {
}; };
}); });
function setup(app: CoreApp): RenderResult & { onRunQuery: jest.Mock } { function setup(app: CoreApp): { onRunQuery: jest.Mock } {
const dataSource = { const dataSource = {
createQuery: jest.fn((q) => q), createQuery: jest.fn((q) => q),
getInitHints: () => [], getInitHints: () => [],
@@ -37,7 +37,7 @@ function setup(app: CoreApp): RenderResult & { onRunQuery: jest.Mock } {
} as unknown as PrometheusDatasource; } as unknown as PrometheusDatasource;
const onRunQuery = jest.fn(); const onRunQuery = jest.fn();
const renderOutput = render( render(
<PromQueryEditorByApp <PromQueryEditorByApp
app={app} app={app}
onChange={noop} onChange={noop}
@@ -48,36 +48,35 @@ function setup(app: CoreApp): RenderResult & { onRunQuery: jest.Mock } {
); );
return { return {
...renderOutput,
onRunQuery, onRunQuery,
}; };
} }
describe('PromQueryEditorByApp', () => { describe('PromQueryEditorByApp', () => {
it('should render simplified query editor for cloud alerting', () => { it('should render simplified query editor for cloud alerting', async () => {
const { getByTestId } = setup(CoreApp.CloudAlerting); setup(CoreApp.CloudAlerting);
expect(getByTestId(alertingTestIds.editor)).toBeInTheDocument(); expect(await screen.findByTestId(alertingTestIds.editor)).toBeInTheDocument();
}); });
it('should render editor selector for unkown apps', () => { it('should render editor selector for unkown apps', () => {
const { getByTestId, queryByTestId } = setup(CoreApp.Unknown); setup(CoreApp.Unknown);
expect(getByTestId('QueryEditorModeToggle')).toBeInTheDocument(); expect(screen.getByTestId('QueryEditorModeToggle')).toBeInTheDocument();
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); expect(screen.queryByTestId(alertingTestIds.editor)).toBeNull();
}); });
it('should render editor selector for explore', () => { it('should render editor selector for explore', () => {
const { getByTestId, queryByTestId } = setup(CoreApp.Explore); setup(CoreApp.Explore);
expect(getByTestId('QueryEditorModeToggle')).toBeInTheDocument(); expect(screen.getByTestId('QueryEditorModeToggle')).toBeInTheDocument();
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); expect(screen.queryByTestId(alertingTestIds.editor)).toBeNull();
}); });
it('should render editor selector for dashboard', () => { it('should render editor selector for dashboard', () => {
const { getByTestId, queryByTestId } = setup(CoreApp.Dashboard); setup(CoreApp.Dashboard);
expect(getByTestId('QueryEditorModeToggle')).toBeInTheDocument(); expect(screen.getByTestId('QueryEditorModeToggle')).toBeInTheDocument();
expect(queryByTestId(alertingTestIds.editor)).toBeNull(); expect(screen.queryByTestId(alertingTestIds.editor)).toBeNull();
}); });
}); });

41
public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx
View File

@@ -48,31 +48,40 @@ describe('PromQueryField', () => {
window.getSelection = () => {}; window.getSelection = () => {};
}); });
it('renders metrics chooser regularly if lookups are not disabled in the datasource settings', () => { it('renders metrics chooser regularly if lookups are not disabled in the datasource settings', async () => {
const queryField = render(<PromQueryField {...defaultProps} />); const queryField = render(<PromQueryField {...defaultProps} />);
// wait for component to render
await screen.findByRole('button');
expect(queryField.getAllByRole('button')).toHaveLength(1); expect(queryField.getAllByRole('button')).toHaveLength(1);
}); });
it('renders a disabled metrics chooser if lookups are disabled in datasource settings', () => { it('renders a disabled metrics chooser if lookups are disabled in datasource settings', async () => {
const props = defaultProps; const props = defaultProps;
props.datasource.lookupsDisabled = true; props.datasource.lookupsDisabled = true;
const queryField = render(<PromQueryField {...props} />); const queryField = render(<PromQueryField {...props} />);
// wait for component to render
await screen.findByRole('button');
const bcButton = queryField.getByRole('button'); const bcButton = queryField.getByRole('button');
expect(bcButton).toBeDisabled(); expect(bcButton).toBeDisabled();
}); });
it('renders an initial hint if no data and initial hint provided', () => { it('renders an initial hint if no data and initial hint provided', async () => {
const props = defaultProps; const props = defaultProps;
props.datasource.lookupsDisabled = true; props.datasource.lookupsDisabled = true;
props.datasource.getInitHints = () => [{ label: 'Initial hint', type: 'INFO' }]; props.datasource.getInitHints = () => [{ label: 'Initial hint', type: 'INFO' }];
render(<PromQueryField {...props} />); render(<PromQueryField {...props} />);
// wait for component to render
await screen.findByRole('button');
expect(screen.getByText('Initial hint')).toBeInTheDocument(); expect(screen.getByText('Initial hint')).toBeInTheDocument();
}); });
it('renders query hint if data, query hint and initial hint provided', () => { it('renders query hint if data, query hint and initial hint provided', async () => {
const props = defaultProps; const props = defaultProps;
props.datasource.lookupsDisabled = true; props.datasource.lookupsDisabled = true;
props.datasource.getInitHints = () => [{ label: 'Initial hint', type: 'INFO' }]; props.datasource.getInitHints = () => [{ label: 'Initial hint', type: 'INFO' }];
@@ -89,6 +98,9 @@ describe('PromQueryField', () => {
/> />
); );
// wait for component to render
await screen.findByRole('button');
expect(screen.getByText('Query hint')).toBeInTheDocument(); expect(screen.getByText('Query hint')).toBeInTheDocument();
expect(screen.queryByText('Initial hint')).not.toBeInTheDocument(); expect(screen.queryByText('Initial hint')).not.toBeInTheDocument();
}); });
@@ -113,6 +125,9 @@ describe('PromQueryField', () => {
/> />
); );
// wait for component to render
await screen.findByRole('button');
const changedMetrics = ['baz', 'moo']; const changedMetrics = ['baz', 'moo'];
queryField.rerender( queryField.rerender(
<PromQueryField <PromQueryField
@@ -127,16 +142,25 @@ describe('PromQueryField', () => {
// If we check the label browser right away it should be in loading state // If we check the label browser right away it should be in loading state
let labelBrowser = screen.getByRole('button'); let labelBrowser = screen.getByRole('button');
expect(labelBrowser.textContent).toContain('Loading'); expect(labelBrowser.textContent).toContain('Loading');
// wait for component to rerender
labelBrowser = await screen.findByRole('button');
expect(labelBrowser.textContent).toContain('Metrics browser');
}); });
it('should not run query onBlur in explore', async () => { it('should not run query onBlur in explore', async () => {
const onRunQuery = jest.fn(); const onRunQuery = jest.fn();
const { container } = render(<PromQueryField {...defaultProps} app={CoreApp.Explore} onRunQuery={onRunQuery} />); const { container } = render(<PromQueryField {...defaultProps} app={CoreApp.Explore} onRunQuery={onRunQuery} />);
// wait for component to rerender
await screen.findByRole('button');
const input = getByTestId(container, 'dummy-code-input'); const input = getByTestId(container, 'dummy-code-input');
expect(input).toBeInTheDocument(); expect(input).toBeInTheDocument();
await userEvent.type(input, 'metric'); await userEvent.type(input, 'metric');
input.blur();
// blur element
await userEvent.click(document.body);
expect(onRunQuery).not.toHaveBeenCalled(); expect(onRunQuery).not.toHaveBeenCalled();
}); });
@@ -144,10 +168,15 @@ describe('PromQueryField', () => {
const onRunQuery = jest.fn(); const onRunQuery = jest.fn();
const { container } = render(<PromQueryField {...defaultProps} app={CoreApp.Dashboard} onRunQuery={onRunQuery} />); const { container } = render(<PromQueryField {...defaultProps} app={CoreApp.Dashboard} onRunQuery={onRunQuery} />);
// wait for component to rerender
await screen.findByRole('button');
const input = getByTestId(container, 'dummy-code-input'); const input = getByTestId(container, 'dummy-code-input');
expect(input).toBeInTheDocument(); expect(input).toBeInTheDocument();
await userEvent.type(input, 'metric'); await userEvent.type(input, 'metric');
input.blur();
// blur element
await userEvent.click(document.body);
expect(onRunQuery).toHaveBeenCalled(); expect(onRunQuery).toHaveBeenCalled();
}); });
}); });

31
public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx
View File

@@ -1,4 +1,5 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
import { selectOptionInTest } from 'test/helpers/selectOptionInTest'; import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
@@ -13,10 +14,10 @@ describe('PromQueryBuilderOptions', () => {
it('Can change query type', async () => { it('Can change query type', async () => {
const { props } = setup(); const { props } = setup();
screen.getByTitle('Click to edit options').click(); await userEvent.click(screen.getByTitle('Click to edit options'));
expect(screen.getByLabelText('Range')).toBeChecked(); expect(screen.getByLabelText('Range')).toBeChecked();
screen.getByLabelText('Instant').click(); await userEvent.click(screen.getByLabelText('Instant'));
expect(props.onChange).toHaveBeenCalledWith({ expect(props.onChange).toHaveBeenCalledWith({
...props.query, ...props.query,
@@ -29,7 +30,7 @@ describe('PromQueryBuilderOptions', () => {
it('Can set query type to "Both" on render for PanelEditor', async () => { it('Can set query type to "Both" on render for PanelEditor', async () => {
setup({ instant: true, range: true }); setup({ instant: true, range: true });
screen.getByTitle('Click to edit options').click(); await userEvent.click(screen.getByTitle('Click to edit options'));
expect(screen.getByLabelText('Both')).toBeChecked(); expect(screen.getByLabelText('Both')).toBeChecked();
}); });
@@ -37,12 +38,12 @@ describe('PromQueryBuilderOptions', () => {
it('Can set query type to "Both" on render for Explorer', async () => { it('Can set query type to "Both" on render for Explorer', async () => {
setup({ instant: true, range: true }, CoreApp.Explore); setup({ instant: true, range: true }, CoreApp.Explore);
screen.getByTitle('Click to edit options').click(); await userEvent.click(screen.getByTitle('Click to edit options'));
expect(screen.getByLabelText('Both')).toBeChecked(); expect(screen.getByLabelText('Both')).toBeChecked();
}); });
it('Legend format default to Auto', async () => { it('Legend format default to Auto', () => {
setup(); setup();
expect(screen.getByText('Legend: Auto')).toBeInTheDocument(); expect(screen.getByText('Legend: Auto')).toBeInTheDocument();
}); });
@@ -50,12 +51,12 @@ describe('PromQueryBuilderOptions', () => {
it('Can change legend format to verbose', async () => { it('Can change legend format to verbose', async () => {
const { props } = setup(); const { props } = setup();
screen.getByTitle('Click to edit options').click(); await userEvent.click(screen.getByTitle('Click to edit options'));
let legendModeSelect = screen.getByText('Auto').parentElement!; let legendModeSelect = screen.getByText('Auto').parentElement!;
legendModeSelect.click(); await userEvent.click(legendModeSelect);
await selectOptionInTest(legendModeSelect as HTMLElement, 'Verbose'); await selectOptionInTest(legendModeSelect, 'Verbose');
expect(props.onChange).toHaveBeenCalledWith({ expect(props.onChange).toHaveBeenCalledWith({
...props.query, ...props.query,
@@ -66,12 +67,12 @@ describe('PromQueryBuilderOptions', () => {
it('Can change legend format to custom', async () => { it('Can change legend format to custom', async () => {
const { props } = setup(); const { props } = setup();
screen.getByTitle('Click to edit options').click(); await userEvent.click(screen.getByTitle('Click to edit options'));
let legendModeSelect = screen.getByText('Auto').parentElement!; let legendModeSelect = screen.getByText('Auto').parentElement!;
legendModeSelect.click(); await userEvent.click(legendModeSelect);
await selectOptionInTest(legendModeSelect as HTMLElement, 'Custom'); await selectOptionInTest(legendModeSelect, 'Custom');
expect(props.onChange).toHaveBeenCalledWith({ expect(props.onChange).toHaveBeenCalledWith({
...props.query, ...props.query,
@@ -79,23 +80,23 @@ describe('PromQueryBuilderOptions', () => {
}); });
}); });
it('Handle defaults with undefined range', async () => { it('Handle defaults with undefined range', () => {
setup(getQueryWithDefaults({ refId: 'A', expr: '', range: undefined, instant: true }, CoreApp.Dashboard)); setup(getQueryWithDefaults({ refId: 'A', expr: '', range: undefined, instant: true }, CoreApp.Dashboard));
expect(screen.getByText('Type: Instant')).toBeInTheDocument(); expect(screen.getByText('Type: Instant')).toBeInTheDocument();
}); });
it('Should show "Exemplars: false" by default', async () => { it('Should show "Exemplars: false" by default', () => {
setup(); setup();
expect(screen.getByText('Exemplars: false')).toBeInTheDocument(); expect(screen.getByText('Exemplars: false')).toBeInTheDocument();
}); });
it('Should show "Exemplars: false" when query has "Exemplars: false"', async () => { it('Should show "Exemplars: false" when query has "Exemplars: false"', () => {
setup({ exemplar: false }); setup({ exemplar: false });
expect(screen.getByText('Exemplars: false')).toBeInTheDocument(); expect(screen.getByText('Exemplars: false')).toBeInTheDocument();
}); });
it('Should show "Exemplars: true" when query has "Exemplars: true"', async () => { it('Should show "Exemplars: true" when query has "Exemplars: true"', () => {
setup({ exemplar: true }); setup({ exemplar: true });
expect(screen.getByText('Exemplars: true')).toBeInTheDocument(); expect(screen.getByText('Exemplars: true')).toBeInTheDocument();
}); });

12
public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryCodeEditor.test.tsx
View File

@@ -45,13 +45,21 @@ describe('PromQueryCodeEditor', () => {
const props = createProps(datasource); const props = createProps(datasource);
props.showExplain = true; props.showExplain = true;
render(<PromQueryCodeEditor {...props} query={{ expr: '', refId: 'refid', interval: '1s' }} />); render(<PromQueryCodeEditor {...props} query={{ expr: '', refId: 'refid', interval: '1s' }} />);
expect(await screen.findByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
// wait for component to render
await screen.findByRole('button');
expect(screen.getByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
}); });
it('does not show explain section when showExplain is false', async () => { it('does not show explain section when showExplain is false', async () => {
const { datasource } = createDatasource(); const { datasource } = createDatasource();
const props = createProps(datasource); const props = createProps(datasource);
render(<PromQueryCodeEditor {...props} query={{ expr: '', refId: 'refid', interval: '1s' }} />); render(<PromQueryCodeEditor {...props} query={{ expr: '', refId: 'refid', interval: '1s' }} />);
expect(await screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
// wait for component to render
await screen.findByRole('button');
expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
}); });
}); });

36
public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx
View File

@@ -99,41 +99,43 @@ describe('PromQueryEditorSelector', () => {
it('shows code editor if expr and nothing else', async () => { it('shows code editor if expr and nothing else', async () => {
// We opt for showing code editor for queries created before this feature was added // We opt for showing code editor for queries created before this feature was added
render(<PromQueryEditorSelector {...defaultProps} />); render(<PromQueryEditorSelector {...defaultProps} />);
expectCodeEditor(); await expectCodeEditor();
}); });
it('shows code editor if no expr and nothing else since defaultEditor is code', async () => { it('shows code editor if no expr and nothing else since defaultEditor is code', async () => {
renderWithDatasourceDefaultEditorMode(QueryEditorMode.Code); renderWithDatasourceDefaultEditorMode(QueryEditorMode.Code);
expectCodeEditor(); await expectCodeEditor();
}); });
it('shows builder if no expr and nothing else since defaultEditor is builder', async () => { it('shows builder if no expr and nothing else since defaultEditor is builder', async () => {
renderWithDatasourceDefaultEditorMode(QueryEditorMode.Builder); renderWithDatasourceDefaultEditorMode(QueryEditorMode.Builder);
expectBuilder(); await expectBuilder();
}); });
it('shows code editor when code mode is set', async () => { it('shows code editor when code mode is set', async () => {
renderWithMode(QueryEditorMode.Code); renderWithMode(QueryEditorMode.Code);
expectCodeEditor(); await expectCodeEditor();
}); });
it('shows builder when builder mode is set', () => { it('shows builder when builder mode is set', async () => {
renderWithMode(QueryEditorMode.Builder); renderWithMode(QueryEditorMode.Builder);
expectBuilder(); await expectBuilder();
}); });
it('shows Run Queries button in Dashboards', () => { it('shows Run Queries button in Dashboards', async () => {
renderWithProps({}, { app: CoreApp.Dashboard }); renderWithProps({}, { app: CoreApp.Dashboard });
expectRunQueriesButton(); await expectRunQueriesButton();
}); });
it('hides Run Queries button in Explore', () => { it('hides Run Queries button in Explore', async () => {
renderWithProps({}, { app: CoreApp.Explore }); renderWithProps({}, { app: CoreApp.Explore });
await expectCodeEditor();
expectNoRunQueriesButton(); expectNoRunQueriesButton();
}); });
it('hides Run Queries button in Correlations Page', () => { it('hides Run Queries button in Correlations Page', async () => {
renderWithProps({}, { app: CoreApp.Correlations }); renderWithProps({}, { app: CoreApp.Correlations });
await expectCodeEditor();
expectNoRunQueriesButton(); expectNoRunQueriesButton();
}); });
@@ -159,7 +161,7 @@ describe('PromQueryEditorSelector', () => {
it('Can enable explain', async () => { it('Can enable explain', async () => {
renderWithMode(QueryEditorMode.Builder); renderWithMode(QueryEditorMode.Builder);
expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument(); expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
screen.getByLabelText('Explain').click(); await userEvent.click(screen.getByLabelText('Explain'));
expect(await screen.findByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument(); expect(await screen.findByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
}); });
@@ -228,16 +230,16 @@ function renderWithProps(overrides?: Partial<PromQuery>, componentProps: Partial
return { onChange, ...stuff }; return { onChange, ...stuff };
} }
function expectCodeEditor() { async function expectCodeEditor() {
expect(screen.getByText('MonacoQueryFieldWrapper')).toBeInTheDocument(); expect(await screen.findByText('MonacoQueryFieldWrapper')).toBeInTheDocument();
} }
function expectBuilder() { async function expectBuilder() {
expect(screen.getByText('Metric')).toBeInTheDocument(); expect(await screen.findByText('Metric')).toBeInTheDocument();
} }
function expectRunQueriesButton() { async function expectRunQueriesButton() {
expect(screen.getByRole('button', { name: /run queries/i })).toBeInTheDocument(); expect(await screen.findByRole('button', { name: /run queries/i })).toBeInTheDocument();
} }
function expectNoRunQueriesButton() { function expectNoRunQueriesButton() {

18
public/app/plugins/panel/alertGroups/AlertGroupsPanel.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, waitFor } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { byTestId } from 'testing-library-selector'; import { byTestId } from 'testing-library-selector';
@@ -116,10 +116,9 @@ describe('AlertGroupsPanel', () => {
}); });
it('renders the panel with the groups', async () => { it('renders the panel with the groups', async () => {
await renderPanel(); renderPanel();
await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled()); const groups = await ui.group.findAll();
const groups = ui.group.getAll();
expect(groups).toHaveLength(2); expect(groups).toHaveLength(2);
@@ -131,19 +130,16 @@ describe('AlertGroupsPanel', () => {
}); });
it('renders panel with groups expanded', async () => { it('renders panel with groups expanded', async () => {
await renderPanel({ labels: '', alertmanager: 'Alertmanager', expandAll: true }); renderPanel({ labels: '', alertmanager: 'Alertmanager', expandAll: true });
await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled()); const alerts = await ui.alert.findAll();
const alerts = ui.alert.queryAll();
expect(alerts).toHaveLength(3); expect(alerts).toHaveLength(3);
}); });
it('filters alerts by label filter', async () => { it('filters alerts by label filter', async () => {
await renderPanel({ labels: 'region=US-Central', alertmanager: 'Alertmanager', expandAll: true }); renderPanel({ labels: 'region=US-Central', alertmanager: 'Alertmanager', expandAll: true });
await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled());
const alerts = ui.alert.queryAll();
const alerts = await ui.alert.findAll();
expect(alerts).toHaveLength(2); expect(alerts).toHaveLength(2);
}); });
}); });

2
public/app/plugins/panel/flamegraph/components/FlameGraphHeader.test.tsx
View File

@@ -33,7 +33,7 @@ describe('FlameGraphHeader', () => {
render(<FlameGraphHeaderWithProps />); render(<FlameGraphHeaderWithProps />);
await userEvent.type(screen.getByPlaceholderText('Search..'), 'abc'); await userEvent.type(screen.getByPlaceholderText('Search..'), 'abc');
expect(screen.getByDisplayValue('abc')).toBeInTheDocument(); expect(screen.getByDisplayValue('abc')).toBeInTheDocument();
screen.getByRole('button', { name: /Reset/i }).click(); await userEvent.click(screen.getByRole('button', { name: /Reset/i }));
expect(screen.queryByDisplayValue('abc')).not.toBeInTheDocument(); expect(screen.queryByDisplayValue('abc')).not.toBeInTheDocument();
}); });
}); });