From 91e84f79518c704686607d095c860e05f85f0244 Mon Sep 17 00:00:00 2001 From: R Midhun Suresh Date: Mon, 14 Oct 2024 21:41:58 +0530 Subject: [PATCH] Upgrade to latest compound-web package (#84) * Upgrade to latest compound-web package * Use a custom render function for jest tests This way we don't need to manually wrap our components with * Pin wrap-ansi to fix broken yarn install * Add playwright helper to find tooltip from element and use it in the failing test * Exclude floating-ui divs/spans from axe testing This is rendered outside .MatrixChat by compound and contains all the tooltips. * Wrap outermost components with TooltipProvider * Remove onChange and use onSelect for toggle * Fix jest tests and update snapshots * Use vector-im/matrix-wysiwig --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- .eslintrc.js | 4 + jest.config.ts | 1 + package.json | 6 +- playwright/e2e/crypto/event-shields.spec.ts | 18 +- playwright/element-web-test.ts | 2 +- playwright/pages/ElementAppPage.ts | 18 + src/Modal.tsx | 46 +-- src/components/structures/ContextMenu.tsx | 21 +- src/components/structures/MatrixChat.tsx | 5 +- src/components/structures/ThreadPanel.tsx | 2 +- .../auth/forgot-password/CheckEmail.tsx | 2 +- .../auth/forgot-password/VerifyEmailModal.tsx | 2 +- .../views/elements/AccessibleButton.tsx | 2 +- src/components/views/elements/InfoTooltip.tsx | 2 +- .../views/elements/PersistedElement.tsx | 9 +- src/components/views/elements/Pill.tsx | 2 +- src/components/views/elements/RoomTopic.tsx | 2 +- .../views/messages/MStickerBody.tsx | 2 +- .../views/messages/MessageTimestamp.tsx | 2 +- .../messages/ReactionsRowButtonTooltip.tsx | 2 +- src/components/views/messages/TextualBody.tsx | 7 +- .../views/right_panel/RoomSummaryCard.tsx | 4 +- src/components/views/rooms/EventTile.tsx | 2 +- .../views/rooms/MessageComposer.tsx | 2 +- .../views/rooms/ReadReceiptGroup.tsx | 2 +- src/components/views/rooms/RoomHeader.tsx | 2 +- .../rooms/RoomHeader/CallGuestLinkButton.tsx | 2 +- src/toasts/IncomingCallToast.tsx | 68 ++-- src/utils/exportUtils/HtmlExport.tsx | 41 ++- src/utils/pillify.tsx | 19 +- src/utils/tooltipify.tsx | 9 +- test/HtmlUtils-test.tsx | 2 +- test/LegacyCallHandler-test.ts | 2 +- test/Notifier-test.ts | 2 +- test/TextForEvent-test.ts | 2 +- .../accessibility/LandmarkNavigation-test.tsx | 2 +- test/accessibility/RovingTabIndex-test.tsx | 2 +- .../structures/AutocompleteInput-test.tsx | 2 +- test/components/structures/FilePanel-test.tsx | 2 +- .../structures/LargeLoader-test.tsx | 2 +- test/components/structures/LeftPanel-test.tsx | 2 +- .../structures/LoggedInView-test.tsx | 2 +- test/components/structures/MainSplit-test.tsx | 2 +- .../components/structures/MatrixChat-test.tsx | 2 +- .../MatrixClientContextProvider-test.tsx | 2 +- .../structures/MessagePanel-test.tsx | 2 +- .../PictureInPictureDragger-test.tsx | 2 +- .../structures/PipContainer-test.tsx | 2 +- .../structures/ReleaseAnnouncement-test.tsx | 2 +- .../components/structures/RightPanel-test.tsx | 2 +- .../structures/RoomSearchView-test.tsx | 2 +- .../structures/RoomStatusBar-test.tsx | 2 +- .../RoomStatusBarUnsentMessages-test.tsx | 2 +- test/components/structures/RoomView-test.tsx | 2 +- .../structures/SpaceHierarchy-test.tsx | 2 +- .../components/structures/TabbedView-test.tsx | 2 +- .../structures/ThreadPanel-test.tsx | 2 +- .../components/structures/ThreadView-test.tsx | 2 +- .../structures/TimelinePanel-test.tsx | 4 +- test/components/structures/UploadBar-test.tsx | 2 +- test/components/structures/UserMenu-test.tsx | 2 +- .../components/structures/ViewSource-test.tsx | 2 +- .../__snapshots__/FilePanel-test.tsx.snap | 1 + .../__snapshots__/RoomView-test.tsx.snap | 25 ++ .../SpaceHierarchy-test.tsx.snap | 1 + .../__snapshots__/ThreadPanel-test.tsx.snap | 4 +- .../structures/auth/CompleteSecurity-test.tsx | 2 +- .../structures/auth/ForgotPassword-test.tsx | 2 +- .../components/structures/auth/Login-test.tsx | 2 +- .../structures/auth/LoginSplashView-test.tsx | 2 +- .../structures/auth/Registration-test.tsx | 2 +- .../audio_messages/RecordingPlayback-test.tsx | 2 +- .../views/audio_messages/SeekBar-test.tsx | 2 +- .../views/auth/CountryDropdown-test.tsx | 2 +- .../InteractiveAuthEntryComponents-test.tsx | 2 +- .../views/auth/RegistrationToken-test.tsx | 2 +- ...teractiveAuthEntryComponents-test.tsx.snap | 4 +- .../avatars/DecoratedRoomAvatar-test.tsx | 6 +- .../views/avatars/MemberAvatar-test.tsx | 2 +- .../views/avatars/RoomAvatar-test.tsx | 2 +- .../avatars/WithPresenceIndicator-test.tsx | 4 +- .../DecoratedRoomAvatar-test.tsx.snap | 4 +- .../WithPresenceIndicator-test.tsx.snap | 6 +- .../views/beacon/BeaconListItem-test.tsx | 2 +- .../views/beacon/BeaconMarker-test.tsx | 2 +- .../views/beacon/BeaconStatus-test.tsx | 2 +- .../views/beacon/BeaconViewDialog-test.tsx | 2 +- .../views/beacon/DialogSidebar-test.tsx | 2 +- .../beacon/LeftPanelLiveShareWarning-test.tsx | 2 +- .../views/beacon/OwnBeaconStatus-test.tsx | 2 +- .../views/beacon/RoomCallBanner-test.tsx | 2 +- .../views/beacon/ShareLatestLocation-test.tsx | 2 +- .../beacon/StyledLiveBeaconIcon-test.tsx | 2 +- .../BeaconListItem-test.tsx.snap | 1 + .../__snapshots__/DialogSidebar-test.tsx.snap | 1 + .../ShareLatestLocation-test.tsx.snap | 1 + test/components/views/beta/BetaCard-test.tsx | 2 +- .../views/context_menus/ContextMenu-test.tsx | 2 +- .../views/context_menus/EmbeddedPage-test.tsx | 2 +- .../context_menus/MessageContextMenu-test.tsx | 2 +- .../RoomGeneralContextMenu-test.tsx | 2 +- .../context_menus/SpaceContextMenu-test.tsx | 2 +- .../ThreadListContextMenu-test.tsx | 2 +- .../context_menus/WidgetContextMenu-test.tsx | 2 +- .../AccessSecretStorageDialog-test.tsx | 2 +- .../views/dialogs/AppDownloadDialog-test.tsx | 2 +- .../dialogs/AskInviteAnywayDialog-test.tsx | 2 +- .../views/dialogs/ChangelogDialog-test.tsx | 2 +- .../dialogs/ConfirmRedactDialog-test.tsx | 2 +- .../dialogs/ConfirmUserActionDialog-test.tsx | 2 +- .../views/dialogs/CreateRoomDialog-test.tsx | 2 +- .../views/dialogs/DevtoolsDialog-test.tsx | 2 +- .../views/dialogs/ExportDialog-test.tsx | 2 +- .../views/dialogs/FeedbackDialog-test.tsx | 2 +- .../views/dialogs/ForwardDialog-test.tsx | 2 +- .../views/dialogs/IncomingSasDialog-test.tsx | 2 +- .../dialogs/InteractiveAuthDialog-test.tsx | 2 +- .../views/dialogs/InviteDialog-test.tsx | 2 +- .../views/dialogs/LogoutDialog-test.tsx | 2 +- .../ManageRestrictedJoinRuleDialog-test.tsx | 2 +- ...ManualDeviceKeyVerificationDialog-test.tsx | 2 +- .../dialogs/MessageEditHistoryDialog-test.tsx | 2 +- .../views/dialogs/RoomSettingsDialog-test.tsx | 2 +- .../views/dialogs/ServerPickerDialog-test.tsx | 2 +- .../views/dialogs/ShareDialog-test.tsx | 2 +- .../views/dialogs/SpotlightDialog-test.tsx | 2 +- .../views/dialogs/UnpinAllDialog-test.tsx | 2 +- .../views/dialogs/UserSettingsDialog-test.tsx | 2 +- .../ServerPickerDialog-test.tsx.snap | 1 + .../UnpinAllDialog-test.tsx.snap | 4 +- .../views/dialogs/devtools/Event-test.tsx | 2 +- .../devtools/RoomNotifications-test.tsx | 2 +- .../security/CreateKeyBackupDialog-test.tsx | 2 +- .../CreateSecretStorageDialog-test.tsx | 2 +- .../security/ExportE2eKeysDialog-test.tsx | 2 +- .../security/ImportE2eKeysDialog-test.tsx | 2 +- .../security/RestoreKeyBackupDialog-test.tsx | 2 +- .../PublicRoomResultDetails-test.tsx | 2 +- .../spotlight/RoomResultContextMenus-test.tsx | 2 +- .../views/elements/AccessibleButton-test.tsx | 2 +- .../views/elements/AppTile-test.tsx | 2 +- .../DesktopCapturerSourcePicker-test.tsx | 2 +- .../views/elements/EffectsOverlay-test.tsx | 2 +- .../views/elements/EventListSummary-test.tsx | 2 +- .../views/elements/ExternalLink-test.tsx | 2 +- .../views/elements/FacePile-test.tsx | 2 +- test/components/views/elements/Field-test.tsx | 2 +- .../views/elements/FilterDropdown-test.tsx | 2 +- .../views/elements/FilterTabGroup-test.tsx | 2 +- .../views/elements/ImageView-test.tsx | 2 +- .../views/elements/InfoTooltip-test.tsx | 2 +- .../views/elements/LabelledCheckbox-test.tsx | 2 +- .../views/elements/LearnMore-test.tsx | 2 +- test/components/views/elements/Pill-test.tsx | 2 +- .../views/elements/PollCreateDialog-test.tsx | 2 +- .../views/elements/PowerSelector-test.tsx | 2 +- .../views/elements/ProgressBar-test.tsx | 2 +- .../components/views/elements/QRCode-test.tsx | 2 +- .../views/elements/RoomFacePile-test.tsx | 2 +- .../views/elements/RoomTopic-test.tsx | 2 +- .../views/elements/SearchWarning-test.tsx | 2 +- .../SpellCheckLanguagesDropdown-test.tsx | 2 +- .../views/elements/StyledRadioGroup-test.tsx | 2 +- .../views/elements/SyntaxHighlight-test.tsx | 2 +- .../__snapshots__/AppTile-test.tsx.snap | 3 + .../__snapshots__/FacePile-test.tsx.snap | 1 + .../__snapshots__/RoomFacePile-test.tsx.snap | 2 + .../crypto/VerificationQRCode-test.tsx | 2 +- .../views/emojipicker/EmojiPicker-test.tsx | 2 +- .../location/LiveDurationDropdown-test.tsx | 2 +- .../views/location/LocationPicker-test.tsx | 2 +- .../views/location/LocationShareMenu-test.tsx | 2 +- .../location/LocationViewDialog-test.tsx | 2 +- test/components/views/location/Map-test.tsx | 2 +- .../views/location/MapError-test.tsx | 2 +- .../components/views/location/Marker-test.tsx | 2 +- .../views/location/SmartMarker-test.tsx | 2 +- .../views/location/ZoomButtons-test.tsx | 2 +- .../views/messages/CallEvent-test.tsx | 2 +- .../views/messages/DateSeparator-test.tsx | 2 +- .../messages/DecryptionFailureBody-test.tsx | 2 +- .../messages/DownloadActionButton-test.tsx | 2 +- .../views/messages/EncryptionEvent-test.tsx | 2 +- .../views/messages/JumpToDatePicker-test.tsx | 2 +- .../views/messages/LegacyCallEvent-test.tsx | 2 +- .../views/messages/MBeaconBody-test.tsx | 2 +- .../views/messages/MImageBody-test.tsx | 2 +- .../messages/MKeyVerificationRequest-test.tsx | 2 +- .../views/messages/MLocationBody-test.tsx | 2 +- .../views/messages/MPollBody-test.tsx | 2 +- .../views/messages/MPollEndBody-test.tsx | 2 +- .../views/messages/MStickerBody-test.tsx | 2 +- .../views/messages/MVideoBody-test.tsx | 2 +- .../views/messages/MessageActionBar-test.tsx | 2 +- .../views/messages/MessageEvent-test.tsx | 2 +- .../views/messages/MessageTimestamp-test.tsx | 2 +- .../messages/PinnedMessageBadge-test.tsx | 2 +- .../messages/ReactionsRowButton-test.tsx | 2 +- .../messages/RoomPredecessorTile-test.tsx | 2 +- .../views/messages/TextualBody-test.tsx | 2 +- .../__snapshots__/MLocationBody-test.tsx.snap | 2 + .../shared/MediaProcessingError-test.tsx | 2 +- .../polls/pollHistory/PollHistory-test.tsx | 2 +- .../polls/pollHistory/PollListItem-test.tsx | 2 +- .../pollHistory/PollListItemEnded-test.tsx | 2 +- .../__snapshots__/PollHistory-test.tsx.snap | 2 + .../__snapshots__/PollListItem-test.tsx.snap | 1 + .../PollListItemEnded-test.tsx.snap | 1 + .../views/right_panel/BaseCard-test.tsx | 2 +- .../views/right_panel/ExtensionsCard-test.tsx | 2 +- .../right_panel/PinnedMessagesCard-test.tsx | 20 +- .../right_panel/RoomSummaryCard-test.tsx | 2 +- .../views/right_panel/UserInfo-test.tsx | 4 +- .../right_panel/VerificationPanel-test.tsx | 2 +- .../__snapshots__/BaseCard-test.tsx.snap | 1 + .../ExtensionsCard-test.tsx.snap | 6 +- .../PinnedMessagesCard-test.tsx.snap | 9 +- .../RoomSummaryCard-test.tsx.snap | 303 ++++++++-------- .../__snapshots__/UserInfo-test.tsx.snap | 74 ++-- .../RoomProfileSettings-test.tsx | 2 +- .../views/rooms/AppsDrawer-test.tsx | 2 +- .../views/rooms/BasicMessageComposer-test.tsx | 2 +- .../views/rooms/EditMessageComposer-test.tsx | 2 +- .../components/views/rooms/EventTile-test.tsx | 6 +- .../EventTile/EventTileThreadToolbar-test.tsx | 2 +- .../components/views/rooms/ExtraTile-test.tsx | 2 +- .../views/rooms/MemberList-test.tsx | 15 +- .../views/rooms/MemberTile-test.tsx | 10 +- .../views/rooms/MessageComposer-test.tsx | 2 +- .../rooms/MessageComposerButtons-test.tsx | 2 +- .../views/rooms/NewRoomIntro-test.tsx | 2 +- .../NotificationBadge-test.tsx | 2 +- .../StatelessNotificationBadge-test.tsx | 2 +- .../UnreadNotificationBadge-test.tsx | 2 +- .../views/rooms/PinnedEventTile-test.tsx | 2 +- .../views/rooms/PinnedMessageBanner-test.tsx | 2 +- .../views/rooms/PresenceLabel-test.tsx | 2 +- .../views/rooms/ReadReceiptGroup-test.tsx | 5 +- .../views/rooms/ReadReceiptMarker-test.tsx | 2 +- .../views/rooms/RoomHeader-test.tsx | 138 ++++---- .../RoomHeader/CallGuestLinkButton-test.tsx | 20 +- .../RoomHeader/VideoRoomChatButton-test.tsx | 20 +- .../VideoRoomChatButton-test.tsx.snap | 1 + .../views/rooms/RoomKnocksBar-test.tsx | 2 +- test/components/views/rooms/RoomList-test.tsx | 2 +- .../views/rooms/RoomListHeader-test.tsx | 2 +- .../views/rooms/RoomPreviewBar-test.tsx | 2 +- .../views/rooms/RoomPreviewCard-test.tsx | 2 +- .../views/rooms/RoomSearchAuxPanel-test.tsx | 4 +- test/components/views/rooms/RoomTile-test.tsx | 2 +- .../views/rooms/SearchResultTile-test.tsx | 2 +- .../views/rooms/SendMessageComposer-test.tsx | 2 +- .../views/rooms/ThirdPartyMemberInfo-test.tsx | 2 +- .../rooms/VoiceRecordComposerTile-test.tsx | 2 +- .../PinnedEventTile-test.tsx.snap | 50 +-- .../PinnedMessageBanner-test.tsx.snap | 6 +- .../ReadReceiptGroup-test.tsx.snap | 8 +- .../__snapshots__/RoomHeader-test.tsx.snap | 5 +- .../ThirdPartyMemberInfo-test.tsx.snap | 2 + .../EditWysiwygComposer-test.tsx | 2 +- .../SendWysiwygComposer-test.tsx | 2 +- .../components/FormattingButtons-test.tsx | 2 +- .../components/LinkModal-test.tsx | 2 +- .../components/PlainTextComposer-test.tsx | 2 +- .../components/WysiwygAutocomplete-test.tsx | 2 +- .../components/WysiwygComposer-test.tsx | 2 +- .../hooks/usePlainTextListeners-test.tsx | 2 +- .../wysiwyg_composer/hooks/utils-test.tsx | 2 +- .../settings/AddPrivilegedUsers-test.tsx | 2 +- .../settings/AddRemoveThreepids-test.tsx | 38 +- .../views/settings/AvatarSetting-test.tsx | 2 +- .../views/settings/ChangePassword-test.tsx | 2 +- .../views/settings/CrossSigningPanel-test.tsx | 2 +- .../views/settings/CryptographyPanel-test.tsx | 2 +- .../views/settings/EventIndexPanel-test.tsx | 2 +- .../views/settings/FontScalingPanel-test.tsx | 2 +- .../views/settings/JoinRuleSettings-test.tsx | 2 +- .../views/settings/KeyboardShortcut-test.tsx | 2 +- .../views/settings/LayoutSwitcher-test.tsx | 2 +- .../views/settings/Notifications-test.tsx | 2 +- .../settings/PowerLevelSelector-test.tsx | 2 +- .../views/settings/SecureBackupPanel-test.tsx | 2 +- .../settings/SetIntegrationManager-test.tsx | 2 +- .../views/settings/SettingsFieldset-test.tsx | 2 +- .../views/settings/ThemeChoicePanel-test.tsx | 2 +- .../settings/UserProfileSettings-test.tsx | 36 +- .../PowerLevelSelector-test.tsx.snap | 4 +- .../ThemeChoicePanel-test.tsx.snap | 2 + .../devices/CurrentDeviceSection-test.tsx | 2 +- .../devices/DeviceDetailHeading-test.tsx | 2 +- .../settings/devices/DeviceDetails-test.tsx | 2 +- .../DeviceExpandDetailsButton-test.tsx | 2 +- .../devices/DeviceSecurityCard-test.tsx | 2 +- .../settings/devices/DeviceTile-test.tsx | 2 +- .../settings/devices/DeviceTypeIcon-test.tsx | 2 +- .../DeviceVerificationStatusCard-test.tsx | 2 +- .../devices/FilteredDeviceList-test.tsx | 2 +- .../devices/FilteredDeviceListHeader-test.tsx | 2 +- .../settings/devices/LoginWithQR-test.tsx | 2 +- .../settings/devices/LoginWithQRFlow-test.tsx | 2 +- .../devices/LoginWithQRSection-test.tsx | 2 +- .../devices/SecurityRecommendations-test.tsx | 2 +- .../devices/SelectableDeviceTile-test.tsx | 2 +- .../FilteredDeviceListHeader-test.tsx.snap | 2 + .../discovery/DiscoverySettings-test.tsx | 2 +- .../notifications/Notifications2-test.tsx | 2 +- .../shared/SettingsSubsection-test.tsx | 2 +- .../shared/SettingsSubsectionHeading-test.tsx | 2 +- .../views/settings/tabs/SettingsTab-test.tsx | 2 +- .../room/AdvancedRoomSettingsTab-test.tsx | 2 +- .../tabs/room/BridgeSettingsTab-test.tsx | 2 +- .../room/NotificationSettingsTab-test.tsx | 2 +- .../tabs/room/PeopleRoomSettingsTab-test.tsx | 2 +- .../tabs/room/RolesRoomSettingsTab-test.tsx | 2 +- .../room/SecurityRoomSettingsTab-test.tsx | 2 +- .../tabs/room/VoipRoomSettingsTab-test.tsx | 2 +- .../tabs/user/AccountUserSettingsTab-test.tsx | 2 +- .../user/AppearanceUserSettingsTab-test.tsx | 2 +- .../user/KeyboardUserSettingsTab-test.tsx | 2 +- .../tabs/user/LabsUserSettingsTab-test.tsx | 2 +- .../tabs/user/MjolnirUserSettingsTab-test.tsx | 2 +- .../user/PreferencesUserSettingsTab-test.tsx | 2 +- .../user/SecurityUserSettingsTab-test.tsx | 2 +- .../tabs/user/SessionManagerTab-test.tsx | 2 +- .../tabs/user/SidebarUserSettingsTab-test.tsx | 2 +- .../tabs/user/VoiceUserSettingsTab-test.tsx | 2 +- .../SessionManagerTab-test.tsx.snap | 1 + .../spaces/AddExistingToSpaceDialog-test.tsx | 2 +- .../views/spaces/QuickSettingsButton-test.tsx | 2 +- .../views/spaces/QuickThemeSwitcher-test.tsx | 2 +- .../views/spaces/SpacePanel-test.tsx | 2 +- .../SpaceSettingsVisibilityTab-test.tsx | 2 +- .../views/spaces/SpaceTreeLevel-test.tsx | 2 +- .../spaces/ThreadsActivityCentre-test.tsx | 12 +- .../__snapshots__/SpacePanel-test.tsx.snap | 5 +- .../ThreadsActivityCentre-test.tsx.snap | 145 ++++++-- .../spaces/useUnreadThreadRooms-test.tsx | 2 +- .../views/toasts/GenericToast-test.tsx | 2 +- .../toasts/VerificationRequestToast-test.tsx | 2 +- .../__snapshots__/GenericToast-test.tsx.snap | 8 +- .../VerificationRequestToast-test.tsx.snap | 8 +- .../views/typography/Caption-test.tsx | 2 +- .../views/typography/Heading-test.tsx | 2 +- .../UserOnboardingPage-test.tsx | 2 +- test/components/views/voip/CallView-test.tsx | 2 +- test/components/views/voip/DialPad-test.tsx | 2 +- .../LegacyCallViewButtons-test.tsx | 2 +- test/components/views/voip/VideoFeed-test.tsx | 2 +- test/hooks/useNotificationSettings-test.tsx | 2 +- test/hooks/useProfileInfo-test.tsx | 2 +- test/hooks/usePublicRoomDirectory-test.tsx | 2 +- test/hooks/useRoomMembers-test.tsx | 2 +- test/hooks/useSlidingSyncRoomSearch-test.tsx | 2 +- test/hooks/useUserDirectory-test.tsx | 2 +- test/hooks/useUserOnboardingTasks-test.tsx | 2 +- test/hooks/useWindowWidth-test.ts | 2 +- test/models/Call-test.ts | 2 +- test/modules/ModuleComponents-test.tsx | 2 +- test/modules/ProxiedModuleApi-test.tsx | 2 +- test/stores/widgets/StopGapWidget-test.ts | 2 +- test/test-utils/composer.ts | 2 +- test/test-utils/jest-matrix-react.tsx | 42 +++ test/test-utils/utilities.ts | 2 +- test/test-utils/wrappers.tsx | 2 +- test/toasts/IncomingCallToast-test.tsx | 2 +- test/toasts/IncomingLegacyCallToast-test.tsx | 2 +- test/toasts/UnverifiedSessionToast-test.tsx | 2 +- .../UnverifiedSessionToast-test.tsx.snap | 4 +- test/useTopic-test.tsx | 2 +- test/utils/ErrorUtils-test.ts | 2 +- test/utils/MessageDiffUtils-test.tsx | 2 +- test/utils/export-test.tsx | 2 +- .../media/requestMediaPermissions-test.tsx | 2 +- test/utils/pillify-test.tsx | 2 +- test/utils/tooltipify-test.tsx | 9 +- .../components/VoiceBroadcastBody-test.tsx | 2 +- .../components/atoms/LiveBadge-test.tsx | 2 +- .../atoms/VoiceBroadcastControl-test.tsx | 2 +- .../atoms/VoiceBroadcastHeader-test.tsx | 2 +- .../VoiceBroadcastPlaybackControl-test.tsx | 2 +- .../VoiceBroadcastPlaybackBody-test.tsx | 2 +- .../VoiceBroadcastPreRecordingPip-test.tsx | 2 +- .../VoiceBroadcastRecordingBody-test.tsx | 2 +- .../VoiceBroadcastRecordingPip-test.tsx | 2 +- .../VoiceBroadcastSmallPlaybackBody-test.tsx | 2 +- .../models/VoiceBroadcastPlayback-test.tsx | 2 +- ...textForVoiceBroadcastStoppedEvent-test.tsx | 2 +- tsconfig.json | 5 +- yarn.lock | 332 ++++++------------ 389 files changed, 1261 insertions(+), 1084 deletions(-) create mode 100644 test/test-utils/jest-matrix-react.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 10e8238a77..bc7ab5ed50 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -51,6 +51,10 @@ module.exports = { "error", { paths: [ + { + name: "@testing-library/react", + message: "Please use jest-matrix-react instead", + }, { name: "matrix-js-sdk", message: "Please use matrix-js-sdk/src/matrix instead", diff --git a/jest.config.ts b/jest.config.ts index ae1051fd71..1408b5bb46 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -37,6 +37,7 @@ const config: Config = { coverageReporters: ["text-summary", "lcov"], testResultsProcessor: "@casualbot/jest-sonar-reporter", prettierPath: null, + moduleDirectories: ["node_modules", "test/test-utils"], }; // if we're running under GHA, enable the GHA reporter diff --git a/package.json b/package.json index ea3ab91b79..8f9e6fdc88 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,9 @@ "jwt-decode": "4.0.0", "@floating-ui/react": "0.26.11", "@radix-ui/react-id": "1.1.0", - "caniuse-lite": "1.0.30001655" + "caniuse-lite": "1.0.30001655", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0", + "wrap-ansi": "npm:wrap-ansi@^7.0.0" }, "dependencies": { "@babel/runtime": "^7.12.5", @@ -80,7 +82,7 @@ "@sentry/browser": "^8.0.0", "@testing-library/react-hooks": "^8.0.1", "@vector-im/compound-design-tokens": "^1.8.0", - "@vector-im/compound-web": "^5.5.0", + "@vector-im/compound-web": "^6.3.1", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", "@zxcvbn-ts/language-en": "^3.0.2", diff --git a/playwright/e2e/crypto/event-shields.spec.ts b/playwright/e2e/crypto/event-shields.spec.ts index 0544a7c904..b5d3790aaa 100644 --- a/playwright/e2e/crypto/event-shields.spec.ts +++ b/playwright/e2e/crypto/event-shields.spec.ts @@ -70,7 +70,9 @@ test.describe("Cryptography", function () { const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon"); await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/); await lastE2eIcon.focus(); - await expect(page.getByRole("tooltip")).toContainText("This message could not be decrypted"); + await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText( + "This message could not be decrypted", + ); /* Should show a red padlock for an unencrypted message in an e2e room */ await bob.evaluate( @@ -90,7 +92,7 @@ test.describe("Cryptography", function () { await expect(last).toContainText("test unencrypted"); await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/); await lastE2eIcon.focus(); - await expect(page.getByRole("tooltip")).toContainText("Not encrypted"); + await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted"); /* Should show no padlock for an unverified user */ // bob sends a valid event @@ -123,7 +125,9 @@ test.describe("Cryptography", function () { await expect(lastTile).toContainText("test encrypted from unverified"); await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/); await lastTileE2eIcon.focus(); - await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner."); + await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText( + "Encrypted by a device not verified by its owner.", + ); /* In legacy crypto: should show a grey padlock for a message from a deleted device. * In rust crypto: should show a red padlock for a message from an unverified device. @@ -159,7 +163,7 @@ test.describe("Cryptography", function () { await expect(last).toContainText("test encrypted from unverified"); await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/); await lastE2eIcon.focus(); - await expect(page.getByRole("tooltip")).toContainText( + await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText( workerInfo.project.name === "Legacy Crypto" ? "Encrypted by an unknown or deleted device." : "Encrypted by a device not verified by its owner.", @@ -212,7 +216,7 @@ test.describe("Cryptography", function () { // The key is coming from backup, so it is not anymore possible to establish if the claimed device // creator of this key is authentic. The tooltip should be "The authenticity of this encrypted message can't be guaranteed on this device." // It is not "Encrypted by an unknown or deleted device." even if the claimed device is actually deleted. - await expect(page.getByRole("tooltip")).toContainText( + await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText( "The authenticity of this encrypted message can't be guaranteed on this device.", ); }); @@ -296,7 +300,9 @@ test.describe("Cryptography", function () { const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon"); await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/); await lastE2eIcon.focus(); - await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner."); + await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText( + "Encrypted by a device not verified by its owner.", + ); const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" }); await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible(); diff --git a/playwright/element-web-test.ts b/playwright/element-web-test.ts index 9d9da67a08..2973f88cda 100644 --- a/playwright/element-web-test.ts +++ b/playwright/element-web-test.ts @@ -224,7 +224,7 @@ export const test = base.extend<{ }, axe: async ({ page }, use) => { - await use(new AxeBuilder({ page })); + await use(new AxeBuilder({ page }).exclude("[id^='floating-ui-']")); }, checkA11y: async ({ axe }, use, testInfo) => use(async () => { diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts index c769a935f9..81c57cc6f7 100644 --- a/playwright/pages/ElementAppPage.ts +++ b/playwright/pages/ElementAppPage.ts @@ -172,4 +172,22 @@ export class ElementAppPage { await this.page.getByRole("button", { name: "Room info" }).first().click(); return this.page.locator(".mx_RightPanel"); } + + /** + * Get a locator for the tooltip associated with an element + * @param e The element with the tooltip + * @returns Locator to the tooltip + */ + public async getTooltipForElement(e: Locator): Promise { + const [labelledById, describedById] = await Promise.all([ + e.getAttribute("aria-labelledby"), + e.getAttribute("aria-describedby"), + ]); + if (!labelledById && !describedById) { + throw new Error( + "Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.", + ); + } + return this.page.locator(`#${labelledById ?? describedById}`); + } } diff --git a/src/Modal.tsx b/src/Modal.tsx index 22e8a56923..53a1935294 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -12,7 +12,7 @@ import ReactDOM from "react-dom"; import classNames from "classnames"; import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils"; import { TypedEventEmitter } from "matrix-js-sdk/src/matrix"; -import { Glass } from "@vector-im/compound-web"; +import { Glass, TooltipProvider } from "@vector-im/compound-web"; import dis, { defaultDispatcher } from "./dispatcher/dispatcher"; import AsyncWrapper from "./AsyncWrapper"; @@ -416,16 +416,18 @@ export class ModalManager extends TypedEventEmitter - -
{this.staticModal.elem}
- -
-
+ +
+ +
{this.staticModal.elem}
+ +
+
+ ); ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer()); @@ -441,16 +443,18 @@ export class ModalManager extends TypedEventEmitter - -
{modal.elem}
- -
-
+ +
+ +
{modal.elem}
+ +
+
+ ); setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0); diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 9085898297..d589376610 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -12,6 +12,7 @@ import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } fro import ReactDOM from "react-dom"; import classNames from "classnames"; import FocusLock from "react-focus-lock"; +import { TooltipProvider } from "@vector-im/compound-web"; import { Writeable } from "../../@types/common"; import UIStore from "../../stores/UIStore"; @@ -621,15 +622,17 @@ export function createMenu( }; const menu = ( - - - + + + + + ); ReactDOM.render(menu, getOrCreateContainer()); diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 7689017856..cc0357a8f1 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -24,6 +24,7 @@ import { logger } from "matrix-js-sdk/src/logger"; import { throttle } from "lodash"; import { CryptoEvent } from "matrix-js-sdk/src/crypto"; import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api"; +import { TooltipProvider } from "@vector-im/compound-web"; // what-input helps improve keyboard accessibility import "what-input"; @@ -2181,7 +2182,9 @@ export default class MatrixChat extends React.PureComponent { return ( - {view} + + {view} + ); } diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index b45401dd4c..eb20b05fdc 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -130,7 +130,7 @@ export const ThreadPanelHeader: React.FC<{ return (
- + diff --git a/src/components/structures/auth/forgot-password/CheckEmail.tsx b/src/components/structures/auth/forgot-password/CheckEmail.tsx index af563a8fa2..feca331894 100644 --- a/src/components/structures/auth/forgot-password/CheckEmail.tsx +++ b/src/components/structures/auth/forgot-password/CheckEmail.tsx @@ -58,7 +58,7 @@ export const CheckEmail: React.FC = ({
{_t("auth|check_email_resend_prompt")} - + {_t("action|resend")} diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx index 238ddf2c3b..d883177d0c 100644 --- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx +++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx @@ -57,7 +57,7 @@ export const VerifyEmailModal: React.FC = ({
{_t("auth|check_email_resend_prompt")} - + {_t("action|resend")} diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index e58b06717a..b8b5297384 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -212,7 +212,7 @@ const AccessibleButton = forwardRef(function { // Tooltip are forced on the right for a more natural feel to them on info icons return ( - +
{children} diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx index a380723fb2..1b7b6543e9 100644 --- a/src/components/views/elements/PersistedElement.tsx +++ b/src/components/views/elements/PersistedElement.tsx @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { MutableRefObject, ReactNode } from "react"; import ReactDOM from "react-dom"; import { isNullOrUndefined } from "matrix-js-sdk/src/utils"; +import { TooltipProvider } from "@vector-im/compound-web"; import dis from "../../../dispatcher/dispatcher"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -167,9 +168,11 @@ export default class PersistedElement extends React.Component { private renderApp(): void { const content = ( -
- {this.props.children} -
+ +
+ {this.props.children} +
+ ); diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index 569dcdf313..12cec19a42 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -141,7 +141,7 @@ export const Pill: React.FC = ({ type: propType, url, inMessage, room ; return ( - +
{ } return ( - + {icon} {timestamp} diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.tsx b/src/components/views/messages/ReactionsRowButtonTooltip.tsx index fe59f537a3..9790356762 100644 --- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx +++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx @@ -51,7 +51,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent + {children} ); diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index 890316fc02..eb1c94e20d 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details. import React, { createRef, SyntheticEvent, MouseEvent } from "react"; import ReactDOM from "react-dom"; import { MsgType } from "matrix-js-sdk/src/matrix"; +import { TooltipProvider } from "@vector-im/compound-web"; import * as HtmlUtils from "../../../HtmlUtils"; import { formatDate } from "../../../DateUtils"; @@ -335,7 +336,11 @@ export default class TextualBody extends React.Component { const reason = node.getAttribute("data-mx-spoiler") ?? undefined; node.removeAttribute("data-mx-spoiler"); // we don't want to recurse - const spoiler = ; + const spoiler = ( + + + + ); ReactDOM.render(spoiler, spoilerContainer); node.parentNode?.replaceChild(spoilerContainer, node); diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index fc879c3254..7b39ee0c57 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -373,9 +373,7 @@ const RoomSummaryCard: React.FC = ({ Icon={FavouriteIcon} label={_t("room|context_menu|favourite")} checked={isFavorite} - onChange={() => tagRoom(room, DefaultTagID.Favourite)} - // XXX: https://github.com/element-hq/compound/issues/288 - onSelect={() => {}} + onSelect={() => tagRoom(room, DefaultTagID.Favourite)} />
-
+
{nonCssBadge} diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 99e4507c15..e1677a179e 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -666,7 +666,7 @@ export class MessageComposer extends React.Component { }); return ( - +
{recordingTooltip}
diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx index 8ac0db0e12..ea60518f4b 100644 --- a/src/components/views/rooms/ReadReceiptGroup.tsx +++ b/src/components/views/rooms/ReadReceiptGroup.tsx @@ -211,7 +211,7 @@ export function ReadReceiptPerson({ onAfterClick, }: ReadReceiptPersonProps): JSX.Element { return ( - +
- + diff --git a/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx b/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx index 3e7c1531a6..ae8e7be16b 100644 --- a/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx +++ b/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx @@ -80,7 +80,7 @@ export const CallGuestLinkButton: React.FC<{ room: Room }> = ({ room }) => { <> {canInviteGuests && ( - + diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx index 5ecde7eb08..bdad2d4565 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { useCallback, useEffect, useState } from "react"; import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix"; -import { Button, Tooltip } from "@vector-im/compound-web"; +import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web"; import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid"; import { _t } from "../languageHandler"; @@ -47,7 +47,7 @@ function JoinCallButtonWithCall({ onClick, call, disabledTooltip }: JoinCallButt disTooltip = disabledTooltip ?? disabledBecauseFullTooltip ?? undefined; return ( - +