From 33ba1d01413afe933812f339dc772f1c373a5df9 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Fri, 2 Feb 2024 17:29:30 -0800 Subject: [PATCH 1/2] updating panels tests and fixing flaky ones Signed-off-by: Sean Li --- .../integration/panels_test/panels.spec.ts | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/.cypress/integration/panels_test/panels.spec.ts b/.cypress/integration/panels_test/panels.spec.ts index 794310162..511d5080e 100644 --- a/.cypress/integration/panels_test/panels.spec.ts +++ b/.cypress/integration/panels_test/panels.spec.ts @@ -16,7 +16,7 @@ import { TEST_PANEL, } from '../../utils/panel_constants'; -describe('Panels testing with Sample Data', () => { +describe('Panels testing with Sample Data', { defaultCommandTimeout: 10000 }, () => { suppressResizeObserverIssue(); //needs to be in file once before(() => { @@ -43,11 +43,11 @@ describe('Panels testing with Sample Data', () => { }); it('Create first visualization in event analytics', () => { + cy.get('[data-test-subj="eventHomeAction__explorer"]').click(); cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[0], { delay: 50, }); - cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); - cy.wait(delay); //occationaly refresh wont work without this + cy.get('.euiButton__text').contains('Run').trigger('mouseover').click(); cy.get('button[id="main-content-vis"]') .contains('Visualizations') .trigger('mouseover', { force: true }) @@ -55,7 +55,6 @@ describe('Panels testing with Sample Data', () => { cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]') .trigger('mouseover') .click({ force: true }); - cy.wait(delay * 5); //Wont save as correct name without wait cy.get('[data-test-subj="eventExplorer__querySaveName"]') .focus() .type(PPL_VISUALIZATIONS_NAMES[0]); @@ -65,8 +64,14 @@ describe('Panels testing with Sample Data', () => { }); it('Create second visualization in event analytics', () => { - cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[1]); - cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); + cy.get('[data-test-subj="eventHomeAction__explorer"]').click(); + // Workaround until issue #1403 is fixed + // Should be the following commented lines + // cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[1], { + // delay: 50, + // }); + cy.get('[id^=autocomplete-textarea]').focus().invoke('val', PPL_VISUALIZATIONS[1]).trigger('input').trigger('change'); + cy.get('.euiButton__text').contains('Run').trigger('mouseover').click(); cy.get('button[id="main-content-vis"]') .contains('Visualizations') .trigger('mouseover') @@ -74,7 +79,6 @@ describe('Panels testing with Sample Data', () => { cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]') .trigger('mouseover') .click(); - cy.wait(delay * 5); //Wont save as correct name without wait cy.get('[data-test-subj="eventExplorer__querySaveName"]') .focus() .type(PPL_VISUALIZATIONS_NAMES[1]); @@ -151,7 +155,6 @@ describe('Panels testing with Sample Data', () => { it('Searches panels', () => { createLegacyPanel('Legacy Named'); createSavedObjectPanel('Saved Object'); - cy.wait(delay); //Needed so the panel appears on the dashboard page cy.reload(); cy.get('input[data-test-subj="operationalPanelSearchBar"]') .focus() @@ -306,15 +309,17 @@ describe('Panels testing with Sample Data', () => { cy.get('h1[data-test-subj="panelNameHeader"]').contains('Renamed Panel').should('exist'); }); - it('Change date filter of the panel', () => { - cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({ + // Skipping for now as it's flaky (failed on 34th run) + it.skip('Change date filter of the panel', () => { + cy.intercept('**').as('putRequest'); + cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({ force: true, }); - cy.wait(delay); //flyout won't open sometimes without + cy.wait('@putRequest'); cy.get('button[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click({ force: true, }); - cy.get('button[data-test-subj="superDatePickerShowDatesButton"]') + cy.get('[data-test-subj="superDatePickerShowDatesButton"]') .contains('This year') .should('exist'); }); @@ -329,7 +334,6 @@ describe('Panels testing with Sample Data', () => { cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click(); cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]); cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click(); - cy.get('.plot-container').should('exist'); cy.get('button[data-test-subj="addFlyoutButton"]').click({ force: true }); cy.get('.euiToastHeader__title').contains('successfully').should('exist'); }); @@ -344,7 +348,6 @@ describe('Panels testing with Sample Data', () => { cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click(); cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]); cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click(); - cy.get('.plot-container').should('exist'); cy.get('button[data-test-subj="addFlyoutButton"]').click({ force: true }); cy.get('.euiToastHeader__title').contains('successfully').should('exist'); }); @@ -380,7 +383,6 @@ describe('Panels testing with Sample Data', () => { cy.get('[data-test-subj="searchAutocompleteTextArea"]') .trigger('mouseover') .click({ force: true }) - .wait(delay * 5) .focus() .type(PPL_FILTER); cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click({ force: true }); @@ -553,9 +555,8 @@ describe('Panels testing with Sample Data', () => { cy.get('button[data-test-subj="createNewVizContextMenuItem"]').click(); cy.url().should('match', new RegExp('(.*)#/explorer')); - cy.get('a[data-test-subj="eventExplorer__addNewTab"]').click({ force: true }); cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[0]); - cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click({ force: true }); + cy.get('.euiButton__text').contains('Run').trigger('mouseover').click(); cy.get('button[id="main-content-vis"]') .contains('Visualizations') From fc9664989ed9e726c8bcce88c9c141f47a99f71d Mon Sep 17 00:00:00 2001 From: Sean Li Date: Fri, 2 Feb 2024 18:20:19 -0800 Subject: [PATCH 2/2] improving test coverage on panels Signed-off-by: Sean Li --- .../custom_panel_table.test.tsx.snap | 2974 ++++++++++------- .../custom_panel_view.test.tsx.snap | 862 +++++ .../custom_panel_view_so.test.tsx.snap | 1296 +++++++ .../__tests__/custom_panel_table.test.tsx | 213 +- .../__tests__/custom_panel_view.test.tsx | 90 +- .../__tests__/custom_panel_view_so.test.tsx | 176 + .../custom_panels/custom_panel_view.tsx | 11 +- .../add_visualization_helper.test.ts | 38 + .../helpers/__tests__/utils.test.tsx | 12 + .../visualization_container.tsx | 2 +- .../visualization_flyout.test.tsx.snap | 19 +- .../visualization_flyout_so.test.tsx.snap | 2562 ++++++++++++++ .../__tests__/visualization_flyout.test.tsx | 17 + .../visualization_flyout_so.test.tsx | 102 + test/panels_constants.tsx | 49 + 15 files changed, 7185 insertions(+), 1238 deletions(-) create mode 100644 public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap create mode 100644 public/components/custom_panels/__tests__/custom_panel_view_so.test.tsx create mode 100644 public/components/custom_panels/helpers/__tests__/add_visualization_helper.test.ts create mode 100644 public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout_so.test.tsx.snap create mode 100644 public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout_so.test.tsx 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 a84231231..4e99a4432 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,1233 +1,1929 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Panels Table Component renders empty panel table container 1`] = ` - -
- +
- + Observability dashboards + +
+
+
+
+
+

+ Dashboard + + ( + 4 + ) + +

+
+
+
+ Use Observability Dashboard to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries. + + + Learn more + + + + +
+
+
+
- -
+
- -
+
- -
- - + + + Actions + + + +
+
+
+
+ + + + Create Dashboard + + + +
+
+
+
+
+
+
+ +
+ - +
+
+
+
+
+
+
+
+
- + +
+ +
+
+
+
+
- -
+ - -

- Dashboard - - ( - 0 - ) - -

- - + +
- - +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
-
- - + +
+
+
+ 		+ + + + + +
+
- - + +
+
+
+
+
+ Name +
+
+ + Test Panel 1 Title + +
+ 		+
+ Last updated +
+
+ 11/04/2021 06:10 PM +
+ 		+
+ Created +
+
+ 11/02/2021 07:26 PM +
+
+
- -
-

- No Observability Dashboards -

- -
- - -
- -
- Use Observability Dashboards to dive deeper into observability -
- using PPL queries and insightful visualizations -
- -
- -
- + +
- - +
+
+ Name +
+
+ + Test Panel 1 Title + +
+ 		+
+ Last updated +
+
+ 11/03/2021 10:51 PM +
+ 		+
+ Created +
+
+ 11/02/2021 09:44 PM +
+
+
- - + +
+
+
+
+
+ Name +
+
+ + Test Panel 1 Title + +
+ 		+
+ Last updated +
+
+ 11/03/2021 10:37 PM +
+ 		+
+ Created +
+
+ 10/29/2021 10:15 PM +
+
+
- +
+
+
+
+
+ Name +
+
+ + Test Panel 1 Title + +
+ 		+
+ Last updated +
+
+ 11/03/2021 09:26 PM +
+ 		+
+ Created +
+
+ 11/03/2021 09:26 PM +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
- -
- - + + + + + + +
+
+
+
+
+
+ + +`; + +exports[`Panels Table Component renders empty dashboard table container 1`] = ` +
+
+
+
+
+

+ Observability dashboards +

+
+
+
+
+
+

+ Dashboard + + ( + 0 + ) + +

+
+
+
+ Use Observability Dashboard to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries. + + + Learn more + + +
+
+
+
+
+
+
+
+
- - +
+
+
+ + + + Create Dashboard + + + +
+
+
+
+
+
+
+
+

+ No Observability Dashboards +

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

+ Dashboard + + ( + 4 + ) + +

+
- -
+ Use Observability Dashboard to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries. + + - - +
+
+
+
+
+
+
+
- - - - + + + Actions + + + +
+
+
+
+ + + + Create Dashboard + + + +
+
+
+
+
+
+
+ +
+ - +
+
+
+
+
+
+
+
+
- + +
+ +
+
+
+
+
- -
+ - -

- Dashboard - - ( - 0 - ) - -

- - + +
- - +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
-
- - + +
+
+
+ 		+ + + + + +
+
- - + +
+
+
+
+
+ Name +
+
+ + Test Panel 1 Title + +
+ 		+
+ Last updated +
+
+ 11/04/2021 06:10 PM +
+ 		+
+ Created +
+
+ 11/02/2021 07:26 PM +
+
+
- -
-

- No Observability Dashboards -

- -
- - -
- -
- Use Observability Dashboards to dive deeper into observability -
- using PPL queries and insightful visualizations -
- -
- -
- + +
- - +
+
+ Name +
+
+ + Test Panel 1 Title + +
+ 		+
+ Last updated +
+
+ 11/03/2021 10:51 PM +
+ 		+
+ Created +
+
+ 11/02/2021 09:44 PM +
+
+
- - + +
+
+
+
+
+ Name +
+
+ + Test Panel 1 Title + +
+ 		+
+ Last updated +
+
+ 11/03/2021 10:37 PM +
+ 		+
+ Created +
+
+ 10/29/2021 10:15 PM +
+
+
+ +
+
+
+
+
+ Name +
+
+ + Test Panel 1 Title + +
+ 		+
+ Last updated +
+
+ 11/03/2021 09:26 PM +
+ 		+
+ Created +
+
+ 11/03/2021 09:26 PM +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
- -
- - + + + + + + +
- +
- +
- - +
+
`; 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 fcd77d38b..a1fa01383 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 @@ -1,5 +1,867 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Panels View Component render panel view container and refresh panel 1`] = ` +
+
+
+
+
+

+
+
+
+ Created on + Invalid date +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+

+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+

+ Start by adding your first visualization +

+
+
+
+ Use PPL Queries to fetch & filter observability data and create visualizations +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Panels View Component render panel view so container and reload dashboard 1`] = ` +
+
+
+
+
+

+
+
+
+ Created on + Invalid date +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+

+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+

+ Start by adding your first visualization +

+
+
+
+ Use PPL Queries to fetch & filter observability data and create visualizations +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+`; + exports[`Panels View Component renders panel view container with visualizations 1`] = ` +
+
+
+
+

+
+
+
+ Created on + 02/03/2024 02:06 AM +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+

+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+

+ Start by adding your first visualization +

+
+
+
+ Use PPL Queries to fetch & filter observability data and create visualizations +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Panels View SO Component render panel view so container and reload dashboard 1`] = ` +
+
+
+
+
+

+
+
+
+ Created on + 02/03/2024 02:06 AM +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+

+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+

+ Start by adding your first visualization +

+
+
+
+ Use PPL Queries to fetch & filter observability data and create visualizations +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Panels View SO Component renders panel view SO container without visualizations 1`] = `null`; + +exports[`Panels View SO Component renders panels view SO container with visualizations 1`] = ` +
+
+
+
+
+

+
+
+
+ Created on + 02/03/2024 02:06 AM +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+

+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+

+ Start by adding your first visualization +

+
+
+
+ Use PPL Queries to fetch & filter observability data and create visualizations +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+`; 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 b3bcd71af..92d86421e 100644 --- a/public/components/custom_panels/__tests__/custom_panel_table.test.tsx +++ b/public/components/custom_panels/__tests__/custom_panel_table.test.tsx @@ -4,17 +4,17 @@ */ import { applyMiddleware, createStore } from '@reduxjs/toolkit'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import { configure, mount } from 'enzyme'; +import { fireEvent, render, waitFor, act, cleanup } from '@testing-library/react'; +import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; 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'; +import { setPanelList } from '../redux/panel_slice'; jest.mock('react-router-dom', () => ({ useLocation: jest.fn().mockReturnValue({ @@ -36,108 +36,143 @@ describe('Panels Table Component', () => { then: () => Promise.resolve(), }) ); + coreRefs.savedObjectsClient.create = jest + .fn() + .mockReturnValue({ operationalPanle: panelsData.panels[0] }); + coreRefs.savedObjectsClient.delete = jest.fn(() => + Promise.resolve({ + savedObjects: [], + then: () => Promise.resolve(), + }) + ); + coreRefs.http.get = jest.fn().mockReturnValue({ operationalPanel: panelsData.panels[0] }); + coreRefs.http.post = jest.fn(); + coreRefs.http.delete = jest.fn(() => + Promise.resolve({ + savedObjects: [], + then: () => Promise.resolve(), + }) + ); + + const props = { + loading: false, + setBreadcrumbs: jest.fn(), + parentBreadcrumbs: panelBreadCrumbs, + addSamplePanels: jest.fn(), + }; - it('renders empty panel table container', async () => { - const loading = false; - const fetchCustomPanels = jest.fn(); - const customPanelData: CustomPanelListType[] = []; - const createCustomPanel = jest.fn(); - const setBreadcrumbs = jest.fn(); - const parentBreadcrumb = panelBreadCrumbs; - const renameCustomPanel = jest.fn(); - const cloneCustomPanel = jest.fn(); - const deleteCustomPanelList = jest.fn(); - const addSamplePanels = jest.fn(); - - const wrapper = mount( + const renderPanelTable = () => { + const utils = render( - + ); - wrapper.update(); + return utils; + }; + + afterEach(() => { + cleanup(); + }); + + it('renders empty dashboard table container', async () => { + const utils = renderPanelTable(); await waitFor(() => { - expect(wrapper).toMatchSnapshot(); + expect(utils.container.firstChild).toMatchSnapshot(); }); }); - it('renders panel table container', async () => { - const loading = false; - const fetchCustomPanels = jest.fn(); - const customPanelData: CustomPanelListType[] = panelsData.panels; - const createCustomPanel = jest.fn(); - const setBreadcrumbs = jest.fn(); - const parentBreadcrumb = panelBreadCrumbs; - const renameCustomPanel = jest.fn(); - const cloneCustomPanel = jest.fn(); - const deleteCustomPanelList = jest.fn(); - const addSamplePanels = jest.fn(); - - const wrapper = mount( - - - - ); - wrapper.update(); + it('render dashboard table container with panels', async () => { + store.dispatch(setPanelList(panelsData.panels)); + const utils = renderPanelTable(); await waitFor(() => { - expect(wrapper).toMatchSnapshot(); + expect(utils.container.firstChild).toMatchSnapshot(); }); }); - it('create custom panel', async () => { - const loading = false; - const fetchCustomPanels = jest.fn(); - const customPanelData: CustomPanelListType[] = []; - const createCustomPanel = jest.fn(); - const setBreadcrumbs = jest.fn(); - const parentBreadcrumb = panelBreadCrumbs; - const renameCustomPanel = jest.fn(); - const cloneCustomPanel = jest.fn(); - const deleteCustomPanelList = jest.fn(); - const addSamplePanels = jest.fn(); + it('create a custom dashboard from empty table view', async () => { + const utils = renderPanelTable(); - const utils = render( - - - - ); - fireEvent.click(screen.getAllByText('Create Dashboard')[0]); + fireEvent.click(utils.getByTestId('customPanels__createNewPanels')); + await waitFor(() => { + expect(global.window.location.href).toContain('create'); + }); + }); + + it('create a custom dashboard from populated table view', async () => { + const utils = renderPanelTable(); + + fireEvent.click(utils.getByTestId('customPanels__createNewPanels')); + await waitFor(() => { + expect(global.window.location.href).toContain('create'); + }); + }); + + it('clone a custom dashboard', async () => { + store.dispatch(setPanelList(panelsData.panels)); + const utils = renderPanelTable(); + + fireEvent.click(utils.getAllByLabelText('Select this row')[0]); + fireEvent.click(utils.getByTestId('operationalPanelsActionsButton')); + fireEvent.click(utils.getByTestId('duplicateContextMenuItem')); + expect(utils.getByTestId('customModalFieldText')).toBeInTheDocument(); + + fireEvent.input(utils.getByTestId('customModalFieldText'), { + target: { value: 'copy' }, + }); + act(() => { + fireEvent.click(utils.getByTestId('runModalButton')); + }); + await waitFor(() => { + expect(coreRefs.savedObjectsClient.create).toHaveBeenCalledTimes(1); + }); + }); + + it('rename a custom panel', async () => { + store.dispatch(setPanelList(panelsData.panels)); + const utils = renderPanelTable(); + + fireEvent.click(utils.getAllByLabelText('Select this row')[0]); + fireEvent.click(utils.getByTestId('operationalPanelsActionsButton')); + fireEvent.click(utils.getByTestId('renameContextMenuItem')); + expect(utils.getByTestId('customModalFieldText')).toBeInTheDocument(); + + fireEvent.input(utils.getByTestId('customModalFieldText'), { + target: { value: 'renamed dashboard' }, + }); + act(() => { + fireEvent.click(utils.getByTestId('runModalButton')); + }); + await waitFor(() => { + expect(coreRefs.http?.post).toHaveBeenCalledTimes(1); + }); + }); + + it('delete a custom panel', async () => { + store.dispatch(setPanelList(panelsData.panels)); + const utils = renderPanelTable(); + + fireEvent.click(utils.getAllByLabelText('Select this row')[0]); + fireEvent.click(utils.getByTestId('operationalPanelsActionsButton')); + fireEvent.click(utils.getByTestId('deleteContextMenuItem')); + expect(utils.getByTestId('popoverModal__deleteTextInput')).toBeInTheDocument(); + + fireEvent.input(utils.getByTestId('popoverModal__deleteTextInput'), { + target: { value: 'delete' }, + }); + act(() => { + fireEvent.click(utils.getByTestId('popoverModal__deleteButton')); + }); + await waitFor(() => { + expect(coreRefs.http.delete).toHaveBeenCalledTimes(1); + }); + }); + + it('renders empty panel table container2', async () => { + const utils = renderPanelTable(); await waitFor(() => { - expect(global.window.location.href).toContain('/create'); + expect(utils.container.firstChild).toMatchSnapshot(); }); }); }); diff --git a/public/components/custom_panels/__tests__/custom_panel_view.test.tsx b/public/components/custom_panels/__tests__/custom_panel_view.test.tsx index d4eb276e6..8ee8e496e 100644 --- a/public/components/custom_panels/__tests__/custom_panel_view.test.tsx +++ b/public/components/custom_panels/__tests__/custom_panel_view.test.tsx @@ -7,7 +7,8 @@ import { configure, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; import { CustomPanelView } from '../custom_panel_view'; -import { waitFor } from '@testing-library/react'; + +import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react'; import { panelBreadCrumbs, sampleEmptyPanel, @@ -15,21 +16,59 @@ import { samplePPLResponse, sampleSavedVisualization, } from '../../../../test/panels_constants'; +// eslint-disable-next-line jest/no-mocks-import import httpClientMock from '../../../../test/__mocks__/httpClientMock'; import PPLService from '../../../../public/services/requests/ppl'; import DSLService from '../../../../public/services/requests/dsl'; +// eslint-disable-next-line jest/no-mocks-import import { coreStartMock } from '../../../../test/__mocks__/coreMocks'; import { HttpResponse } from '../../../../../../src/core/public'; import { applyMiddleware, createStore } from 'redux'; import { rootReducer } from '../../../framework/redux/reducers'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; +import { setPanelList } from '../redux/panel_slice'; +import { coreRefs } from '../../../../public/framework/core_refs'; describe('Panels View Component', () => { configure({ adapter: new Adapter() }); const store = createStore(rootReducer, applyMiddleware(thunk)); + const props = { + panelId: 'L8Sx53wBDp0rvEg3yoLb', + http: httpClientMock, + pplService: new PPLService(httpClientMock), + dslService: new DSLService(httpClientMock), + core: coreStartMock, + chrome: coreStartMock.chrome, + parentBreadcrumbs: panelBreadCrumbs, + startTime: 'now-30m', + endTime: 'now', + setStartTime: jest.fn(), + setEndTime: jest.fn(), + renameCustomPanel: jest.fn(), + cloneCustomPanel: jest.fn(), + deleteCustomPanel: jest.fn(), + setToast: jest.fn(), + onEditClick: (savedVisId: string) => { + window.location.assign(`#/event_analytics/explorer/${savedVisId}`); + }, + }; + + const renderPanelView = (overrides = {}) => { + const utils = render( + + + + ); + return utils; + }; + + afterEach(() => { + cleanup(); + }); + it('renders panel view container without visualizations', async () => { httpClientMock.get = jest.fn(() => Promise.resolve((sampleEmptyPanel as unknown) as HttpResponse) @@ -141,4 +180,53 @@ describe('Panels View Component', () => { expect(wrapper).toMatchSnapshot(); }); }); + + it('render panel view container and refresh panel', async () => { + let counter = 0; + httpClientMock.get = jest.fn(() => { + if (counter === 0) { + counter += 1; + return Promise.resolve((samplePanel as unknown) as HttpResponse); + } else return Promise.resolve((sampleSavedVisualization as unknown) as HttpResponse); + }); + + httpClientMock.post = jest.fn(() => + Promise.resolve((samplePPLResponse as unknown) as HttpResponse) + ); + const http = httpClientMock; + const pplService = new PPLService(httpClientMock); + const dslService = new DSLService(httpClientMock); + const panelView = renderPanelView({ http, pplService, dslService }); + + fireEvent.click(panelView.getByTestId('superDatePickerApplyTimeButton')); + expect(panelView.container.firstChild).toMatchSnapshot(); + }); + + it('render panel view container and duplicate dashboard', async () => { + store.dispatch(setPanelList([sampleSavedVisualization])); + const utils = renderPanelView(sampleSavedVisualization); + + fireEvent.click(utils.getByTestId('panelActionContextMenu')); + fireEvent.click(utils.getByTestId('duplicatePanelContextMenuItem')); + expect(utils.getByTestId('customModalFieldText')).toBeInTheDocument(); + + fireEvent.input(utils.getByTestId('customModalFieldText'), { + target: { value: 'duplicate panel' }, + }); + act(() => { + fireEvent.click(utils.getByTestId('runModalButton')); + }); + await waitFor(() => { + expect(coreRefs.savedObjectsClient.create).toBeCalledTimes(1); + }); + }); + + it('render panel view so container and reload dashboard', async () => { + store.dispatch(setPanelList([sampleSavedVisualization])); + const utils = renderPanelView(sampleSavedVisualization); + + fireEvent.click(utils.getByTestId('panelActionContextMenu')); + fireEvent.click(utils.getByTestId('reloadPanelContextMenuItem')); + expect(utils.container.firstChild).toMatchSnapshot(); + }); }); diff --git a/public/components/custom_panels/__tests__/custom_panel_view_so.test.tsx b/public/components/custom_panels/__tests__/custom_panel_view_so.test.tsx new file mode 100644 index 000000000..f8f6f7f96 --- /dev/null +++ b/public/components/custom_panels/__tests__/custom_panel_view_so.test.tsx @@ -0,0 +1,176 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import React from 'react'; +import { CustomPanelViewSO } from '../custom_panel_view_so'; + +import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react'; +import { + panelBreadCrumbs, + samplePanel, + samplePPLResponse, + sampleSavedVisualization, + sampleSavedObjectPanel, + sampleSavedObjectPanelWithVisualization, +} from '../../../../test/panels_constants'; +// eslint-disable-next-line jest/no-mocks-import +import httpClientMock from '../../../../test/__mocks__/httpClientMock'; +import PPLService from '../../../../public/services/requests/ppl'; +import { HttpResponse } from '../../../../../../src/core/public'; +import DSLService from '../../../../public/services/requests/dsl'; +// eslint-disable-next-line jest/no-mocks-import +import { coreStartMock } from '../../../../test/__mocks__/coreMocks'; +import { applyMiddleware, createStore } from 'redux'; +import { coreRefs } from '../../../framework/core_refs'; +import { rootReducer } from '../../../framework/redux/reducers'; +import thunk from 'redux-thunk'; +import { Provider } from 'react-redux'; +import { setPanelList } from '../redux/panel_slice'; + +jest.mock('react-router-dom', () => ({ + useLocation: jest.fn().mockReturnValue({ + pathname: '/operational_panels/L8Sx53wBDp0rvEg3yoLb', + search: '', + hash: '', + state: null, + key: '', + }), + useHistory: jest.fn(), +})); + +describe('Panels View SO Component', () => { + configure({ adapter: new Adapter() }); + const store = createStore(rootReducer, applyMiddleware(thunk)); + + const http = httpClientMock; + let counter = 0; + http.get = jest.fn(() => { + if (counter === 0) { + counter += 1; + return Promise.resolve((samplePanel as unknown) as HttpResponse); + } else return Promise.resolve((sampleSavedVisualization as unknown) as HttpResponse); + }); + http.post = jest.fn(() => Promise.resolve((samplePPLResponse as unknown) as HttpResponse)); + const pplService = new PPLService(http); + const dslService = new DSLService(http); + coreRefs.savedObjectsClient.create = jest + .fn() + .mockReturnValue(sampleSavedObjectPanelWithVisualization); + coreRefs.savedObjectsClient.get = jest + .fn() + .mockReturnValue(sampleSavedObjectPanelWithVisualization); + coreRefs.savedObjectsClient.find = jest + .fn() + .mockReturnValue(sampleSavedObjectPanelWithVisualization); + coreRefs.savedObjectsClient.update = jest.fn(); + coreRefs.savedObjectsClient.delete = jest.fn(); + coreRefs.http.post = jest.fn(); + coreRefs.http.delete = jest.fn(); + + afterEach(() => { + cleanup(); + }); + + const props = { + panelId: 'L8Sx53wBDp0rvEg3yoLb', + coreSavedObjects: coreStartMock.savedObjects, + chrome: coreStartMock.chrome, + parentBreadcrumbs: panelBreadCrumbs, + cloneCustomPanel: jest.fn(), + onEditClick: (savedVisId: string) => { + window.location.assign(`#/event_analytics/explorer/${savedVisId}`); + }, + http, + pplService, + dslService, + }; + + const renderPanelView = (savedObject, overrides = {}) => { + coreRefs.savedObjectsClient.get = jest.fn().mockReturnValue(savedObject); + coreRefs.savedObjectsClient.find = jest.fn().mockReturnValue(savedObject); + const utils = render( + + + + ); + return utils; + }; + + afterEach(() => { + cleanup(); + }); + + it('renders panel view SO container without visualizations', async () => { + const utils = renderPanelView(sampleSavedObjectPanel); + + await waitFor(() => { + expect(utils.container.firstChild).toMatchSnapshot(); + }); + }); + + it('renders panels view SO container with visualizations', async () => { + const utils = renderPanelView(sampleSavedObjectPanelWithVisualization); + + await waitFor(() => { + expect(utils.container.firstChild).toMatchSnapshot(); + }); + }); + + it('render panel view container and refresh panel', async () => { + const utils = renderPanelView(sampleSavedObjectPanelWithVisualization); + expect(utils.container.firstChild).toMatchSnapshot(); + + fireEvent.click(utils.getByTestId('superDatePickerApplyTimeButton')); + }); + + it('render panel view so container and duplicate dashboard', async () => { + store.dispatch(setPanelList([sampleSavedObjectPanelWithVisualization])); + const utils = renderPanelView(sampleSavedObjectPanelWithVisualization); + + fireEvent.click(utils.getByTestId('panelActionContextMenu')); + fireEvent.click(utils.getByTestId('duplicatePanelContextMenuItem')); + expect(utils.getByTestId('customModalFieldText')).toBeInTheDocument(); + + fireEvent.input(utils.getByTestId('customModalFieldText'), { + target: { value: 'duplicate panel' }, + }); + act(() => { + fireEvent.click(utils.getByTestId('runModalButton')); + }); + await waitFor(() => { + expect(coreRefs.savedObjectsClient.create).toBeCalledTimes(1); + }); + }); + + it('render panel view so container and delete dashboard', async () => { + store.dispatch(setPanelList([sampleSavedObjectPanelWithVisualization])); + const utils = renderPanelView(sampleSavedObjectPanelWithVisualization); + + fireEvent.click(utils.getByTestId('panelActionContextMenu')); + fireEvent.click(utils.getByTestId('deletePanelContextMenuItem')); + expect(utils.getByTestId('popoverModal__deleteTextInput')).toBeInTheDocument(); + + fireEvent.input(utils.getByTestId('popoverModal__deleteTextInput'), { + target: { value: 'delete' }, + }); + act(() => { + fireEvent.click(utils.getByTestId('popoverModal__deleteButton')); + }); + await waitFor(() => { + expect(coreRefs.http.delete).toBeCalledTimes(1); + }); + }); + + it('render panel view so container and reload dashboard', async () => { + store.dispatch(setPanelList([sampleSavedObjectPanelWithVisualization])); + const utils = renderPanelView(sampleSavedObjectPanelWithVisualization); + + fireEvent.click(utils.getByTestId('panelActionContextMenu')); + fireEvent.click(utils.getByTestId('reloadPanelContextMenuItem')); + expect(utils.container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx index f72dc73ae..9f85485f8 100644 --- a/public/components/custom_panels/custom_panel_view.tsx +++ b/public/components/custom_panels/custom_panel_view.tsx @@ -37,10 +37,8 @@ import { EmptyPanelView } from './panel_modules/empty_panel'; import { CREATE_PANEL_MESSAGE, CUSTOM_PANELS_API_PREFIX, - CUSTOM_PANELS_SAVED_OBJECT_TYPE, } from '../../../common/constants/custom_panels'; import { - PanelType, SavedVisualizationType, VisualizationType, VizContainerError, @@ -50,12 +48,12 @@ import { getCustomModal } from './helpers/modal_containers'; import PPLService from '../../services/requests/ppl'; import { isDateValid, - convertDateTime, onTimeChange, isPPLFilterValid, fetchVisualizationById, isNameValid, } from './helpers/utils'; +import { convertDateTime } from '../common/query_utils/index'; import { UI_DATE_FORMAT } from '../../../common/constants/shared'; import { VisaulizationFlyout } from './panel_modules/visualization_flyout'; import { uiSettingsService } from '../../../common/utils'; @@ -132,7 +130,6 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { setStartTime, setEndTime, updateAvailabilityVizId, - cloneCustomPanel, onEditClick, onAddClick, } = props; @@ -211,7 +208,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { .post(`${CUSTOM_PANELS_API_PREFIX}/panels/rename`, { body: JSON.stringify(renamePanelObject), }) - .then((res) => { + .then((_res) => { setOpenPanelName(editedCustomPanelName); // setOpenPanelName((prevCustomPanelData) => { // const newCustomPanelData = [...prevCustomPanelData]; @@ -270,7 +267,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { }; const onDelete = async () => { - deleteCustomPanel(panelId, openPanelName).then((res) => { + deleteCustomPanel(panelId, openPanelName).then((_res) => { setTimeout(() => { window.location.assign(`${last(parentBreadcrumbs)!.href}`); }, 1000); @@ -429,7 +426,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { .post(`${CUSTOM_PANELS_API_PREFIX}/panels/filter`, { body: JSON.stringify(panelFilterBody), }) - .then((res) => { + .then((_res) => { setOnRefresh(!onRefresh); }) .catch((err) => { diff --git a/public/components/custom_panels/helpers/__tests__/add_visualization_helper.test.ts b/public/components/custom_panels/helpers/__tests__/add_visualization_helper.test.ts new file mode 100644 index 000000000..47bc65efc --- /dev/null +++ b/public/components/custom_panels/helpers/__tests__/add_visualization_helper.test.ts @@ -0,0 +1,38 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import { addVisualizationPanel, addMultipleVisualizations } from '../add_visualization_helper'; +import { samplePanelVisualizations } from '../../../../../test/panels_constants'; + +describe('Add Visualization Helper', () => { + configure({ adapter: new Adapter() }); + + it('addVisualizationPanel', async () => { + const savedVisualizationId = 'test_id'; + const oldVisualizationId = undefined; + + const panelList = addVisualizationPanel( + savedVisualizationId, + oldVisualizationId, + samplePanelVisualizations + ); + const newPanel = panelList[panelList.length - 1]; + + expect(newPanel.y).toEqual(samplePanelVisualizations[1].y + 4); + }); + + it('addMultipleVisualizations', () => { + const savedVisualizationIds = ['test_id_1', 'test_id_2']; + + const panelList = addMultipleVisualizations(savedVisualizationIds, samplePanelVisualizations); + const testPanel1 = panelList[panelList.length - 2]; + const testPanel2 = panelList[panelList.length - 1]; + + expect(testPanel1.y).toEqual(samplePanelVisualizations[1].y + 4); + expect(testPanel2.y).toEqual(testPanel1.y + 4); + }); +}); diff --git a/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/public/components/custom_panels/helpers/__tests__/utils.test.tsx index 24182d643..f60c3584c 100644 --- a/public/components/custom_panels/helpers/__tests__/utils.test.tsx +++ b/public/components/custom_panels/helpers/__tests__/utils.test.tsx @@ -26,8 +26,11 @@ import { isPPLFilterValid, mergeLayoutAndVisualizations, onTimeChange, + fetchAggregatedBinCount, } from '../utils'; import { convertDateTime } from '../../../common/query_utils'; +// eslint-disable-next-line jest/no-mocks-import +import httpClientMock from '../../../../../test/__mocks__/httpClientMock'; describe('Utils helper functions', () => { configure({ adapter: new Adapter() }); @@ -132,4 +135,13 @@ describe('Utils helper functions', () => { ); expect(wrapper6).toMatchSnapshot(); }); + + it('validates fetchAggregatedBinCount function', () => { + httpClientMock.post = jest.fn().mockReturnValue('dummy response'); + const setIsError = jest.fn(); + const setIsLoading = jest.fn(); + + fetchAggregatedBinCount('', '', 'now', 'now', '', '', setIsError, setIsLoading); + expect(httpClientMock.post).toHaveBeenCalledTimes(1); + }); }); diff --git a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx index ca71d20b5..a7b9d4e78 100644 --- a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx +++ b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx @@ -290,7 +290,7 @@ export const VisualizationContainer = ({ savedVisualizationId, startTime: fromTime, endTime: toTime, - pplFilterValue, + filterQuery: pplFilterValue, span, resolution, setVisualizationTitle, diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap index c20ca8ae6..6245bf3e5 100644 --- a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap +++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap @@ -1284,7 +1284,24 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`] } replaceVisualizationId="" setPanelVisualizations={[MockFunction]} - setToast={[MockFunction]} + setToast={ + [MockFunction] { + "calls": Array [ + Array [ + "Please make a valid selection", + "danger", + undefined, + "left", + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + } + } start="2011-08-11T01:23:45.678Z" > + + +

+ No saved visualizations found! +

+ + } + > + +
+ Please use the "create new visualization" option in add visualization menu. +
+ + + } + flyoutFooter={ + + + + + Cancel + + + + + Add + + + + + } + flyoutHeader={ + + +

+ Select existing visualization +

+ + + } + > +
+ + + + + + } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + sideCar={ + Object { + "assignMedium": [Function], + "assignSyncMedium": [Function], + "options": Object { + "async": true, + "ssr": false, + }, + "read": [Function], + "useMedium": [Function], + } + } + > + + +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + > + + +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + /> + + + + +
+ +
+ + + + + + +
+ +

+ Select existing visualization +

+ +
+ + +

+ No saved visualizations found! +

+ + } + > +
+
+
+ +
+ +
+ +
+

+ No saved visualizations found! +

+
+ +
+ +
+ +
+
+
+ Please use the "create new visualization" option in add visualization menu. +
+
+
+
+ + +
+ +
+ +
+ + + + + +
+ + +
+ + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + + + + + + + + + + + + + + +
+ + + +`; + +exports[`Visualization Flyout Component renders replace visualization Flyout 1`] = ` + + + +

+ No saved visualizations found! +

+ + } + > + +
+ Please use the "create new visualization" option in add visualization menu. +
+ + + } + flyoutFooter={ + + + + + Cancel + + + + + Add + + + + + } + flyoutHeader={ + + +

+ Replace visualization +

+ + + } + > +
+ + + + + + } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + sideCar={ + Object { + "assignMedium": [Function], + "assignSyncMedium": [Function], + "options": Object { + "async": true, + "ssr": false, + }, + "read": [Function], + "useMedium": [Function], + } + } + > + + +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + > + + +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + /> + + + + +
+ +
+ + + + + + +
+ +

+ Replace visualization +

+ +
+ + +

+ No saved visualizations found! +

+ + } + > +
+
+
+ +
+ +
+ +
+

+ No saved visualizations found! +

+
+ +
+ +
+ +
+
+
+ Please use the "create new visualization" option in add visualization menu. +
+
+
+
+ + +
+ +
+ +
+ + + + + +
+ + +
+ + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + + + + + + + + + + + + + + +
+ + + +`; diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx index 7aebf7b90..ea558b808 100644 --- a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx +++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx @@ -8,12 +8,20 @@ import Adapter from 'enzyme-adapter-react-16'; import PPLService from '../../../../../services/requests/ppl'; import React from 'react'; import { VisaulizationFlyout } from '../visualization_flyout'; +// eslint-disable-next-line jest/no-mocks-import import httpClientMock from '../../../../../../test/__mocks__/httpClientMock'; import { ShortDate } from '@elastic/eui'; +import { cleanup } from '@testing-library/react'; +import { SavedObjectsActions } from '../../../../../../public/services/saved_objects/saved_object_client/saved_objects_actions'; +import { sampleSavedVisualization } from '../../../../../../test/panels_constants'; describe('Visualization Flyout Component', () => { configure({ adapter: new Adapter() }); + afterEach(() => { + cleanup(); + }); + it('renders add visualization Flyout', () => { const panelId = ''; const pplFilterValue = ''; @@ -55,6 +63,13 @@ describe('Visualization Flyout Component', () => { const isFlyoutReplacement = true; const replaceVisualizationId = ''; + SavedObjectsActions.getBulk = jest.fn(() => + Promise.resolve({ + observabilityObjectList: [sampleSavedVisualization], + then: () => Promise.resolve(), + }) + ); + const wrapper = mount( { /> ); + wrapper.find('[data-test-subj="addFlyoutButton"]').first().simulate('click'); + expect(wrapper).toMatchSnapshot(); }); }); diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout_so.test.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout_so.test.tsx new file mode 100644 index 000000000..68c33d904 --- /dev/null +++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout_so.test.tsx @@ -0,0 +1,102 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { configure, mount } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import PPLService from '../../../../../services/requests/ppl'; +import React from 'react'; +import { VisaulizationFlyoutSO } from '../visualization_flyout_so'; +// eslint-disable-next-line jest/no-mocks-import +import httpClientMock from '../../../../../../test/__mocks__/httpClientMock'; +import { ShortDate } from '@elastic/eui'; +import { cleanup } from '@testing-library/react'; +import { SavedObjectsActions } from '../../../../../../public/services/saved_objects/saved_object_client/saved_objects_actions'; +import { sampleSavedVisualization } from '../../../../../../test/panels_constants'; +import { applyMiddleware, createStore } from 'redux'; +import { rootReducer } from '../../../../../../public/framework/redux/reducers'; +import thunk from 'redux-thunk'; +import { Provider } from 'react-redux'; + +describe('Visualization Flyout Component', () => { + configure({ adapter: new Adapter() }); + const store = createStore(rootReducer, applyMiddleware(thunk)); + + afterEach(() => { + cleanup(); + }); + + it('renders add visualization Flyout', () => { + const panelId = ''; + const pplFilterValue = ''; + const start: ShortDate = 'now-15m'; + const end: ShortDate = 'now'; + const setToast = jest.fn(); + const closeFlyout = jest.fn(); + const setPanelVisualizations = jest.fn(); + const pplService = new PPLService(httpClientMock); + const isFlyoutReplacement = false; + + const wrapper = mount( + + + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + it('renders replace visualization Flyout', () => { + const panelId = 'oiuccXwBYVazWqOO1e06'; + const pplFilterValue = "where Carrier='OpenSearch-Air'"; + const start: ShortDate = '2011-08-11T01:23:45.678Z'; + const end: ShortDate = '2011-08-12T01:23:45.678Z'; + const setToast = jest.fn(); + const closeFlyout = jest.fn(); + const setPanelVisualizations = jest.fn(); + const pplService = new PPLService(httpClientMock); + const isFlyoutReplacement = true; + const replaceVisualizationId = ''; + + SavedObjectsActions.getBulk = jest.fn(() => + Promise.resolve({ + observabilityObjectList: [sampleSavedVisualization], + then: () => Promise.resolve(), + }) + ); + + const wrapper = mount( + + + + ); + + wrapper.find('[data-test-subj="addFlyoutButton"]').first().simulate('click'); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/test/panels_constants.tsx b/test/panels_constants.tsx index b79dde38c..85958814e 100644 --- a/test/panels_constants.tsx +++ b/test/panels_constants.tsx @@ -53,6 +53,51 @@ export const sampleSavedVisualizationForPie = { timeField: 'timestamp', }; +export const sampleSavedObjectPanel = { + id: 'L8Sx53wBDp0rvEg3yoLb', + type: 'observability-panel', + title: 'Dummy Saved Object Panel 1', + dateCreate: 1636053619774, + dateModified: 1636053619774, + visualizations: [], + timeRange: { to: 'now/y', from: 'now/y' }, + queryFilter: { query: "where host = 'www.opensearch.org'", language: 'ppl' }, +}; + +export const sampleSavedObjectPanelWithVisualization = { + id: 'L8Sx53wBDp0rvEg3yoLb', + type: 'observability-panel', + title: 'Dummy Saved Object Panel 2', + dateCreate: 1636053619774, + dateModified: 1636053619774, + visualizations: [ + sampleSavedVisualization, + sampleSavedVisualizationForHorizontalBar, + sampleSavedVisualizationForLine, + sampleSavedVisualizationForTreeMap, + sampleSavedVisualizationForPie, + ], + timeRange: { to: 'now/y', from: 'now/y' }, + queryFilter: { query: "where host = 'www.opensearch.org'", language: 'ppl' }, +}; + +export const savedPanelWithVisualization = { + id: 'L8Sx53wBDp0rvEg3yoLb', + type: 'observability-panel', + name: 'Dummy Saved Object Panel 2', + dateCreate: 1636053619774, + dateModified: 1636053619774, + visualizations: [ + sampleSavedVisualization, + sampleSavedVisualizationForHorizontalBar, + sampleSavedVisualizationForLine, + sampleSavedVisualizationForTreeMap, + sampleSavedVisualizationForPie, + ], + timeRange: { to: 'now/y', from: 'now/y' }, + queryFilter: { query: "where host = 'www.opensearch.org'", language: 'ppl' }, +}; + export const samplePPLResponse = { data: { 'avg(FlightDelayMin)': [ @@ -139,6 +184,7 @@ export const panelsData = { panels: [ { name: 'Test Panel 1', + title: 'Test Panel 1 Title', id: 'L8Sx53wBDp0rvEg3yoLb', dateCreated: 1635974761179, dateModified: 1635974771296, @@ -146,18 +192,21 @@ export const panelsData = { { name: 'Test Panel 2', id: 'lsQfznwBDp0rvEg3W2wH', + title: 'Test Panel 1 Title', dateCreated: 1635545733895, dateModified: 1635979024055, }, { name: 'Test Panel 3', id: 'b8Sc4nwBDp0rvEg3F3Fk', + title: 'Test Panel 1 Title', dateCreated: 1635889452900, dateModified: 1635979888682, }, { name: 'Test Panel 4', id: 'P8Qd4nwBDp0rvEg39HG_', + title: 'Test Panel 1 Title', dateCreated: 1635881186494, dateModified: 1636049456718, },