fix: added null check on filters obj (#5419)

* fix: added null check on filters obj

* feat: added test cases of undefined filters and items

* feat: added comments

frontend/src/pages/TracesExplorer/Filter/Filter.tsx

@@ -56,7 +56,7 @@ export function Filter(props: FilterProps): JSX.Element {
  return {} as FilterType;
  }
 
- return filters.items
+ return (filters.items || [])
  .filter((item) =>
  Object.keys(AllTraceFilterKeyValue).includes(item.key?.key as string),
  )

frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx

@@ -0,0 +1,132 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-await-in-loop */
+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 { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { Filter } from '../Filter/Filter';
+import { AllTraceFilterKeyValue } from '../Filter/filterUtils';
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useLocation: (): { pathname: string } => ({
+ pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.TRACES_EXPLORER}/`,
+ }),
+}));
+
+jest.mock('uplot', () => {
+ const paths = {
+ spline: jest.fn(),
+ bars: jest.fn(),
+ };
+
+ const uplotMock = jest.fn(() => ({
+ paths,
+ }));
+
+ return {
+ paths,
+ default: uplotMock,
+ };
+});
+
+const compositeQuery: Query = {
+ ...initialQueriesMap.traces,
+ builder: {
+ ...initialQueriesMap.traces.builder,
+ queryData: [
+ {
+ ...initialQueryBuilderFormValues,
+ filters: {
+ items: [
+ {
+ id: '95564eb1',
+ key: {
+ key: 'name',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'name--string--tag--true',
+ },
+ op: 'in',
+ value: ['HTTP GET /customer'],
+ },
+ {
+ id: '3337951c',
+ key: {
+ key: 'serviceName',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'serviceName--string--tag--true',
+ },
+ op: 'in',
+ value: ['demo-app'],
+ },
+ ],
+ op: 'AND',
+ },
+ },
+ ],
+ },
+};
+
+describe('TracesExplorer - ', () => {
+ it('test edge cases of undefined filters', async () => {
+ jest.spyOn(compositeQueryHook, 'useGetCompositeQueryParam').mockReturnValue({
+ ...compositeQuery,
+ builder: {
+ ...compositeQuery.builder,
+ queryData: compositeQuery.builder.queryData.map(
+ (item) =>
+ ({
+ ...item,
+ filters: undefined,
+ } as any),
+ ),
+ },
+ });
+
+ const { getByText } = render(<Filter setOpen={jest.fn()} />);
+
+ // we should have all the filters
+ Object.values(AllTraceFilterKeyValue).forEach((filter) => {
+ expect(getByText(filter)).toBeInTheDocument();
+ });
+ });
+
+ it('test edge cases of undefined filters - items', async () => {
+ jest.spyOn(compositeQueryHook, 'useGetCompositeQueryParam').mockReturnValue({
+ ...compositeQuery,
+ builder: {
+ ...compositeQuery.builder,
+ queryData: compositeQuery.builder.queryData.map(
+ (item) =>
+ ({
+ ...item,
+ filters: {
+ ...item.filters,
+ items: undefined,
+ },
+ } as any),
+ ),
+ },
+ });
+
+ const { getByText } = render(<Filter setOpen={jest.fn()} />);
+
+ // we should have all the filters
+ Object.values(AllTraceFilterKeyValue).forEach((filter) => {
+ expect(getByText(filter)).toBeInTheDocument();
+ });
+ });
+});