Skip to content

Commit 028ff1c

Browse files
Fix table strings and add unit tests (#25)
* Fix table strings and add unit tests Signed-off-by: Chenyang Ji <[email protected]> * update snapshots Signed-off-by: Chenyang Ji <[email protected]> * fix date string Signed-off-by: Chenyang Ji <[email protected]> --------- Signed-off-by: Chenyang Ji <[email protected]> (cherry picked from commit c2519b8) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent dd80887 commit 028ff1c

File tree

17 files changed

+4362
-84
lines changed

17 files changed

+4362
-84
lines changed

.github/workflows/cypress-tests.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ jobs:
103103

104104
- name: Sleep until OSD server starts - non-windows
105105
if: ${{ matrix.os != 'windows-latest' }}
106-
run: sleep 450
106+
run: sleep 500
107107
shell: bash
108108

109109
- name: Install Cypress
@@ -134,7 +134,7 @@ jobs:
134134
working-directory: OpenSearch-Dashboards/plugins/query-insights-dashboards
135135
command: yarn run cypress run
136136
wait-on: 'http://localhost:5601'
137-
wait-on-timeout: 300
137+
wait-on-timeout: 600
138138
browser: chrome
139139
env:
140140
CYPRESS_CACHE_FOLDER: ${{ matrix.cypress_cache_folder }}

common/constants.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ export const LATENCY = 'Latency';
88
export const CPU_TIME = 'CPU Time';
99
export const MEMORY_USAGE = 'Memory Usage';
1010
export const INDICES = 'Indices';
11-
export const SEARCH_TYPE = 'Search type';
12-
export const NODE_ID = 'Coordinator node ID';
13-
export const TOTAL_SHARDS = 'Total shards';
11+
export const SEARCH_TYPE = 'Search Type';
12+
export const NODE_ID = 'Coordinator Node ID';
13+
export const TOTAL_SHARDS = 'Total Shards';

cypress/e2e/2_query_details.cy.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ describe('Top Queries Details Page', () => {
5555
'CPU Time',
5656
'Memory Usage',
5757
'Indices',
58-
'Search type',
59-
'Coordinator node ID',
60-
'Total shards',
58+
'Search Type',
59+
'Coordinator Node ID',
60+
'Total Shards',
6161
];
6262
fieldLabels.forEach((label) => {
6363
cy.get('.euiPanel').contains('h4', label).should('be.visible');
@@ -96,19 +96,19 @@ describe('Top Queries Details Page', () => {
9696
// Validate Indices
9797
cy.contains('h4', 'Indices').parent().next().invoke('text').should('not.be.empty');
9898
// Validate Search Type
99-
cy.contains('h4', 'Search type')
99+
cy.contains('h4', 'Search Type')
100100
.parent()
101101
.next()
102102
.invoke('text')
103103
.should('equal', 'query then fetch');
104104
// Validate Coordinator Node ID
105-
cy.contains('h4', 'Coordinator node ID')
105+
cy.contains('h4', 'Coordinator Node ID')
106106
.parent()
107107
.next()
108108
.invoke('text')
109109
.should('not.be.empty');
110110
// Validate Total Shards
111-
cy.contains('h4', 'Total shards')
111+
cy.contains('h4', 'Total Shards')
112112
.parent()
113113
.next()
114114
.invoke('text')

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"@elastic/elastic-eslint-config-kibana": "link:../../packages/opensearch-eslint-config-opensearch-dashboards",
4343
"@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
4444
"@testing-library/dom": "^8.11.3",
45+
"@testing-library/jest-dom": "^5.16.2",
4546
"@testing-library/user-event": "^14.4.3",
4647
"@types/react-dom": "^16.9.8",
4748
"@types/object-hash": "^3.0.0",

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

+12-12
Original file line numberDiff line numberDiff line change
@@ -172,10 +172,10 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
172172
>
173173
<span
174174
class="euiFilterButton__textShift"
175-
data-text="Search type"
176-
title="Search type"
175+
data-text="Search Type"
176+
title="Search Type"
177177
>
178-
Search type
178+
Search Type
179179
</span>
180180
</span>
181181
</span>
@@ -215,10 +215,10 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
215215
>
216216
<span
217217
class="euiFilterButton__textShift"
218-
data-text="Coordinator node ID"
219-
title="Coordinator node ID"
218+
data-text="Coordinator Node ID"
219+
title="Coordinator Node ID"
220220
>
221-
Coordinator node ID
221+
Coordinator Node ID
222222
</span>
223223
</span>
224224
</span>
@@ -566,9 +566,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
566566
>
567567
<span
568568
class="euiTableCellContent__text"
569-
title="Search type"
569+
title="Search Type"
570570
>
571-
Search type
571+
Search Type
572572
</span>
573573
</span>
574574
</button>
@@ -591,9 +591,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
591591
>
592592
<span
593593
class="euiTableCellContent__text"
594-
title="Coordinator node ID"
594+
title="Coordinator Node ID"
595595
>
596-
Coordinator node ID
596+
Coordinator Node ID
597597
</span>
598598
</span>
599599
</button>
@@ -616,9 +616,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
616616
>
617617
<span
618618
class="euiTableCellContent__text"
619-
title="Total shards"
619+
title="Total Shards"
620620
>
621-
Total shards
621+
Total Shards
622622
</span>
623623
</span>
624624
</button>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*
2+
* Copyright OpenSearch Contributors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import React from 'react';
7+
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
8+
import '@testing-library/jest-dom/extend-expect';
9+
import { MemoryRouter } from 'react-router-dom';
10+
import Configuration from './Configuration';
11+
12+
const mockConfigInfo = jest.fn();
13+
const mockCoreStart = {
14+
chrome: {
15+
setBreadcrumbs: jest.fn(),
16+
},
17+
};
18+
19+
const defaultLatencySettings = {
20+
isEnabled: true,
21+
currTopN: '5',
22+
currWindowSize: '10',
23+
currTimeUnit: 'MINUTES',
24+
};
25+
const defaultCpuSettings = {
26+
isEnabled: false,
27+
currTopN: '10',
28+
currWindowSize: '1',
29+
currTimeUnit: 'HOURS',
30+
};
31+
const defaultMemorySettings = {
32+
isEnabled: false,
33+
currTopN: '15',
34+
currWindowSize: '2',
35+
currTimeUnit: 'HOURS',
36+
};
37+
38+
const renderConfiguration = (overrides = {}) =>
39+
render(
40+
<MemoryRouter>
41+
<Configuration
42+
latencySettings={{ ...defaultLatencySettings, ...overrides }}
43+
cpuSettings={defaultCpuSettings}
44+
memorySettings={defaultMemorySettings}
45+
configInfo={mockConfigInfo}
46+
core={mockCoreStart}
47+
/>
48+
</MemoryRouter>
49+
);
50+
51+
const getWindowSizeConfigurations = () => screen.getAllByRole('combobox');
52+
const getTopNSizeConfiguration = () => screen.getByRole('spinbutton');
53+
const getEnableToggle = () => screen.getByRole('switch');
54+
55+
describe('Configuration Component', () => {
56+
beforeEach(() => {
57+
jest.clearAllMocks();
58+
});
59+
60+
it('renders with default settings', () => {
61+
const { container } = renderConfiguration();
62+
expect(container).toMatchSnapshot('should match default settings snapshot');
63+
});
64+
65+
// The following tests test the interactions on the frontend with Mocks.
66+
it('updates state when toggling metrics and enables Save button when changes are made', () => {
67+
const { container } = renderConfiguration();
68+
// before toggling the metric
69+
expect(getWindowSizeConfigurations()[0]).toHaveValue('latency');
70+
expect(getEnableToggle()).toBeChecked();
71+
// toggle the metric
72+
fireEvent.change(getWindowSizeConfigurations()[0], { target: { value: 'cpu' } });
73+
// after toggling the metric
74+
expect(getWindowSizeConfigurations()[0]).toHaveValue('cpu');
75+
// the enabled box should be disabled by default based on our configuration
76+
const cpuEnableBox = getEnableToggle();
77+
expect(cpuEnableBox).toBeInTheDocument();
78+
expect(cpuEnableBox).not.toBeChecked();
79+
80+
fireEvent.click(getEnableToggle());
81+
expect(getEnableToggle()).toBeChecked();
82+
expect(screen.getByText('Save')).toBeEnabled();
83+
expect(container).toMatchSnapshot('should match settings snapshot after toggling');
84+
});
85+
86+
it('validates topNSize and windowSize inputs and disables Save button for invalid input', () => {
87+
renderConfiguration();
88+
fireEvent.change(getTopNSizeConfiguration(), { target: { value: '101' } });
89+
expect(screen.queryByText('Save')).not.toBeInTheDocument();
90+
fireEvent.change(getWindowSizeConfigurations()[1], { target: { value: '999' } });
91+
expect(screen.queryByText('Save')).not.toBeInTheDocument();
92+
});
93+
94+
it('calls configInfo and navigates on Save button click', async () => {
95+
renderConfiguration();
96+
fireEvent.change(getTopNSizeConfiguration(), { target: { value: '7' } });
97+
fireEvent.click(screen.getByText('Save'));
98+
await waitFor(() => {
99+
expect(mockConfigInfo).toHaveBeenCalledWith(false, true, 'latency', '7', '10', 'MINUTES');
100+
});
101+
});
102+
103+
it('resets state on Cancel button click', async () => {
104+
renderConfiguration();
105+
fireEvent.change(getTopNSizeConfiguration(), { target: { value: '7' } });
106+
fireEvent.click(screen.getByText('Cancel'));
107+
expect(getTopNSizeConfiguration()).toHaveValue(5); // Resets to initial value
108+
});
109+
});

0 commit comments

Comments
 (0)