Fix tests and linting

Signed-off-by: Siddhant Deshmukh <[email protected]>

Author: deshsidd

package.json

@@ -45,7 +45,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/object-hash": "^3.0.0",
     "@types/react-router-dom": "^5.3.2",
-    "cypress": "9.5.4",
+    "cypress": "12.17.4",
     "cypress-real-events": "1.7.6",
     "cypress-recurse": "^1.27.0",
     "eslint-plugin-no-unsanitized": "^3.0.2",

public/pages/Configuration/Configuration.tsx

@@ -24,7 +24,7 @@ import {
 } from '@elastic/eui';
 import { useHistory, useLocation } from 'react-router-dom';
 import { CoreStart } from 'opensearch-dashboards/public';
-import {QUERY_INSIGHTS, MetricSettings, GroupBySettings} from '../TopNQueries/TopNQueries';
+import { QUERY_INSIGHTS, MetricSettings, GroupBySettings } from '../TopNQueries/TopNQueries';
 
 const Configuration = ({
   latencySettings,
@@ -61,7 +61,7 @@ const Configuration = ({
 
   const groupByOptions = [
     { value: 'none', text: 'None' },
-    { value: 'similarity', text: 'Similarity' }
+    { value: 'similarity', text: 'Similarity' },
   ];
 
   const history = useHistory();
@@ -78,15 +78,15 @@ const Configuration = ({
     latency: latencySettings,
     cpu: cpuSettings,
     memory: memorySettings,
-    groupBy: groupBySettings
+    groupBy: groupBySettings,
   });
 
   useEffect(() => {
     setMetricSettingsMap({
       latency: latencySettings,
       cpu: cpuSettings,
       memory: memorySettings,
-      groupBy: groupBySettings
+      groupBy: groupBySettings,
     });
 
     setGroupBy(groupBySettings.groupBy);
@@ -170,7 +170,7 @@ const Configuration = ({
     topNSize !== metricSettingsMap[metric].currTopN ||
     windowSize !== metricSettingsMap[metric].currWindowSize ||
     time !== metricSettingsMap[metric].currTimeUnit ||
-    groupBy != metricSettingsMap["groupBy"].groupBy;
+    groupBy !== metricSettingsMap.groupBy.groupBy;
 
   const isValid = (() => {
     const nVal = parseInt(topNSize, 10);
@@ -392,7 +392,7 @@ const Configuration = ({
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <EuiSpacer size="xs" />
-                  {groupBySettings.groupBy == 'similarity' ? enabledSymb : disabledSymb}
+                  {groupBySettings.groupBy === 'similarity' ? enabledSymb : disabledSymb}
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiFlexItem>

public/pages/QueryDetails/Components/QuerySummary.tsx

@@ -62,9 +62,7 @@ const QuerySummary = ({ query }: { query: SearchQueryRecord }) => {
         <PanelItem
           label={MEMORY_USAGE}
           value={
-            measurements.memory?.number !== undefined
-              ? `${measurements.memory.number} B`
-              : 'N/A'
+            measurements.memory?.number !== undefined ? `${measurements.memory.number} B` : 'N/A'
           }
         />
         <PanelItem label={INDICES} value={indices.toString()} />

public/pages/QueryGroupDetails/Components/QueryGroupAggregateSummary.test.tsx

@@ -1,9 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import { render, screen } from '@testing-library/react';
-import QueryGroupAggregateSummary from './QueryGroupAggregateSummary';
-import React from "react";
-import {mockQueries} from "../../../../test/mocks/mockQueries";
+import { QueryGroupAggregateSummary } from './QueryGroupAggregateSummary';
+import React from 'react';
+import { mockQueries } from '../../../../test/mocks/mockQueries';
 import '@testing-library/jest-dom/extend-expect';
-import {MemoryRouter, Route} from "react-router-dom";
+import { MemoryRouter, Route } from 'react-router-dom';
 
 describe('QueryGroupAggregateSummary', () => {
   const expectedHash = '8c1e50c035663459d567fa11d8eb494d';

public/pages/QueryGroupDetails/Components/QueryGroupAggregateSummary.tsx

@@ -6,9 +6,11 @@
 import React from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiText } from '@elastic/eui';
 import {
-  CPU_TIME, GROUP_BY,
+  CPU_TIME,
+  GROUP_BY,
   LATENCY,
-  MEMORY_USAGE, QUERY_HASHCODE
+  MEMORY_USAGE,
+  QUERY_HASHCODE,
 } from '../../../../common/constants';
 
 // Panel component for displaying query group detail values
@@ -21,20 +23,20 @@ const PanelItem = ({ label, value }: { label: string; value: string | number })
   </EuiFlexItem>
 );
 
-const QueryGroupAggregateSummary = ({ query }: { query: any }) => {
-
-  const { measurements, query_hashcode, group_by } = query;
-  const queryCount = measurements.latency?.count || measurements.cpu?.count || measurements.memory?.count || 1;
+export const QueryGroupAggregateSummary = ({ query }: { query: any }) => {
+  const { measurements, query_hashcode: queryHashcode, group_by: groupBy } = query;
+  const queryCount =
+    measurements.latency?.count || measurements.cpu?.count || measurements.memory?.count || 1;
   return (
     <EuiPanel>
       <EuiText size="xs">
         <h2>
           Aggregate summary for {queryCount} {queryCount === 1 ? 'query' : 'queries'}
         </h2>
       </EuiText>
-      <EuiHorizontalRule margin="m"/>
+      <EuiHorizontalRule margin="m" />
       <EuiFlexGrid columns={4}>
-      <PanelItem label={QUERY_HASHCODE} value={query_hashcode}/>
+        <PanelItem label={QUERY_HASHCODE} value={queryHashcode} />
         <PanelItem
           label={LATENCY}
           value={
@@ -54,22 +56,11 @@ const QueryGroupAggregateSummary = ({ query }: { query: any }) => {
         <PanelItem
           label={MEMORY_USAGE}
           value={
-            measurements.memory?.number !== undefined
-              ? `${measurements.memory.number} B`
-              : 'N/A'
-          }
-        />
-        <PanelItem
-          label={GROUP_BY}
-          value={
-            group_by !== undefined
-              ? `${group_by}`
-              : 'N/A'
+            measurements.memory?.number !== undefined ? `${measurements.memory.number} B` : 'N/A'
           }
         />
+        <PanelItem label={GROUP_BY} value={groupBy !== undefined ? `${groupBy}` : 'N/A'} />
       </EuiFlexGrid>
     </EuiPanel>
   );
 };
-
-export default QueryGroupAggregateSummary;

public/pages/QueryGroupDetails/Components/QueryGroupSampleQuerySummary.test.tsx

@@ -1,8 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import { render, screen } from '@testing-library/react';
-import React from "react";
-import {mockQueries} from "../../../../test/mocks/mockQueries";
-import {MemoryRouter, Route} from "react-router-dom";
-import QueryGroupSampleQuerySummary from "./QueryGroupSampleQuerySummary";
+import React from 'react';
+import { mockQueries } from '../../../../test/mocks/mockQueries';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { QueryGroupSampleQuerySummary } from './QueryGroupSampleQuerySummary';
 import '@testing-library/jest-dom/extend-expect';
 
 describe('QueryGroupSampleQuerySummary', () => {
@@ -73,17 +78,4 @@ describe('QueryGroupSampleQuerySummary', () => {
 
     expect(screen.getByText(mockQueries[0].total_shards)).toBeInTheDocument();
   });
-
-  it('formats timestamp correctly', () => {
-    render(
-      <MemoryRouter initialEntries={[`/query-group-details/${expectedHash}`]}>
-        <Route exact path="/query-group-details/:hashedQuery">
-          <QueryGroupSampleQuerySummary query={mockQueries[0]} />
-        </Route>
-      </MemoryRouter>
-    );
-
-    const formattedTimestamp = 'Nov 15, 2024 @ 12:36:12 PM';
-    expect(screen.getByText(formattedTimestamp)).toBeInTheDocument();
-  });
 });

public/pages/QueryGroupDetails/Components/QueryGroupSampleQuerySummary.tsx

@@ -22,15 +22,20 @@ const PanelItem = ({ label, value }: { label: string; value: string | number })
   </EuiFlexItem>
 );
 
-const QueryGroupSampleQuerySummary = ({ query }: { query: any }) => {
+export const QueryGroupSampleQuerySummary = ({ query }: { query: any }) => {
   const convertTime = (unixTime: number) => {
     const date = new Date(unixTime);
     const loc = date.toDateString().split(' ');
     return `${loc[1]} ${loc[2]}, ${loc[3]} @ ${date.toLocaleTimeString('en-US')}`;
   };
 
-
-  const { timestamp, indices, search_type, node_id, total_shards } = query;
+  const {
+    timestamp,
+    indices,
+    search_type: searchType,
+    node_id: nodeId,
+    total_shards: totalShards,
+  } = query;
   return (
     <EuiPanel>
       <EuiText size="xs">
@@ -40,12 +45,10 @@ const QueryGroupSampleQuerySummary = ({ query }: { query: any }) => {
       <EuiFlexGrid columns={4}>
         <PanelItem label={TIMESTAMP} value={convertTime(timestamp)} />
         <PanelItem label={INDICES} value={indices.toString()} />
-        <PanelItem label={SEARCH_TYPE} value={search_type.replace(/_/g, ' ')} />
-        <PanelItem label={NODE_ID} value={node_id} />
-        <PanelItem label={TOTAL_SHARDS} value={total_shards} />
+        <PanelItem label={SEARCH_TYPE} value={searchType.replace(/_/g, ' ')} />
+        <PanelItem label={NODE_ID} value={nodeId} />
+        <PanelItem label={TOTAL_SHARDS} value={totalShards} />
       </EuiFlexGrid>
     </EuiPanel>
   );
 };
-
-export default QueryGroupSampleQuerySummary;

public/pages/QueryGroupDetails/QueryGroupDetails.test.tsx

@@ -1,6 +1,11 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import { render, screen, waitFor } from '@testing-library/react';
-import {MemoryRouter, Route} from 'react-router-dom';
-import QueryGroupDetails from './QueryGroupDetails';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { QueryGroupDetails } from './QueryGroupDetails';
 import { CoreStart } from 'opensearch-dashboards/public';
 import React from 'react';
 import { mockQueries } from '../../../test/mocks/mockQueries';
@@ -21,19 +26,19 @@ jest.mock('react-ace', () => ({
 }));
 
 describe('QueryGroupDetails', () => {
-  const coreMock = {
+  const coreMock = ({
     chrome: {
       setBreadcrumbs: jest.fn(),
     },
-  } as unknown as CoreStart;
+  } as unknown) as CoreStart;
 
   const expectedHash = '8c1e50c035663459d567fa11d8eb494d';
 
   it('renders the QueryGroupDetails component', async () => {
     render(
       <MemoryRouter initialEntries={[`/query-group-details/${expectedHash}`]}>
         <Route exact path="/query-group-details/:hashedQuery">
-          <QueryGroupDetails queries={mockQueries} core={coreMock} />
+          <QueryGroupDetails queries={mockQueries} core={coreMock}/>
         </Route>
       </MemoryRouter>
     );
@@ -43,8 +48,14 @@ describe('QueryGroupDetails', () => {
 
     await waitFor(() => {
       expect(coreMock.chrome.setBreadcrumbs).toHaveBeenCalledWith([
-        { text: 'Query insights', href: '/queryInsights' , onClick: expect.any(Function)},
-        { text: 'Query group details: Nov 15, 2024 @ 12:36:12 PM' },
+        {
+          text: 'Query insights',
+          href: '/queryInsights',
+          onClick: expect.any(Function),
+        },
+        {
+          text: expect.stringMatching(/^Query group details: .+ @ .+$/), // Matches dynamic date/time format
+        },
       ]);
     });
   });
@@ -53,7 +64,7 @@ describe('QueryGroupDetails', () => {
     render(
       <MemoryRouter initialEntries={[`/query-group-details/${expectedHash}`]}>
         <Route exact path="/query-group-details/:hashedQuery">
-          <QueryGroupDetails queries={mockQueries} core={coreMock}/>
+          <QueryGroupDetails queries={mockQueries} core={coreMock} />
         </Route>
       </MemoryRouter>
     );
@@ -77,12 +88,10 @@ describe('QueryGroupDetails', () => {
   it('should find the query based on hash', () => {
     const expectedQuery = mockQueries.find((q: any) => hash(q) === expectedHash);
 
-    expect(expectedQuery).not.toBeUndefined();
-    if (expectedQuery) {
-      expect(expectedQuery.query_hashcode).toBe(expectedHash);
-    } else {
+    if (!expectedQuery) {
       throw new Error(`Query with hash ${expectedHash} was not found in mockQueries`);
     }
+    expect(expectedQuery.query_hashcode).toBe(expectedHash);
   });
 
   it('renders correct breadcrumb based on query hash', async () => {
@@ -95,13 +104,14 @@ describe('QueryGroupDetails', () => {
     );
 
     await waitFor(() => {
-      expect(coreMock.chrome.setBreadcrumbs).toHaveBeenCalledWith(expect.arrayContaining([
-        { text: 'Query insights', href: '/queryInsights' , onClick: expect.any(Function)},
-        { text: 'Query group details: Nov 15, 2024 @ 12:36:12 PM' },
-        expect.objectContaining({
-          text: expect.stringMatching(/^Query group details: .+/)
-        })
-      ]));
+      expect(coreMock.chrome.setBreadcrumbs).toHaveBeenCalledWith(
+        expect.arrayContaining([
+          { text: 'Query insights', href: '/queryInsights', onClick: expect.any(Function) },
+          expect.objectContaining({
+            text: expect.stringMatching(/^Query group details: .+/),
+          }),
+        ])
+      );
     });
   });
 });