...

import { act, render, screen, waitFor } from '@testing-library/react';
import userEvent, { UserEvent } from '@testing-library/user-event';
import * as React from 'react';
import { of } from 'rxjs';

import { CoreApp } from '@grafana/data';

import { AzureQueryType } from '../../dataquery.gen';
import Datasource from '../../datasource';
import createMockDatasource from '../../mocks/datasource';
import createMockQuery from '../../mocks/query';
import { AzureMonitorQuery } from '../../types/query';
import { selectOptionInTest } from '../../utils/testUtils';

import Filters from './Filters';
import { setFilters } from './setQueryValue';

jest.mock('@grafana/runtime', () => {
  return {
    __esModule: true,
    ...jest.requireActual('@grafana/runtime'),
    getTemplateSrv: () => ({
      replace: jest.fn(),
      getVariables: jest.fn(),
      updateTimeRange: jest.fn(),
      containsTemplate: jest.fn(),
    }),
  };
});
jest.setTimeout(10000);

const variableOptionGroup = {
  label: 'Template variables',
  options: [],
};
let user: UserEvent;
let mockDatasource: Datasource;
const onQueryChange = jest.fn();

const operationLabel = operation === 'eq' ? '=' : '!=';
  const addFilter = await screen.findByLabelText('Add');
  await userEvent.click(addFilter);
  if (mockQuery.azureTraces?.filters && mockQuery.azureTraces.filters.length < 1) {
    expect(onQueryChange).not.toHaveBeenCalled();
  }

await waitFor(() => expect(screen.getByText('Property')).toBeInTheDocument());
  const propertySelect = await screen.findByText('Property');
  selectOptionInTest(propertySelect, property);
  await waitFor(() => expect(screen.getByText(property)).toBeInTheDocument());

await waitFor(() => expect(screen.getByText('Property')).toBeInTheDocument());
  const operationSelect = await screen.findAllByText('=');
  await userEvent.click(operationSelect[index]);
  await userEvent.click(screen.getByRole('menuitemradio', { name: operationLabel }));
  await waitFor(() => expect(screen.getByText(operationLabel)).toBeInTheDocument());

const valueSelect = await screen.findByText('Value');
  await waitFor(() => user.click(valueSelect));

expect(mockDatasource.azureLogAnalyticsDatasource.query).toHaveBeenCalledWith(
    expect.objectContaining({
      requestId: 'azure-traces-properties-req',
      interval: '',
      intervalMs: 0,
      scopedVars: {},
      timezone: '',
      startTime: 0,
      app: CoreApp.Unknown,
      targets: [
        {
          ...mockQuery,
          azureLogAnalytics: {
            resources: mockQuery.azureTraces?.resources,
            query,
          },
          queryType: AzureQueryType.LogAnalytics,
        },
      ],
    })
  );

if (mockQuery.azureTraces?.filters && mockQuery.azureTraces.filters.length === 0) {
    expect(onQueryChange).not.toHaveBeenCalled();
  }

rerender(
    <Filters
      datasource={mockDatasource}
      onQueryChange={onQueryChange}
      query={newQuery}
      setError={jest.fn()}
      variableOptionGroup={variableOptionGroup}
    />
  );

return newQuery;
};

describe(`Traces Filters`, () => {
  beforeEach(() => {
    mockDatasource = createMockDatasource();
    user = userEvent.setup();
  });

it('should render a trace filter', async () => {
    let mockQuery = createMockQuery();
    mockQuery.azureTraces = {
      ...mockQuery.azureTraces,
      filters: [
        {
          filters: ['test-filter'],
          operation: 'eq',
          property: 'test-property',
        },
      ],
    };

render(
      <Filters
        subscriptionId="123"
        query={mockQuery}
        onQueryChange={onQueryChange}
        datasource={mockDatasource}
        variableOptionGroup={variableOptionGroup}
        setError={jest.fn()}
      />
    );

expect(screen.getByText('test-property')).toBeInTheDocument();
    expect(screen.getByText('=')).toBeInTheDocument();
    expect(screen.getByText('test-filter')).toBeInTheDocument();
  });

it('should add a trace filter', async () => {
    jest.spyOn(console, 'warn').mockImplementation();
    let mockQuery = createMockQuery({ azureTraces: { traceTypes: ['customEvents'] } });
    mockQuery.azureTraces = {
      ...mockQuery.azureTraces,
      filters: undefined,
    };

const { rerender } = render(
      <Filters
        datasource={mockDatasource}
        onQueryChange={onQueryChange}
        query={mockQuery}
        setError={jest.fn()}
        variableOptionGroup={variableOptionGroup}
      />
    );

await addFilter(
      mockQuery,
      { property: 'appId', filters: [{ count: 10, value: 'test-app-id' }], operation: 'eq', index: 0 },
      rerender
    );
  });

it('should add multiple trace filters', async () => {
    let mockQuery = createMockQuery({ azureTraces: { traceTypes: ['customEvents'] } });
    mockQuery.azureTraces = {
      ...mockQuery.azureTraces,
      filters: undefined,
    };

mockQuery = await addFilter(
      mockQuery,
      { property: 'appId', filters: [{ count: 10, value: 'test-app-id' }], operation: 'eq', index: 0 },
      rerender
    );
    mockQuery = await addFilter(
      mockQuery,
      { property: 'client_Browser', filters: [{ count: 100, value: 'test-client' }], operation: 'ne', index: 1 },
      rerender
    );
  }, 10000);

it('should delete a trace filter', async () => {
    let mockQuery = createMockQuery({ azureTraces: { traceTypes: ['customEvents'] } });
    mockQuery.azureTraces = {
      ...mockQuery.azureTraces,
      filters: undefined,
    };

const removeButtons = screen.getAllByLabelText('Remove filter');

mockQuery = {
      ...mockQuery,
      azureTraces: {
        ...mockQuery.azureTraces,
        filters: mockQuery.azureTraces?.filters?.slice(0, 1),
      },
    };

await act(async () => {
      await userEvent.click(removeButtons[1]);
    });
    rerender(
      <Filters
        datasource={mockDatasource}
        onQueryChange={onQueryChange}
        query={mockQuery}
        setError={jest.fn()}
        variableOptionGroup={variableOptionGroup}
      />
    );

expect(screen.getByText('appId')).toBeInTheDocument();
    expect(screen.getByText('=')).toBeInTheDocument();
    expect(screen.getByText('test-app-id')).toBeInTheDocument();
    expect(screen.queryByText('client_Browser')).not.toBeInTheDocument();
    expect(screen.queryByText('!=')).not.toBeInTheDocument();
    expect(screen.queryByText('test-client')).not.toBeInTheDocument();
  });

it('should add a trace filter and select multiple values', async () => {
    let mockQuery = createMockQuery({ azureTraces: { traceTypes: ['customEvents'] } });
    mockQuery.azureTraces = {
      ...mockQuery.azureTraces,
      filters: undefined,
    };

await addFilter(
      mockQuery,
      {
        property: 'appId',
        filters: [
          { count: 10, value: 'test-app-id' },
          { count: 20, value: 'test-app-id-2' },
        ],
        operation: 'eq',
        index: 0,
      },
      rerender
    );
  });

it('should remove a value from a trace filter with multiple values', async () => {
    let mockQuery = createMockQuery({ azureTraces: { traceTypes: ['customEvents'] } });
    mockQuery.azureTraces = {
      ...mockQuery.azureTraces,
      filters: undefined,
    };

mockQuery = await addFilter(
      mockQuery,
      {
        property: 'appId',
        filters: [
          { count: 10, value: 'test-app-id' },
          { count: 20, value: 'test-app-id-2' },
        ],
        operation: 'eq',
        index: 0,
      },
      rerender
    );

rerender(
      <Filters
        datasource={mockDatasource}
        onQueryChange={onQueryChange}
        query={mockQuery}
        setError={jest.fn()}
        variableOptionGroup={variableOptionGroup}
      />
    );

.	Edit
..	Edit
Filter.tsx	Edit
Filters.test.tsx	Edit
Filters.tsx	Edit
TraceTypeField.test.tsx	Edit
TraceTypeField.tsx	Edit
TracesQueryEditor.test.tsx	Edit
TracesQueryEditor.tsx	Edit
consts.ts	Edit
setQueryValue.ts	Edit