grafana/public/app/features/explore/TraceView/TraceViewContainer.test.tsx

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { Provider } from 'react-redux';

import { configureStore } from '../../../store/configureStore';

import { frameOld } from './TraceView.test';
import { TraceViewContainer } from './TraceViewContainer';

jest.mock('@grafana/runtime', () => {
  return {
    ...jest.requireActual('@grafana/runtime'),
    reportInteraction: jest.fn(),
  };
});

function renderTraceViewContainer(frames = [frameOld]) {
  const store = configureStore();

  const { container, baseElement } = render(
    <Provider store={store}>
      <TraceViewContainer exploreId="left" dataFrames={frames} splitOpenFn={() => {}} />
    </Provider>
  );
  return {
    header: container.children[0],
    timeline: container.children[1],
    container,
    baseElement,
  };
}

describe('TraceViewContainer', () => {
  let user: ReturnType<typeof userEvent.setup>;
  beforeEach(() => {
    jest.useFakeTimers();
    // Need to use delay: null here to work with fakeTimers
    // see https://github.com/testing-library/user-event/issues/833
    user = userEvent.setup({ delay: null });
  });
  afterEach(() => {
    jest.useRealTimers();
  });

  it('toggles children visibility', async () => {
    renderTraceViewContainer();
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3);
    await user.click(screen.getAllByText('', { selector: 'span[data-testid="SpanTreeOffset--indentGuide"]' })[0]);
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(1);

    await user.click(screen.getAllByText('', { selector: 'span[data-testid="SpanTreeOffset--indentGuide"]' })[0]);
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3);
  });

  it('toggles collapses and expands one level of spans', async () => {
    renderTraceViewContainer();
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3);
    await user.click(screen.getByLabelText('Collapse +1'));
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(2);
    await user.click(screen.getByLabelText('Expand +1'));
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3);
  });

  it('toggles collapses and expands all levels', async () => {
    renderTraceViewContainer();
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3);
    await user.click(screen.getByLabelText('Collapse All'));
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(1);
    await user.click(screen.getByLabelText('Expand All'));
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3);
  });

  it('can select next/prev results', async () => {
    renderTraceViewContainer();
    const spanFiltersButton = screen.getByRole('button', { name: 'Span Filters 3 spans Prev Next' });
    await user.click(spanFiltersButton);

    const nextResultButton = screen.getByRole('button', { name: 'Next result button' });
    const prevResultButton = screen.getByRole('button', { name: 'Prev result button' });
    expect(nextResultButton.getAttribute('tabindex')).toBe('-1');
    expect(prevResultButton.getAttribute('tabindex')).toBe('-1');

    await user.click(screen.getByLabelText('Select tag key'));
    const tagOption = screen.getByText('component');
    await waitFor(() => expect(tagOption).toBeInTheDocument());
    await user.click(tagOption);

    await waitFor(() => {
      expect(
        screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[0].parentElement!.className
      ).toContain('rowMatchingFilter');
      expect(
        screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[1].parentElement!.className
      ).toContain('rowMatchingFilter');
      expect(
        screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[2].parentElement!.className
      ).toContain('rowMatchingFilter');
    });

    expect(nextResultButton.getAttribute('tabindex')).toBe('0');
    expect(prevResultButton.getAttribute('tabindex')).toBe('0');
    await user.click(nextResultButton);
    await waitFor(() => {
      expect(
        screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[0].parentElement!.className
      ).toContain('rowFocused');
    });
    await user.click(nextResultButton);
    await waitFor(() => {
      expect(
        screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[1].parentElement!.className
      ).toContain('rowFocused');
    });
    await user.click(prevResultButton);
    await waitFor(() => {
      expect(
        screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[0].parentElement!.className
      ).toContain('rowFocused');
    });
  });

  it('show matches only works as expected', async () => {
    renderTraceViewContainer();
    const spanFiltersButton = screen.getByRole('button', { name: 'Span Filters 3 spans Prev Next' });
    await user.click(spanFiltersButton);

    await user.click(screen.getByLabelText('Select tag key'));
    const tagOption = screen.getByText('http.status_code');
    await waitFor(() => expect(tagOption).toBeInTheDocument());
    await user.click(tagOption);

    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3);
    const matchesSwitch = screen.getByRole('checkbox', { name: 'Show matches only switch' });
    expect(matchesSwitch).toBeInTheDocument();
    await user.click(matchesSwitch);
    expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(1);
  });
});