diff --git a/packages/vkui/src/components/AppRoot/AppRootPortal.test.tsx b/packages/vkui/src/components/AppRoot/AppRootPortal.test.tsx new file mode 100644 index 0000000000..43b3da72a1 --- /dev/null +++ b/packages/vkui/src/components/AppRoot/AppRootPortal.test.tsx @@ -0,0 +1,77 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { AppRoot, type AppRootProps } from './AppRoot'; +import { AppRootPortal, type AppRootPortalProps } from './AppRootPortal'; + +function TestComponent({ + appRootProps = {}, + usePortal, +}: { + appRootProps?: AppRootProps; + usePortal?: AppRootPortalProps['usePortal']; +} = {}) { + const portalRootRef = React.useRef(null); + + return ( + + +
content
+
+
+ + ); +} + +describe('AppRootPortal', () => { + it('does not use portal by default in full mode', () => { + render(); + + expect(screen.getByTestId('portal-root').childElementCount).toBe(0); + }); + + it('uses portal in embedded mode', () => { + render(); + + expect(screen.getByTestId('portal-root').childElementCount).toBe(1); + }); + + it('uses portal in partial mode', () => { + render(); + + expect(screen.getByTestId('portal-root').childElementCount).toBe(1); + }); + + it('does not use portal when portal is disabled in AppRoot', () => { + render(); + + expect(screen.getByTestId('portal-root').childElementCount).toBe(0); + }); + + it('does not use portal when usePortal is false', () => { + render(); + + expect(screen.getByTestId('portal-root').childElementCount).toBe(0); + }); + + it('uses portal in full mode when usePortal is true', () => { + render(); + + expect(screen.getByTestId('portal-root').childElementCount).toBe(1); + }); + + it('uses portal passed via usePortal prop', () => { + const Wrapper = function Wrapper() { + const customPortalRef = React.useRef(null); + return ( + + +
+ + ); + }; + render(); + + expect(screen.getByTestId('portal-root').childElementCount).toBe(0); + expect(screen.getByTestId('custom-portal').childElementCount).toBe(1); + }); +}); diff --git a/packages/vkui/src/components/AppRoot/AppRootPortal.tsx b/packages/vkui/src/components/AppRoot/AppRootPortal.tsx index 09fae8f506..eceef1bfc5 100644 --- a/packages/vkui/src/components/AppRoot/AppRootPortal.tsx +++ b/packages/vkui/src/components/AppRoot/AppRootPortal.tsx @@ -26,7 +26,7 @@ export const AppRootPortal = ({ children, usePortal }: AppRootPortalProps) => { const portalContainer = resolvePortalContainer(usePortal, portalRoot.current); if (!portalContainer || shouldDisablePortal(usePortal, mode, Boolean(disablePortal))) { - return children; + return {children}; } return createPortal( @@ -47,7 +47,7 @@ function shouldDisablePortal( return disablePortal || usePortal !== true; } // fallback - return disablePortal || mode !== 'full'; + return disablePortal || mode === 'full'; } function resolvePortalContainer(