import { getByTestId , fireEvent , getByText } from '@testing-library/react' ; import { createMemoryHistory , MemoryHistory } from 'history' ; import React from 'react' ; import { Router } from 'react-router-dom' ; import { createKibanaReactContext } from 'src/plugins/kibana_react/public' ; import { MockApmPluginContextWrapper } from '../../context/apm_plugin/mock_apm_plugin_context' ; import { ApmServiceContextProvider } from '../../context/apm_service/apm_service_context' ; import { UrlParamsProvider } from '../../context/url_params_context/url_params_context' ; import type { ApmUrlParams } from '../../context/url_params_context/types' ; import * as useFetcherHook from '../../hooks/use_fetcher' ; import * as useServiceTransactionTypesHook from '../../context/apm_service/use_service_transaction_types_fetcher' ; import { renderWithTheme } from '../../utils/testHelpers' ; import { fromQuery } from './links/url_helpers' ; import { CoreStart } from 'kibana/public' ; import { SearchBar } from './search_bar' ; function setup ( { urlParams , serviceTransactionTypes , history , } ) { history . replace ( { pathname : '/services/foo/transactions' , search : fromQuery ( urlParams ) , } ) ; const KibanaReactContext = createKibanaReactContext ( { usageCollection : { reportUiCounter : ( ) => { } } , } as Partial < CoreStart > ) ; jest . spyOn ( useServiceTransactionTypesHook , 'useServiceTransactionTypesFetcher' ) . mockReturnValue ( serviceTransactionTypes ) ; jest . spyOn ( useFetcherHook , 'useFetcher' ) . mockReturnValue ( { } as any ) ; return renderWithTheme ( < KibanaReactContext . Provider > < MockApmPluginContextWrapper > < Router history = { history } > < UrlParamsProvider > < ApmServiceContextProvider > < SearchBar showTransactionTypeSelector / > < /ApmServiceContextProvider> < /UrlParamsProvider> < /Router> < /MockApmPluginContextWrapper> < /KibanaReactContext.Provider>); } describe ( 'when transactionType is selected and multiple transaction types are given' , ( ) => { let history ; beforeEach ( ( ) => { history = createMemoryHistory ( ) ; jest . spyOn ( history , 'push' ) ; jest . spyOn ( history , 'replace' ) ; } ) ; it ( 'renders a radio group with transaction types' , ( ) => { const { container } = setup ( { history , serviceTransactionTypes : [ 'firstType' , 'secondType' ] , urlParams : { transactionType : 'secondType' , rangeFrom : 'now-15m' , rangeTo : 'now' , } , } ) ; const dropdown = getByTestId ( container , 'headerFilterTransactionType' ) ; expect ( getByText ( dropdown , 'firstType' ) ) . toBeInTheDocument ( ) ; expect ( getByText ( dropdown , 'secondType' ) ) . toBeInTheDocument ( ) ; expect ( dropdown ) . toHaveValue ( 'secondType' ) ; } ) ; it ( 'should update the URL when a transaction type is selected' , ( ) => { const { container } = setup ( { history , serviceTransactionTypes : [ 'firstType' , 'secondType' ] , urlParams : { transactionType : 'secondType' , rangeFrom : 'now-15m' , rangeTo : 'now' , } , } ) ; expect ( history . location . search ) . toEqual ( '?transactionType=secondType&rangeFrom=now-15m&rangeTo=now' ) ; const dropdown = getByTestId ( container , 'headerFilterTransactionType' ) ; expect ( getByText ( dropdown , 'firstType' ) ) . toBeInTheDocument ( ) ; expect ( getByText ( dropdown , 'secondType' ) ) . toBeInTheDocument ( ) ; fireEvent . change ( dropdown , { target : { value : 'firstType' } } ) ; expect ( dropdown ) . toHaveValue ( 'firstType' ) ; expect ( history . push ) . toHaveBeenCalled ( ) ; expect ( history . location . search ) . toEqual ( '?transactionType=firstType&rangeFrom=now-15m&rangeTo=now' ) ; } ) ; } ) ;