import React from 'react' ; import { fireEvent , screen , waitFor } from '@testing-library/react' ; import userEvent from '@testing-library/user-event' ; import { mockUxSeries , render } from '../../rtl_helpers' ; import { SeriesName } from './series_name' ; jest . mock ( '@elastic/eui/lib/services/accessibility/html_id_generator' , ( ) => ( { ... jest . requireActual ( '@elastic/eui/lib/services/accessibility/html_id_generator' ) , htmlIdGenerator : ( ) => ( ) => `id-${ Math . random ( ) }` , } ) ) ; describe ( 'SeriesName' , function ( ) { it ( 'should render properly' , async function ( ) { render ( < SeriesName seriesId = { 0 } series = { mockUxSeries } / > ) ; expect ( screen . getByText ( mockUxSeries . name ) ) . toBeInTheDocument ( ) ; } ) ; it ( 'should display input when editing name' , async function ( ) { render ( < SeriesName seriesId = { 0 } series = { mockUxSeries } / > ) ; let input = screen . queryByTestId ( 'exploratoryViewSeriesNameInput' ) as HTMLInputElement ; expect ( input ) . not . toBeInTheDocument ( ) ; const editButton = screen . getByRole ( 'button' ) ; fireEvent . click ( editButton ) ; await waitFor ( ( ) => { input = screen . getByTestId ( 'exploratoryViewSeriesNameInput' ) as HTMLInputElement ; expect ( input ) . toBeInTheDocument ( ) ; expect ( input . value ) . toBe ( mockUxSeries . name ) ; } ) ; fireEvent . click ( editButton ) ; await waitFor ( ( ) => { input = screen . queryByTestId ( 'exploratoryViewSeriesNameInput' ) as HTMLInputElement ; expect ( screen . getByText ( mockUxSeries . name ) ) . toBeInTheDocument ( ) ; expect ( input ) . not . toBeInTheDocument ( ) ; } ) ; } ) ; it ( 'should save name on enter key' , async function ( ) { const newName = '-test-new-name' ; render ( < SeriesName seriesId = { 0 } series = { mockUxSeries } / > ) ; let input = screen . queryByTestId ( 'exploratoryViewSeriesNameInput' ) as HTMLInputElement ; expect ( input ) . not . toBeInTheDocument ( ) ; const editButton = screen . getByRole ( 'button' ) ; userEvent . click ( editButton ) ; await waitFor ( ( ) => { input = screen . getByTestId ( 'exploratoryViewSeriesNameInput' ) as HTMLInputElement ; expect ( input ) . toBeInTheDocument ( ) ; } ) ; userEvent . click ( input ) ; userEvent . type ( input , newName ) ; userEvent . keyboard ( '{enter}' ) ; await waitFor ( ( ) => { input = screen . queryByTestId ( 'exploratoryViewSeriesNameInput' ) as HTMLInputElement ; expect ( screen . getByText ( `${ mockUxSeries . name }${ newName }` ) ) . toBeInTheDocument ( ) ; expect ( input ) . not . toBeInTheDocument ( ) ; } ) ; } ) ; } ) ;