Fix ShareDialog tests to work with changes introduced in frontend-sha…

…red 6.8.0
hypothesis · Oct 2, 2023 · bd4e7e3 · bd4e7e3
1 parent f2758f9
commit bd4e7e3
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 25 deletions.
diff --git a/src/sidebar/components/ShareDialog/ExportAnnotations.tsx b/src/sidebar/components/ShareDialog/ExportAnnotations.tsx
@@ -19,7 +19,7 @@ import type { AnnotationsExporter } from '../../services/annotations-exporter';
 import type { ToastMessengerService } from '../../services/toast-messenger';
 import { useSidebarStore } from '../../store';
 import LoadingSpinner from './LoadingSpinner';
-import { UserAnnotationsContent } from './UserAnnotationsContent';
+import { UserAnnotationsListItem } from './UserAnnotationsListItem';
 
 export type ExportAnnotationsProps = {
   // injected
@@ -149,19 +149,19 @@ function ExportAnnotations({
           <SelectNext
             value={selectedUser}
             onChange={setSelectedUser}
-            label={<UserAnnotationsContent userAnnotations={selectedUser} />}
+            label={<UserAnnotationsListItem userAnnotations={selectedUser} />}
           >
             <SelectNext.Option value={allAnnotationsOption}>
               {() => (
-                <UserAnnotationsContent
+                <UserAnnotationsListItem
                   userAnnotations={allAnnotationsOption}
                 />
               )}
             </SelectNext.Option>
             {userList.map(userInfo => (
               <SelectNext.Option key={userInfo.userid} value={userInfo}>
                 {({ selected }) => (
-                  <UserAnnotationsContent
+                  <UserAnnotationsListItem
                     userAnnotations={userInfo}
                     classes={classnames({ 'font-semibold': selected })}
                   />

diff --git a/src/sidebar/components/ShareDialog/ImportAnnotations.tsx b/src/sidebar/components/ShareDialog/ImportAnnotations.tsx
@@ -17,7 +17,7 @@ import type { ImportAnnotationsService } from '../../services/import-annotations
 import { useSidebarStore } from '../../store';
 import CircularProgress from '../CircularProgress';
 import FileInput from './FileInput';
-import { UserAnnotationsContent } from './UserAnnotationsContent';
+import { UserAnnotationsListItem } from './UserAnnotationsListItem';
 
 export type ImportAnnotationsProps = {
   importAnnotationsService: ImportAnnotationsService;
@@ -165,7 +165,7 @@ function ImportAnnotations({
             onChange={setSelectedUser}
             label={
               selectedUser ? (
-                <UserAnnotationsContent userAnnotations={selectedUser} />
+                <UserAnnotationsListItem userAnnotations={selectedUser} />
               ) : (
                 // This mimics a placeholder and makes it more accessible by
                 // preventing a button with no text
@@ -176,7 +176,7 @@ function ImportAnnotations({
             {userList.map(userInfo => (
               <SelectNext.Option key={userInfo.userid} value={userInfo}>
                 {({ selected }) => (
-                  <UserAnnotationsContent
+                  <UserAnnotationsListItem
                     userAnnotations={userInfo}
                     classes={classnames({ 'font-semibold': selected })}
                   />

diff --git a/...ts/ShareDialog/UserAnnotationsContent.tsx → ...s/ShareDialog/UserAnnotationsListItem.tsx b/...ts/ShareDialog/UserAnnotationsContent.tsx → ...s/ShareDialog/UserAnnotationsListItem.tsx
@@ -2,15 +2,18 @@ import classnames from 'classnames';
 
 import type { UserAnnotations } from '../../helpers/annotations-by-user';
 
-export type UserAnnotationsContentProps = {
+export type UserAnnotationsListItemProps = {
   userAnnotations: UserAnnotations;
   classes?: string;
 };
 
-export function UserAnnotationsContent({
+/**
+ * UserAnnotations representation to use inside `SelectNext.Option`.
+ */
+export function UserAnnotationsListItem({
   userAnnotations,
   classes,
-}: UserAnnotationsContentProps) {
+}: UserAnnotationsListItemProps) {
   return (
     <div className={classnames('flex gap-x-2', classes)}>
       {userAnnotations.displayName}

diff --git a/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js b/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
@@ -1,5 +1,6 @@
 import { SelectNext } from '@hypothesis/frontend-shared';
 import { mount } from 'enzyme';
+import { act } from 'preact/test-utils';
 
 import { checkAccessibility } from '../../../../test-util/accessibility';
 import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
@@ -68,9 +69,9 @@ describe('ExportAnnotations', () => {
     $imports.$restore({
       // Restore this very simple component to get it test coverage
       './LoadingSpinner': true,
-      // Restore UserAnnotationsContent, as it's used as some buttons' content
+      // Restore UserAnnotationsListItem, as it's used as some buttons' content
       // and can make a11y tests fail
-      './UserAnnotationsContent': true,
+      './UserAnnotationsListItem': true,
     });
   });
 
@@ -271,7 +272,9 @@ describe('ExportAnnotations', () => {
           option => option.prop('value').userid === 'acct:john@example.com',
         )
         .first();
-      userList.prop('onChange')(option.prop('value'));
+      act(() => {
+        userList.prop('onChange')(option.prop('value'));
+      });
       wrapper.update();
 
       submitExportForm(wrapper);

diff --git a/src/sidebar/components/ShareDialog/test/ShareDialog-test.js b/src/sidebar/components/ShareDialog/test/ShareDialog-test.js
@@ -1,3 +1,4 @@
+import { Tab } from '@hypothesis/frontend-shared';
 import { mount } from 'enzyme';
 
 import { checkAccessibility } from '../../../../test-util/accessibility';
@@ -59,14 +60,11 @@ describe('ShareDialog', () => {
   });
 
   function selectTab(wrapper, name) {
-    wrapper
-      .find(`Tab[aria-controls="${name}-panel"]`)
-      .find('button')
-      .simulate('click');
+    wrapper.find(`button[aria-controls="${name}-panel"]`).simulate('click');
   }
 
   function getActiveTab(wrapper) {
-    return wrapper.find('Tab').filter({ selected: true });
+    return wrapper.find(Tab).filter({ selected: true });
   }
 
   function activeTabPanel(wrapper) {
@@ -79,18 +77,14 @@ describe('ShareDialog', () => {
     assert.isFalse(wrapper.find('TabHeader').exists());
   });
 
-  [
-    [{ shareTab: false }],
-    [{ importTab: false }],
-    [{ exportTab: false }],
-    [{}],
-  ].forEach(props => {
+  [{ importTab: false }, { exportTab: false }, {}].forEach(props => {
     it(`renders a tabbed dialog when more than one tab is provided`, () => {
       const wrapper = createComponent(props);
 
       assert.isTrue(wrapper.find('TabHeader').exists());
       assert.isTrue(
-        wrapper.find('Tab[aria-controls="share-panel"]').props().selected,
+        wrapper.find(Tab).filter('[aria-controls="share-panel"]').props()
+          .selected,
       );
       assert.isTrue(wrapper.find('TabPanel[id="share-panel"]').props().active);
     });