Use context to pass the windowId prop around

Author: cbeer

__tests__/src/components/CompanionWindowFactory.test.js

@@ -6,12 +6,11 @@ import { CompanionWindowFactory } from '../../../src/components/CompanionWindowF
 function createWrapper({ content = 'closed', ...props }) {
   return render(
     <CompanionWindowFactory
-      windowId="x"
       id="123"
       content={content}
       {...props}
     />,
-    { preloadedState: { companionWindows: { 123: { content }, thumb: {} }, windows: { x: { thumbnailNavigationId: 'thumb' } } } },
+    { preloadedState: { companionWindows: { 123: { content }, thumb: {} }, windows: { x: { thumbnailNavigationId: 'thumb' } } }, windowId: 'x' },
   );
 }
 

__tests__/src/components/GalleryView.test.js

@@ -9,10 +9,10 @@ function createWrapper(props) {
   return render(
     <GalleryView
       canvases={Utils.parseManifest(manifestJson).getSequences()[0].getCanvases()}
-      windowId="1234"
       selectedCanvasIndex={0}
       {...props}
     />,
+    { windowId: '1234' },
   );
 }
 

__tests__/src/components/PrimaryWindow.test.js

@@ -6,10 +6,9 @@ function createWrapper(props) {
   return render(
     <PrimaryWindow
       classes={{}}
-      windowId="xyz"
       {...props}
     />,
-    { preloadedState: { windows: { xyz: { collectionPath: [{}], companionWindowIds: [] } } } },
+    { preloadedState: { windows: { xyz: { collectionPath: [{}], companionWindowIds: [] } } }, windowId: 'xyz' },
   );
 }
 
@@ -30,10 +29,7 @@ describe('PrimaryWindow', () => {
   });
   it('should render <GalleryView> if fetching is complete and view is gallery', async () => {
     createWrapper({ isFetching: false, view: 'gallery' });
-    await screen.findByTestId('test-window');
-    await waitFor(() => {
-      expect(document.querySelector('#xyz-gallery')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
-    });
+    expect(await screen.findByRole('region', { accessibleName: 'gallery section' })).toBeInTheDocument();
   });
   it('should render <CollectionDialog> and <SelectCollection> if manifest is collection and isCollectionDialogVisible', async () => {
     render(<div id="xyz" />);
@@ -42,9 +38,8 @@ describe('PrimaryWindow', () => {
         classes={{}}
         isCollection
         isCollectionDialogVisible
-        windowId="xyz"
       />,
-      { preloadedState: { windows: { xyz: { collectionPath: [{}] } } } },
+      { preloadedState: { windows: { xyz: { collectionPath: [{}] } } }, windowId: 'xyz' },
     );
     await screen.findByRole('button', { accessibleName: 'show collection' });
   });

__tests__/src/components/SearchResults.test.js

@@ -64,6 +64,7 @@ function createWrapper(props) {
           window: {},
         },
       },
+      windowId: 'window',
     },
   );
 }

__tests__/src/components/WindowSideBar.test.js

@@ -5,7 +5,6 @@ import { WindowSideBar } from '../../../src/components/WindowSideBar';
 function createWrapper({ ...props }) {
   return render(
     <WindowSideBar
-      windowId="xyz"
       {...props}
     />,
     {
@@ -17,6 +16,7 @@ function createWrapper({ ...props }) {
           },
         },
       },
+      windowId: 'xyz',
     },
   );
 }

__tests__/src/components/WindowSideBarAnnotationsPanel.test.js

@@ -9,10 +9,9 @@ function createWrapper(props, state) {
       annotationCount={4}
       classes={{}}
       id="xyz"
-      windowId="abc"
       {...props}
     />,
-    { preloadedState: { companionWindows: { xyz: { content: 'annotations' } }, windows: { abc: {} }, ...state } },
+    { preloadedState: { companionWindows: { xyz: { content: 'annotations' } }, windows: { abc: {} }, ...state }, windowId: 'abc' },
   );
 }
 

__tests__/utils/test-utils.js

@@ -14,6 +14,7 @@ import Mirador from '../../src/index';
 
 export * from '@testing-library/react';
 export { renderWithProviders as render };
+import WindowContext from '../../src/contexts/WindowContext';
 
 const rootReducer = createRootReducer();
 const theme = createTheme(settings.theme);
@@ -29,19 +30,24 @@ function renderWithProviders(
     preloadedState = {},
     // Automatically create a store instance if no store was passed in
     store = createStore(rootReducer, preloadedState, applyMiddleware(thunk)),
+    windowId,
     ...renderOptions
   } = {},
 ) {
+  const windowContext = windowId ? { id: windowId } : {};
+
   /** :nodoc: */
   function Wrapper({ children }) {
     return (
-      <I18nextProvider i18n={i18n}>
-        <ThemeProvider theme={theme}>
-          <Provider store={store}>
-            {children}
-          </Provider>
-        </ThemeProvider>
-      </I18nextProvider>
+      <WindowContext.Provider value={windowContext}>
+        <I18nextProvider i18n={i18n}>
+          <ThemeProvider theme={theme}>
+            <Provider store={store}>
+              {children}
+            </Provider>
+          </ThemeProvider>
+        </I18nextProvider>
+      </WindowContext.Provider>
     );
   }
 

src/components/AnnotationSettings.js

@@ -28,5 +28,4 @@ AnnotationSettings.propTypes = {
   displayAll: PropTypes.bool.isRequired,
   displayAllDisabled: PropTypes.bool.isRequired,
   toggleAnnotationDisplay: PropTypes.func.isRequired,
-  windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
 };

src/components/AttributionPanel.js

@@ -26,7 +26,6 @@ export function AttributionPanel({
   manifestLogo = null,
   requiredStatement = null,
   rights = null,
-  windowId,
   id,
 }) {
   const { t } = useTranslation();
@@ -37,7 +36,6 @@ export function AttributionPanel({
     <CompanionWindow
       title={t('attributionTitle')}
       paperClassName={ns('attribution-panel')}
-      windowId={windowId}
       id={id}
     >
       <CompanionWindowSection>
@@ -86,5 +84,4 @@ AttributionPanel.propTypes = {
     value: PropTypes.string,
   })),
   rights: PropTypes.arrayOf(PropTypes.string),
-  windowId: PropTypes.string.isRequired,
 };

src/components/CompanionArea.js

@@ -97,7 +97,7 @@ export function CompanionArea({
           className={`${ns('companion-windows')}`}
         >
           {companionWindowIds.map((id) => (
-            <CompanionWindowFactory id={id} key={id} windowId={windowId} />
+            <CompanionWindowFactory id={id} key={id} />
           ))}
         </Container>
       </Slide>