[EuiPortal] convert to a function component, fix ssr bug

src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap

@@ -6,7 +6,7 @@ Array [
     aria-label="aria-label"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m"
     data-test-subj="test subject string"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -29,7 +29,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -65,7 +65,7 @@ Array [
   <section
     aria-label="This should have been label"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -87,7 +87,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -109,7 +109,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -131,7 +131,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -153,7 +153,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -175,7 +175,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -197,7 +197,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m"
-    style="left:30px;right:30px;bottom:30px;top:30px"
+    style="left: 30px; right: 30px; bottom: 30px; top: 30px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -219,7 +219,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -241,7 +241,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -263,7 +263,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m"
-    style="left:12px;right:0;bottom:0"
+    style="left: 12px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"
@@ -285,7 +285,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m"
-    style="left:0;right:0;bottom:0"
+    style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
       class="emotion-euiScreenReaderOnly"

src/components/bottom_bar/bottom_bar.test.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import { keysOf } from '../common';
 import { requiredProps, takeMountedSnapshot } from '../../test';
 
@@ -28,52 +28,52 @@ ReactDOM.createPortal = (children) => {
 
 describe('EuiBottomBar', () => {
   test('is rendered', () => {
-    const component = render(
+    const component = mount(
       <EuiBottomBar {...requiredProps}>Content</EuiBottomBar>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(component.render()).toMatchSnapshot();
   });
 
   describe('props', () => {
     describe('paddingSize', () => {
       keysOf(paddingSizeToClassNameMap).forEach((paddingSize) => {
         test(`${paddingSize} is rendered`, () => {
-          const component = render(<EuiBottomBar paddingSize={paddingSize} />);
+          const component = mount(<EuiBottomBar paddingSize={paddingSize} />);
 
-          expect(component).toMatchSnapshot();
+          expect(component.render()).toMatchSnapshot();
         });
       });
     });
 
     describe('position', () => {
       POSITIONS.forEach((position) => {
         test(`${position} is rendered`, () => {
-          const component = render(<EuiBottomBar position={position} />);
+          const component = mount(<EuiBottomBar position={position} />);
 
-          expect(component).toMatchSnapshot();
+          expect(component.render()).toMatchSnapshot();
         });
       });
     });
 
     test('landmarkHeading', () => {
-      const component = render(
+      const component = mount(
         <EuiBottomBar landmarkHeading="This should have been label" />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(component.render()).toMatchSnapshot();
     });
 
     test('affordForDisplacement can be false', () => {
-      const component = render(<EuiBottomBar affordForDisplacement={false} />);
+      const component = mount(<EuiBottomBar affordForDisplacement={false} />);
 
-      expect(component).toMatchSnapshot();
+      expect(component.render()).toMatchSnapshot();
     });
 
     test('usePortal can be false', () => {
-      const component = render(<EuiBottomBar usePortal={false} />);
+      const component = mount(<EuiBottomBar usePortal={false} />);
 
-      expect(component).toMatchSnapshot();
+      expect(component.render()).toMatchSnapshot();
     });
 
     test('bodyClassName is rendered', () => {
@@ -84,17 +84,17 @@ describe('EuiBottomBar', () => {
     });
 
     test('style is customized', () => {
-      const component = render(<EuiBottomBar style={{ left: 12 }} />);
+      const component = mount(<EuiBottomBar style={{ left: 12 }} />);
 
-      expect(component).toMatchSnapshot();
+      expect(component.render()).toMatchSnapshot();
     });
 
     test('position props are altered', () => {
-      const component = render(
+      const component = mount(
         <EuiBottomBar top={30} right={30} bottom={30} left={30} />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(component.render()).toMatchSnapshot();
     });
   });
 });

src/components/portal/__snapshots__/portal.test.tsx.snap

@@ -5,7 +5,9 @@ exports[`EuiPortal is rendered 1`] = `
   <EuiPortal>
     <Portal
       containerInfo={
-        <div>
+        <div
+          data-euiportal="true"
+        >
           Content
         </div>
       }

src/components/portal/portal.spec.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="../../../cypress/support"/>
+
+import React, { useState } from 'react';
+import { EuiPortal, EuiPortalProps } from './index';
+
+describe('EuiPortal', () => {
+  describe('insertion', () => {
+    it('inserts at the bottom of body by default', () => {
+      cy.realMount(<EuiPortal>Hello</EuiPortal>);
+
+      // verify the portal element was appended to the body
+      cy.get('div[data-euiportal]').then((portals) => {
+        expect(portals).to.have.lengthOf(1);
+        expect(portals.get(0)).to.equal(document.body.lastElementChild);
+      });
+    });
+
+    it('inserts before a specified element', () => {
+      const Wrapper = () => {
+        const [siblingRef, setSiblingRef] = useState<HTMLElement | null>(null);
+        return (
+          <>
+            <div id="sibling" ref={setSiblingRef} />
+            {siblingRef && (
+              <EuiPortal insert={{ sibling: siblingRef, position: 'before' }}>
+                Hello
+              </EuiPortal>
+            )}
+          </>
+        );
+      };
+      cy.realMount(<Wrapper />);
+
+      // verify the portal element was appended before the sibling
+      cy.get('div[data-euiportal]').then((portals) => {
+        cy.get('div#sibling').then((siblings) => {
+          expect(portals).to.have.lengthOf(1);
+          expect(siblings).to.have.lengthOf(1);
+          expect(siblings.get(0).previousElementSibling).to.equal(
+            portals.get(0)
+          );
+        });
+      });
+    });
+
+    it('inserts after a specified element', () => {
+      const Wrapper = () => {
+        const [siblingRef, setSiblingRef] = useState<HTMLElement | null>(null);
+        return (
+          <>
+            <div id="sibling" ref={setSiblingRef} />
+            {siblingRef && (
+              <EuiPortal insert={{ sibling: siblingRef, position: 'after' }}>
+                Hello
+              </EuiPortal>
+            )}
+          </>
+        );
+      };
+      cy.realMount(<Wrapper />);
+
+      // verify the portal element was appended after the sibling
+      cy.get('div[data-euiportal]').then((portals) => {
+        cy.get('div#sibling').then((siblings) => {
+          expect(portals).to.have.lengthOf(1);
+          expect(siblings).to.have.lengthOf(1);
+          expect(siblings.get(0).nextElementSibling).to.equal(portals.get(0));
+        });
+      });
+    });
+
+    it('insert value can be changed', () => {
+      const Wrapper = () => {
+        const [siblingRef, setSiblingRef] = useState<HTMLElement | null>(null);
+        const [insert, setInsert] = useState<EuiPortalProps['insert']>(
+          undefined
+        );
+
+        return (
+          <>
+            <div id="sibling" ref={setSiblingRef} />
+            {siblingRef && (
+              <>
+                <EuiPortal insert={insert}>Hello</EuiPortal>
+                <button
+                  onClick={() =>
+                    setInsert({ sibling: siblingRef, position: 'after' })
+                  }
+                >
+                  change insertion
+                </button>
+              </>
+            )}
+          </>
+        );
+      };
+      cy.realMount(<Wrapper />);
+
+      // verify the portal element was appended to the body
+      cy.get('div[data-euiportal]').then((portals) => {
+        expect(portals).to.have.lengthOf(1);
+        expect(portals.get(0)).to.equal(document.body.lastElementChild);
+      });
+
+      cy.contains('change insertion').click();
+
+      // verify the portal element is now appended after the sibling
+      cy.get('div[data-euiportal]').then((portals) => {
+        cy.get('div#sibling').then((siblings) => {
+          expect(portals).to.have.lengthOf(1);
+          expect(siblings).to.have.lengthOf(1);
+          expect(siblings.get(0).nextElementSibling).to.equal(portals.get(0));
+        });
+      });
+    });
+  });
+});

src/components/portal/portal.test.tsx

@@ -11,7 +11,7 @@ import { mount } from 'enzyme';
 import { EuiPortal } from './portal';
 
 describe('EuiPortal', () => {
-  test('is rendered', () => {
+  it('is rendered', () => {
     const component = mount(
       <div>
         <EuiPortal>Content</EuiPortal>
@@ -20,4 +20,22 @@ describe('EuiPortal', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('behavior', () => {
+    it('portalRef', () => {
+      const portalRef = jest.fn();
+
+      const component = mount(
+        <EuiPortal portalRef={portalRef}>Content</EuiPortal>
+      );
+
+      expect(portalRef).toHaveBeenCalledTimes(1);
+      expect(portalRef.mock.calls[0][0]).toBeInstanceOf(HTMLDivElement);
+
+      component.unmount();
+
+      expect(portalRef).toHaveBeenCalledTimes(2);
+      expect(portalRef.mock.calls[1][0]).toBeNull();
+    });
+  });
 });