import React from 'react' import { render, createEvent, fireEvent, act, screen, within, waitFor } from '@testing-library/react' import { catchConsoleError, catchConsoleLog } from '../testHelpers' import Provider from './Provider' import IndexesHandler from './IndexesHandler' /* * TODO: * - Mock backend handlers and test it's methods have been called * - Test side effects removal on unmount * - Integration: Test actual data has been downloaded, parsed and cached * */ // Mock the <Loading/> component jest.mock('../Loading', () => { return { __esModule: true, default: (props) => <div role='loading'>Loading</div> } }) test('fails to render without the context providers', async () => { // No provider at all const { output } = await catchConsoleError(async () => { expect(() => render(<IndexesHandler />)).toThrowError() }) expect(output[1].includes('Handler must be used within a')).toBe(true) }) test('fails to render without the context providers', async () => { // No provider at all const { output } = await catchConsoleError(async () => { expect(() => render(<IndexesHandler />)).toThrowError() }) expect(output[1].includes('Handler must be used within a')).toBe(true) }) test('renders properly when rendered inside the multi-provider', async () => { // Discard some logs await catchConsoleLog(async () => { const rendered = render( <Provider> <IndexesHandler> <span role='child' /> </IndexesHandler> </Provider> ) // Initially show a Loading component const loading = rendered.getByRole('loading') expect(loading).toBeInTheDocument() // Then the child component await waitFor(() => { const child = rendered.getByRole('child') expect(child).toBeInTheDocument() }) // TODO: Test clearing side effects rendered.unmount() }) })