import React from 'react'
import { render } from '@testing-library/react'

import { Diagnostics } from '~/src/types/diagnostics'
import { inspector, InspectorShell } from '../src/index'


jest.mock('@segment/analytics-react', () => ({
  useAnalytics: () => ({
    page: jest.fn(),
    addSourceMiddleware: jest.fn()
  })
}))

describe('Diagnostics View', () => {
  const mockDiagnostics: Diagnostics = {
    writeKey: 'Df2O5pN98DxX345uiEDnmM2',
    analyticsVersion: '1.42.3',
    hostname: 'localhost9000',
    failedIntegrations: ['keen'],
    integrations: [
      { name: 'Braze Web Mode', type: 'destination', version: '0.1.0' },
      { name: 'Mixpanel', type: 'destination', version: '0.1.0' },
      { name: 'Google Analytics', type: 'destination', version: '0.1.0' }
    ]
  }

  it('should not display empty integrations', () => {
    inspector.start()
    inspector.setDiagnostics({
      ...mockDiagnostics,
      integrations: [],
      failedIntegrations: []
    })
    const screen = render(<InspectorShell landingPage='diagnostics' />)

    expect(screen.queryByText('Active integrations')).not.toBeInTheDocument()
    expect(screen.queryByText('Failed integrations')).not.toBeInTheDocument()
  })

  it('should display loaded integrations and settings', () => {
    inspector.start()
    inspector.setDiagnostics(mockDiagnostics)
    const screen = render(<InspectorShell landingPage='diagnostics' />)

    expect(screen.getByRole('heading', { name: /settings/i })).toBeInTheDocument()
    expect(screen.getByText(/write key/i)).toBeInTheDocument()
    expect(screen.getByText('Df2O5pN98DxX345uiEDnmM2')).toBeInTheDocument()

    expect(screen.getByRole('heading', { name: 'Active integrations' })).toBeInTheDocument()
    expect(screen.getByText(/braze/i)).toBeInTheDocument()

    expect(screen.getByRole('heading', { name: 'Failed integrations' })).toBeInTheDocument()
    expect(screen.getByText(/keen/i)).toBeInTheDocument()
  })
})