From 7a28f8974f115a68bc8465b2806d243a39ec81f3 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 19 Apr 2022 17:09:25 +0100 Subject: [PATCH] Fix last tests --- .../jaeger/components/SearchForm.test.tsx | 38 +++++-- .../tempo/QueryEditor/NativeSearch.test.tsx | 107 ++++++++---------- 2 files changed, 76 insertions(+), 69 deletions(-) diff --git a/public/app/plugins/datasource/jaeger/components/SearchForm.test.tsx b/public/app/plugins/datasource/jaeger/components/SearchForm.test.tsx index 67c4031d6fa..f7059afb903 100644 --- a/public/app/plugins/datasource/jaeger/components/SearchForm.test.tsx +++ b/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(); + 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()); }); }); diff --git a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx index b4d134167f1..f8372122399 100644 --- a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx +++ b/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( + + ); + + 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( - {}} - /> - ); - - 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); - }); -});