Merge pull request #3980 from ProjectMirador/viewer-initiaizer

Author: jcoyne

__tests__/src/lib/MiradorViewer.test.js

@@ -19,11 +19,15 @@ describe('MiradorViewer', () => {
   });
   describe('constructor', () => {
     it('returns viewer store', () => {
-      const instance = new MiradorViewer({ id: 'mirador' });
+      const instance = new MiradorViewer({});
+
+      act(() => { instance.renderInto(document.getElementById('mirador')); }); // eslint-disable-line testing-library/no-unnecessary-act
       expect(instance.store.dispatch).toBeDefined();
     });
     it('renders via ReactDOM', () => {
-      act(() => { new MiradorViewer({ id: 'mirador' }); }); // eslint-disable-line no-new
+      const instance = new MiradorViewer({});
+
+      act(() => { instance.renderInto(document.getElementById('mirador')); }); // eslint-disable-line testing-library/no-unnecessary-act
 
       expect(screen.getByTestId('container')).not.toBeEmptyDOMElement();
     });
@@ -35,7 +39,6 @@ describe('MiradorViewer', () => {
           catalog: [
             { manifestId: 'http://media.nga.gov/public/manifests/nga_highlights.json', provider: 'National Gallery of Art' },
           ],
-          id: 'mirador',
           windows: [
             {
               canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892',
@@ -60,6 +63,8 @@ describe('MiradorViewer', () => {
         },
       );
 
+      act(() => { instance.renderInto(document.getElementById('mirador')); }); // eslint-disable-line testing-library/no-unnecessary-act
+
       const { windows, catalog, config } = instance.store.getState();
       const windowIds = Object.keys(windows);
       expect(Object.keys(windowIds).length).toBe(2);

src/lib/MiradorViewer.js

@@ -18,12 +18,18 @@ class MiradorViewer {
     this.store = viewerConfig.store
       || createPluggableStore(this.config, this.plugins);
 
-    if (config.id) {
-      this.container = document.getElementById(config.id);
-      this.root = createRoot(this.container);
+    if (config.id) this.renderInto(document.getElementById(config.id));
+  }
+
+  /**
+   * @private
+   * @param {*} container
+   */
+  renderInto(container) {
+    this.container = container;
+    this.root = createRoot(this.container);
 
-      this.root.render(this.render());
-    }
+    this.root.render(this.render());
   }
 
   /**