Fix last tests

public/app/plugins/datasource/jaeger/components/SearchForm.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { createFetchResponse } from 'test/helpers/createFetchResponse';
 import { DataQueryRequest, DataSourceInstanceSettings, dateTime, PluginType } from '@grafana/data';
@@ -9,6 +9,7 @@ import React from 'react';
 import SearchForm from './SearchForm';
 import { testResponse } from '../testResponse';
 import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup';
 
 describe('SearchForm', () => {
   it('should call the `onChange` function on click of the Input', async () => {
@@ -68,13 +69,21 @@ describe('SearchForm', () => {
 });
 
 describe('SearchForm', () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    // Need to use delay: null here to work with fakeTimers
+    // see https://github.com/testing-library/user-event/issues/833
+    user = userEvent.setup({ delay: null });
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('should show loader if there is a delay fetching options', async () => {
-    const promise = Promise.resolve();
-    const handleOnChange = jest.fn(() => {
-      setTimeout(() => {
-        return promise;
-      }, 3000);
-    });
+    const handleOnChange = jest.fn();
     const query = {
       ...defaultQuery,
       targets: [
@@ -91,12 +100,19 @@ describe('SearchForm', () => {
 
     render(<SearchForm datasource={ds} query={query} onChange={handleOnChange} />);
 
+    jest.spyOn(ds, 'metadataRequest').mockImplementation(() => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(['jaeger-query']);
+        }, 3000);
+      });
+    });
     const asyncServiceSelect = screen.getByRole('combobox', { name: 'select-service-name' });
-    await userEvent.click(asyncServiceSelect);
-    const loader = screen.getByText('Loading options...');
+    await user.click(asyncServiceSelect);
+    expect(screen.getByText('Loading options...')).toBeInTheDocument();
 
-    expect(loader).toBeInTheDocument();
-    await act(() => promise);
+    jest.advanceTimersByTime(3000);
+    await waitFor(() => expect(screen.queryByText('Loading options...')).not.toBeInTheDocument());
   });
 });
 

public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx

@@ -1,20 +1,25 @@
 import NativeSearch from './NativeSearch';
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { TempoDatasource, TempoQuery } from '../datasource';
 import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup';
 
 const getOptions = jest.fn().mockImplementation(() => {
-  return Promise.resolve([
-    {
-      value: 'customer',
-      label: 'customer',
-    },
-    {
-      value: 'driver',
-      label: 'driver',
-    },
-  ]);
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        {
+          value: 'customer',
+          label: 'customer',
+        },
+        {
+          value: 'driver',
+          label: 'driver',
+        },
+      ]);
+    }, 1000);
+  });
 });
 
 jest.mock('../language_provider', () => {
@@ -31,6 +36,36 @@ const mockQuery = {
 } as TempoQuery;
 
 describe('NativeSearch', () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    // Need to use delay: null here to work with fakeTimers
+    // see https://github.com/testing-library/user-event/issues/833
+    user = userEvent.setup({ delay: null });
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should show loader when there is a delay', async () => {
+    render(
+      <NativeSearch datasource={{} as TempoDatasource} query={mockQuery} onChange={jest.fn()} onRunQuery={jest.fn()} />
+    );
+
+    const asyncServiceSelect = screen.getByRole('combobox', { name: 'select-span-name' });
+
+    await user.click(asyncServiceSelect);
+    const loader = screen.getByText('Loading options...');
+
+    expect(loader).toBeInTheDocument();
+
+    jest.advanceTimersByTime(1000);
+
+    await waitFor(() => expect(screen.queryByText('Loading options...')).not.toBeInTheDocument());
+  });
+
   it('should call the `onChange` function on click of the Input', async () => {
     const promise = Promise.resolve();
     const handleOnChange = jest.fn(() => promise);
@@ -54,56 +89,12 @@ describe('NativeSearch', () => {
     const asyncServiceSelect = await screen.findByRole('combobox', { name: 'select-span-name' });
 
     expect(asyncServiceSelect).toBeInTheDocument();
-    await userEvent.click(asyncServiceSelect);
+    await user.click(asyncServiceSelect);
+    jest.advanceTimersByTime(1000);
 
     const driverOption = await screen.findByText('driver');
-    await userEvent.click(driverOption);
+    await user.click(driverOption);
 
     expect(handleOnChange).toHaveBeenCalledWith(fakeOptionChoice);
   });
 });
-
-describe('TempoLanguageProvider with delay', () => {
-  const getOptions2 = jest.fn().mockImplementation(() => {
-    return Promise.resolve([
-      {
-        value: 'customer',
-        label: 'customer',
-      },
-      {
-        value: 'driver',
-        label: 'driver',
-      },
-    ]);
-  });
-
-  jest.mock('../language_provider', () => {
-    return jest.fn().mockImplementation(() => {
-      setTimeout(() => {
-        return { getOptions2 };
-      }, 3000);
-    });
-  });
-
-  it('should show loader', async () => {
-    const promise = Promise.resolve();
-    const handleOnChange = jest.fn(() => promise);
-
-    render(
-      <NativeSearch
-        datasource={{} as TempoDatasource}
-        query={mockQuery}
-        onChange={handleOnChange}
-        onRunQuery={() => {}}
-      />
-    );
-
-    const asyncServiceSelect = screen.getByRole('combobox', { name: 'select-span-name' });
-
-    await userEvent.click(asyncServiceSelect);
-    const loader = screen.getByText('Loading options...');
-
-    expect(loader).toBeInTheDocument();
-    await act(() => promise);
-  });
-});