Use mount helper functions from @hypothesis/frontend-testing

package.json

@@ -11,7 +11,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.18.6",
     "@hypothesis/frontend-build": "^3.0.0",
-    "@hypothesis/frontend-testing": "^1.2.2",
+    "@hypothesis/frontend-testing": "^1.4.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-dynamic-import-vars": "^2.1.2",

src/components/data/test/AspectRatio-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testSimpleComponent } from '../../test/common-tests';
 import AspectRatio from '../AspectRatio';

src/components/data/test/DataTable-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useState } from 'preact/hooks';
 
 import { testCompositeComponent } from '../../test/common-tests';
@@ -8,8 +8,6 @@ import Scroll from '../Scroll';
 describe('DataTable', () => {
   let fakeRows;
   let fakeColumns;
-  let container;
-  let wrappers;
 
   beforeEach(() => {
     fakeColumns = [
@@ -45,15 +43,6 @@ describe('DataTable', () => {
         delicious: true,
       },
     ];
-
-    wrappers = [];
-    container = document.createElement('div');
-    document.body.append(container);
-  });
-
-  afterEach(() => {
-    wrappers.forEach(w => w.unmount());
-    container.remove();
   });
 
   // DataTable test wrapper which supports selecting multiple rows.
@@ -75,15 +64,13 @@ describe('DataTable', () => {
   }
 
   const createComponent = ({ Component = DataTable, ...props } = {}) => {
-    const wrapper = mount(
+    return mount(
       <Component columns={fakeColumns} rows={fakeRows} {...props} />,
 
       // Mounting in a connected element is required for arrow key navigation
       // to work, as `useArrowKeyNavigation` skips over hidden elements.
-      { attachTo: container },
+      { connected: true },
     );
-    wrappers.push(wrapper);
-    return wrapper;
   };
 
   it('sets appropriate table attributes', () => {
@@ -336,8 +323,6 @@ describe('DataTable', () => {
   });
 
   context('when in a Scroll context', () => {
-    let constrainedContainer;
-
     function TestTableWithScroll() {
       // Initially select the last data row
       const [selectedRow, setSelectedRow] = useState(fakeRows[4]);
@@ -354,20 +339,13 @@ describe('DataTable', () => {
       );
     }
 
-    beforeEach(() => {
-      constrainedContainer = document.createElement('div');
-      constrainedContainer.style.height = '150px';
-      constrainedContainer.style.maxHeight = '200px';
-      document.body.appendChild(constrainedContainer);
-    });
-
-    afterEach(() => {
-      constrainedContainer.remove();
-    });
-
     it('ensures selected row is visible in scrollable area', async () => {
       const wrapper = mount(<TestTableWithScroll />, {
-        attachTo: constrainedContainer,
+        connected: true,
+        prepareContainer: container => {
+          container.style.height = '150px';
+          container.style.maxHeight = '200px';
+        },
       });
 
       const lastRowEl = wrapper.find('tbody tr').at(4).getDOMNode();

src/components/data/test/ScrollBox-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testCompositeComponent } from '../../test/common-tests';
 import ScrollBox from '../ScrollBox';

src/components/data/test/TableBody-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableBody from '../TableBody';

src/components/data/test/TableCell-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableCell from '../TableCell';

src/components/data/test/TableFoot-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableFoot from '../TableFoot';

src/components/data/test/TableHead-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableContext from '../TableContext';

src/components/data/test/TableRow-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testPresentationalComponent } from '../../test/common-tests';
 import TableContext from '../TableContext';

src/components/data/test/Thumbnail-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testCompositeComponent } from '../../test/common-tests';
 import Thumbnail from '../Thumbnail';

src/components/feedback/test/Callout-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import {
   testPresentationalComponent,

src/components/feedback/test/Dialog-test.js

@@ -1,5 +1,4 @@
-import { delay } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { delay, mount } from '@hypothesis/frontend-testing';
 import { createRef } from 'preact';
 
 import { testPresentationalComponent } from '../../test/common-tests';
@@ -55,25 +54,14 @@ describe('Dialog', () => {
   });
 
   describe('initial focus', () => {
-    let container;
-
-    beforeEach(() => {
-      container = document.createElement('div');
-      document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-      container.remove();
-    });
-
     it('focuses the element referred to by `initialFocus`', () => {
       const inputRef = createRef();
 
       mount(
         <Dialog initialFocus={inputRef} title="My dialog">
           <input ref={inputRef} />
         </Dialog>,
-        { attachTo: container },
+        { connected: true },
       );
 
       assert.equal(document.activeElement, inputRef.current);
@@ -84,7 +72,7 @@ describe('Dialog', () => {
         <Dialog title="My dialog">
           <div>Test</div>
         </Dialog>,
-        { attachTo: container },
+        { connected: true },
       );
 
       assert.equal(
@@ -99,7 +87,7 @@ describe('Dialog', () => {
         <Dialog initialFocus={'manual'} title="My dialog">
           <div>Test</div>
         </Dialog>,
-        { attachTo: container },
+        { connected: true },
       );
 
       assert.equal(document.activeElement, focusedBefore);
@@ -112,7 +100,7 @@ describe('Dialog', () => {
         <Dialog initialFocus={inputRef} title="My dialog">
           <button ref={inputRef} disabled={true} />
         </Dialog>,
-        { attachTo: container },
+        { connected: true },
       );
 
       assert.equal(
@@ -128,7 +116,7 @@ describe('Dialog', () => {
             title="My dialog"
             transitionComponent={ComponentWithTransition}
           />,
-          { attachTo: container },
+          { connected: true },
         );
 
         // The Dialog is still not focused immediately after mounting it
@@ -147,26 +135,16 @@ describe('Dialog', () => {
   });
 
   describe('restoring focus', () => {
-    let container;
-
     beforeEach(() => {
-      container = document.createElement('div');
       const button = document.createElement('button');
       button.id = 'focus-button';
       document.body.appendChild(button);
-      document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-      container.remove();
     });
 
     it('should not restore focus by default', () => {
       const wrapper = mount(
         <Dialog id="focus-dialog" title="My dialog" restoreFocus />,
-        {
-          attachTo: container,
-        },
+        { connected: true },
       );
       const dialogElement = document.getElementById('focus-dialog');
       // Focus moves to dialog by default when mounted
@@ -187,9 +165,7 @@ describe('Dialog', () => {
 
       const wrapper = mount(
         <Dialog id="focus-dialog" title="My dialog" restoreFocus />,
-        {
-          attachTo: container,
-        },
+        { connected: true },
       );
       const dialogElement = document.getElementById('focus-dialog');
       // Focus moves to dialog by default when mounted
@@ -221,9 +197,7 @@ describe('Dialog', () => {
           <Dialog title="Test dialog" onClose={onClose}>
             This is my dialog
           </Dialog>,
-          {
-            attachTo: container,
-          },
+          { connected: true },
         );
 
         assert.deepEqual(fakeUseKeyPress.lastCall.args[0], ['Escape']);
@@ -238,9 +212,7 @@ describe('Dialog', () => {
         <Dialog title="Test dialog" closeOnClickAway onClose={onClose}>
           This is my dialog
         </Dialog>,
-        {
-          attachTo: container,
-        },
+        { connected: true },
       );
 
       assert.deepEqual(fakeUseClickAway.lastCall.args[2], { enabled: true });
@@ -251,9 +223,7 @@ describe('Dialog', () => {
         <Dialog title="Test dialog" closeOnFocusAway onClose={onClose}>
           This is my dialog
         </Dialog>,
-        {
-          attachTo: container,
-        },
+        { connected: true },
       );
 
       assert.deepEqual(fakeUseFocusAway.lastCall.args[2], { enabled: true });
@@ -267,9 +237,7 @@ describe('Dialog', () => {
             onClose={onClose}
             transitionComponent={ComponentWithTransition}
           />,
-          {
-            attachTo: container,
-          },
+          { connected: true },
         );
 
         // We simulate closing the Dialog's Panel

src/components/feedback/test/ModalDialog-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import { testCompositeComponent } from '../../test/common-tests';
 import ModalDialog from '../ModalDialog';

src/components/feedback/test/Popover-test.js

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { useRef, useState } from 'preact/hooks';
 
 import Popover, { POPOVER_VIEWPORT_HORIZONTAL_GAP } from '../Popover';
@@ -40,37 +40,19 @@ function TestComponent({ children, ...rest }) {
 }
 
 describe('Popover', () => {
-  let wrappers;
-  let containers;
-
-  beforeEach(() => {
-    wrappers = [];
-    containers = [];
-  });
-
-  afterEach(() => {
-    wrappers.forEach(w => w.unmount());
-    containers.forEach(c => c.remove());
-  });
-
   function createComponent(props = {}, options = {}) {
     const { paddingTop = 0 } = options;
 
-    const container = document.createElement('div');
-    container.style.paddingTop = `${paddingTop}px`;
-    // Add horizontal paddings to the container, so that there's room for the
-    // popover to grow if needed
-    container.style.paddingLeft = '200px';
-    container.style.paddingRight = '200px';
-    containers.push(container);
-    document.body.append(container);
-
-    const wrapper = mount(<TestComponent {...props} />, {
-      attachTo: container,
+    return mount(<TestComponent {...props} />, {
+      connected: true,
+      prepareContainer: container => {
+        container.style.paddingTop = `${paddingTop}px`;
+        // Add horizontal paddings to the container, so that there's room for the
+        // popover to grow if needed
+        container.style.paddingLeft = '200px';
+        container.style.paddingRight = '200px';
+      },
     });
-    wrappers.push(wrapper);
-
-    return wrapper;
   }
 
   const getPopover = wrapper => wrapper.find('Popover');