[Kibana-react] Fix exit fullscreen behaviour for embedded UI (#119350) (#119431)

* added toggleChrome prop to ExitFullscreen button

* added jest test for toggleChrome, removed sinon and restructured test to reset all mocks after each test run

* rework default prop value in idiomatic way for classes

src/plugins/kibana_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap

@@ -1,13 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`is rendered 1`] = `
+exports[`<ExitFullScreenButton /> is rendered 1`] = `
 <ExitFullScreenButtonUi
   chrome={
     Object {
-      "setIsVisible": [Function],
+      "setIsVisible": [MockFunction] {
+        "calls": Array [
+          Array [
+            false,
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
     }
   }
-  onExitFullScreenMode={[Function]}
+  onExitFullScreenMode={[MockFunction]}
+  toggleChrome={true}
 >
   <div>
     <EuiScreenReaderOnly>
@@ -23,7 +36,7 @@ exports[`is rendered 1`] = `
         aria-label="Exit full screen mode"
         className="dshExitFullScreenButton"
         data-test-subj="exitFullScreenModeLogo"
-        onClick={[Function]}
+        onClick={[MockFunction]}
       >
         <EuiFlexGroup
           alignItems="center"

src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx

@@ -7,45 +7,70 @@
  */
 
 import React from 'react';
-import sinon from 'sinon';
+import { mount, ReactWrapper } from 'enzyme';
 import { ExitFullScreenButton } from './exit_full_screen_button';
 import { keys } from '@elastic/eui';
-import { mount } from 'enzyme';
 import type { ChromeStart } from '../../../../core/public';
 
 const MockChrome = {
-  setIsVisible: () => {},
+  setIsVisible: jest.fn(),
 } as unknown as ChromeStart;
 
-test('is rendered', () => {
-  const component = mount(
-    <ExitFullScreenButton onExitFullScreenMode={() => {}} chrome={MockChrome} />
-  );
-
-  expect(component).toMatchSnapshot();
-});
-
-describe('onExitFullScreenMode', () => {
-  test('is called when the button is pressed', () => {
-    const onExitHandler = sinon.stub();
+describe('<ExitFullScreenButton />', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
 
+  test('is rendered', () => {
     const component = mount(
-      <ExitFullScreenButton onExitFullScreenMode={onExitHandler} chrome={MockChrome} />
+      <ExitFullScreenButton onExitFullScreenMode={jest.fn()} chrome={MockChrome} />
     );
 
-    component.find('button').simulate('click');
-
-    sinon.assert.calledOnce(onExitHandler);
+    expect(component).toMatchSnapshot();
   });
 
-  test('is called when the ESC key is pressed', () => {
-    const onExitHandler = sinon.stub();
+  test('passing `false` to toggleChrome does not toggle chrome', () => {
+    const component = mount(
+      <ExitFullScreenButton
+        onExitFullScreenMode={jest.fn()}
+        chrome={MockChrome}
+        toggleChrome={false}
+      />
+    );
+    expect(MockChrome.setIsVisible).toHaveBeenCalledTimes(0);
+    component.unmount();
+    expect(MockChrome.setIsVisible).toHaveBeenCalledTimes(0);
+  });
 
-    mount(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} chrome={MockChrome} />);
+  describe('onExitFullScreenMode', () => {
+    const onExitHandler = jest.fn();
+    let component: ReactWrapper;
 
-    const escapeKeyEvent = new KeyboardEvent('keydown', { key: keys.ESCAPE } as any);
-    document.dispatchEvent(escapeKeyEvent);
+    beforeEach(() => {
+      component = mount(
+        <ExitFullScreenButton onExitFullScreenMode={onExitHandler} chrome={MockChrome} />
+      );
+    });
 
-    sinon.assert.calledOnce(onExitHandler);
+    test('is called when the button is pressed', () => {
+      expect(MockChrome.setIsVisible).toHaveBeenLastCalledWith(false);
+
+      component.find('button').simulate('click');
+
+      expect(onExitHandler).toHaveBeenCalledTimes(1);
+      component.unmount();
+      expect(MockChrome.setIsVisible).toHaveBeenLastCalledWith(true);
+    });
+
+    test('is called when the ESC key is pressed', () => {
+      expect(MockChrome.setIsVisible).toHaveBeenLastCalledWith(false);
+
+      const escapeKeyEvent = new KeyboardEvent('keydown', { key: keys.ESCAPE } as any);
+      document.dispatchEvent(escapeKeyEvent);
+
+      expect(onExitHandler).toHaveBeenCalledTimes(1);
+      component.unmount();
+      expect(MockChrome.setIsVisible).toHaveBeenLastCalledWith(true);
+    });
   });
 });

src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.tsx

@@ -15,11 +15,25 @@ import type { ChromeStart } from '../../../../core/public';
 export interface ExitFullScreenButtonProps {
   onExitFullScreenMode: () => void;
   chrome: ChromeStart;
+  /**
+   * Optional argument that determines whether we toggle the chrome bar
+   * the button unmounts.
+   *
+   * @note The intended use for this prop is that it is either `true` or `false`
+   * for the lifetime of the button.
+   *
+   * @default true
+   */
+  toggleChrome?: boolean;
 }
 
 import './index.scss';
 
 class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
+  static defaultProps = {
+    toggleChrome: true,
+  };
+
   public onKeyDown = (e: KeyboardEvent) => {
     if (e.key === keys.ESCAPE) {
       this.props.onExitFullScreenMode();
@@ -27,12 +41,12 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
   };
 
   public componentDidMount() {
-    this.props.chrome.setIsVisible(false);
+    if (this.props.toggleChrome) this.props.chrome.setIsVisible(false);
     document.addEventListener('keydown', this.onKeyDown, false);
   }
 
   public componentWillUnmount() {
-    this.props.chrome.setIsVisible(true);
+    if (this.props.toggleChrome) this.props.chrome.setIsVisible(true);
     document.removeEventListener('keydown', this.onKeyDown, false);
   }