forked from opensearch-project/query-insights-dashboards
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix table strings and add unit tests
Signed-off-by: Chenyang Ji <cyji@amazon.com>
- Loading branch information
Showing
5 changed files
with
250 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| /* | ||
| * 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} | ||
| // @ts-ignore | ||
| 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', () => { | ||
| renderConfiguration(); | ||
| // main header | ||
| expect( | ||
| screen.getByRole('heading', { name: /Top n queries monitoring configuration settings/i }) | ||
| ).toBeInTheDocument(); | ||
| // section headers | ||
| expect(screen.getByRole('heading', { name: /Metric Type/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('heading', { name: /Enabled/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('heading', { name: /Value of N/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('heading', { name: /Window size/i })).toBeInTheDocument(); | ||
| // Check values for window size configurations | ||
| const selectBoxes = getWindowSizeConfigurations(); | ||
| expect(selectBoxes[0]).toHaveValue('latency'); | ||
| expect(selectBoxes[1]).toHaveValue('10'); | ||
| expect(selectBoxes[2]).toHaveValue('MINUTES'); | ||
| // Check the value for top n size configurations | ||
| expect(getTopNSizeConfiguration()).toHaveValue(5); | ||
| // Check the value for enabled switch | ||
| const enableBox = getEnableToggle(); | ||
| expect(enableBox).toBeInTheDocument(); | ||
| expect(enableBox).toBeChecked(); | ||
| }); | ||
|
|
||
| it('updates state when toggling metrics and enables Save button when changes are made', () => { | ||
| 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(); | ||
| }); | ||
|
|
||
| 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 | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { render, screen, fireEvent } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
| import QueryInsights from './QueryInsights'; | ||
| import { MemoryRouter } from 'react-router-dom'; | ||
|
|
||
| // Mock functions and data | ||
| const mockOnTimeChange = jest.fn(); | ||
| const mockCore = { | ||
| chrome: { | ||
| setBreadcrumbs: jest.fn(), | ||
| }, | ||
| }; | ||
|
|
||
| // TODO: change to use MockQueries once https://github.com/opensearch-project/query-insights-dashboards/pull/21/files is merged | ||
| const sampleQueries = [ | ||
| { | ||
| timestamp: 1633046400000, | ||
| measurements: {}, | ||
| indices: ['index1', 'index2'], | ||
| search_type: 'QUERY_THEN_FETCH', | ||
| node_id: 'node_1', | ||
| total_shards: 5, | ||
| source: {}, | ||
| labels: {}, | ||
| phase_latency_map: {}, | ||
| task_resource_usages: [], | ||
| }, | ||
| { | ||
| timestamp: 1633132800000, | ||
| measurements: {}, | ||
| indices: ['index3'], | ||
| search_type: 'DFS_QUERY_THEN_FETCH', | ||
| node_id: 'node_2', | ||
| total_shards: 3, | ||
| source: {}, | ||
| labels: {}, | ||
| phase_latency_map: {}, | ||
| task_resource_usages: [], | ||
| }, | ||
| ]; | ||
|
|
||
| const renderQueryInsights = () => { | ||
| render( | ||
| <MemoryRouter> | ||
| <QueryInsights | ||
| queries={sampleQueries} | ||
| loading={false} | ||
| onTimeChange={mockOnTimeChange} | ||
| recentlyUsedRanges={[]} | ||
| currStart="now-15m" | ||
| currEnd="now" | ||
| // @ts-ignore | ||
| core={mockCore} | ||
| /> | ||
| </MemoryRouter> | ||
| ); | ||
| }; | ||
|
|
||
| describe('QueryInsights Component', () => { | ||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it('renders the table with the correct columns and data', () => { | ||
| renderQueryInsights(); | ||
|
|
||
| // Check that the table and columns render correctly | ||
| expect(document.querySelector('span[title="Timestamp"]')).toBeInTheDocument(); | ||
| expect(document.querySelector('span[title="Latency"]')).toBeInTheDocument(); | ||
| expect(document.querySelector('span[title="CPU Time"]')).toBeInTheDocument(); | ||
| expect(document.querySelector('span[title="Memory Usage"]')).toBeInTheDocument(); | ||
| expect(document.querySelector('span[title="Indices"]')).toBeInTheDocument(); | ||
| expect(document.querySelector('span[title="Search Type"]')).toBeInTheDocument(); | ||
| expect(document.querySelector('span[title="Coordinator Node ID"]')).toBeInTheDocument(); | ||
| expect(document.querySelector('span[title="Total Shards"]')).toBeInTheDocument(); | ||
| // TODO add tests for the values | ||
| }); | ||
|
|
||
| it('calls setBreadcrumbs on mount', () => { | ||
| renderQueryInsights(); | ||
| expect(mockCore.chrome.setBreadcrumbs).toHaveBeenCalledWith([ | ||
| { | ||
| text: 'Query insights', | ||
| href: '/queryInsights', | ||
| onClick: expect.any(Function), | ||
| }, | ||
| ]); | ||
| }); | ||
|
|
||
| it('triggers onTimeChange when the date picker changes', () => { | ||
| renderQueryInsights(); | ||
|
|
||
| // Find the date picker update button | ||
| const updateButton = screen.getByRole('button', { name: /Refresh/i }); | ||
| fireEvent.click(updateButton); | ||
|
|
||
| // Verify the onTimeChange callback is triggered | ||
| expect(mockOnTimeChange).toHaveBeenCalled(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters