Use mount from @hypothesis/frontend-testing for most tests

Use the `mount` utility from @hypothesis/frontend-testing for most tests instead of `mount` from Enzyme. This simplifies test cleanup as the `unmountAll` call in boostrap.js will unmount any UI components mounted via the function from @hypothesis/frontend-testing. There are a couple of exceptions for tests which need to modify or reuse the container for other purposes. These still use Enzyme's `mount` API directly.
hypothesis · Nov 26, 2024 · 88600ab · 88600ab
1 parent 86dc53c
commit 88600ab
Show file tree

Hide file tree

Showing 83 changed files with 155 additions and 309 deletions.
diff --git a/src/annotator/components/test/AdderToolbar-test.js b/src/annotator/components/test/AdderToolbar-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import AdderToolbar from '../AdderToolbar';
 

diff --git a/src/annotator/components/test/Buckets-test.js b/src/annotator/components/test/Buckets-test.js
@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import Buckets from '../Buckets';
 

diff --git a/src/annotator/components/test/ClusterToolbar-test.js b/src/annotator/components/test/ClusterToolbar-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import {
   highlightStyles,

diff --git a/src/annotator/components/test/ContentInfoBanner-test.js b/src/annotator/components/test/ContentInfoBanner-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import ContentInfoBanner from '../ContentInfoBanner';
 

diff --git a/src/annotator/components/test/ModalDialog-test.js b/src/annotator/components/test/ModalDialog-test.js
@@ -1,32 +1,12 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import ModalDialog from '../ModalDialog';
 
 describe('ModalDialog', () => {
-  let components;
-
   const createComponent = props => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const component = mount(<ModalDialog open {...props} />, {
-      attachTo: container,
-    });
-    components.push([component, container]);
-    return component;
+    return mount(<ModalDialog open {...props} />, { connected: true });
   };
 
-  beforeEach(() => {
-    components = [];
-  });
-
-  afterEach(() => {
-    components.forEach(([component, container]) => {
-      component.unmount();
-      container.remove();
-    });
-  });
-
   context('when native modal dialog is not supported', () => {
     let fakeDocument;
 

diff --git a/src/annotator/components/test/NotebookModal-test.js b/src/annotator/components/test/NotebookModal-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import { addConfigFragment } from '../../../shared/config-fragment';
@@ -8,29 +8,22 @@ import NotebookModal, { $imports } from '../NotebookModal';
 describe('NotebookModal', () => {
   const notebookURL = 'https://test.hypothes.is/notebook';
 
-  let container;
-  let components;
   let eventBus;
   let emitter;
 
   const outerSelector = 'dialog[data-testid="notebook-outer"]';
 
   const createComponent = config => {
-    const component = mount(
+    return mount(
       <NotebookModal
         eventBus={eventBus}
         config={{ notebookAppUrl: notebookURL, ...config }}
       />,
-      { attachTo: container },
+      { connected: true },
     );
-    components.push(component);
-    return component;
   };
 
   beforeEach(() => {
-    container = document.createElement('div');
-    document.body.append(container);
-    components = [];
     eventBus = new EventBus();
     emitter = eventBus.createEmitter();
 
@@ -46,8 +39,6 @@ describe('NotebookModal', () => {
   });
 
   afterEach(() => {
-    components.forEach(component => component.unmount());
-    container.remove();
     $imports.$restore();
   });
 

diff --git a/src/annotator/components/test/ProfileModal-test.js b/src/annotator/components/test/ProfileModal-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import { EventBus } from '../../util/emitter';
@@ -7,38 +7,26 @@ import ProfileModal from '../ProfileModal';
 describe('ProfileModal', () => {
   const profileURL = 'https://test.hypothes.is/user-profile';
 
-  let container;
-  let components;
   let eventBus;
   let emitter;
 
   const outerSelector = '[data-testid="profile-outer"]';
 
   const createComponent = config => {
-    const component = mount(
+    return mount(
       <ProfileModal
         eventBus={eventBus}
         config={{ profileAppUrl: profileURL, ...config }}
       />,
-      { attachTo: container },
+      { connected: true },
     );
-    components.push(component);
-    return component;
   };
 
   beforeEach(() => {
-    container = document.createElement('div');
-    document.body.append(container);
-    components = [];
     eventBus = new EventBus();
     emitter = eventBus.createEmitter();
   });
 
-  afterEach(() => {
-    components.forEach(component => component.unmount());
-    container.remove();
-  });
-
   it('does not render anything while the modal is closed', () => {
     const wrapper = createComponent();
     assert.equal(wrapper.find(outerSelector).length, 0);

diff --git a/src/annotator/components/test/ToastMessages-test.js b/src/annotator/components/test/ToastMessages-test.js
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import EventEmitter from 'tiny-emitter';
 
 import { Emitter } from '../../util/emitter';

diff --git a/src/annotator/components/test/Toolbar-test.js b/src/annotator/components/test/Toolbar-test.js
@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import Toolbar from '../Toolbar';
 

diff --git a/src/sidebar/components/Annotation/test/Annotation-test.js b/src/sidebar/components/Annotation/test/Annotation-test.js
@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import sinon from 'sinon';
 
 import * as fixtures from '../../../test/annotation-fixtures';

diff --git a/src/sidebar/components/Annotation/test/AnnotationActionBar-test.js b/src/sidebar/components/Annotation/test/AnnotationActionBar-test.js
@@ -3,7 +3,7 @@ import {
   mockImportedComponents,
   waitFor,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import * as fixtures from '../../../test/annotation-fixtures';

diff --git a/src/sidebar/components/Annotation/test/AnnotationBody-test.js b/src/sidebar/components/Annotation/test/AnnotationBody-test.js
@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import * as fixtures from '../../../test/annotation-fixtures';

diff --git a/src/sidebar/components/Annotation/test/AnnotationDocumentInfo-test.js b/src/sidebar/components/Annotation/test/AnnotationDocumentInfo-test.js
@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import AnnotationDocumentInfo from '../AnnotationDocumentInfo';
 

diff --git a/src/sidebar/components/Annotation/test/AnnotationEditor-test.js b/src/sidebar/components/Annotation/test/AnnotationEditor-test.js
@@ -3,7 +3,7 @@ import {
   mockImportedComponents,
   waitFor,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import * as fixtures from '../../../test/annotation-fixtures';

diff --git a/src/sidebar/components/Annotation/test/AnnotationGroupInfo-test.js b/src/sidebar/components/Annotation/test/AnnotationGroupInfo-test.js
@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import AnnotationGroupInfo, { $imports } from '../AnnotationGroupInfo';
 

diff --git a/src/sidebar/components/Annotation/test/AnnotationHeader-test.js b/src/sidebar/components/Annotation/test/AnnotationHeader-test.js
@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import * as fixtures from '../../../test/annotation-fixtures';
 import AnnotationHeader, { $imports } from '../AnnotationHeader';

diff --git a/src/sidebar/components/Annotation/test/AnnotationPublishControl-test.js b/src/sidebar/components/Annotation/test/AnnotationPublishControl-test.js
@@ -3,7 +3,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import AnnotationPublishControl, {
   $imports,

diff --git a/src/sidebar/components/Annotation/test/AnnotationQuote-test.js b/src/sidebar/components/Annotation/test/AnnotationQuote-test.js
@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import AnnotationQuote, { $imports } from '../AnnotationQuote';
 

diff --git a/src/sidebar/components/Annotation/test/AnnotationReplyToggle-test.js b/src/sidebar/components/Annotation/test/AnnotationReplyToggle-test.js
@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import AnnotationReplyToggle from '../AnnotationReplyToggle';

diff --git a/src/sidebar/components/Annotation/test/AnnotationShareControl-test.js b/src/sidebar/components/Annotation/test/AnnotationShareControl-test.js
@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import AnnotationShareControl, { $imports } from '../AnnotationShareControl';
@@ -18,8 +18,6 @@ describe('AnnotationShareControl', () => {
   let fakeIsIOS;
   let fakeStore;
 
-  let container;
-
   const getIconButton = (wrapper, iconName) => {
     return wrapper
       .find('IconButton')
@@ -34,7 +32,7 @@ describe('AnnotationShareControl', () => {
         shareUri={fakeShareUri}
         {...props}
       />,
-      { attachTo: container },
+      { connected: true },
     );
   }
 
@@ -53,11 +51,6 @@ describe('AnnotationShareControl', () => {
   }
 
   beforeEach(() => {
-    // This extra element is necessary to test automatic `focus`-ing
-    // of the component's `input` element
-    container = document.createElement('div');
-    document.body.appendChild(container);
-
     fakeAnnotation = {
       group: 'fakegroup',
       permissions: {},
@@ -102,7 +95,6 @@ describe('AnnotationShareControl', () => {
 
   afterEach(() => {
     $imports.$restore();
-    container.remove();
   });
 
   it('does not render component if annotation group is not available', () => {

diff --git a/src/sidebar/components/Annotation/test/AnnotationTimestamps-test.js b/src/sidebar/components/Annotation/test/AnnotationTimestamps-test.js
@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import AnnotationTimestamps, { $imports } from '../AnnotationTimestamps';

diff --git a/src/sidebar/components/Annotation/test/AnnotationUser-test.js b/src/sidebar/components/Annotation/test/AnnotationUser-test.js
@@ -1,5 +1,5 @@
 import { checkAccessibility } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import AnnotationUser from '../AnnotationUser';
 

diff --git a/src/sidebar/components/Annotation/test/EmptyAnnotation-test.js b/src/sidebar/components/Annotation/test/EmptyAnnotation-test.js
@@ -2,7 +2,7 @@ import {
   checkAccessibility,
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import EmptyAnnotation, { $imports } from '../EmptyAnnotation';
 

diff --git a/src/sidebar/components/GroupList/test/GroupList-test.js b/src/sidebar/components/GroupList/test/GroupList-test.js
@@ -1,5 +1,5 @@
 import { mockImportedComponents } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import GroupList, { $imports } from '../GroupList';

diff --git a/src/sidebar/components/GroupList/test/GroupListItem-test.js b/src/sidebar/components/GroupList/test/GroupListItem-test.js
@@ -1,5 +1,5 @@
 import { delay } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import GroupListItem, { $imports } from '../GroupListItem';

diff --git a/src/sidebar/components/GroupList/test/GroupListSection-test.js b/src/sidebar/components/GroupList/test/GroupListSection-test.js
@@ -1,5 +1,5 @@
 import { mockImportedComponents } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 
 import GroupListSection, { $imports } from '../GroupListSection';
 

diff --git a/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js b/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
@@ -4,7 +4,7 @@ import {
   mockImportedComponents,
   waitForElement,
 } from '@hypothesis/frontend-testing';
-import { mount } from 'enzyme';
+import { mount } from '@hypothesis/frontend-testing';
 import { act } from 'preact/test-utils';
 
 import * as fixtures from '../../../test/annotation-fixtures';
@@ -18,8 +18,6 @@ describe('ExportAnnotations', () => {
   let fakeSuggestedFilename;
   let fakeCopyPlainText;
   let fakeCopyHTML;
-  let wrappers;
-  let containers;
 
   const fakePrivateGroup = {
     type: 'private',
@@ -28,25 +26,17 @@ describe('ExportAnnotations', () => {
   };
 
   const createComponent = props => {
-    const newContainer = document.createElement('div');
-    containers.push(newContainer);
-    document.body.appendChild(newContainer);
-
-    const wrapper = mount(
+    return mount(
       <ExportAnnotations
         annotationsExporter={fakeAnnotationsExporter}
         toastMessenger={fakeToastMessenger}
         {...props}
       />,
-      { attachTo: newContainer },
+      { connected: true },
     );
-    wrappers.push(wrapper);
-    return wrapper;
   };
 
   beforeEach(() => {
-    wrappers = [];
-    containers = [];
     fakeAnnotationsExporter = {
       buildJSONExportContent: sinon.stub().returns({}),
       buildTextExportContent: sinon.stub().returns(''),
@@ -102,8 +92,6 @@ describe('ExportAnnotations', () => {
   });
 
   afterEach(() => {
-    wrappers.forEach(w => w.unmount());
-    containers.forEach(c => c.remove());
     $imports.$restore();
   });