grafana_bak/public/app/features/trails/banners/NativeHistogramBanner.test.tsx
2025-04-01 10:38:02 +09:00

62 lines
2.5 KiB
TypeScript

import { render, screen, fireEvent } from '@testing-library/react';
import { DataTrail } from '../DataTrail';
import { MetricSelectedEvent } from '../shared';
import { NativeHistogramBanner } from './NativeHistogramBanner';
const mockTrail = {
publishEvent: jest.fn(),
} as unknown as DataTrail;
const mockProps = {
histogramsLoaded: true,
nativeHistograms: ['histogram1', 'histogram2'],
trail: mockTrail,
};
describe('NativeHistogramBanner', () => {
test('renders correctly when histograms are loaded', () => {
render(<NativeHistogramBanner {...mockProps} />);
expect(screen.getByText('Native Histogram Support')).toBeInTheDocument();
expect(
screen.getByText(
'Prometheus native histograms offer high resolution, high precision, simple usage in instrumentation and a way to combine and manipulate histograms in queries and in Grafana.'
)
).toBeInTheDocument();
});
test('Has a learn more button works', () => {
render(<NativeHistogramBanner {...mockProps} />);
const learnMoreButton = screen.getByText('Learn more');
expect(learnMoreButton).toBeInTheDocument();
});
test('See examples button works', () => {
render(<NativeHistogramBanner {...mockProps} />);
const seeExamplesButton = screen.getByText('> See examples');
expect(seeExamplesButton).toBeInTheDocument();
fireEvent.click(seeExamplesButton);
expect(screen.getByText('Native Histogram displayed as heatmap:')).toBeInTheDocument();
expect(screen.getByText('Native Histogram displayed as histogram:')).toBeInTheDocument();
expect(screen.getByText('Classic Histogram displayed as heatmap:')).toBeInTheDocument();
expect(screen.getByText('Classic Histogram displayed as histogram:')).toBeInTheDocument();
});
test('Native histograms buttons work', () => {
render(<NativeHistogramBanner {...mockProps} />);
fireEvent.click(screen.getByText('> See examples'));
const histogramButton = screen.getByText('histogram1');
expect(histogramButton).toBeInTheDocument();
fireEvent.click(histogramButton);
expect(mockTrail.publishEvent).toHaveBeenCalledWith(new MetricSelectedEvent('histogram1'), true);
});
test('Set that the banner has been shown in local storage when a user closes the banner', () => {
render(<NativeHistogramBanner {...mockProps} />);
// click the button with aria label "Close alert"
fireEvent.click(screen.getByLabelText('Close alert'));
expect(localStorage.getItem('nativeHistogramBanner')).toBe('true');
});
});