68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
|
|
import { afterEach, describe, expect, it } from 'vitest'
|
|
import { AiPipelineIllustration } from './AiPipelineIllustration'
|
|
|
|
afterEach(cleanup)
|
|
|
|
describe('AiPipelineIllustration', () => {
|
|
it('shows the real readiness state and explains the selected stage', () => {
|
|
render(
|
|
<AiPipelineIllustration
|
|
hasImagery
|
|
hasTiles
|
|
gpuReady
|
|
hasDetections={false}
|
|
hasQualityEvidence={false}
|
|
running={false}
|
|
/>,
|
|
)
|
|
|
|
expect(screen.getByText('GPU gereed')).toBeTruthy()
|
|
expect(screen.getByRole('tab', { name: /Detecties/ }).textContent).toContain('volgende stap')
|
|
|
|
fireEvent.click(screen.getByRole('tab', { name: /Berekening/ }))
|
|
expect(screen.getByRole('tabpanel').textContent).toContain('De herkenning draait lokaal')
|
|
})
|
|
|
|
it('moves selection and focus through the tablist with keyboard controls', () => {
|
|
render(
|
|
<AiPipelineIllustration
|
|
hasImagery
|
|
hasTiles
|
|
gpuReady
|
|
hasDetections={false}
|
|
hasQualityEvidence={false}
|
|
running={false}
|
|
/>,
|
|
)
|
|
|
|
const tabs = screen.getAllByRole('tab') as HTMLButtonElement[]
|
|
const selectedTab = screen.getByRole('tab', { name: /Detecties/ }) as HTMLButtonElement
|
|
const panel = screen.getByRole('tabpanel')
|
|
|
|
expect(selectedTab.tabIndex).toBe(0)
|
|
expect(tabs.filter((tab) => tab.tabIndex === 0)).toHaveLength(1)
|
|
expect(selectedTab.getAttribute('aria-controls')).toBe(panel.id)
|
|
expect(panel.getAttribute('aria-labelledby')).toBe(selectedTab.id)
|
|
|
|
selectedTab.focus()
|
|
fireEvent.keyDown(selectedTab, { key: 'ArrowRight' })
|
|
expect(screen.getByRole('tab', { name: /QA-bewijs/ }).getAttribute('aria-selected')).toBe('true')
|
|
expect(document.activeElement).toBe(screen.getByRole('tab', { name: /QA-bewijs/ }))
|
|
|
|
fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowRight' })
|
|
expect(document.activeElement).toBe(screen.getByRole('tab', { name: /Orthofoto/ }))
|
|
|
|
fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'End' })
|
|
expect(document.activeElement).toBe(screen.getByRole('tab', { name: /QA-bewijs/ }))
|
|
|
|
fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'Home' })
|
|
expect(document.activeElement).toBe(screen.getByRole('tab', { name: /Orthofoto/ }))
|
|
|
|
fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowLeft' })
|
|
const wrappedTab = screen.getByRole('tab', { name: /QA-bewijs/ })
|
|
expect(document.activeElement).toBe(wrappedTab)
|
|
expect(screen.getByRole('tabpanel').getAttribute('aria-labelledby')).toBe(wrappedTab.id)
|
|
})
|
|
})
|