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();
render(<ColorPickerInput onChange={mockOnChange} />);
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());
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 { RelativeTimeRange } from '@grafana/data';
@@ -20,10 +21,10 @@ describe('RelativeTimePicker', () => {
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 });
fireEvent.click(getByText('now-15m to now'));
await userEvent.click(getByText('now-15m to now'));
expect(getByText('Specify time range')).toBeInTheDocument();
expect(getByText('Example time ranges')).toBeInTheDocument();
@@ -35,11 +36,11 @@ describe('RelativeTimePicker', () => {
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 });
fireEvent.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('now-15m to now')); // open the picker
await userEvent.click(getByText('Last 30 minutes')); // select the quick range, should close picker.
expect(queryByText('Specify time range')).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}
{...restProps}
>
{value?.label || value?.value}
{value?.label || (value?.value != null ? String(value?.value) : null)}
</ToolbarButton>
{state.isOpen && (
<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} />);
const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT);
await userEvent.type(inputEl, 'abcde');
inputEl.blur();
// blur the field
await userEvent.click(document.body);
await screen.findByText(TEST_ERROR_MESSAGE);
});
@@ -37,7 +38,8 @@ describe('Input', () => {
render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />);
const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT);
await userEvent.type(inputEl, 'Hi');
inputEl.blur();
// blur the field
await userEvent.click(document.body);
const errorMessage = screen.queryByText(TEST_ERROR_MESSAGE);
expect(errorMessage).not.toBeInTheDocument();
});

32
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 React from 'react';
@@ -17,9 +17,9 @@ describe('Toggletip', () => {
);
expect(screen.getByText('Click me!')).toBeInTheDocument();
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 () => {
@@ -32,17 +32,15 @@ describe('Toggletip', () => {
</Toggletip>
);
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');
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 () => {
@@ -55,17 +53,13 @@ describe('Toggletip', () => {
</Toggletip>
);
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, {
code: 'Escape',
key: 'Escape',
keyCode: 27,
});
await userEvent.keyboard('{escape}');
await waitFor(() => expect(closeSpy).toHaveBeenCalledTimes(1));
expect(closeSpy).toHaveBeenCalledTimes(1);
});
it('should display the toogletip after press ENTER', async () => {
@@ -83,8 +77,8 @@ describe('Toggletip', () => {
// open toggletip with enter
const button = screen.getByTestId('myButton');
button.focus();
userEvent.keyboard('{enter}');
await userEvent.keyboard('{enter}');
await waitFor(() => expect(screen.getByTestId('toggletip-content')).toBeInTheDocument());
expect(screen.getByTestId('toggletip-content')).toBeInTheDocument();
});
});