import { screen } from '@testing-library/react' ; import userEvent from '@testing-library/user-event' ; import { mockConsoleMethod , queryVisSelector , renderApp , selectExplorerNode , } from '../test-utils' ; test ( 'switch between visualisations' , async ( ) => { await renderApp ( ) ; await selectExplorerNode ( 'nD_datasets/oneD' ) ; const lineTab = await screen . findByRole ( 'tab' , { name : 'Line' } ) ; expect ( lineTab ) . toBeVisible ( ) ; expect ( lineTab ) . toHaveAttribute ( 'aria-selected' , 'true' ) ; const matrixTab = screen . getByRole ( 'tab' , { name : 'Matrix' } ) ; expect ( matrixTab ) . toBeVisible ( ) ; expect ( matrixTab ) . toHaveAttribute ( 'aria-selected' , 'false' ) ; userEvent . click ( matrixTab ) ; expect ( screen . getByRole ( 'tab' , { name : 'Matrix' } ) ) . toHaveAttribute ( 'aria-selected' , 'true' ) ; expect ( screen . getByRole ( 'tab' , { name : 'Line' } ) ) . toHaveAttribute ( 'aria-selected' , 'false' ) ; } ) ; test ( 'show fallback message when no visualization is supported' , async ( ) => { await renderApp ( ) ; await selectExplorerNode ( 'entities' ) ; await expect ( screen . findByText ( 'No visualization available for this entity.' ) ) . resolves . toBeInTheDocument ( ) ; expect ( queryVisSelector ( ) ) . not . toBeInTheDocument ( ) ; } ) ; test ( 'show loader while fetching dataset value' , async ( ) => { jest . useFakeTimers ( 'modern' ) ; await renderApp ( ) ; await selectExplorerNode ( 'resilience/slow_value' ) ; await expect ( screen . findByText ( /Loading data/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByText ( /42/ ) ) . resolves . toBeVisible ( ) ; jest . runOnlyPendingTimers ( ) ; jest . useRealTimers ( ) ; } ) ; test ( "show error when dataset value can't be fetched" , async ( ) => { await renderApp ( ) ; const errorSpy = mockConsoleMethod ( 'error' ) ; await selectExplorerNode ( 'resilience/error_value' ) ; await expect ( screen . findByText ( 'error' ) ) . resolves . toBeVisible ( ) ; expect ( errorSpy ) . toHaveBeenCalledTimes ( 2 ) ; errorSpy . mockRestore ( ) ; await selectExplorerNode ( 'entities' ) ; await expect ( screen . findByText ( /No visualization/ ) ) . resolves . toBeVisible ( ) ; } ) ; test ( 'cancel and retry slow fetch of dataset value' , async ( ) => { jest . useFakeTimers ( 'modern' ) ; await renderApp ( ) ; await selectExplorerNode ( 'resilience/slow_value' ) ; await expect ( screen . findByText ( /Loading data/ ) ) . resolves . toBeVisible ( ) ; const errorSpy = mockConsoleMethod ( 'error' ) ; userEvent . click ( await screen . findByRole ( 'button' , { name : /Cancel/ } ) ) ; await expect ( screen . findByText ( 'Request cancelled' ) ) . resolves . toBeVisible ( ) ; expect ( errorSpy ) . toHaveBeenCalledTimes ( 2 ) ; errorSpy . mockRestore ( ) ; userEvent . click ( await screen . findByRole ( 'button' , { name : /Retry/ } ) ) ; await expect ( screen . findByText ( /Loading data/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByText ( /42/ ) ) . resolves . toBeVisible ( ) ; jest . runOnlyPendingTimers ( ) ; jest . useRealTimers ( ) ; } ) ; test ( 'cancel and retry slow fetch of dataset slice' , async ( ) => { jest . useFakeTimers ( 'modern' ) ; await renderApp ( ) ; await selectExplorerNode ( 'resilience/slow_slicing' ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; const errorSpy = mockConsoleMethod ( 'error' ) ; userEvent . click ( await screen . findByRole ( 'button' , { name : /Cancel/ } ) ) ; await expect ( screen . findByText ( 'Request cancelled' ) ) . resolves . toBeVisible ( ) ; expect ( errorSpy ) . toHaveBeenCalledTimes ( 2 ) ; errorSpy . mockRestore ( ) ; userEvent . click ( await screen . findByRole ( 'button' , { name : /Retry/ } ) ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByRole ( 'figure' ) ) . resolves . toBeVisible ( ) ; jest . runOnlyPendingTimers ( ) ; jest . useRealTimers ( ) ; } ) ; test ( 'retry fetching automatically when re-selecting dataset' , async ( ) => { jest . useFakeTimers ( 'modern' ) ; await renderApp ( ) ; await selectExplorerNode ( 'resilience/slow_value' ) ; await expect ( screen . findByText ( /Loading data/ ) ) . resolves . toBeVisible ( ) ; const errorSpy = mockConsoleMethod ( 'error' ) ; userEvent . click ( await screen . findByRole ( 'button' , { name : /Cancel/ } ) ) ; await expect ( screen . findByText ( 'Request cancelled' ) ) . resolves . toBeVisible ( ) ; errorSpy . mockRestore ( ) ; await selectExplorerNode ( 'entities' ) ; await expect ( screen . findByText ( /No visualization/ ) ) . resolves . toBeVisible ( ) ; await selectExplorerNode ( 'slow_value' ) ; await expect ( screen . findByText ( /Loading data/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByText ( /42/ ) ) . resolves . toBeVisible ( ) ; jest . runOnlyPendingTimers ( ) ; jest . useRealTimers ( ) ; } ) ; test ( 'retry fetching dataset slice automatically when re-selecting slice' , async ( ) => { jest . useFakeTimers ( 'modern' ) ; await renderApp ( ) ; await selectExplorerNode ( 'resilience/slow_slicing' ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; const errorSpy = mockConsoleMethod ( 'error' ) ; userEvent . click ( await screen . findByRole ( 'button' , { name : /Cancel/ } ) ) ; await expect ( screen . findByText ( 'Request cancelled' ) ) . resolves . toBeVisible ( ) ; expect ( errorSpy ) . toHaveBeenCalledTimes ( 2 ) ; errorSpy . mockRestore ( ) ; const d0Slider = screen . getByRole ( 'slider' , { name : 'Dimension slider' } ) ; d0Slider . focus ( ) ; userEvent . keyboard ( '{ArrowUp}' ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByRole ( 'figure' ) ) . resolves . toBeVisible ( ) ; userEvent . keyboard ( '{ArrowDown}' ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; d0Slider . blur ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByRole ( 'figure' ) ) . resolves . toBeVisible ( ) ; jest . runOnlyPendingTimers ( ) ; jest . useRealTimers ( ) ; } ) ; test ( 'cancel fetching dataset slice when changing entity' , async ( ) => { jest . useFakeTimers ( 'modern' ) ; await renderApp ( ) ; await selectExplorerNode ( 'resilience/slow_slicing' ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; await selectExplorerNode ( 'resilience/slow_value' ) ; await expect ( screen . findByText ( /Loading data/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await selectExplorerNode ( 'resilience/slow_slicing' ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByRole ( 'figure' ) ) . resolves . toBeVisible ( ) ; jest . runOnlyPendingTimers ( ) ; jest . useRealTimers ( ) ; } ) ; test ( 'cancel fetching dataset slice when changing vis' , async ( ) => { jest . useFakeTimers ( 'modern' ) ; await renderApp ( ) ; await selectExplorerNode ( 'resilience/slow_slicing' ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; userEvent . click ( screen . getByRole ( 'tab' , { name : 'Line' } ) ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByRole ( 'figure' ) ) . resolves . toBeVisible ( ) ; userEvent . click ( screen . getByRole ( 'tab' , { name : 'Heatmap' } ) ) ; await expect ( screen . findByText ( /Loading current slice/ ) ) . resolves . toBeVisible ( ) ; jest . runAllTimers ( ) ; await expect ( screen . findByRole ( 'figure' ) ) . resolves . toBeVisible ( ) ; jest . runOnlyPendingTimers ( ) ; jest . useRealTimers ( ) ; } ) ;