Zakaria
36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import {fireEvent, render, screen} from '@testing-library/react'
|
|
import {expect, test} from 'vitest'
|
|
import {MetricChart} from './MetricChart'
|
|
|
|
const series = {label: 'Errors', statistic: 'Sum', periodSeconds: 60, points: [
|
|
{timestamp: '2026-10-25T10:00:00Z', value: 3},
|
|
{timestamp: '2026-10-25T10:01:00Z', value: 7},
|
|
]}
|
|
|
|
test('draws the line, labels the latest value and the threshold, and tabulates the points', () => {
|
|
const {container} = render(<MetricChart series={series} threshold={5}/>)
|
|
|
|
expect(container.querySelector('.metric-chart-line')?.getAttribute('d')).toMatch(/^M[\d.]+,[\d.]+ L[\d.]+,[\d.]+$/)
|
|
expect(screen.getByText('Threshold 5')).toBeInTheDocument()
|
|
expect(screen.getByRole('img', {name: /Errors \(Sum\), 2 points; latest 7 .*threshold 5/})).toBeInTheDocument()
|
|
expect(screen.getByText('Data table (2 points)')).toBeInTheDocument()
|
|
expect(container.querySelectorAll('.metric-chart-table tbody tr')).toHaveLength(2)
|
|
})
|
|
|
|
test('shows the tooltip from the keyboard, value first', () => {
|
|
render(<MetricChart series={series}/>)
|
|
const chart = screen.getByRole('img')
|
|
|
|
fireEvent.focus(chart)
|
|
expect(screen.getByRole('status')).toHaveTextContent(/^7Errors · Sum/)
|
|
fireEvent.keyDown(chart, {key: 'ArrowLeft'})
|
|
expect(screen.getByRole('status')).toHaveTextContent(/^3/)
|
|
fireEvent.keyDown(chart, {key: 'Escape'})
|
|
expect(screen.queryByRole('status')).not.toBeInTheDocument()
|
|
})
|
|
|
|
test('says when there is no data', () => {
|
|
render(<MetricChart series={{...series, points: []}}/>)
|
|
expect(screen.getByText('No data points in this time range.')).toBeInTheDocument()
|
|
})
|