import {render, screen} from 'sentry-test/reactTestingLibrary'; import {DurationUnit, RateUnit, SizeUnit} from 'sentry/utils/discover/fields'; import {MetricReadout} from 'sentry/views/performance/metricReadout'; describe('MetricReadout', function () { it('shows a loading spinner if data is loading', () => { render( ); expect(screen.getByText('Duration')).toBeInTheDocument(); expect(screen.getByTestId('loading-indicator')).toBeInTheDocument(); }); it('shows placeholder text if data is missing', () => { render( ); expect(screen.getByRole('heading', {name: 'Duration'})).toBeInTheDocument(); expect(screen.getByText('--')).toBeInTheDocument(); }); it('parses strings', () => { render(); expect(screen.getByRole('heading', {name: 'Rate'})).toBeInTheDocument(); expect(screen.getByText('17.8/min')).toBeInTheDocument(); }); it('renders rates', () => { render(); expect(screen.getByRole('heading', {name: 'Rate'})).toBeInTheDocument(); expect(screen.getByText('17.8/min')).toBeInTheDocument(); }); it('limits smallest rate', () => { render(); expect(screen.getByRole('heading', {name: 'Rate'})).toBeInTheDocument(); expect(screen.getByText('<0.01/min')).toBeInTheDocument(); }); it('renders milliseconds', () => { render( ); expect(screen.getByRole('heading', {name: 'Duration'})).toBeInTheDocument(); expect(screen.getByText('2.58d')).toBeInTheDocument(); }); it('renders bytes', () => { render(); expect(screen.getByRole('heading', {name: 'Size'})).toBeInTheDocument(); expect(screen.getByText('1.1 MiB')).toBeInTheDocument(); }); it('renders percentages', () => { render(); expect(screen.getByRole('heading', {name: 'Percentage'})).toBeInTheDocument(); expect(screen.getByText('23.52%')).toBeInTheDocument(); }); it('limits smallest percentage', () => { render(); expect(screen.getByRole('heading', {name: 'Percentage'})).toBeInTheDocument(); expect(screen.getByText('<0.01%')).toBeInTheDocument(); }); describe('percent_change', () => { it('renders negative percent change', () => { render( ); expect(screen.getByRole('heading', {name: '% Difference'})).toBeInTheDocument(); expect(screen.getByText('-23.52%')).toBeInTheDocument(); }); it('renders positive percent change', () => { render(); expect(screen.getByRole('heading', {name: '% Difference'})).toBeInTheDocument(); expect(screen.getByText('+5.52%')).toBeInTheDocument(); }); it('respects preferred negative polarity', () => { render( ); expect(screen.getByText('+5.52%')).toHaveAttribute('data-rating', 'bad'); }); it('respects preferred default polarity', () => { render(); expect(screen.getByText('+5.52%')).toHaveAttribute('data-rating', 'good'); }); }); it('renders counts', () => { render(); expect(screen.getByRole('heading', {name: 'Count'})).toBeInTheDocument(); expect(screen.getByText('7.8m')).toBeInTheDocument(); }); });