Merge

__tests__/src/components/ChangeThemeDialog.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Dialog from '@material-ui/core/Dialog';
 import ListItemText from '@material-ui/core/ListItemText';

__tests__/src/components/CollapsibleSection.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';

__tests__/src/components/CollectionDialog.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';

__tests__/src/components/CollectionInfo.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Button from '@material-ui/core/Button';
 import { CollectionInfo } from '../../../src/components/CollectionInfo';

__tests__/src/components/CompanionArea.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Slide from '@material-ui/core/Slide';
 import ArrowLeftIcon from '@material-ui/icons/ArrowLeftSharp';

__tests__/src/components/CompanionWindow.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Rnd } from 'react-rnd';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';

__tests__/src/components/CompanionWindowFactory.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import WindowSideBarInfoPanel from '../../../src/containers/WindowSideBarInfoPanel';
 import WindowSideBarCanvasPanel from '../../../src/containers/WindowSideBarCanvasPanel';

__tests__/src/components/ErrorDialog.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';

__tests__/src/components/FullScreenButton.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
 import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { FullScreenButton } from '../../../src/components/FullScreenButton';
+import FullScreenContext from '../../../src/contexts/FullScreenContext';
 
 /** */
-function createWrapper(props) {
+function createWrapper(props, contextProps = { active: false }) {
   return shallow(
     <FullScreenButton
       classes={{}}
       className="xyz"
-      setWorkspaceFullscreen={() => {}}
-      isFullscreenEnabled={false}
       {...props}
     />,
-  );
+    {
+      wrappingComponent: FullScreenContext.Provider,
+      wrappingComponentProps: { value: { enter: () => { }, exit: () => { }, ...contextProps } },
+    },
+  ).dive();
 }
 
 describe('FullScreenButton', () => {
@@ -30,10 +32,10 @@ describe('FullScreenButton', () => {
   });
 
   describe('when not in fullscreen', () => {
-    let setWorkspaceFullscreen;
+    let enter;
     beforeAll(() => {
-      setWorkspaceFullscreen = jest.fn();
-      wrapper = createWrapper({ setWorkspaceFullscreen });
+      enter = jest.fn();
+      wrapper = createWrapper({}, { enter });
       menuButton = wrapper.find(MiradorMenuButton);
     });
 
@@ -45,17 +47,17 @@ describe('FullScreenButton', () => {
       expect(menuButton.props()['aria-label']).toEqual('workspaceFullScreen');
     });
 
-    it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => {
+    it('triggers the handle enter with the appropriate boolean', () => {
       menuButton.props().onClick(); // Trigger the onClick prop
-      expect(setWorkspaceFullscreen).toHaveBeenCalledWith(true);
+      expect(enter).toHaveBeenCalled();
     });
   });
 
   describe('when in fullscreen', () => {
-    let setWorkspaceFullscreen;
+    let exit;
     beforeAll(() => {
-      setWorkspaceFullscreen = jest.fn();
-      wrapper = createWrapper({ isFullscreenEnabled: true, setWorkspaceFullscreen });
+      exit = jest.fn();
+      wrapper = createWrapper({}, { active: true, exit });
       menuButton = wrapper.find(MiradorMenuButton);
     });
 
@@ -67,9 +69,9 @@ describe('FullScreenButton', () => {
       expect(menuButton.props()['aria-label']).toEqual('exitFullScreen');
     });
 
-    it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => {
+    it('triggers the handle exit with the appropriate boolean', () => {
       menuButton.props().onClick(); // Trigger the onClick prop
-      expect(setWorkspaceFullscreen).toHaveBeenCalledWith(false);
+      expect(exit).toHaveBeenCalled();
     });
   });
 });

__tests__/src/components/GalleryView.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
 import Paper from '@material-ui/core/Paper';

__tests__/src/components/GalleryViewThumbnail.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
 import Chip from '@material-ui/core/Chip';
-import IntersectionObserver from '@researchgate/react-intersection-observer';
+import { InView } from 'react-intersection-observer';
 import manifestJson from '../../fixtures/version-2/019.json';
 import { GalleryViewThumbnail } from '../../../src/components/GalleryViewThumbnail';
 import IIIFThumbnail from '../../../src/containers/IIIFThumbnail';
@@ -78,7 +77,7 @@ describe('GalleryView', () => {
       };
       wrapper = createWrapper({ annotationsCount: 0, canvas, requestCanvasAnnotations });
 
-      wrapper.find(IntersectionObserver).simulate('change', { isIntersecting: true });
+      wrapper.find(InView).simulate('change', { isIntersecting: true });
       expect(requestCanvasAnnotations).toHaveBeenCalled();
     });
     it('does nothing if there is no intersection', () => {
@@ -89,7 +88,7 @@ describe('GalleryView', () => {
       };
       wrapper = createWrapper({ canvas, requestCanvasAnnotations });
 
-      wrapper.find(IntersectionObserver).simulate('change', { isIntersecting: false });
+      wrapper.find(InView).simulate('change', { isIntersecting: false });
       expect(requestCanvasAnnotations).not.toHaveBeenCalled();
     });
     it('does nothing if there are already some annotations', () => {
@@ -100,7 +99,7 @@ describe('GalleryView', () => {
       };
       wrapper = createWrapper({ annotationsCount: 5, canvas, requestCanvasAnnotations });
 
-      wrapper.find(IntersectionObserver).simulate('change', { isIntersecting: true });
+      wrapper.find(InView).simulate('change', { isIntersecting: true });
       expect(requestCanvasAnnotations).not.toHaveBeenCalled();
     });
   });

__tests__/src/components/IIIFAuthentication.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import WindowAuthenticationBar from '../../../src/containers/WindowAuthenticationBar';
 import { NewWindow } from '../../../src/components/NewWindow';

__tests__/src/components/IIIFThumbnail.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
-import IntersectionObserver from '@researchgate/react-intersection-observer';
+import { InView } from 'react-intersection-observer';
 import Typography from '@material-ui/core/Typography';
 import { IIIFThumbnail } from '../../../src/components/IIIFThumbnail';
 
@@ -26,9 +25,9 @@ describe('IIIFThumbnail', () => {
   it('renders properly', () => {
     expect(wrapper.matchesElement(
       <div>
-        <IntersectionObserver onChange={wrapper.instance().handleIntersection}>
+        <InView onChange={wrapper.instance().handleIntersection}>
           <img alt="" />
-        </IntersectionObserver>
+        </InView>
       </div>,
     )).toBe(true);
   });
@@ -37,9 +36,9 @@ describe('IIIFThumbnail', () => {
     wrapper = createWrapper({});
     expect(wrapper.matchesElement(
       <div>
-        <IntersectionObserver onChange={wrapper.instance().handleIntersection}>
+        <InView onChange={wrapper.instance().handleIntersection}>
           <img alt="" />
-        </IntersectionObserver>
+        </InView>
       </div>,
     )).toBe(true);
     expect(wrapper.find('img').props().src).toMatch(/data:image\/png;base64/);

__tests__/src/components/LabelValueMetadata.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';

__tests__/src/components/LanguageSettings.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import ListItemText from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';

__tests__/src/components/LayersPanel.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import CanvasLayers from '../../../src/containers/CanvasLayers';
 import { LayersPanel } from '../../../src/components/LayersPanel';

__tests__/src/components/LocalePicker.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';

__tests__/src/components/ManifestForm.test.js

-import React from 'react';
 import { mount } from 'enzyme';
 import { ManifestForm } from '../../../src/components/ManifestForm';
 

__tests__/src/components/ManifestInfo.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
 import { ManifestInfo } from '../../../src/components/ManifestInfo';

__tests__/src/components/ManifestListItem.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import ListItem from '@material-ui/core/ListItem';