diff --git a/public/app/core/components/AppChrome/ExtensionSidebar/ExtensionSidebarProvider.test.tsx b/public/app/core/components/AppChrome/ExtensionSidebar/ExtensionSidebarProvider.test.tsx index 5c29ce6859f..682092db983 100644 --- a/public/app/core/components/AppChrome/ExtensionSidebar/ExtensionSidebarProvider.test.tsx +++ b/public/app/core/components/AppChrome/ExtensionSidebar/ExtensionSidebarProvider.test.tsx @@ -297,6 +297,56 @@ describe('ExtensionSidebarProvider', () => { expect(screen.getByTestId('is-open')).toHaveTextContent('false'); }); + it('should toggle sidebar closed when receiving ToggleExtensionSidebarEvent for currently open component', () => { + const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent); + + const TestComponentWithProps = () => { + const context = useExtensionSidebarContext(); + return ( +
+
{context.isOpen.toString()}
+
{context.dockedComponentId || 'undefined'}
+ +
+ ); + }; + + render( + + + + ); + + // First open the sidebar manually + act(() => { + screen.getByText('Open Sidebar').click(); + }); + + expect(screen.getByTestId('is-open')).toHaveTextContent('true'); + expect(screen.getByTestId('docked-component-id')).toHaveTextContent(componentId); + + act(() => { + // Find the ToggleExtensionSidebarEvent subscriber + const toggleEventSubscriberCall = subscribeSpy.mock.calls + .slice() + .reverse() + .find((call) => call[0] === ToggleExtensionSidebarEvent); + expect(toggleEventSubscriberCall).toBeDefined(); + const [, subscriberFn] = toggleEventSubscriberCall!; + + // Call the toggle event handler with the same component + subscriberFn( + new ToggleExtensionSidebarEvent({ + pluginId: mockPluginMeta.pluginId, + componentTitle: mockComponent.title, + }) + ); + }); + + expect(screen.getByTestId('is-open')).toHaveTextContent('false'); + expect(screen.getByTestId('docked-component-id')).toHaveTextContent('undefined'); + }); + it('should close sidebar when receiving a CloseExtensionSidebarEvent', () => { const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent); @@ -396,56 +446,6 @@ describe('ExtensionSidebarProvider', () => { expect(screen.getByTestId('docked-component-id')).toHaveTextContent(expectedComponentId); }); - it('should toggle sidebar closed when receiving ToggleExtensionSidebarEvent for currently open component', () => { - const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent); - - const TestComponentWithProps = () => { - const context = useExtensionSidebarContext(); - return ( -
-
{context.isOpen.toString()}
-
{context.dockedComponentId || 'undefined'}
- -
- ); - }; - - render( - - - - ); - - // First open the sidebar manually - act(() => { - screen.getByText('Open Sidebar').click(); - }); - - expect(screen.getByTestId('is-open')).toHaveTextContent('true'); - expect(screen.getByTestId('docked-component-id')).toHaveTextContent(componentId); - - act(() => { - // Find the ToggleExtensionSidebarEvent subscriber - const toggleEventSubscriberCall = subscribeSpy.mock.calls - .slice() - .reverse() - .find((call) => call[0] === ToggleExtensionSidebarEvent); - expect(toggleEventSubscriberCall).toBeDefined(); - const [, subscriberFn] = toggleEventSubscriberCall!; - - // Call the toggle event handler with the same component - subscriberFn( - new ToggleExtensionSidebarEvent({ - pluginId: mockPluginMeta.pluginId, - componentTitle: mockComponent.title, - }) - ); - }); - - expect(screen.getByTestId('is-open')).toHaveTextContent('false'); - expect(screen.getByTestId('docked-component-id')).toHaveTextContent('undefined'); - }); - it('should toggle to different component when receiving ToggleExtensionSidebarEvent for different component', async () => { const componentId = getComponentIdFromComponentMeta(mockPluginMeta.pluginId, mockComponent);