From 53836167495e2e31299cddda3a0b7797be8bd139 Mon Sep 17 00:00:00 2001 From: Joshua Li Date: Tue, 18 Apr 2023 12:25:39 -0700 Subject: [PATCH] Update jest tests and snapshots for panels with redux (#381) Signed-off-by: Joshua Li --- .../custom_panel_table.test.tsx.snap | 3592 +++++------------ .../custom_panel_view.test.tsx.snap | 8 +- .../__tests__/custom_panel_table.test.tsx | 104 +- .../helpers/__tests__/utils.test.tsx | 52 +- .../__snapshots__/save_panel.test.tsx.snap | 1288 +++--- .../save_panel/__tests__/save_panel.test.tsx | 56 +- test/setup.jest.ts | 3 + 7 files changed, 1755 insertions(+), 3348 deletions(-) diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap index 337b01306..47ad73fb7 100644 --- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap +++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap @@ -1,2861 +1,1225 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Panels Table Component renders empty panel table container 1`] = ` - + -
- -
- + +
-
- -
- -
- + +
+ +
-

- Operational panels -

- -
- -
- - - + Observability dashboards + + +
+ +
+ + -
- -
- -
- + +
+ +
-

- Panels - - ( - 0 - ) - -

- - -
- - -
+ ( + 0 + ) + + + + +
+ + - -
- Use Operational panels to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries. - - - - Learn more - - - - - - - -
- -
- -
- - -
- + + + + + +
+ +
+ +
+ + +
-
- -
- - Actions - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" +
+ +
-
-
+ - + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ - - - + + + + +
-
- -
- - -
- +
+ + + - -
- -
- -
- - -
- - -
- - -
+ + + +
+ +
+ +
+ +
+ + +
+ + - + + +
-
-

- No Operational Panels -

- -
- - -
+ No Observability Dashboards + + +
+ + - -
- Use operational panels to dive deeper into observability -
- using PPL queries and insightful visualizations -
- -
- -
- -
- - -
- - -
+ Use Observability Dashboards to dive deeper into observability +
+ using PPL queries and insightful visualizations +
+ +
+ +
+ +
+ + +
+ + - - - - -
+ + + +
+ + - - - - - -
- -
- - -
- -
- - -
- -
- -
- + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + + + `; exports[`Panels Table Component renders panel table container 1`] = ` - + -
- -
- + +
-
- -
- -
- + +
+ +
-

- Operational panels -

- -
- -
- - - + Observability dashboards + + +
+ +
+ + -
- -
- -
- + +
+ +
-

- Panels - - ( - 4 - ) - -

- - -
- - -
+ ( + 0 + ) + + + + +
+ + - -
- Use Operational panels to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries. - - - - Learn more - - - - - - - - - -
- -
- -
- - -
- + + + + + + +
+ +
+ +
+ + +
-
- -
- - Actions - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" +
+ +
-
-
+ - + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ - - - + + + + +
-
- -
- - -
- +
+ + + - -
- -
- -
- - -
- - - + + + +
+ +
+ +
+ +
+ + +
+ +
+ + +
-
- - - - -
+ No Observability Dashboards + + +
+ + - - - - - -
- -
+ Use Observability Dashboards to dive deeper into observability +
+ using PPL queries and insightful visualizations +
+ +
+ +
+
- - - -
- - - + +
+ +
-
- -
- -
- -
- - -
- -
- -
- - -
- - -
- -
- - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
- -
- -
- -
- -
- - +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - -
- -
-
- - -
- -
-
- - -
-
- - - - - -
-
- - -
- -
-
- - -
-
-
- Name -
- - 		-
- Last updated -
-
- 11/04/2021 06:10 PM -
- 		-
- Created -
-
- 11/02/2021 07:26 PM -
-
-
- - -
- -
-
- - -
-
-
- Name -
- - 		-
- Last updated -
-
- 11/03/2021 10:51 PM -
- 		-
- Created -
-
- 11/02/2021 09:44 PM -
-
-
- - -
- -
-
- - -
-
-
- Name -
- - 		-
- Last updated -
-
- 11/03/2021 10:37 PM -
- 		-
- Created -
-
- 10/29/2021 10:15 PM -
-
-
- - -
- -
-
- - -
-
-
- Name -
- - 		-
- Last updated -
-
- 11/03/2021 09:26 PM -
- 		-
- Created -
-
- 11/03/2021 09:26 PM -
-
- -
- + + + + + +
+ + -
- -
- - + - -
- -
- - - : - 10 - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
- -
- - -
- - - -
- -
- - + Add samples + + + + + +
- +
- - -
- - -
- -
- -
- + + +
+ +
+ + +
+ +
+ +
+ + `; diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap index 7b2eda6f2..8bd0d4395 100644 --- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap +++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap @@ -545,7 +545,7 @@ exports[`Panels View Component renders panel view container with visualizations iconType="arrowDown" onClick={[Function]} > - Panel actions + Dashboard Actions } closePopover={[Function]} @@ -640,7 +640,7 @@ exports[`Panels View Component renders panel view container with visualizations - Panel actions + Dashboard Actions @@ -2624,7 +2624,7 @@ exports[`Panels View Component renders panel view container without visualizatio iconType="arrowDown" onClick={[Function]} > - Panel actions + Dashboard Actions } closePopover={[Function]} @@ -2714,7 +2714,7 @@ exports[`Panels View Component renders panel view container without visualizatio - Panel actions + Dashboard Actions diff --git a/public/components/custom_panels/__tests__/custom_panel_table.test.tsx b/public/components/custom_panels/__tests__/custom_panel_table.test.tsx index 811bbf9c8..b3bcd71af 100644 --- a/public/components/custom_panels/__tests__/custom_panel_table.test.tsx +++ b/public/components/custom_panels/__tests__/custom_panel_table.test.tsx @@ -3,13 +3,18 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { applyMiddleware, createStore } from '@reduxjs/toolkit'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { configure, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; -import { CustomPanelTable } from '../custom_panel_table'; -import { waitFor, render, screen, fireEvent } from '@testing-library/react'; -import { panelBreadCrumbs, panelsData } from '../../../../test/panels_constants'; +import { Provider } from 'react-redux'; +import thunk from 'redux-thunk'; import { CustomPanelListType } from '../../../../common/types/custom_panels'; +import { panelBreadCrumbs, panelsData } from '../../../../test/panels_constants'; +import { coreRefs } from '../../../framework/core_refs'; +import { rootReducer } from '../../../framework/redux/reducers'; +import { CustomPanelTable } from '../custom_panel_table'; jest.mock('react-router-dom', () => ({ useLocation: jest.fn().mockReturnValue({ @@ -19,11 +24,18 @@ jest.mock('react-router-dom', () => ({ state: null, key: '', }), - useHistory: jest.fn() + useHistory: jest.fn(), })); describe('Panels Table Component', () => { configure({ adapter: new Adapter() }); + const store = createStore(rootReducer, applyMiddleware(thunk)); + coreRefs.savedObjectsClient.find = jest.fn(() => + Promise.resolve({ + savedObjects: [], + then: () => Promise.resolve(), + }) + ); it('renders empty panel table container', async () => { const loading = false; @@ -38,18 +50,20 @@ describe('Panels Table Component', () => { const addSamplePanels = jest.fn(); const wrapper = mount( - + + + ); wrapper.update(); @@ -71,18 +85,20 @@ describe('Panels Table Component', () => { const addSamplePanels = jest.fn(); const wrapper = mount( - + + + ); wrapper.update(); @@ -102,24 +118,26 @@ describe('Panels Table Component', () => { const cloneCustomPanel = jest.fn(); const deleteCustomPanelList = jest.fn(); const addSamplePanels = jest.fn(); - + const utils = render( - + + + ); - fireEvent.click(screen.getAllByText('Create panel')[0]); + fireEvent.click(screen.getAllByText('Create Dashboard')[0]); await waitFor(() => { - expect(global.window.location.href).toContain('/create') + expect(global.window.location.href).toContain('/create'); }); }); }); diff --git a/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/public/components/custom_panels/helpers/__tests__/utils.test.tsx index ba4c6b27b..9ea806c5b 100644 --- a/public/components/custom_panels/helpers/__tests__/utils.test.tsx +++ b/public/components/custom_panels/helpers/__tests__/utils.test.tsx @@ -3,20 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { DurationRange } from '@elastic/eui/src/components/date_picker/types'; import { configure, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import moment from 'moment'; -import { DurationRange } from '@elastic/eui/src/components/date_picker/types'; - -import { - isNameValid, - convertDateTime, - mergeLayoutAndVisualizations, - onTimeChange, - isDateValid, - isPPLFilterValid, - displayVisualization, -} from '../utils'; +import React from 'react'; +import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared'; import { sampleLayout, sampleMergedVisualizations, @@ -26,11 +18,16 @@ import { sampleSavedVisualization, sampleSavedVisualizationForHorizontalBar, sampleSavedVisualizationForLine, - sampleSavedVisualizationForPie, - sampleSavedVisualizationForTreeMap, } from '../../../../../test/panels_constants'; -import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared'; -import React from 'react'; +import { + convertDateTime, + displayVisualization, + isDateValid, + isNameValid, + isPPLFilterValid, + mergeLayoutAndVisualizations, + onTimeChange, +} from '../utils'; describe('Utils helper functions', () => { configure({ adapter: new Adapter() }); @@ -56,23 +53,22 @@ describe('Utils helper functions', () => { }); it('validates onTimeChange function', () => { - const setRecentlyUsedRanges = jest.fn((x) => x); - const setStart = jest.fn(); - const setEnd = jest.fn(); const recentlyUsedRanges: DurationRange[] = []; - onTimeChange( + const result = onTimeChange( '2022-01-30T18:44:40.577Z', '2022-02-25T19:18:33.075Z', - recentlyUsedRanges, - setRecentlyUsedRanges, - setStart, - setEnd + recentlyUsedRanges ); - expect(setRecentlyUsedRanges).toHaveBeenCalledWith([ - { start: '2022-01-30T18:44:40.577Z', end: '2022-02-25T19:18:33.075Z' }, - ]); - expect(setStart).toHaveBeenCalledWith('2022-01-30T18:44:40.577Z'); - expect(setEnd).toHaveBeenCalledWith('2022-02-25T19:18:33.075Z'); + expect(result).toEqual({ + start: '2022-01-30T18:44:40.577Z', + end: '2022-02-25T19:18:33.075Z', + updatedRanges: [ + { + start: '2022-01-30T18:44:40.577Z', + end: '2022-02-25T19:18:33.075Z', + }, + ], + }); }); it('validates isDateValid function', () => { diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap index acc9e820e..cbc6c696c 100644 --- a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap +++ b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap @@ -1,553 +1,608 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Saved query table component Renders saved query table 1`] = ` - + - -

- Custom operational dashboards/application -

- - -
+ Custom operational dashboards/application + + +
- -
- +
- -
- + - - - - + } + color="hollow" + iconOnClick={[Function]} + iconOnClickAriaLabel="Remove [Logs] Web traffic Panel from selection in this group" + iconSide="right" + iconType="cross" + panel={ + Object { + "dateCreated": 1637781403888, + "dateModified": 1637781403888, + "id": "uRZgU30B661cwDZT-ILw", + "name": "[Logs] Web traffic Panel", + } + } + title="[Logs] Web traffic Panel" + > + - [Logs] Web traffic Panel - - + > + + + + + - - - - - - + + + + - - - - + } + color="hollow" + iconOnClick={[Function]} + iconOnClickAriaLabel="Remove [Logs] Web traffic Panel 2 from selection in this group" + iconSide="right" + iconType="cross" + panel={ + Object { + "dateCreated": 1637781403888, + "dateModified": 1637781403888, + "id": "uRZgU30B661cwDZT-ILw", + "name": "[Logs] Web traffic Panel", + } + } + title="[Logs] Web traffic Panel 2" + > + - [Logs] Web traffic Panel 2 - - + > + + + + + - - - - - - -
+ + + + -
-
- -
- + +
+
+ +
+ -
- - + + + + + - - - - - -
- + +
+ +
-
- - -
- - -
+ +
+ + - Search existing dashboards or applications by name -
- +
+ Search existing dashboards or applications by name +
+ +
- - - -

+ - Name -

- - -
+ Name + + +
- - -
- - - - + + + + +
-
- - - -
+ + - Name for your savings -
- +
+ Name for your savings +
+ +
- - - -
+
- - - -
- + + Save as Metric - - - Save as Metric - -
- - - +
+ + + +
- - - + + + `; diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx b/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx index a35b7b58a..0ffab1acb 100644 --- a/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx +++ b/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx @@ -3,46 +3,60 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { applyMiddleware, createStore } from '@reduxjs/toolkit'; +import { waitFor } from '@testing-library/react'; import { configure, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; -import { waitFor } from '@testing-library/react'; -import { SavePanel } from '../save_panel'; +import { Provider } from 'react-redux'; +import thunk from 'redux-thunk'; import { SELECTED_PANELS_OPTIONS } from '../../../../../../test/event_analytics_constants'; -import SavedObjects from '../../../../../services/saved_objects/event_analytics/saved_objects'; import httpClientMock from '../../../../../../test/__mocks__/httpClientMock'; +import { coreRefs } from '../../../../../framework/core_refs'; +import { rootReducer } from '../../../../../framework/redux/reducers'; +import SavedObjects from '../../../../../services/saved_objects/event_analytics/saved_objects'; +import { SavePanel } from '../save_panel'; describe('Saved query table component', () => { configure({ adapter: new Adapter() }); + const store = createStore(rootReducer, applyMiddleware(thunk)); + coreRefs.savedObjectsClient.find = jest.fn(() => + Promise.resolve({ + savedObjects: [], + then: () => Promise.resolve(), + }) + ); it('Renders saved query table', async () => { const handleNameChange = jest.fn(); const handleOptionChange = jest.fn(); const setMetricLabel = jest.fn(); const savedObjects = new SavedObjects(httpClientMock); - + const wrapper = mount( - + + + ); - + wrapper.update(); await waitFor(() => { expect(wrapper).toMatchSnapshot(); }); }); -}); \ No newline at end of file +}); diff --git a/test/setup.jest.ts b/test/setup.jest.ts index 7f612f908..6bbbefb80 100644 --- a/test/setup.jest.ts +++ b/test/setup.jest.ts @@ -6,6 +6,7 @@ // import '@testing-library/jest-dom/extend-expect'; import { configure } from '@testing-library/react'; import { setOSDHttp, setOSDSavedObjectsClient } from '../common/utils'; +import { coreRefs } from '../public/framework/core_refs'; import { coreStartMock } from './__mocks__/coreMocks'; configure({ testIdAttribute: 'data-test-subj' }); @@ -57,3 +58,5 @@ jest.setTimeout(30000); setOSDHttp(coreStartMock.http); setOSDSavedObjectsClient(coreStartMock.savedObjects.client); +coreRefs.http = coreStartMock.http; +coreRefs.savedObjectsClient = coreStartMock.savedObjects.client;