diff --git a/frontend/src/pages/TracesExplorer/Filter/SectionContent.tsx b/frontend/src/pages/TracesExplorer/Filter/SectionContent.tsx
index 4cefaaeca0..2bae1dfe16 100644
--- a/frontend/src/pages/TracesExplorer/Filter/SectionContent.tsx
+++ b/frontend/src/pages/TracesExplorer/Filter/SectionContent.tsx
@@ -145,6 +145,7 @@ export function SectionBody(props: SectionBodyProps): JSX.Element {
key={`${type}-${item}`}
onChange={(e): void => onCheckHandler(e, item)}
checked={checkboxMatcher(item)}
+ data-testid={`${type}-${item}`}
>
diff --git a/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx b/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx
index 1250a3f3cc..1dcaaaa4cf 100644
--- a/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx
+++ b/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx
@@ -1,16 +1,19 @@
/* eslint-disable sonarjs/no-duplicate-string */
/* eslint-disable no-restricted-syntax */
/* eslint-disable no-await-in-loop */
+import userEvent from '@testing-library/user-event';
import {
initialQueriesMap,
initialQueryBuilderFormValues,
} from 'constants/queryBuilder';
import ROUTES from 'constants/routes';
import * as compositeQueryHook from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { render } from 'tests/test-utils';
+import { QueryBuilderContext } from 'providers/QueryBuilder';
+import { fireEvent, render, screen, waitFor, within } from 'tests/test-utils';
import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import TracesExplorer from '..';
import { Filter } from '../Filter/Filter';
import { AllTraceFilterKeyValue } from '../Filter/filterUtils';
@@ -37,6 +40,48 @@ jest.mock('uplot', () => {
};
});
+jest.mock(
+ 'container/TopNav/DateTimeSelectionV2/index.tsx',
+ () =>
+ function MockDateTimeSelection(): JSX.Element {
+ return
MockDateTimeSelection
;
+ },
+);
+
+function checkIfSectionIsOpen(
+ getByTestId: (testId: string) => HTMLElement,
+ panelName: string,
+): void {
+ const section = getByTestId(`collapse-${panelName}`);
+ expect(section.querySelector('.ant-collapse-item-active')).not.toBeNull();
+}
+
+function checkIfSectionIsNotOpen(
+ getByTestId: (testId: string) => HTMLElement,
+ panelName: string,
+): void {
+ const section = getByTestId(`collapse-${panelName}`);
+ expect(section.querySelector('.ant-collapse-item-active')).toBeNull();
+}
+
+const defaultOpenSections = ['hasError', 'durationNano', 'serviceName'];
+
+const defaultClosedSections = Object.keys(AllTraceFilterKeyValue).filter(
+ (section) =>
+ ![...defaultOpenSections, 'durationNanoMin', 'durationNanoMax'].includes(
+ section,
+ ),
+);
+
+async function checkForSectionContent(values: string[]): Promise
{
+ for (const val of values) {
+ const sectionContent = await screen.findByText(val);
+ await waitFor(() => expect(sectionContent).toBeInTheDocument());
+ }
+}
+
+const redirectWithQueryBuilderData = jest.fn();
+
const compositeQuery: Query = {
...initialQueriesMap.traces,
builder: {
@@ -81,6 +126,157 @@ const compositeQuery: Query = {
};
describe('TracesExplorer - ', () => {
+ // Initial filter panel rendering
+ // Test the initial state like which filters section are opened, default state of duration slider, etc.
+ it('should render the Trace filter', async () => {
+ const { getByText, getByTestId } = render();
+
+ Object.values(AllTraceFilterKeyValue).forEach((filter) => {
+ expect(getByText(filter)).toBeInTheDocument();
+ });
+
+ // Check default state of duration slider
+ const minDuration = getByTestId('min-input') as HTMLInputElement;
+ const maxDuration = getByTestId('max-input') as HTMLInputElement;
+ expect(minDuration).toHaveValue(null);
+ expect(minDuration).toHaveProperty('placeholder', '0');
+ expect(maxDuration).toHaveValue(null);
+ expect(maxDuration).toHaveProperty('placeholder', '100000000');
+
+ // Check which all filter section are opened by default
+ defaultOpenSections.forEach((section) =>
+ checkIfSectionIsOpen(getByTestId, section),
+ );
+
+ // Check which all filter section are closed by default
+ defaultClosedSections.forEach((section) =>
+ checkIfSectionIsNotOpen(getByTestId, section),
+ );
+
+ // check for the status section content
+ await checkForSectionContent(['Ok', 'Error']);
+
+ // check for the service name section content from API response
+ await checkForSectionContent([
+ 'customer',
+ 'demo-app',
+ 'driver',
+ 'frontend',
+ 'mysql',
+ 'redis',
+ 'route',
+ 'go-grpc-otel-server',
+ 'test',
+ ]);
+ });
+
+ // test the filter panel actions like opening and closing the sections, etc.
+ it('filter panel actions', async () => {
+ const { getByTestId } = render();
+
+ // Check if the section is closed
+ checkIfSectionIsNotOpen(getByTestId, 'name');
+ // Open the section
+ const name = getByTestId('collapse-name');
+ expect(name).toBeInTheDocument();
+
+ userEvent.click(within(name).getByText(AllTraceFilterKeyValue.name));
+ await waitFor(() => checkIfSectionIsOpen(getByTestId, 'name'));
+
+ await checkForSectionContent([
+ 'HTTP GET',
+ 'HTTP GET /customer',
+ 'HTTP GET /dispatch',
+ 'HTTP GET /route',
+ ]);
+
+ // Close the section
+ userEvent.click(within(name).getByText(AllTraceFilterKeyValue.name));
+ await waitFor(() => checkIfSectionIsNotOpen(getByTestId, 'name'));
+ });
+
+ it('checking filters should update the query', async () => {
+ const { getByText } = render(
+
+
+ ,
+ );
+
+ const okCheckbox = getByText('Ok');
+ fireEvent.click(okCheckbox);
+ expect(
+ redirectWithQueryBuilderData.mock.calls[
+ redirectWithQueryBuilderData.mock.calls.length - 1
+ ][0].builder.queryData[0].filters.items,
+ ).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ key: {
+ id: expect.any(String),
+ key: 'hasError',
+ type: 'tag',
+ dataType: 'bool',
+ isColumn: true,
+ isJSON: false,
+ },
+ op: 'in',
+ value: ['false'],
+ }),
+ ]),
+ );
+
+ // Check if the query is updated when the error checkbox is clicked
+ const errorCheckbox = getByText('Error');
+ fireEvent.click(errorCheckbox);
+ expect(
+ redirectWithQueryBuilderData.mock.calls[
+ redirectWithQueryBuilderData.mock.calls.length - 1
+ ][0].builder.queryData[0].filters.items,
+ ).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ key: {
+ id: expect.any(String),
+ key: 'hasError',
+ type: 'tag',
+ dataType: 'bool',
+ isColumn: true,
+ isJSON: false,
+ },
+ op: 'in',
+ value: ['false', 'true'],
+ }),
+ ]),
+ );
+ });
+
+ it('should render the trace filter with the given query', async () => {
+ jest
+ .spyOn(compositeQueryHook, 'useGetCompositeQueryParam')
+ .mockReturnValue(compositeQuery);
+
+ const { findByText, getByTestId } = render();
+
+ // check if the default query is applied - composite query has filters - serviceName : demo-app and name : HTTP GET /customer
+ expect(await findByText('demo-app')).toBeInTheDocument();
+ expect(getByTestId('serviceName-demo-app')).toBeChecked();
+ expect(await findByText('HTTP GET /customer')).toBeInTheDocument();
+ expect(getByTestId('name-HTTP GET /customer')).toBeChecked();
+ });
+
it('test edge cases of undefined filters', async () => {
jest.spyOn(compositeQueryHook, 'useGetCompositeQueryParam').mockReturnValue({
...compositeQuery,
@@ -98,7 +294,6 @@ describe('TracesExplorer - ', () => {
const { getByText } = render();
- // we should have all the filters
Object.values(AllTraceFilterKeyValue).forEach((filter) => {
expect(getByText(filter)).toBeInTheDocument();
});
@@ -124,9 +319,141 @@ describe('TracesExplorer - ', () => {
const { getByText } = render();
- // we should have all the filters
Object.values(AllTraceFilterKeyValue).forEach((filter) => {
expect(getByText(filter)).toBeInTheDocument();
});
});
+
+ it('should clear filter on clear & reset button click', async () => {
+ const { getByText, getByTestId } = render(
+
+
+ ,
+ );
+
+ // check for the status section content
+ await checkForSectionContent(['Ok', 'Error']);
+
+ // check for the service name section content from API response
+ await checkForSectionContent([
+ 'customer',
+ 'demo-app',
+ 'driver',
+ 'frontend',
+ 'mysql',
+ 'redis',
+ 'route',
+ 'go-grpc-otel-server',
+ 'test',
+ ]);
+
+ const okCheckbox = getByText('Ok');
+ fireEvent.click(okCheckbox);
+
+ const frontendCheckbox = getByText('frontend');
+ fireEvent.click(frontendCheckbox);
+
+ // check if checked and present in query
+ expect(
+ redirectWithQueryBuilderData.mock.calls[
+ redirectWithQueryBuilderData.mock.calls.length - 1
+ ][0].builder.queryData[0].filters.items,
+ ).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ key: {
+ id: expect.any(String),
+ key: 'hasError',
+ type: 'tag',
+ dataType: 'bool',
+ isColumn: true,
+ isJSON: false,
+ },
+ op: 'in',
+ value: ['false'],
+ }),
+ expect.objectContaining({
+ key: {
+ key: 'serviceName',
+ dataType: 'string',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: expect.any(String),
+ },
+ op: 'in',
+ value: ['frontend'],
+ }),
+ ]),
+ );
+
+ const clearButton = getByTestId('collapse-serviceName-clearBtn');
+ expect(clearButton).toBeInTheDocument();
+ fireEvent.click(clearButton);
+
+ // check if cleared and not present in query
+ expect(
+ redirectWithQueryBuilderData.mock.calls[
+ redirectWithQueryBuilderData.mock.calls.length - 1
+ ][0].builder.queryData[0].filters.items,
+ ).not.toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ key: {
+ key: 'serviceName',
+ dataType: 'string',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: expect.any(String),
+ },
+ op: 'in',
+ value: ['frontend'],
+ }),
+ ]),
+ );
+
+ // check if reset button is present
+ const resetButton = getByTestId('reset-filters');
+ expect(resetButton).toBeInTheDocument();
+ fireEvent.click(resetButton);
+
+ // check if reset id done
+ expect(
+ redirectWithQueryBuilderData.mock.calls[
+ redirectWithQueryBuilderData.mock.calls.length - 1
+ ][0].builder.queryData[0].filters.items,
+ ).toEqual([]);
+ });
+
+ it('filter panel should collapse & uncollapsed', async () => {
+ const { getByText, getByTestId } = render();
+
+ Object.values(AllTraceFilterKeyValue).forEach((filter) => {
+ expect(getByText(filter)).toBeInTheDocument();
+ });
+
+ // Filter panel should collapse
+ const collapseButton = getByTestId('toggle-filter-panel');
+ expect(collapseButton).toBeInTheDocument();
+ fireEvent.click(collapseButton);
+
+ // uncollapse btn should be present
+ expect(
+ await screen.findByTestId('filter-uncollapse-btn'),
+ ).toBeInTheDocument();
+ });
});
diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx
index e598673c28..bb25a37f86 100644
--- a/frontend/src/pages/TracesExplorer/index.tsx
+++ b/frontend/src/pages/TracesExplorer/index.tsx
@@ -251,6 +251,7 @@ function TracesExplorer(): JSX.Element {