sentry/static/app/views/explore/hooks/useAddToDashboard.spec.tsx

import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';

import {openAddToDashboardModal} from 'sentry/actionCreators/modal';
import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
import {
  PageParamsProvider,
  useSetExploreMode,
  useSetExploreVisualizes,
} from 'sentry/views/explore/contexts/pageParamsContext';
import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
import {useAddToDashboard} from 'sentry/views/explore/hooks/useAddToDashboard';
import {ChartType} from 'sentry/views/insights/common/components/chart';

jest.mock('sentry/actionCreators/modal');

describe('AddToDashboardButton', () => {
  let setMode: ReturnType<typeof useSetExploreMode>;
  let setVisualizes: ReturnType<typeof useSetExploreVisualizes>;

  function TestPage({visualizeIndex}: {visualizeIndex: number}) {
    setMode = useSetExploreMode();
    setVisualizes = useSetExploreVisualizes();
    const {addToDashboard} = useAddToDashboard();
    return (
      <button onClick={() => addToDashboard(visualizeIndex)}>Add to Dashboard</button>
    );
  }

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('opens the dashboard modal with the correct query for samples mode', async () => {
    render(
      <PageParamsProvider>
        <TestPage visualizeIndex={0} />
      </PageParamsProvider>
    );

    await userEvent.click(screen.getByText('Add to Dashboard'));

    // The table columns are encoded as the fields for the defaultWidgetQuery
    expect(openAddToDashboardModal).toHaveBeenCalledWith(
      expect.objectContaining({
        // For Add + Stay on Page
        widget: {
          title: 'Custom Widget',
          displayType: DisplayType.LINE,
          interval: undefined,
          limit: undefined,
          widgetType: WidgetType.SPANS,
          queries: [
            {
              aggregates: ['avg(span.duration)'],
              columns: [],
              fields: ['avg(span.duration)'],
              conditions: '',
              orderby: '-timestamp',
              name: '',
            },
          ],
        },

        // For Open in Widget Builder
        widgetAsQueryParams: expect.objectContaining({
          dataset: WidgetType.SPANS,
          defaultTableColumns: [
            'id',
            'span.op',
            'span.description',
            'span.duration',
            'transaction',
            'timestamp',
          ],
          defaultTitle: 'Custom Widget',
          defaultWidgetQuery:
            'name=&aggregates=avg(span.duration)&columns=&fields=avg(span.duration)&conditions=&orderby=-timestamp',
          displayType: DisplayType.LINE,
          field: [
            'id',
            'span.op',
            'span.description',
            'span.duration',
            'transaction',
            'timestamp',
          ],
        }),
      })
    );
  });

  it.each([
    {
      chartType: ChartType.AREA,
      expectedDisplayType: DisplayType.AREA,
    },
    {
      chartType: ChartType.BAR,
      expectedDisplayType: DisplayType.BAR,
    },
    {
      chartType: ChartType.LINE,
      expectedDisplayType: DisplayType.LINE,
    },
  ])(
    'opens the dashboard modal with display type $expectedDisplayType for chart type $chartType',
    async ({chartType, expectedDisplayType}) => {
      render(
        <PageParamsProvider>
          <TestPage visualizeIndex={1} />
        </PageParamsProvider>,
        {disableRouterMocks: true}
      );

      act(() =>
        setVisualizes([
          {
            yAxes: ['avg(span.duration)'],
            chartType: ChartType.AREA,
          },
          {
            yAxes: ['max(span.duration)'],
            chartType,
          },
        ])
      );

      await userEvent.click(screen.getByText('Add to Dashboard'));

      // The group by and the yAxes are encoded as the fields for the defaultTableQuery
      expect(openAddToDashboardModal).toHaveBeenCalledWith(
        expect.objectContaining({
          // For Add + Stay on Page
          widget: {
            title: 'Custom Widget',
            displayType: expectedDisplayType,
            interval: undefined,
            limit: undefined,
            widgetType: WidgetType.SPANS,
            queries: [
              {
                aggregates: ['max(span.duration)'],
                columns: [],
                fields: ['max(span.duration)'],
                conditions: '',
                orderby: '-timestamp',
                name: '',
              },
            ],
          },

          // For Open in Widget Builder
          widgetAsQueryParams: expect.objectContaining({
            dataset: WidgetType.SPANS,
            defaultTableColumns: [
              'id',
              'span.op',
              'span.description',
              'span.duration',
              'transaction',
              'timestamp',
            ],
            defaultTitle: 'Custom Widget',
            defaultWidgetQuery:
              'name=&aggregates=max(span.duration)&columns=&fields=max(span.duration)&conditions=&orderby=-timestamp',
            displayType: expectedDisplayType,
            field: [
              'id',
              'span.op',
              'span.description',
              'span.duration',
              'transaction',
              'timestamp',
            ],
          }),
        })
      );
    }
  );

  it('opens the dashboard modal with the correct query based on the visualize index', async () => {
    render(
      <PageParamsProvider>
        <TestPage visualizeIndex={1} />
      </PageParamsProvider>,
      {disableRouterMocks: true}
    );

    act(() =>
      setVisualizes([
        {
          yAxes: ['avg(span.duration)'],
          chartType: ChartType.LINE,
        },
        {
          yAxes: ['max(span.duration)'],
          chartType: ChartType.LINE,
        },
      ])
    );

    await userEvent.click(screen.getByText('Add to Dashboard'));

    // The group by and the yAxes are encoded as the fields for the defaultTableQuery
    expect(openAddToDashboardModal).toHaveBeenCalledWith(
      expect.objectContaining({
        // For Add + Stay on Page
        widget: {
          title: 'Custom Widget',
          displayType: DisplayType.LINE,
          interval: undefined,
          limit: undefined,
          widgetType: WidgetType.SPANS,
          queries: [
            {
              aggregates: ['max(span.duration)'],
              columns: [],
              fields: ['max(span.duration)'],
              conditions: '',
              orderby: '-timestamp',
              name: '',
            },
          ],
        },

        // For Open in Widget Builder
        widgetAsQueryParams: expect.objectContaining({
          dataset: WidgetType.SPANS,
          defaultTableColumns: [
            'id',
            'span.op',
            'span.description',
            'span.duration',
            'transaction',
            'timestamp',
          ],
          defaultTitle: 'Custom Widget',
          defaultWidgetQuery:
            'name=&aggregates=max(span.duration)&columns=&fields=max(span.duration)&conditions=&orderby=-timestamp',
          displayType: DisplayType.LINE,
          field: [
            'id',
            'span.op',
            'span.description',
            'span.duration',
            'transaction',
            'timestamp',
          ],
        }),
      })
    );
  });

  it('uses the yAxes for the aggregate mode', async () => {
    render(
      <PageParamsProvider>
        <TestPage visualizeIndex={0} />
      </PageParamsProvider>,
      {disableRouterMocks: true}
    );

    act(() => setMode(Mode.AGGREGATE));

    await userEvent.click(screen.getByText('Add to Dashboard'));

    expect(openAddToDashboardModal).toHaveBeenCalledWith(
      expect.objectContaining({
        // For Add + Stay on Page
        widget: {
          title: 'Custom Widget',
          displayType: DisplayType.LINE,
          interval: undefined,
          limit: undefined,
          widgetType: WidgetType.SPANS,
          queries: [
            {
              aggregates: ['avg(span.duration)'],
              columns: [],
              fields: ['avg(span.duration)'],
              conditions: '',
              orderby: '-avg(span.duration)',
              name: '',
            },
          ],
        },

        // For Open in Widget Builder
        widgetAsQueryParams: expect.objectContaining({
          dataset: WidgetType.SPANS,
          defaultTableColumns: ['span.op', 'avg(span.duration)'],
          defaultTitle: 'Custom Widget',
          defaultWidgetQuery:
            'name=&aggregates=avg(span.duration)&columns=&fields=avg(span.duration)&conditions=&orderby=-avg(span.duration)',
          displayType: DisplayType.LINE,
          field: ['span.op', 'avg(span.duration)'],
        }),
      })
    );
  });

  it('takes the first 3 yAxes', async () => {
    render(
      <PageParamsProvider>
        <TestPage visualizeIndex={0} />
      </PageParamsProvider>,
      {disableRouterMocks: true}
    );

    act(() => setMode(Mode.AGGREGATE));
    act(() =>
      setVisualizes([
        {
          yAxes: [
            'avg(span.duration)',
            'max(span.duration)',
            'min(span.duration)',
            'p90(span.duration)',
          ],
          chartType: ChartType.LINE,
        },
      ])
    );

    await userEvent.click(screen.getByText('Add to Dashboard'));

    expect(openAddToDashboardModal).toHaveBeenCalledWith(
      expect.objectContaining({
        // For Add + Stay on Page
        widget: {
          title: 'Custom Widget',
          displayType: DisplayType.LINE,
          interval: undefined,
          limit: undefined,
          widgetType: WidgetType.SPANS,
          queries: [
            {
              aggregates: [
                'avg(span.duration)',
                'max(span.duration)',
                'min(span.duration)',
              ],
              columns: [],
              fields: ['avg(span.duration)', 'max(span.duration)', 'min(span.duration)'],
              conditions: '',
              orderby: '-avg(span.duration)',
              name: '',
            },
          ],
        },

        // For Open in Widget Builder
        widgetAsQueryParams: expect.objectContaining({
          dataset: WidgetType.SPANS,
          defaultTableColumns: [
            'span.op',
            'avg(span.duration)',
            'max(span.duration)',
            'min(span.duration)',
          ],
          defaultTitle: 'Custom Widget',
          defaultWidgetQuery:
            'name=&aggregates=avg(span.duration)%2Cmax(span.duration)%2Cmin(span.duration)&columns=&fields=avg(span.duration)%2Cmax(span.duration)%2Cmin(span.duration)&conditions=&orderby=-avg(span.duration)',
          displayType: DisplayType.LINE,
          field: [
            'span.op',
            'avg(span.duration)',
            'max(span.duration)',
            'min(span.duration)',
          ],
        }),
      })
    );
  });
});