Fix table strings and add unit tests

.github/workflows/cypress-tests.yml

@@ -104,7 +104,7 @@ jobs:
 
       - name: Sleep until OSD server starts - non-windows
         if: ${{ matrix.os != 'windows-latest' }}
-        run: sleep 450
+        run: sleep 500
         shell: bash
 
       - name: Install Cypress
@@ -135,7 +135,7 @@ jobs:
           working-directory: OpenSearch-Dashboards/plugins/query-insights-dashboards
           command: yarn run cypress run
           wait-on: 'http://localhost:5601'
-          wait-on-timeout: 300
+          wait-on-timeout: 600
           browser: chrome
         env:
           CYPRESS_CACHE_FOLDER: ${{ matrix.cypress_cache_folder }}

common/constants.ts

@@ -8,6 +8,6 @@ export const LATENCY = 'Latency';
 export const CPU_TIME = 'CPU Time';
 export const MEMORY_USAGE = 'Memory Usage';
 export const INDICES = 'Indices';
-export const SEARCH_TYPE = 'Search type';
-export const NODE_ID = 'Coordinator node ID';
-export const TOTAL_SHARDS = 'Total shards';
+export const SEARCH_TYPE = 'Search Type';
+export const NODE_ID = 'Coordinator Node ID';
+export const TOTAL_SHARDS = 'Total Shards';

cypress/e2e/2_query_details.cy.js

@@ -31,7 +31,7 @@
     cy.get('.euiTableRow').first().find('button').click(); // Navigate to details
   });
 
   it('should display correct details on the query details page', () => {
     // cy.get('.euiBasicTable a').first().click(); // Navigate to details
     cy.url().should('include', '/query-details');
     // Validate the page title
@@ -47,7 +47,7 @@
   /**
    * Validate summary panel has valid labels
    */
   it('the summary panel should display correctly', () => {
     // Validate all field labels exist
     const fieldLabels = [
       'Timestamp',
@@ -55,9 +55,9 @@
       'CPU Time',
       'Memory Usage',
       'Indices',
-      'Search type',
-      'Coordinator node ID',
-      'Total shards',
+      'Search Type',
+      'Coordinator Node ID',
+      'Total Shards',
     ];
     fieldLabels.forEach((label) => {
       cy.get('.euiPanel').contains('h4', label).should('be.visible');
@@ -96,19 +96,19 @@
       // Validate Indices
       cy.contains('h4', 'Indices').parent().next().invoke('text').should('not.be.empty');
       // Validate Search Type
-      cy.contains('h4', 'Search type')
+      cy.contains('h4', 'Search Type')
         .parent()
         .next()
         .invoke('text')
         .should('equal', 'query then fetch');
       // Validate Coordinator Node ID
-      cy.contains('h4', 'Coordinator node ID')
+      cy.contains('h4', 'Coordinator Node ID')
         .parent()
         .next()
         .invoke('text')
         .should('not.be.empty');
       // Validate Total Shards
-      cy.contains('h4', 'Total shards')
+      cy.contains('h4', 'Total Shards')
         .parent()
         .next()
         .invoke('text')
@@ -122,7 +122,7 @@
   /**
    * Validate the latency chart interaction
    */
   it('should render the latency chart and allow interaction', () => {
     // Ensure the chart is visible
     cy.get('#latency').should('be.visible');
     cy.get('.plot-container').should('be.visible');

package.json

@@ -42,6 +42,7 @@
     "@elastic/elastic-eslint-config-kibana": "link:../../packages/opensearch-eslint-config-opensearch-dashboards",
     "@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
     "@testing-library/dom": "^8.11.3",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-dom": "^16.9.8",
     "@types/object-hash": "^3.0.0",

public/components/__snapshots__/app.test.tsx.snap

@@ -172,10 +172,10 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiFilterButton__textShift"
-                        data-text="Search type"
-                        title="Search type"
+                        data-text="Search Type"
+                        title="Search Type"
                       >
-                        Search type
+                        Search Type
                       </span>
                     </span>
                   </span>
@@ -215,10 +215,10 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiFilterButton__textShift"
-                        data-text="Coordinator node ID"
-                        title="Coordinator node ID"
+                        data-text="Coordinator Node ID"
+                        title="Coordinator Node ID"
                       >
-                        Coordinator node ID
+                        Coordinator Node ID
                       </span>
                     </span>
                   </span>
@@ -566,9 +566,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiTableCellContent__text"
-                        title="Search type"
+                        title="Search Type"
                       >
-                        Search type
+                        Search Type
                       </span>
                     </span>
                   </button>
@@ -591,9 +591,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiTableCellContent__text"
-                        title="Coordinator node ID"
+                        title="Coordinator Node ID"
                       >
-                        Coordinator node ID
+                        Coordinator Node ID
                       </span>
                     </span>
                   </button>
@@ -616,9 +616,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiTableCellContent__text"
-                        title="Total shards"
+                        title="Total Shards"
                       >
-                        Total shards
+                        Total Shards
                       </span>
                     </span>
                   </button>

public/pages/Configuration/Configuration.test.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MemoryRouter } from 'react-router-dom';
+import Configuration from './Configuration';
+
+const mockConfigInfo = jest.fn();
+const mockCoreStart = {
+  chrome: {
+    setBreadcrumbs: jest.fn(),
+  },
+};
+
+const defaultLatencySettings = {
+  isEnabled: true,
+  currTopN: '5',
+  currWindowSize: '10',
+  currTimeUnit: 'MINUTES',
+};
+const defaultCpuSettings = {
+  isEnabled: false,
+  currTopN: '10',
+  currWindowSize: '1',
+  currTimeUnit: 'HOURS',
+};
+const defaultMemorySettings = {
+  isEnabled: false,
+  currTopN: '15',
+  currWindowSize: '2',
+  currTimeUnit: 'HOURS',
+};
+
+const renderConfiguration = (overrides = {}) =>
+  render(
+    <MemoryRouter>
+      <Configuration
+        latencySettings={{ ...defaultLatencySettings, ...overrides }}
+        cpuSettings={defaultCpuSettings}
+        memorySettings={defaultMemorySettings}
+        configInfo={mockConfigInfo}
+        core={mockCoreStart}
+      />
+    </MemoryRouter>
+  );
+
+const getWindowSizeConfigurations = () => screen.getAllByRole('combobox');
+const getTopNSizeConfiguration = () => screen.getByRole('spinbutton');
+const getEnableToggle = () => screen.getByRole('switch');
+
+describe('Configuration Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with default settings', () => {
+    const { container } = renderConfiguration();
+    expect(container).toMatchSnapshot('should match default settings snapshot');
+  });
+
+  // The following tests test the interactions on the frontend with Mocks.
+  it('updates state when toggling metrics and enables Save button when changes are made', () => {
+    const { container } = renderConfiguration();
+    // before toggling the metric
+    expect(getWindowSizeConfigurations()[0]).toHaveValue('latency');
+    expect(getEnableToggle()).toBeChecked();
+    // toggle the metric
+    fireEvent.change(getWindowSizeConfigurations()[0], { target: { value: 'cpu' } });
+    // after toggling the metric
+    expect(getWindowSizeConfigurations()[0]).toHaveValue('cpu');
+    // the enabled box should be disabled by default based on our configuration
+    const cpuEnableBox = getEnableToggle();
+    expect(cpuEnableBox).toBeInTheDocument();
+    expect(cpuEnableBox).not.toBeChecked();
+
+    fireEvent.click(getEnableToggle());
+    expect(getEnableToggle()).toBeChecked();
+    expect(screen.getByText('Save')).toBeEnabled();
+    expect(container).toMatchSnapshot('should match settings snapshot after toggling');
+  });
+
+  it('validates topNSize and windowSize inputs and disables Save button for invalid input', () => {
+    renderConfiguration();
+    fireEvent.change(getTopNSizeConfiguration(), { target: { value: '101' } });
+    expect(screen.queryByText('Save')).not.toBeInTheDocument();
+    fireEvent.change(getWindowSizeConfigurations()[1], { target: { value: '999' } });
+    expect(screen.queryByText('Save')).not.toBeInTheDocument();
+  });
+
+  it('calls configInfo and navigates on Save button click', async () => {
+    renderConfiguration();
+    fireEvent.change(getTopNSizeConfiguration(), { target: { value: '7' } });
+    fireEvent.click(screen.getByText('Save'));
+    await waitFor(() => {
+      expect(mockConfigInfo).toHaveBeenCalledWith(false, true, 'latency', '7', '10', 'MINUTES');
+    });
+  });
+
+  it('resets state on Cancel button click', async () => {
+    renderConfiguration();
+    fireEvent.change(getTopNSizeConfiguration(), { target: { value: '7' } });
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(getTopNSizeConfiguration()).toHaveValue(5); // Resets to initial value
+  });
+});