Replace modules in src/test-util with @hypothesis/frontend-testing

package.json

@@ -13,6 +13,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@hypothesis/frontend-build": "^2.0.0",
     "@hypothesis/frontend-shared": "^6.5.0",
+    "@hypothesis/frontend-testing": "^1.0.1",
     "@npmcli/arborist": "^7.0.0",
     "@octokit/rest": "^20.0.1",
     "@rollup/plugin-babel": "^6.0.0",

src/annotator/anchoring/test/pdf-test.js

-import { delay } from '../../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import { matchQuote } from '../match-quote';
 import * as pdfAnchoring from '../pdf';
 import { TextRange } from '../text-range';

src/annotator/components/test/Buckets-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
 import Buckets from '../Buckets';
 
 describe('Buckets', () => {

src/annotator/components/test/Toolbar-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
 import Toolbar from '../Toolbar';
 
 const noop = () => {};

src/annotator/integrations/test/html-test.js

-import { delay } from '../../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import { FeatureFlags } from '../../features';
 import { HTMLIntegration, $imports } from '../html';
 

src/annotator/integrations/test/image-text-layer-test.js

-import { delay } from '../../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import { ImageTextLayer } from '../image-text-layer';
 
 // Sizes and spacing between character bounding boxes in these tests, expressed

src/annotator/integrations/test/pdf-metadata-test.js

+import { delay } from '@hypothesis/frontend-testing';
 import EventEmitter from 'tiny-emitter';
 
-import { delay } from '../../../test-util/wait';
 import { PDFMetadata } from '../pdf-metadata';
 
 /**

src/annotator/integrations/test/pdf-test.js

-import { delay } from '../../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import { RenderingStates } from '../../anchoring/pdf';
 import { createPlaceholder } from '../../anchoring/placeholder';
 import { FakePDFViewerApplication } from '../../anchoring/test/fake-pdf-viewer-application';

src/annotator/integrations/test/vitalsource-test.js

-import { delay, waitFor } from '../../../test-util/wait';
+import { delay, waitFor } from '@hypothesis/frontend-testing';
+
 import {
   VitalSourceInjector,
   VitalSourceContentIntegration,

src/annotator/test/bucket-bar-client-test.js

-import { delay } from '../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import { BucketBarClient, $imports } from '../bucket-bar-client';
 
 describe('BucketBarClient', () => {

src/annotator/test/frame-observer-test.js

-import { delay, waitFor } from '../../test-util/wait';
+import { delay, waitFor } from '@hypothesis/frontend-testing';
+
 import {
   FrameObserver,
   onDocumentReady,

src/annotator/test/guest-test.js

+import { delay } from '@hypothesis/frontend-testing';
 import { TinyEmitter } from 'tiny-emitter';
 
-import { delay } from '../../test-util/wait';
 import { Guest, $imports } from '../guest';
 
 class FakeAdder {

src/annotator/test/highlight-clusters-test.js

-import { waitFor } from '../../test-util/wait';
+import { waitFor } from '@hypothesis/frontend-testing';
+
 import { FeatureFlags } from '../features';
 import { HighlightClusterController, $imports } from '../highlight-clusters';
 

src/annotator/test/integration/hypothesis-injector-test.js

-import { delay, waitFor } from '../../../test-util/wait';
+import { delay, waitFor } from '@hypothesis/frontend-testing';
+
 import { DEBOUNCE_WAIT, onNextDocumentReady } from '../../frame-observer';
 import {
   HypothesisInjector,

src/shared/messaging/test/port-finder-test.js

-import { delay } from '../../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import {
   MAX_WAIT_FOR_PORT,
   POLLING_INTERVAL_FOR_PORT,

src/shared/messaging/test/port-provider-test.js

-import { delay } from '../../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import { PortProvider, $imports } from '../port-provider';
 
 describe('PortProvider', () => {

src/shared/test/frame-error-capture-test.js

-import { delay } from '../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import {
   captureErrors,
   handleErrorsInFrames,

src/shared/test/integration/messaging-test.js

-import { delay } from '../../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import { ListenerCollection as ListenerCollection_ } from '../../listener-collection';
 import {
   PortFinder as PortFinder_,

src/shared/test/keyboard-navigation-test.js

+import { waitFor } from '@hypothesis/frontend-testing';
 import { options as preactOptions, render } from 'preact';
 import { useRef } from 'preact/hooks';
 import { act } from 'preact/test-utils';
 
-import { waitFor } from '../../test-util/wait';
 import { useArrowKeyNavigation } from '../keyboard-navigation';
 
 function Toolbar({ navigationOptions = {} }) {

src/sidebar/components/Annotation/test/Annotation-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import * as fixtures from '../../../test/annotation-fixtures';
 import Annotation, { $imports } from '../Annotation';
 

src/sidebar/components/Annotation/test/AnnotationActionBar-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+  waitFor,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
-import { waitFor } from '../../../../test-util/wait';
 import * as fixtures from '../../../test/annotation-fixtures';
 import AnnotationActionBar, { $imports } from '../AnnotationActionBar';
 

src/sidebar/components/Annotation/test/AnnotationBody-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import * as fixtures from '../../../test/annotation-fixtures';
 import AnnotationBody, { $imports } from '../AnnotationBody';
 

src/sidebar/components/Annotation/test/AnnotationDocumentInfo-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
 import AnnotationDocumentInfo from '../AnnotationDocumentInfo';
 
 describe('AnnotationDocumentInfo', () => {

src/sidebar/components/Annotation/test/AnnotationEditor-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+  waitFor,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
-import { waitFor } from '../../../../test-util/wait';
 import * as fixtures from '../../../test/annotation-fixtures';
 import AnnotationEditor, { $imports } from '../AnnotationEditor';
 

src/sidebar/components/Annotation/test/AnnotationHeader-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import * as fixtures from '../../../test/annotation-fixtures';
 import AnnotationHeader, { $imports } from '../AnnotationHeader';
 

src/sidebar/components/Annotation/test/AnnotationPublishControl-test.js

 import { GlobeIcon, GroupsIcon, LockIcon } from '@hypothesis/frontend-shared';
+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import AnnotationPublishControl, {
   $imports,
 } from '../AnnotationPublishControl';

src/sidebar/components/Annotation/test/AnnotationQuote-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import AnnotationQuote, { $imports } from '../AnnotationQuote';
 
 describe('AnnotationQuote', () => {

src/sidebar/components/Annotation/test/AnnotationReplyToggle-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
 import AnnotationReplyToggle from '../AnnotationReplyToggle';
 
 describe('AnnotationReplyToggle', () => {

src/sidebar/components/Annotation/test/AnnotationShareControl-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import AnnotationShareControl, { $imports } from '../AnnotationShareControl';
 
 describe('AnnotationShareControl', () => {

src/sidebar/components/Annotation/test/AnnotationShareInfo-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import AnnotationShareInfo, { $imports } from '../AnnotationShareInfo';
 
 describe('AnnotationShareInfo', () => {

src/sidebar/components/Annotation/test/AnnotationTimestamps-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
 import AnnotationTimestamps, { $imports } from '../AnnotationTimestamps';
 
 describe('AnnotationTimestamps', () => {

src/sidebar/components/Annotation/test/AnnotationUser-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
 import AnnotationUser from '../AnnotationUser';
 
 describe('AnnotationUser', () => {

src/sidebar/components/Annotation/test/EmptyAnnotation-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import EmptyAnnotation, { $imports } from '../EmptyAnnotation';
 
 describe('EmptyAnnotation', () => {

src/sidebar/components/GroupList/test/GroupList-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import GroupList, { $imports } from '../GroupList';
 
 describe('GroupList', () => {

src/sidebar/components/GroupList/test/GroupListItem-test.js

+import { delay } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { delay } from '../../../../test-util/wait';
 import GroupListItem, { $imports } from '../GroupListItem';
 
 describe('GroupListItem', () => {

src/sidebar/components/GroupList/test/GroupListSection-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import GroupListSection, { $imports } from '../GroupListSection';
 
 describe('GroupListSection', () => {

src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+  waitForElement,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
-import { waitForElement } from '../../../../test-util/wait';
 import * as fixtures from '../../../test/annotation-fixtures';
 import ExportAnnotations, { $imports } from '../ExportAnnotations';
 

src/sidebar/components/ShareDialog/test/FileInput-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
 import FileInput from '../FileInput';
 
 describe('FileInput', () => {

src/sidebar/components/ShareDialog/test/ImportAnnotations-test.js

+import {
+  checkAccessibility,
+  waitFor,
+  waitForElement,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { waitFor, waitForElement } from '../../../../test-util/wait';
 import ImportAnnotations, { $imports } from '../ImportAnnotations';
 
 describe('ImportAnnotations', () => {

src/sidebar/components/ShareDialog/test/ShareAnnotations-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import ShareAnnotations from '../ShareAnnotations';
 import { $imports } from '../ShareAnnotations';
 

src/sidebar/components/ShareDialog/test/ShareDialog-test.js

 import { Tab } from '@hypothesis/frontend-shared';
+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import ShareDialog from '../ShareDialog';
 import { $imports } from '../ShareDialog';
 

src/sidebar/components/test/AnnotationView-test.js

+import { mockImportedComponents, waitFor } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
-import { waitFor } from '../../../test-util/wait';
 import AnnotationView, { $imports } from '../AnnotationView';
 
 describe('AnnotationView', () => {

src/sidebar/components/test/AutocompleteList-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import AutocompleteList, { $imports } from '../AutocompleteList';
 
 describe('AutocompleteList', () => {

src/sidebar/components/test/Excerpt-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
 import Excerpt, { $imports } from '../Excerpt';
 
 describe('Excerpt', () => {

src/sidebar/components/test/FilterSelect-test.js

 import { ProfileIcon } from '@hypothesis/frontend-shared';
+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import FilterSelect, { $imports } from '../FilterSelect';
 
 describe('FilterSelect', () => {

src/sidebar/components/test/FilterStatus-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import FilterStatus, { $imports } from '../FilterStatus';
 
 function getFocusState() {

src/sidebar/components/test/HelpPanel-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import HelpPanel, { $imports } from '../HelpPanel';
 
 describe('HelpPanel', () => {

src/sidebar/components/test/HypothesisApp-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import HypothesisApp, { $imports } from '../HypothesisApp';
 
 describe('HypothesisApp', () => {

src/sidebar/components/test/LoggedOutMessage-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import LoggedOutMessage, { $imports } from '../LoggedOutMessage';
 
 describe('LoggedOutMessage', () => {

src/sidebar/components/test/LoginPromptPanel-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import LoginPromptPanel, { $imports } from '../LoginPromptPanel';
 
 describe('LoginPromptPanel', () => {

src/sidebar/components/test/MarkdownEditor-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { render } from 'preact';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import { LinkType } from '../../markdown-commands';
 import MarkdownEditor, { $imports } from '../MarkdownEditor';
 

src/sidebar/components/test/MarkdownView-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
 import MarkdownView, { $imports } from '../MarkdownView';
 
 describe('MarkdownView', () => {

src/sidebar/components/test/Menu-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import Menu from '../Menu';
 import { $imports } from '../Menu';
 

src/sidebar/components/test/MenuArrow-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import MenuArrow, { $imports } from '../MenuArrow';
 
 describe('MenuArrow', () => {

src/sidebar/components/test/MenuItem-test.js

 import { EditIcon } from '@hypothesis/frontend-shared';
+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import MenuItem, { $imports } from '../MenuItem';
 
 describe('MenuItem', () => {

src/sidebar/components/test/MenuKeyboardNavigation-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import MenuKeyboardNavigation, { $imports } from '../MenuKeyboardNavigation';
 
 describe('MenuKeyboardNavigation', () => {

src/sidebar/components/test/MenuSection-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import MenuSection from '../MenuSection';
 import { $imports } from '../MenuSection';
 

src/sidebar/components/test/ModerationBanner-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import * as fixtures from '../../test/annotation-fixtures';
 import ModerationBanner, { $imports } from '../ModerationBanner';
 

src/sidebar/components/test/NotebookFilters-test.js

 import { ProfileIcon } from '@hypothesis/frontend-shared';
+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import NotebookFilters from '../NotebookFilters';
 import { $imports } from '../NotebookFilters';
 

src/sidebar/components/test/NotebookResultCount-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
 import NotebookResultCount, { $imports } from '../NotebookResultCount';
 
 describe('NotebookResultCount', () => {

src/sidebar/components/test/NotebookView-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import { ResultSizeError } from '../../search-client';
 import NotebookView, { $imports } from '../NotebookView';
 

src/sidebar/components/test/PaginatedThreadList-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import PaginatedThreadList, { $imports } from '../PaginatedThreadList';
 
 describe('PaginatedThreadList', () => {

src/sidebar/components/test/PaginationNavigation-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
 import PaginationNavigation, { $imports } from '../PaginationNavigation';
 
 describe('PaginationNavigation', () => {

src/sidebar/components/test/SearchInput-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import SearchInput from '../SearchInput';
 import { $imports } from '../SearchInput';
 

src/sidebar/components/test/SelectionTabs-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import SelectionTabs, { $imports } from '../SelectionTabs';
 
 describe('SelectionTabs', () => {

src/sidebar/components/test/ShareLinks-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import ShareLinks, { $imports } from '../ShareLinks';
 
 describe('ShareLinks', () => {

src/sidebar/components/test/SidebarContentError-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import SidebarContentError from '../SidebarContentError';
 import { $imports } from '../SidebarContentError';
 

src/sidebar/components/test/SidebarPanel-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import SidebarPanel, { $imports } from '../SidebarPanel';
 
 describe('SidebarPanel', () => {

src/sidebar/components/test/SidebarView-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import SidebarView, { $imports } from '../SidebarView';
 
 describe('SidebarView', () => {

src/sidebar/components/test/SortMenu-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import SortMenu from '../SortMenu';
 import { $imports } from '../SortMenu';
 

src/sidebar/components/test/StreamSearchInput-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import StreamSearchInput, { $imports } from '../StreamSearchInput';
 
 describe('StreamSearchInput', () => {

src/sidebar/components/test/StreamView-test.js

+import { mockImportedComponents, waitFor } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
-import { waitFor } from '../../../test-util/wait';
 import StreamView, { $imports } from '../StreamView';
 
 describe('StreamView', () => {

src/sidebar/components/test/TagEditor-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import AutocompleteList from '../AutocompleteList';
 import TagEditor from '../TagEditor';
 import { $imports } from '../TagEditor';

src/sidebar/components/test/TagListItem-test.js

+import { checkAccessibility } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
 import TagList from '../TagList';
 import TagListItem from '../TagListItem';
 

src/sidebar/components/test/Thread-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import Thread from '../Thread';
 import { $imports } from '../Thread';
 

src/sidebar/components/test/ThreadCard-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import ThreadCard, { $imports } from '../ThreadCard';
 
 describe('ThreadCard', () => {

src/sidebar/components/test/ThreadList-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import ThreadList from '../ThreadList';
 import { $imports } from '../ThreadList';
 

src/sidebar/components/test/ToastMessages-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import ToastMessages, { $imports } from '../ToastMessages';
 
 describe('ToastMessages', () => {

src/sidebar/components/test/TopBar-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import TopBar, { $imports } from '../TopBar';
 
 describe('TopBar', () => {

src/sidebar/components/test/Tutorial-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import Tutorial, { $imports } from '../Tutorial';
 
 describe('Tutorial', () => {

src/sidebar/components/test/UserMenu-test.js

+import { mockImportedComponents } from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 import { act } from 'preact/test-utils';
 
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import UserMenu, { $imports } from '../UserMenu';
 
 describe('UserMenu', () => {

src/sidebar/components/test/VersionInfo-test.js

+import {
+  checkAccessibility,
+  mockImportedComponents,
+} from '@hypothesis/frontend-testing';
 import { mount } from 'enzyme';
 
-import { checkAccessibility } from '../../../test-util/accessibility';
-import { mockImportedComponents } from '../../../test-util/mock-imported-components';
 import VersionInfo from '../VersionInfo';
 import { $imports } from '../VersionInfo';
 

src/sidebar/services/test/autosave-test.js

-import { waitFor } from '../../../test-util/wait';
+import { waitFor } from '@hypothesis/frontend-testing';
+
 import * as annotationFixtures from '../../test/annotation-fixtures';
 import { fakeReduxStore } from '../../test/fake-redux-store';
 import { AutosaveService, $imports } from '../autosave';

src/sidebar/services/test/frame-sync-test.js

+import { delay } from '@hypothesis/frontend-testing';
 import EventEmitter from 'tiny-emitter';
 
 import { Injector } from '../../../shared/injector';
-import { delay } from '../../../test-util/wait';
 import * as annotationFixtures from '../../test/annotation-fixtures';
 import { fakeReduxStore } from '../../test/fake-redux-store';
 import { FrameSyncService, $imports, formatAnnot } from '../frame-sync';

src/sidebar/services/test/groups-test.js

-import { delay, waitFor } from '../../../test-util/wait';
+import { delay, waitFor } from '@hypothesis/frontend-testing';
+
 import { fakeReduxStore } from '../../test/fake-redux-store';
 import { GroupsService, $imports } from '../groups';
 

src/sidebar/services/test/streamer-test.js

+import { delay } from '@hypothesis/frontend-testing';
 import EventEmitter from 'tiny-emitter';
 
-import { delay } from '../../../test-util/wait';
 import { fakeReduxStore } from '../../test/fake-redux-store';
 import { StreamerService, $imports } from '../streamer';
 

src/sidebar/test/search-client-test.js

-import { delay } from '../../test-util/wait';
+import { delay } from '@hypothesis/frontend-testing';
+
 import { ResultSizeError, SearchClient } from '../search-client';
 
 function awaitEvent(emitter, event) {

src/test-util/accessibility.js

-import { run } from 'axe-core';
-import { ReactWrapper, mount } from 'enzyme';
-import { isValidElement } from 'preact';
-
-/**
- * @typedef {Scenario}
- * @prop {string} [name] -
- *   A descriptive name for the scenario. Defaults to "default" if not specified.
- * @prop {() => import('preact').VNode|ReactWrapper} content -
- *   A function that returns the rendered output to test or an Enzyme wrapper
- *   created using Enzyme's `mount` function.
- * @prop {string} [backgroundColor] -
- *   Background color onto which to render the element. This can affect the
- *   result of color contrast tests. Defaults to white.
- */
-
-async function testScenario(
-  elementOrWrapper,
-  { backgroundColor = 'white' } = {},
-) {
-  const container = document.createElement('div');
-  container.style.backgroundColor = backgroundColor;
-  document.body.appendChild(container);
-
-  let wrapper;
-  if (elementOrWrapper instanceof ReactWrapper) {
-    wrapper = elementOrWrapper;
-    container.appendChild(elementOrWrapper.getDOMNode());
-  } else {
-    wrapper = mount(elementOrWrapper, { attachTo: container });
-  }
-
-  const results = await run(container, {
-    // Run checks that correspond to the WCAG AA and Section 508 compliance
-    // criteria. These are the standards that we have committed to customers to
-    // meet.
-    runOnly: { type: 'tag', values: ['section508', 'wcag2a', 'wcag2aa'] },
-
-    // Only check for definite failures. The other possible non-pass outcomes for a
-    // given check are "incomplete" (couldn't determine status automatically)
-    // or "inapplicable" (no relevant HTML elements found).
-    resultTypes: ['violations'],
-  });
-  wrapper.unmount();
-  container.remove();
-
-  return results.violations;
-}
-
-/**
- * Generate an accessibility test function for a component.
- *
- * The returned function should be passed as the callback argument to an `it`
- * call in a Mocha test (eg. `it("should pass a11y checks", checkAccessibility(...))`).
- *
- * An accessibility test consists of an array of scenarios describing typical
- * states of the component.
- *
- * @param {Scenario|Scenario[]} scenarios
- * @return {() => Promise}
- */
-export function checkAccessibility(scenarios) {
-  if (!Array.isArray(scenarios)) {
-    scenarios = [scenarios];
-  }
-
-  return async () => {
-    for (let { name = 'default', content, ...config } of scenarios) {
-      if (typeof content !== 'function') {
-        throw new Error(
-          `"content" key for accessibility scenario "${name}" should be a function but is a ${typeof content}`,
-        );
-      }
-
-      const elementOrWrapper = content();
-
-      if (
-        !(elementOrWrapper instanceof ReactWrapper) &&
-        !isValidElement(elementOrWrapper)
-      ) {
-        throw new Error(
-          `Expected "content" function for scenario "${name}" to return a Preact element or an Enzyme wrapper`,
-        );
-      }
-
-      const violations = await testScenario(elementOrWrapper, config);
-      assert.deepEqual(
-        violations,
-        [],
-        `Scenario "${name}" has accessibility violations`,
-      );
-    }
-  };
-}

src/test-util/mock-imported-components.js

-/**
- * Return true if an imported `value` "looks like" a Preact function component.
- *
- * This check can have false positives (ie. match values which are not really components).
- * That's OK because typical usage in a test is to first mock all components with
- * `$imports.$mock(mockImportedComponents())` and then mock other things with
- * `$imports.$mock(...)`. The more specific mocks will override the generic
- * component mocks.
- */
-function isComponent(value) {
-  return (
-    typeof value === 'function' &&
-    value.name.match(/^[A-Z]/) &&
-    // Check that function is not an ES class. Note this only works with real
-    // ES classes and may not work with ones transpiled to ES5.
-    !value.toString().match(/^class\b/)
-  );
-}
-
-/**
- * Return the display name of a component, minus the names of any wrappers
- * (eg. `withServices(OriginalName)` becomes `OriginalName`).
- *
- * @param {Function} component - A Preact component
- * @return {string}
- */
-function getDisplayName(component) {
-  let displayName =
-    component.displayName || component.name || 'UnknownComponent';
-
-  const wrappedComponentMatch = displayName.match(/\([A-Z][A-Za-z0-9]+\)/);
-  if (wrappedComponentMatch) {
-    displayName = wrappedComponentMatch[0].slice(1, -1);
-  }
-
-  return displayName;
-}
-
-/**
- * Helper for use with `babel-plugin-mockable-imports` that mocks components
- * imported by a file. This will only mock components that are local to the
- * package; it will not mock external components. This is to aid in catching
- * integration issues, at the slight cost of unit isolation.
- *
- * Mocked components will have the same display name as the original component,
- * minus any wrappers (eg. `Widget` and `withServices(Widget)` both become
- * `Widget`). They will render only their children, as if they were just a
- * `Fragment`.
- *
- * @example
- *   import ComponentUnderTest, { $imports } from '../component-under-test';
- *
- *   beforeEach(() => {
- *     $imports.$mock(mockImportedComponents());
- *
- *     // Add additional mocks or overrides here.
- *   });
- *
- *   afterEach(() => {
- *     $imports.$restore();
- *   });
- *
- * @return {Function} - A function that can be passed to `$imports.$mock`.
- */
-export function mockImportedComponents() {
-  return (source, symbol, value) => {
-    if (!isComponent(value) || !source.startsWith('.')) {
-      return null;
-    }
-
-    const mock = props => props.children;
-
-    // Make it possible to do `wrapper.find('ComponentName')` where `wrapper`
-    // is an Enzyme wrapper.
-    mock.displayName = getDisplayName(value);
-
-    return mock;
-  };
-}

src/test-util/wait.ts

-/**
- * Wait for a condition to evaluate to a truthy value.
- *
- * @return result of the `condition` function
- */
-export async function waitFor<T>(
-  condition: () => T,
-  timeout = 10,
-  what = condition.toString(),
-): Promise<NonNullable<T>> {
-  const result = condition();
-  if (result) {
-    return result;
-  }
-
-  const start = Date.now();
-
-  return new Promise((resolve, reject) => {
-    const timer = setInterval(() => {
-      const result = condition();
-      if (result) {
-        clearTimeout(timer);
-        resolve(result);
-      }
-      if (Date.now() - start > timeout) {
-        clearTimeout(timer);
-        reject(new Error(`waitFor(${what}) failed after ${timeout} ms`));
-      }
-    });
-  });
-}
-
-// Minimal Enzyme types needed by `waitForElement`.
-
-// eslint-disable-next-line no-use-before-define
-type Predicate = (wrapper: EnzymeWrapper) => boolean;
-
-type EnzymeWrapper = {
-  length: number;
-  update(): void;
-  find(query: string | Predicate): EnzymeWrapper;
-};
-
-/**
- * Wait up to `timeout` ms for an element to be rendered.
- *
- * @param selector - Selector string or function to pass to `wrapper.find`
- */
-export function waitForElement(
-  wrapper: EnzymeWrapper,
-  selector: string | Predicate,
-  timeout = 10,
-): Promise<EnzymeWrapper> {
-  return waitFor(
-    () => {
-      wrapper.update();
-      const el = wrapper.find(selector);
-      if (el.length === 0) {
-        return null;
-      }
-      return el;
-    },
-    timeout,
-    `"${selector}" to render`,
-  );
-}
-
-export function delay(ms: number) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}

yarn.lock

@@ -2071,6 +2071,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@hypothesis/frontend-testing@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@hypothesis/frontend-testing@npm:1.0.1"
+  dependencies:
+    axe-core: ^4.8.2
+    enzyme: ^3.11.0
+    preact: ^10.18.1
+  checksum: fafd09a34503262adaa52ccd31040ea6fd1c41e8ee947f38b2649ba5323c1618338964d4d10ba344df6571561f268249e0a91cb4390de420b9eada21de750d44
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -3789,7 +3800,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axe-core@npm:^4.0.0, axe-core@npm:^4.6.2":
+"axe-core@npm:^4.0.0, axe-core@npm:^4.6.2, axe-core@npm:^4.8.2":
   version: 4.8.2
   resolution: "axe-core@npm:4.8.2"
   checksum: 8c19f507dabfcb8514e4280c7fc66e85143be303ddb57ec9f119338021228dc9b80560993938003837bda415fde7c07bba3a96560008ffa5f4145a248ed8f5fe
@@ -5408,7 +5419,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enzyme@npm:^3.8.0":
+"enzyme@npm:^3.11.0, enzyme@npm:^3.8.0":
   version: 3.11.0
   resolution: "enzyme@npm:3.11.0"
   dependencies:
@@ -7393,6 +7404,7 @@ __metadata:
     "@babel/preset-typescript": ^7.16.7
     "@hypothesis/frontend-build": ^2.0.0
     "@hypothesis/frontend-shared": ^6.5.0
+    "@hypothesis/frontend-testing": ^1.0.1
     "@npmcli/arborist": ^7.0.0
     "@octokit/rest": ^20.0.1
     "@rollup/plugin-babel": ^6.0.0
@@ -10681,7 +10693,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"preact@npm:^10.4.0":
+"preact@npm:^10.18.1, preact@npm:^10.4.0":
   version: 10.18.1
   resolution: "preact@npm:10.18.1"
   checksum: 691030149fdbd026cac7c07147756f48c6cb8cdea6a8af8c0f383e4c31f5bce48cdc751e4bccf8826560a0d2db77ada401c0308f2bcae2961d16972c26c95607