diff --git a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.test.tsx b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.test.tsx index b6dfebe9beb14..afc346f55e4c3 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.test.tsx +++ b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.test.tsx @@ -10,24 +10,39 @@ import sizeMe from 'react-sizeme'; import React from 'react'; -import { - ContactCardEmbeddableFactory, - CONTACT_CARD_EMBEDDABLE, -} from '@kbn/embeddable-plugin/public/lib/test_samples/embeddables'; +import { CONTACT_CARD_EMBEDDABLE } from '@kbn/embeddable-plugin/public/lib/test_samples/embeddables'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import { pluginServices } from '../../../services/plugin_services'; import { DashboardGrid } from './dashboard_grid'; -import { getSampleDashboardInput, mockDashboardReduxEmbeddableTools } from '../../../mocks'; +import { DashboardContainer } from '../../embeddable/dashboard_container'; +import { getSampleDashboardInput } from '../../../mocks'; +import type { Props as DashboardGridItemProps } from './dashboard_grid_item'; -const DashboardServicesProvider = pluginServices.getContextProvider(); +jest.mock('./dashboard_grid_item', () => { + return { + // eslint-disable-next-line @typescript-eslint/no-var-requires + DashboardGridItem: require('react').forwardRef( + (props: DashboardGridItemProps, ref: HTMLDivElement) => { + const className = + props.expandedPanelId === undefined + ? 'regularPanel' + : props.expandedPanelId === props.id + ? 'expandedPanel' + : 'hiddenPanel'; + return ( +
+ mockDashboardGridItem +
+ ); + } + ), + }; +}); -async function prepare() { - const embeddableFactory = new ContactCardEmbeddableFactory((() => null) as any, {} as any); - pluginServices.getServices().embeddable.getEmbeddableFactory = jest - .fn() - .mockReturnValue(embeddableFactory); +const DashboardServicesProvider = pluginServices.getContextProvider(); +async function getDashboardContainer() { const initialInput = getSampleDashboardInput({ panels: { '1': { @@ -42,12 +57,9 @@ async function prepare() { }, }, }); - const dashboardMock = await mockDashboardReduxEmbeddableTools({ explicitInput: initialInput }); - - return { - tools: dashboardMock.tools, - dashboardContainer: dashboardMock.dashboardContainer, - }; + const dashboardContainer = new DashboardContainer(initialInput); + await dashboardContainer.untilInitialized(); + return dashboardContainer; } beforeAll(() => { @@ -60,45 +72,47 @@ afterAll(() => { sizeMe.noPlaceholders = false; }); -// unhandled promise rejection: https://github.com/elastic/kibana/issues/112699 -test.skip('renders DashboardGrid', async () => { - const { tools } = await prepare(); +test('renders DashboardGrid', async () => { + const dashboardContainer = await getDashboardContainer(); + const { Wrapper: DashboardReduxWrapper } = dashboardContainer.getReduxEmbeddableTools(); const component = mountWithIntl( - + - + ); - const panelElements = component.find('EmbeddableChildPanel'); + const panelElements = component.find('GridItem'); expect(panelElements.length).toBe(2); }); -// unhandled promise rejection: https://github.com/elastic/kibana/issues/112699 -test.skip('renders DashboardGrid with no visualizations', async () => { - const { tools, dashboardContainer } = await prepare(); +test('renders DashboardGrid with no visualizations', async () => { + const dashboardContainer = await getDashboardContainer(); + const { Wrapper: DashboardReduxWrapper } = dashboardContainer.getReduxEmbeddableTools(); + const component = mountWithIntl( - + - + ); dashboardContainer.updateInput({ panels: {} }); component.update(); - expect(component.find('EmbeddableChildPanel').length).toBe(0); + expect(component.find('GridItem').length).toBe(0); }); -// unhandled promise rejection: https://github.com/elastic/kibana/issues/112699 -test.skip('DashboardGrid removes panel when removed from container', async () => { - const { tools, dashboardContainer } = await prepare(); +test('DashboardGrid removes panel when removed from container', async () => { + const dashboardContainer = await getDashboardContainer(); + const { Wrapper: DashboardReduxWrapper } = dashboardContainer.getReduxEmbeddableTools(); + const component = mountWithIntl( - + - + ); @@ -107,35 +121,34 @@ test.skip('DashboardGrid removes panel when removed from container', async () => delete filteredPanels['1']; dashboardContainer.updateInput({ panels: filteredPanels }); component.update(); - const panelElements = component.find('EmbeddableChildPanel'); + const panelElements = component.find('GridItem'); expect(panelElements.length).toBe(1); }); -// unhandled promise rejection: https://github.com/elastic/kibana/issues/112699 -test.skip('DashboardGrid renders expanded panel', async () => { - const { tools, dashboardContainer } = await prepare(); +test('DashboardGrid renders expanded panel', async () => { + const dashboardContainer = await getDashboardContainer(); + const { Wrapper: DashboardReduxWrapper } = dashboardContainer.getReduxEmbeddableTools(); + const component = mountWithIntl( - + - + ); dashboardContainer.setExpandedPanelId('1'); component.update(); // Both panels should still exist in the dom, so nothing needs to be re-fetched once minimized. - expect(component.find('EmbeddableChildPanel').length).toBe(2); + expect(component.find('GridItem').length).toBe(2); - expect( - (component.find('DashboardGridUi').state() as { expandedPanelId?: string }).expandedPanelId - ).toBe('1'); + expect(component.find('#mockDashboardGridItem_1').hasClass('expandedPanel')).toBe(true); + expect(component.find('#mockDashboardGridItem_2').hasClass('hiddenPanel')).toBe(true); dashboardContainer.setExpandedPanelId(); component.update(); - expect(component.find('EmbeddableChildPanel').length).toBe(2); + expect(component.find('GridItem').length).toBe(2); - expect( - (component.find('DashboardGridUi').state() as { expandedPanelId?: string }).expandedPanelId - ).toBeUndefined(); + expect(component.find('#mockDashboardGridItem_1').hasClass('regularPanel')).toBe(true); + expect(component.find('#mockDashboardGridItem_2').hasClass('regularPanel')).toBe(true); }); diff --git a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx index 6e09254fed0d0..1c8b3d992187d 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx +++ b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx @@ -22,7 +22,7 @@ import { useDashboardContainerContext } from '../../dashboard_container_renderer type DivProps = Pick, 'className' | 'style' | 'children'>; -interface Props extends DivProps { +export interface Props extends DivProps { id: DashboardPanelState['explicitInput']['id']; index?: number; type: DashboardPanelState['type'];