From a3defa6cf7ad9e368924e5a611ea8764f1865fdb Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 27 Feb 2023 10:31:10 +1300 Subject: [PATCH 01/44] Update dependency rimraf to v4 (#10234) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 17b40b5789..9008f464fc 100644 --- a/package.json +++ b/package.json @@ -211,7 +211,7 @@ "postcss-scss": "^4.0.4", "prettier": "2.8.0", "raw-loader": "^4.0.2", - "rimraf": "^3.0.2", + "rimraf": "^4.0.0", "stylelint": "^14.9.1", "stylelint-config-prettier": "^9.0.4", "stylelint-config-standard": "^29.0.0", diff --git a/yarn.lock b/yarn.lock index 4ec4f4ccca..fde6e1b488 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7763,6 +7763,11 @@ rimraf@^3.0.0, rimraf@^3.0.2: dependencies: glob "^7.1.3" +rimraf@^4.0.0: + version "4.1.2" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-4.1.2.tgz#20dfbc98083bdfaa28b01183162885ef213dbf7c" + integrity sha512-BlIbgFryTbw3Dz6hyoWFhKk+unCcHMSkZGrTFVAx2WmttdBSonsdtRlwiuTbDqTKr+UlXIUqJVS4QT5tUzGENQ== + rrweb-snapshot@^1.1.14: version "1.1.14" resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc" From 12dd799301c2633b3d780408d16166fb2b0fc5fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Telaty=C5=84ski?= <7t3chguy@gmail.com> Date: Mon, 27 Feb 2023 09:15:27 +0000 Subject: [PATCH 02/44] Fix double translation issue (#10240 * Fix double translation issue * Remove some redundant string concatenations --- cypress/e2e/crypto/decryption-failure.spec.ts | 2 +- src/AddThreepid.ts | 5 ++--- src/LegacyCallHandler.tsx | 2 +- .../views/dialogs/eventindex/ManageEventIndexDialog.tsx | 8 +++----- src/components/structures/TimelinePanel.tsx | 4 +--- src/components/structures/auth/Login.tsx | 2 +- src/components/views/auth/CaptchaForm.tsx | 2 +- src/components/views/dialogs/StorageEvictedDialog.tsx | 2 +- .../views/dialogs/security/RestoreKeyBackupDialog.tsx | 4 ++-- src/components/views/location/LocationPicker.tsx | 2 +- src/components/views/rooms/NewRoomIntro.tsx | 6 +++--- src/components/views/rooms/RoomPreviewBar.tsx | 2 +- src/components/views/settings/EventIndexPanel.tsx | 2 +- src/components/views/settings/SecureBackupPanel.tsx | 2 +- src/components/views/settings/SetIdServer.tsx | 4 ++-- src/components/views/settings/account/EmailAddresses.tsx | 2 +- .../views/settings/discovery/EmailAddresses.tsx | 2 +- src/utils/leave-behaviour.ts | 4 ++-- src/utils/location/findMapStyleUrl.ts | 4 +--- src/utils/location/map.ts | 5 +---- test/components/views/elements/EventListSummary-test.tsx | 4 +--- 21 files changed, 29 insertions(+), 41 deletions(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index 20f748494a..15b437d621 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -164,7 +164,7 @@ describe("Decryption Failure Bar", () => { cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist"); cy.get(".mx_DecryptionFailureBar").percySnapshotElement( - "DecryptionFailureBar prompts user to open another device, " + "without Resend Key Requests button", + "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button", { widths: [320, 640], }, diff --git a/src/AddThreepid.ts b/src/AddThreepid.ts index b1ee5795d0..db74eaad31 100644 --- a/src/AddThreepid.ts +++ b/src/AddThreepid.ts @@ -213,8 +213,7 @@ export default class AddThreepid { [SSOAuthEntry.PHASE_PREAUTH]: { title: _t("Use Single Sign On to continue"), body: _t( - "Confirm adding this email address by using " + - "Single Sign On to prove your identity.", + "Confirm adding this email address by using Single Sign On to prove your identity.", ), continueText: _t("Single Sign On"), continueKind: "primary", @@ -333,7 +332,7 @@ export default class AddThreepid { [SSOAuthEntry.PHASE_PREAUTH]: { title: _t("Use Single Sign On to continue"), body: _t( - "Confirm adding this phone number by using " + "Single Sign On to prove your identity.", + "Confirm adding this phone number by using Single Sign On to prove your identity.", ), continueText: _t("Single Sign On"), continueKind: "primary", diff --git a/src/LegacyCallHandler.tsx b/src/LegacyCallHandler.tsx index b5358b4930..90bded231e 100644 --- a/src/LegacyCallHandler.tsx +++ b/src/LegacyCallHandler.tsx @@ -737,7 +737,7 @@ export default class LegacyCallHandler extends EventEmitter { ); if (!stats) { logger.debug( - "Call statistics are undefined. The call has " + "probably failed before a peerConn was established", + "Call statistics are undefined. The call has probably failed before a peerConn was established", ); return; } diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx index 5393ae3fc6..5513165e69 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx @@ -157,11 +157,9 @@ export default class ManageEventIndexDialog extends React.Component - {_t( - "%(brand)s is securely caching encrypted messages locally for them " + - "to appear in search results:", - { brand }, - )} + {_t("%(brand)s is securely caching encrypted messages locally for them to appear in search results:", { + brand, + })}
{crawlerState}
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index da17ae36e1..8e6833954f 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -1473,9 +1473,7 @@ class TimelinePanel extends React.Component { "do not have permission to view the message in question.", ); } else { - description = _t( - "Tried to load a specific point in this room's timeline, but was " + "unable to find it.", - ); + description = _t("Tried to load a specific point in this room's timeline, but was unable to find it."); } Modal.createDialog(ErrorDialog, { diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx index c2c7a0d913..97f3866f96 100644 --- a/src/components/structures/auth/Login.tsx +++ b/src/components/structures/auth/Login.tsx @@ -454,7 +454,7 @@ export default class LoginComponent extends React.PureComponent } let errorText: ReactNode = - _t("There was a problem communicating with the homeserver, " + "please try again later.") + + _t("There was a problem communicating with the homeserver, please try again later.") + (errCode ? " (" + errCode + ")" : ""); if (err instanceof ConnectionError) { diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx index 651921b233..a34038f000 100644 --- a/src/components/views/auth/CaptchaForm.tsx +++ b/src/components/views/auth/CaptchaForm.tsx @@ -91,7 +91,7 @@ export default class CaptchaForm extends React.Component { )}

- {_t("Your browser likely removed this data when running low on " + "disk space.")} {logRequest} + {_t("Your browser likely removed this data when running low on disk space.")} {logRequest}

{_t( - "Warning: you should only set up key backup " + "from a trusted computer.", + "Warning: you should only set up key backup from a trusted computer.", {}, { b: (sub) => {sub} }, )} @@ -480,7 +480,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent

{_t( - "Warning: you should only set up key backup " + "from a trusted computer.", + "Warning: you should only set up key backup from a trusted computer.", {}, { b: (sub) => {sub} }, )} diff --git a/src/components/views/location/LocationPicker.tsx b/src/components/views/location/LocationPicker.tsx index 53c010c809..503d4d8688 100644 --- a/src/components/views/location/LocationPicker.tsx +++ b/src/components/views/location/LocationPicker.tsx @@ -93,7 +93,7 @@ class LocationPicker extends React.Component { this.map.on("error", (e) => { logger.error( - "Failed to load map: check map_style_url in config.json " + "has a valid URL and API key", + "Failed to load map: check map_style_url in config.json has a valid URL and API key", e.error, ); this.setState({ error: LocationShareError.MapStyleUrlNotReachable }); diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx index fba24be3f2..f8ab6f4c18 100644 --- a/src/components/views/rooms/NewRoomIntro.tsx +++ b/src/components/views/rooms/NewRoomIntro.tsx @@ -23,7 +23,7 @@ import { User } from "matrix-js-sdk/src/models/user"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import RoomContext from "../../../contexts/RoomContext"; import DMRoomMap from "../../../utils/DMRoomMap"; -import { _t } from "../../../languageHandler"; +import { _t, _td } from "../../../languageHandler"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import MiniAvatarUploader, { AVATAR_SIZE } from "../elements/MiniAvatarUploader"; import RoomAvatar from "../avatars/RoomAvatar"; @@ -55,11 +55,11 @@ const NewRoomIntro: React.FC = () => { let body: JSX.Element; if (dmPartner) { - let introMessage = _t("This is the beginning of your direct message history with ."); + let introMessage = _td("This is the beginning of your direct message history with ."); let caption: string | undefined; if (isLocalRoom) { - introMessage = _t("Send your first message to invite to chat"); + introMessage = _td("Send your first message to invite to chat"); } else if (room.getJoinedMemberCount() + room.getInvitedMemberCount() === 2) { caption = _t("Only the two of you are in this conversation, unless either of you invites anyone to join."); } diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx index f9359bc5a5..a968bd3794 100644 --- a/src/components/views/rooms/RoomPreviewBar.tsx +++ b/src/components/views/rooms/RoomPreviewBar.tsx @@ -435,7 +435,7 @@ export default class RoomPreviewBar extends React.Component { } subTitle = _t( - "Link this email with your account in Settings to receive invites " + "directly in %(brand)s.", + "Link this email with your account in Settings to receive invites directly in %(brand)s.", { brand }, ); primaryActionLabel = _t("Join the discussion"); diff --git a/src/components/views/settings/EventIndexPanel.tsx b/src/components/views/settings/EventIndexPanel.tsx index c5e617355d..8a1d93c98f 100644 --- a/src/components/views/settings/EventIndexPanel.tsx +++ b/src/components/views/settings/EventIndexPanel.tsx @@ -177,7 +177,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> { eventIndexingSettings = (

- {_t("Securely cache encrypted messages locally for them to " + "appear in search results.")} + {_t("Securely cache encrypted messages locally for them to appear in search results.")}
diff --git a/src/components/views/settings/SecureBackupPanel.tsx b/src/components/views/settings/SecureBackupPanel.tsx index cc5dde1cb0..98c241fd0f 100644 --- a/src/components/views/settings/SecureBackupPanel.tsx +++ b/src/components/views/settings/SecureBackupPanel.tsx @@ -183,7 +183,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> { Modal.createDialog(QuestionDialog, { title: _t("Delete Backup"), description: _t( - "Are you sure? You will lose your encrypted messages if your " + "keys are not backed up properly.", + "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.", ), button: _t("Delete Backup"), danger: true, diff --git a/src/components/views/settings/SetIdServer.tsx b/src/components/views/settings/SetIdServer.tsx index 43f59c8ee1..feb1bc0f79 100644 --- a/src/components/views/settings/SetIdServer.tsx +++ b/src/components/views/settings/SetIdServer.tsx @@ -192,7 +192,7 @@ export default class SetIdServer extends React.Component { const [confirmed] = await this.showServerChangeWarning({ title: _t("Change identity server"), unboundMessage: _t( - "Disconnect from the identity server and " + "connect to instead?", + "Disconnect from the identity server and connect to instead?", {}, { current: (sub) => {abbreviateUrl(currentClientIdServer)}, @@ -330,7 +330,7 @@ export default class SetIdServer extends React.Component {

{_t( - "You are still sharing your personal data on the identity " + "server .", + "You are still sharing your personal data on the identity server .", {}, messageElements, )} diff --git a/src/components/views/settings/account/EmailAddresses.tsx b/src/components/views/settings/account/EmailAddresses.tsx index 83e137a21a..0d5405d93f 100644 --- a/src/components/views/settings/account/EmailAddresses.tsx +++ b/src/components/views/settings/account/EmailAddresses.tsx @@ -223,7 +223,7 @@ export default class EmailAddresses extends React.Component { Modal.createDialog(ErrorDialog, { title: _t("Your email address hasn't been verified yet"), description: _t( - "Click the link in the email you received to verify " + "and then click continue again.", + "Click the link in the email you received to verify and then click continue again.", ), }); } else { diff --git a/src/components/views/settings/discovery/EmailAddresses.tsx b/src/components/views/settings/discovery/EmailAddresses.tsx index 9f2e123ac3..18cf49a162 100644 --- a/src/components/views/settings/discovery/EmailAddresses.tsx +++ b/src/components/views/settings/discovery/EmailAddresses.tsx @@ -184,7 +184,7 @@ export class EmailAddress extends React.Component !!r[1]); if (errors.length > 0) { - const messages = []; + const messages: ReactNode[] = []; for (const roomErr of errors) { const err = roomErr[1]; // [0] is the roomId let message = _t("Unexpected server error trying to leave the room"); diff --git a/src/utils/location/findMapStyleUrl.ts b/src/utils/location/findMapStyleUrl.ts index 0653d65cf2..02ff401b14 100644 --- a/src/utils/location/findMapStyleUrl.ts +++ b/src/utils/location/findMapStyleUrl.ts @@ -29,9 +29,7 @@ export function findMapStyleUrl(): string { const mapStyleUrl = getTileServerWellKnown()?.map_style_url ?? SdkConfig.get().map_style_url; if (!mapStyleUrl) { - logger.error( - "'map_style_url' missing from homeserver .well-known area, and " + "missing from from config.json.", - ); + logger.error("'map_style_url' missing from homeserver .well-known area, and missing from from config.json."); throw new Error(LocationShareError.MapStyleUrlNotConfigured); } diff --git a/src/utils/location/map.ts b/src/utils/location/map.ts index 34d3d01478..b0434d76cd 100644 --- a/src/utils/location/map.ts +++ b/src/utils/location/map.ts @@ -50,10 +50,7 @@ export const createMap = (interactive: boolean, bodyId: string, onError?: (error map.addControl(new maplibregl.AttributionControl(), "top-right"); map.on("error", (e) => { - logger.error( - "Failed to load map: check map_style_url in config.json has a " + "valid URL and API key", - e.error, - ); + logger.error("Failed to load map: check map_style_url in config.json has a valid URL and API key", e.error); onError?.(new Error(LocationShareError.MapStyleUrlNotReachable)); }); diff --git a/test/components/views/elements/EventListSummary-test.tsx b/test/components/views/elements/EventListSummary-test.tsx index 4ecb963ee0..81fc59e2aa 100644 --- a/test/components/views/elements/EventListSummary-test.tsx +++ b/test/components/views/elements/EventListSummary-test.tsx @@ -567,9 +567,7 @@ describe("EventListSummary", function () { const summary = wrapper.find(".mx_GenericEventListSummary_summary"); const summaryText = summary.text(); - expect(summaryText).toBe( - "user_1 and one other rejected their invitations and " + "had their invitations withdrawn", - ); + expect(summaryText).toBe("user_1 and one other rejected their invitations and had their invitations withdrawn"); }); it("handles invitation plurals correctly when there are multiple invites", function () { From c22971e5423e83610890dc8c433acf16a7fa909e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Telaty=C5=84ski?= <7t3chguy@gmail.com> Date: Mon, 27 Feb 2023 09:16:49 +0000 Subject: [PATCH 03/44] Improve percy snapshot stability (#10239) --- cypress/e2e/polls/polls.spec.ts | 4 ++-- cypress/e2e/timeline/timeline.spec.ts | 14 ++++++-------- cypress/support/percy.ts | 4 +++- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index 07a14533c7..b2537c2cbe 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/cypress/e2e/polls/polls.spec.ts @@ -20,7 +20,7 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver"; import { MatrixClient } from "../../global"; import Chainable = Cypress.Chainable; -const hideTimestampCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; +const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; describe("Polls", () => { let homeserver: HomeserverInstance; @@ -133,7 +133,7 @@ describe("Polls", () => { .as("pollId"); cy.get("@pollId").then((pollId) => { - getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hideTimestampCSS }); + getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hidePercyCSS }); // Bot votes 'Maybe' in the poll botVoteForOption(bot, roomId, pollId, pollParams.options[2]); diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index aa5a94a6dd..246f4e3d77 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -185,9 +185,8 @@ describe("Timeline", () => { .should("have.css", "margin-inline-start", "104px") .should("have.css", "inset-inline-start", "0px"); - // Exclude timestamp from snapshot - const percyCSS = - ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", { percyCSS, }); @@ -213,8 +212,8 @@ describe("Timeline", () => { // Click timestamp to highlight hidden event line cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click(); - // Exclude timestamp from snapshot - const percyCSS = ".mx_RoomView_body .mx_EventTile .mx_MessageTimestamp { visibility: hidden !important; }"; + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; // should not add inline start padding to a hidden event line on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -336,9 +335,8 @@ describe("Timeline", () => { cy.checkA11y(); - // Exclude timestamp from snapshot - const percyCSS = - ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", { percyCSS, widths: [800, 400], diff --git a/cypress/support/percy.ts b/cypress/support/percy.ts index b0f5c9f7c7..9183d5ebf6 100644 --- a/cypress/support/percy.ts +++ b/cypress/support/percy.ts @@ -41,7 +41,9 @@ declare global { Cypress.Commands.add("percySnapshotElement", { prevSubject: "element" }, (subject, name, options) => { if (!options?.allowSpinners) { // Await spinners to vanish - cy.get(".mx_Spinner").should("not.exist"); + cy.get(".mx_Spinner", { log: false }).should("not.exist"); + // But like really no more spinners please + cy.get(".mx_Spinner", { log: false }).should("not.exist"); } cy.percySnapshot(name, { domTransformation: (documentClone) => scope(documentClone, subject.selector), From 62cd0f1beb31097505c82e6b61b5cb46211b813a Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 27 Feb 2023 09:34:02 +0000 Subject: [PATCH 04/44] Use the room avatar as a placeholder in calls (#10231) * Use the room avatar as a placeholder in calls Rather than the image for the user we're in a call with. This makes it work correctly with virtual rooms easily since we'll get the avatar for the correct room. * Prettier * TS strict errors * More TS strict fixes * More strict TS * Prettier * Even more TS strict * more stricter --- src/components/views/voip/LegacyCallView.tsx | 32 +++++++-- src/components/views/voip/VideoFeed.tsx | 9 ++- test/components/views/voip/VideoFeed-test.tsx | 69 +++++++++++++++++++ 3 files changed, 102 insertions(+), 8 deletions(-) create mode 100644 test/components/views/voip/VideoFeed-test.tsx diff --git a/src/components/views/voip/LegacyCallView.tsx b/src/components/views/voip/LegacyCallView.tsx index 1e8b4621f9..2d989d296a 100644 --- a/src/components/views/voip/LegacyCallView.tsx +++ b/src/components/views/voip/LegacyCallView.tsx @@ -430,7 +430,8 @@ export default class LegacyCallView extends React.Component { const { pipMode, call, onResize } = this.props; const { isLocalOnHold, isRemoteOnHold, sidebarShown, primaryFeed, secondaryFeed, sidebarFeeds } = this.state; - const callRoom = MatrixClientPeg.get().getRoom(call.roomId) ?? undefined; + const callRoomId = LegacyCallHandler.instance.roomIdForCall(call); + const callRoom = (callRoomId ? MatrixClientPeg.get().getRoom(callRoomId) : undefined) ?? undefined; const avatarSize = pipMode ? 76 : 160; const transfereeCall = LegacyCallHandler.instance.getTransfereeForCallId(call.callId); const isOnHold = isLocalOnHold || isRemoteOnHold; @@ -527,23 +528,44 @@ export default class LegacyCallView extends React.Component {

); } else if (pipMode) { + // We've already checked that we have feeds so we cast away the optional when passing the feed return (
- +
); } else if (secondaryFeed) { return (
- + {secondaryFeedElement}
); } else { return (
- - {sidebarShown && } + + {sidebarShown && ( + + )}
); } diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 35fb851f4a..503c53ec66 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -23,7 +23,9 @@ import { logger } from "matrix-js-sdk/src/logger"; import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes"; import SettingsStore from "../../../settings/SettingsStore"; -import MemberAvatar from "../avatars/MemberAvatar"; +import LegacyCallHandler from "../../../LegacyCallHandler"; +import { MatrixClientPeg } from "../../../MatrixClientPeg"; +import RoomAvatar from "../avatars/RoomAvatar"; interface IProps { call: MatrixCall; @@ -197,7 +199,8 @@ export default class VideoFeed extends React.PureComponent { let content; if (this.state.videoMuted) { - const member = this.props.feed.getMember(); + const callRoomId = LegacyCallHandler.instance.roomIdForCall(this.props.call); + const callRoom = (callRoomId ? MatrixClientPeg.get().getRoom(callRoomId) : undefined) ?? undefined; let avatarSize; if (pipMode && primary) avatarSize = 76; @@ -205,7 +208,7 @@ export default class VideoFeed extends React.PureComponent { else if (!pipMode && primary) avatarSize = 160; else; // TBD - content = ; + content = ; } else { const videoClasses = classnames("mx_VideoFeed_video", { mx_VideoFeed_video_mirror: diff --git a/test/components/views/voip/VideoFeed-test.tsx b/test/components/views/voip/VideoFeed-test.tsx new file mode 100644 index 0000000000..85152437e0 --- /dev/null +++ b/test/components/views/voip/VideoFeed-test.tsx @@ -0,0 +1,69 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed"; +import { MatrixCall } from "matrix-js-sdk/src/webrtc/call"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import { Room } from "matrix-js-sdk/src/models/room"; + +import * as AvatarModule from "../../../../src/Avatar"; +import VideoFeed from "../../../../src/components/views/voip/VideoFeed"; +import { stubClient, useMockedCalls } from "../../../test-utils"; +import LegacyCallHandler from "../../../../src/LegacyCallHandler"; +import DMRoomMap from "../../../../src/utils/DMRoomMap"; + +const FAKE_AVATAR_URL = "http://fakeurl.dummy/fake.png"; + +describe("VideoFeed", () => { + useMockedCalls(); + + let client: MatrixClient; + + beforeAll(() => { + client = stubClient(); + (AvatarModule as any).avatarUrlForRoom = jest.fn().mockReturnValue(FAKE_AVATAR_URL); + + const dmRoomMap = new DMRoomMap(client); + jest.spyOn(dmRoomMap, "getUserIdForRoomId"); + jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap); + }); + + afterAll(() => { + jest.restoreAllMocks(); + }); + + it("Displays the room avatar when no video is available", () => { + window.mxLegacyCallHandler = { + roomIdForCall: jest.fn().mockReturnValue("!this:room.here"), + } as unknown as LegacyCallHandler; + + const mockCall = { + room: new Room("!room:example.com", client, client.getSafeUserId()), + }; + + const feed = { + isAudioMuted: jest.fn().mockReturnValue(false), + isVideoMuted: jest.fn().mockReturnValue(true), + addListener: jest.fn(), + removeListener: jest.fn(), + }; + render(); + const avatarImg = screen.getByRole("img"); + expect(avatarImg).toHaveAttribute("src", FAKE_AVATAR_URL); + }); +}); From 24b8bcac885ac8663c502da641dbe75c674a7368 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 27 Feb 2023 10:12:42 +0000 Subject: [PATCH 05/44] Update dependency stylelint to v15 (#10242) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 99 +++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 80 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 9008f464fc..2b52f19eea 100644 --- a/package.json +++ b/package.json @@ -212,7 +212,7 @@ "prettier": "2.8.0", "raw-loader": "^4.0.2", "rimraf": "^4.0.0", - "stylelint": "^14.9.1", + "stylelint": "^15.0.0", "stylelint-config-prettier": "^9.0.4", "stylelint-config-standard": "^29.0.0", "stylelint-scss": "^4.2.0", diff --git a/yarn.lock b/yarn.lock index fde6e1b488..7b359b50df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1182,10 +1182,25 @@ resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9" integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== -"@csstools/selector-specificity@^2.0.2": - version "2.0.2" - resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36" - integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg== +"@csstools/css-parser-algorithms@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz#ff02629c7c95d1f4f8ea84d5ef1173461610535e" + integrity sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw== + +"@csstools/css-tokenizer@^2.0.1": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz#fee4de3d444db3ce9007f3af6474af8ba3e4b930" + integrity sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A== + +"@csstools/media-query-list-parser@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz#d85a366811563a5d002755ed10e5212a1613c91d" + integrity sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA== + +"@csstools/selector-specificity@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz#c9c61d9fe5ca5ac664e1153bb0aa0eba1c6d6308" + integrity sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw== "@cypress/request@^2.88.10": version "2.88.10" @@ -3454,7 +3469,7 @@ core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ== -cosmiconfig@^7.0.0, cosmiconfig@^7.1.0: +cosmiconfig@^7.0.0: version "7.1.0" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6" integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA== @@ -3465,6 +3480,16 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.1.0: path-type "^4.0.0" yaml "^1.10.0" +cosmiconfig@^8.0.0: + version "8.1.0" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.1.0.tgz#947e174c796483ccf0a48476c24e4fefb7e1aea8" + integrity sha512-0tLZ9URlPGU7JsKq0DQOQ3FoRsYX8xDZ7xMiATQfaiGMz7EHowNkbU9u1coAOmnh9p/1ySpm0RB3JNWRXM5GCg== + dependencies: + import-fresh "^3.2.1" + js-yaml "^4.1.0" + parse-json "^5.0.0" + path-type "^4.0.0" + counterpart@^0.18.6: version "0.18.6" resolved "https://registry.yarnpkg.com/counterpart/-/counterpart-0.18.6.tgz#cf6b60d8ef99a4b44b8bf6445fa99b4bd1b2f9dd" @@ -3525,6 +3550,14 @@ css-select@^5.1.0: domutils "^3.0.1" nth-check "^2.0.1" +css-tree@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20" + integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw== + dependencies: + mdn-data "2.0.30" + source-map-js "^1.0.1" + css-what@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" @@ -5163,7 +5196,7 @@ ieee754@^1.1.12, ieee754@^1.1.13: resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== -ignore@^5.2.0: +ignore@^5.2.0, ignore@^5.2.4: version "5.2.4" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== @@ -6548,6 +6581,11 @@ md5@^2.3.0: crypt "0.0.2" is-buffer "~1.1.6" +mdn-data@2.0.30: + version "2.0.30" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc" + integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA== + mdurl@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" @@ -7159,7 +7197,7 @@ postcss-scss@^4.0.4: resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.6.tgz#5d62a574b950a6ae12f2aa89b60d63d9e4432bfd" integrity sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ== -postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6: +postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.6: version "6.0.11" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc" integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g== @@ -7172,7 +7210,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.3.11, postcss@^8.4.19: +postcss@^8.3.11: version "8.4.19" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc" integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA== @@ -7181,6 +7219,15 @@ postcss@^8.3.11, postcss@^8.4.19: picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.4.21: + version "8.4.21" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4" + integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg== + dependencies: + nanoid "^3.3.4" + picocolors "^1.0.0" + source-map-js "^1.0.2" + posthog-js@1.36.0: version "1.36.0" resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.36.0.tgz#cbefa031a1e7ee6ff25dae29b8aa77bd741adbba" @@ -7967,7 +8014,7 @@ slice-ansi@^4.0.0: astral-regex "^2.0.0" is-fullwidth-code-point "^3.0.0" -source-map-js@^1.0.2: +source-map-js@^1.0.1, source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== @@ -8188,16 +8235,20 @@ stylelint-scss@^4.2.0: postcss-selector-parser "^6.0.6" postcss-value-parser "^4.1.0" -stylelint@^14.9.1: - version "14.15.0" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.15.0.tgz#4df55078e734869f81f6b85bbec2d56a4b478ece" - integrity sha512-JOgDAo5QRsqiOZPZO+B9rKJvBm64S0xasbuRPAbPs6/vQDgDCnZLIiw6XcAS6GQKk9k1sBWR6rmH3Mfj8OknKg== +stylelint@^15.0.0: + version "15.2.0" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.2.0.tgz#e906eb59df83bde075d148623216f298f9ceb03a" + integrity sha512-wjg5OLn8zQwjlj5cYUgyQpMWKzct42AG5dYlqkHRJQJqsystFFn3onqEc263KH4xfEI0W3lZCnlIhFfS64uwSA== dependencies: - "@csstools/selector-specificity" "^2.0.2" + "@csstools/css-parser-algorithms" "^2.0.1" + "@csstools/css-tokenizer" "^2.0.1" + "@csstools/media-query-list-parser" "^2.0.1" + "@csstools/selector-specificity" "^2.1.1" balanced-match "^2.0.0" colord "^2.9.3" - cosmiconfig "^7.1.0" + cosmiconfig "^8.0.0" css-functions-list "^3.1.0" + css-tree "^2.3.1" debug "^4.3.4" fast-glob "^3.2.12" fastest-levenshtein "^1.0.16" @@ -8206,7 +8257,7 @@ stylelint@^14.9.1: globby "^11.1.0" globjoin "^0.1.4" html-tags "^3.2.0" - ignore "^5.2.0" + ignore "^5.2.4" import-lazy "^4.0.0" imurmurhash "^0.1.4" is-plain-object "^5.0.0" @@ -8216,11 +8267,11 @@ stylelint@^14.9.1: micromatch "^4.0.5" normalize-path "^3.0.0" picocolors "^1.0.0" - postcss "^8.4.19" + postcss "^8.4.21" postcss-media-query-parser "^0.2.3" postcss-resolve-nested-selector "^0.1.1" postcss-safe-parser "^6.0.0" - postcss-selector-parser "^6.0.10" + postcss-selector-parser "^6.0.11" postcss-value-parser "^4.2.0" resolve-from "^5.0.0" string-width "^4.2.3" @@ -8230,7 +8281,7 @@ stylelint@^14.9.1: svg-tags "^1.0.0" table "^6.8.1" v8-compile-cache "^2.3.0" - write-file-atomic "^4.0.2" + write-file-atomic "^5.0.0" supercluster@^7.1.5: version "7.1.5" @@ -8865,7 +8916,7 @@ wrappy@1: resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== -write-file-atomic@^4.0.1, write-file-atomic@^4.0.2: +write-file-atomic@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd" integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg== @@ -8873,6 +8924,14 @@ write-file-atomic@^4.0.1, write-file-atomic@^4.0.2: imurmurhash "^0.1.4" signal-exit "^3.0.7" +write-file-atomic@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.0.tgz#54303f117e109bf3d540261125c8ea5a7320fab0" + integrity sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w== + dependencies: + imurmurhash "^0.1.4" + signal-exit "^3.0.7" + ws@^8.0.0: version "8.12.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8" From b9f61da7e6ff2dac7a87b676c4071e40524279fd Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 27 Feb 2023 16:27:13 +0000 Subject: [PATCH 06/44] Add EventTileThreadToolbar tests (#10243) --- .../EventTile/EventTileThreadToolbar-test.tsx | 53 +++++++++++++++++++ .../EventTileThreadToolbar-test.tsx.snap | 29 ++++++++++ 2 files changed, 82 insertions(+) create mode 100644 test/components/views/rooms/EventTile/EventTileThreadToolbar-test.tsx create mode 100644 test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap diff --git a/test/components/views/rooms/EventTile/EventTileThreadToolbar-test.tsx b/test/components/views/rooms/EventTile/EventTileThreadToolbar-test.tsx new file mode 100644 index 0000000000..8c9bff2f1c --- /dev/null +++ b/test/components/views/rooms/EventTile/EventTileThreadToolbar-test.tsx @@ -0,0 +1,53 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { getByLabelText, render, RenderResult } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import React from "react"; +import { ComponentProps } from "react"; + +import { EventTileThreadToolbar } from "../../../../../src/components/views/rooms/EventTile/EventTileThreadToolbar"; + +describe("EventTileThreadToolbar", () => { + const viewInRoom = jest.fn(); + const copyLink = jest.fn(); + + function renderComponent(props: Partial> = {}): RenderResult { + return render(); + } + + afterEach(() => { + jest.resetAllMocks(); + }); + + it("renders", () => { + const { asFragment } = renderComponent(); + expect(asFragment()).toMatchSnapshot(); + }); + + it("calls the right callbacks", async () => { + const { container } = renderComponent(); + + const copyBtn = getByLabelText(container, "Copy link to thread"); + const viewInRoomBtn = getByLabelText(container, "View in room"); + + await userEvent.click(copyBtn); + expect(copyLink).toHaveBeenCalledTimes(1); + + await userEvent.click(viewInRoomBtn); + expect(viewInRoom).toHaveBeenCalledTimes(1); + }); +}); diff --git a/test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap b/test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap new file mode 100644 index 0000000000..133531b447 --- /dev/null +++ b/test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EventTileThreadToolbar renders 1`] = ` + + ); }; diff --git a/src/components/views/dialogs/polls/fetchPastPolls.ts b/src/components/views/dialogs/polls/fetchPastPolls.ts index 1d045d3d07..e97755874d 100644 --- a/src/components/views/dialogs/polls/fetchPastPolls.ts +++ b/src/components/views/dialogs/polls/fetchPastPolls.ts @@ -14,41 +14,82 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { M_POLL_START } from "matrix-js-sdk/src/@types/polls"; import { MatrixClient } from "matrix-js-sdk/src/client"; -import { EventTimeline, EventTimelineSet, Room } from "matrix-js-sdk/src/matrix"; +import { Direction, EventTimeline, EventTimelineSet, Room } from "matrix-js-sdk/src/matrix"; import { Filter, IFilterDefinition } from "matrix-js-sdk/src/filter"; import { logger } from "matrix-js-sdk/src/logger"; -/** - * Page timeline backwards until either: - * - event older than endOfHistoryPeriodTimestamp is encountered - * - end of timeline is reached - * @param timelineSet - timelineset to page - * @param matrixClient - client - * @param endOfHistoryPeriodTimestamp - epoch timestamp to fetch until - * @returns void - */ -const pagePolls = async ( - timelineSet: EventTimelineSet, - matrixClient: MatrixClient, - endOfHistoryPeriodTimestamp: number, -): Promise => { - const liveTimeline = timelineSet.getLiveTimeline(); - const events = liveTimeline.getEvents(); - const oldestEventTimestamp = events[0]?.getTs() || Date.now(); - const hasMorePages = !!liveTimeline.getPaginationToken(EventTimeline.BACKWARDS); - - if (!hasMorePages || oldestEventTimestamp <= endOfHistoryPeriodTimestamp) { +const getOldestEventTimestamp = (timelineSet?: EventTimelineSet): number | undefined => { + if (!timelineSet) { return; } + const liveTimeline = timelineSet?.getLiveTimeline(); + const events = liveTimeline.getEvents(); + return events[0]?.getTs(); +}; + +/** + * Page backwards in timeline history + * @param timelineSet - timelineset to page + * @param matrixClient - client + * @param canPageBackward - whether the timeline has more pages + * @param oldestEventTimestamp - server ts of the oldest encountered event + */ +const pagePollHistory = async ( + timelineSet: EventTimelineSet, + matrixClient: MatrixClient, +): Promise<{ + oldestEventTimestamp?: number; + canPageBackward: boolean; +}> => { + if (!timelineSet) { + return { canPageBackward: false }; + } + + const liveTimeline = timelineSet.getLiveTimeline(); + await matrixClient.paginateEventTimeline(liveTimeline, { backwards: true, }); - return pagePolls(timelineSet, matrixClient, endOfHistoryPeriodTimestamp); + return { + oldestEventTimestamp: getOldestEventTimestamp(timelineSet), + canPageBackward: !!liveTimeline.getPaginationToken(EventTimeline.BACKWARDS), + }; +}; + +/** + * Page timeline backwards until either: + * - event older than timestamp is encountered + * - end of timeline is reached + * @param timelineSet - timeline set to page + * @param matrixClient - client + * @param timestamp - epoch timestamp to page until + * @param canPageBackward - whether the timeline has more pages + * @param oldestEventTimestamp - server ts of the oldest encountered event + */ +const fetchHistoryUntilTimestamp = async ( + timelineSet: EventTimelineSet | undefined, + matrixClient: MatrixClient, + timestamp: number, + canPageBackward: boolean, + oldestEventTimestamp?: number, +): Promise => { + if (!timelineSet || !canPageBackward || (oldestEventTimestamp && oldestEventTimestamp < timestamp)) { + return; + } + const result = await pagePollHistory(timelineSet, matrixClient); + + return fetchHistoryUntilTimestamp( + timelineSet, + matrixClient, + timestamp, + result.canPageBackward, + result.oldestEventTimestamp, + ); }; const ONE_DAY_MS = 60000 * 60 * 24; @@ -57,35 +98,73 @@ const ONE_DAY_MS = 60000 * 60 * 24; * @param timelineSet - timelineset to page * @param matrixClient - client * @param historyPeriodDays - number of days of history to fetch, from current day - * @returns isLoading - true while fetching history + * @returns isLoading - true while fetching + * @returns oldestEventTimestamp - timestamp of oldest encountered poll, undefined when no polls found in timeline so far + * @returns loadMorePolls - function to page timeline backwards, undefined when timeline cannot be paged backwards + * @returns loadTimelineHistory - loads timeline history for the given history period */ const useTimelineHistory = ( - timelineSet: EventTimelineSet | null, + timelineSet: EventTimelineSet | undefined, matrixClient: MatrixClient, historyPeriodDays: number, -): { isLoading: boolean } => { +): { + isLoading: boolean; + oldestEventTimestamp?: number; + loadTimelineHistory: () => Promise; + loadMorePolls?: () => Promise; +} => { const [isLoading, setIsLoading] = useState(true); + const [oldestEventTimestamp, setOldestEventTimestamp] = useState(undefined); + const [canPageBackward, setCanPageBackward] = useState(false); - useEffect(() => { + const loadTimelineHistory = useCallback(async () => { + const endOfHistoryPeriodTimestamp = Date.now() - ONE_DAY_MS * historyPeriodDays; + setIsLoading(true); + try { + const liveTimeline = timelineSet?.getLiveTimeline(); + const canPageBackward = !!liveTimeline?.getPaginationToken(Direction.Backward); + const oldestEventTimestamp = getOldestEventTimestamp(timelineSet); + + await fetchHistoryUntilTimestamp( + timelineSet, + matrixClient, + endOfHistoryPeriodTimestamp, + canPageBackward, + oldestEventTimestamp, + ); + + setCanPageBackward(!!timelineSet?.getLiveTimeline()?.getPaginationToken(EventTimeline.BACKWARDS)); + setOldestEventTimestamp(getOldestEventTimestamp(timelineSet)); + } catch (error) { + logger.error("Failed to fetch room polls history", error); + } finally { + setIsLoading(false); + } + }, [historyPeriodDays, timelineSet, matrixClient]); + + const loadMorePolls = useCallback(async () => { if (!timelineSet) { return; } - const endOfHistoryPeriodTimestamp = Date.now() - ONE_DAY_MS * historyPeriodDays; + setIsLoading(true); + try { + const result = await pagePollHistory(timelineSet, matrixClient); - const doFetchHistory = async (): Promise => { - setIsLoading(true); - try { - await pagePolls(timelineSet, matrixClient, endOfHistoryPeriodTimestamp); - } catch (error) { - logger.error("Failed to fetch room polls history", error); - } finally { - setIsLoading(false); - } - }; - doFetchHistory(); - }, [timelineSet, historyPeriodDays, matrixClient]); + setCanPageBackward(result.canPageBackward); + setOldestEventTimestamp(result.oldestEventTimestamp); + } catch (error) { + logger.error("Failed to fetch room polls history", error); + } finally { + setIsLoading(false); + } + }, [timelineSet, matrixClient]); - return { isLoading }; + return { + isLoading, + oldestEventTimestamp, + loadTimelineHistory, + loadMorePolls: canPageBackward ? loadMorePolls : undefined, + }; }; const filterDefinition: IFilterDefinition = { @@ -97,18 +176,24 @@ const filterDefinition: IFilterDefinition = { }; /** - * Fetch poll start events in the last N days of room history + * Fetches poll start events in the last N days of room history * @param room - room to fetch history for * @param matrixClient - client * @param historyPeriodDays - number of days of history to fetch, from current day * @returns isLoading - true while fetching history + * @returns oldestEventTimestamp - timestamp of oldest encountered poll, undefined when no polls found in timeline so far + * @returns loadMorePolls - function to page timeline backwards, undefined when timeline cannot be paged backwards */ export const useFetchPastPolls = ( room: Room, matrixClient: MatrixClient, historyPeriodDays = 30, -): { isLoading: boolean } => { - const [timelineSet, setTimelineSet] = useState(null); +): { + isLoading: boolean; + oldestEventTimestamp?: number; + loadMorePolls?: () => Promise; +} => { + const [timelineSet, setTimelineSet] = useState(undefined); useEffect(() => { const filter = new Filter(matrixClient.getSafeUserId()); @@ -123,7 +208,15 @@ export const useFetchPastPolls = ( getFilteredTimelineSet(); }, [room, matrixClient]); - const { isLoading } = useTimelineHistory(timelineSet, matrixClient, historyPeriodDays); + const { isLoading, oldestEventTimestamp, loadMorePolls, loadTimelineHistory } = useTimelineHistory( + timelineSet, + matrixClient, + historyPeriodDays, + ); - return { isLoading }; + useEffect(() => { + loadTimelineHistory(); + }, [loadTimelineHistory]); + + return { isLoading, oldestEventTimestamp, loadMorePolls }; }; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a2cacaf4c9..055f3c1d07 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3143,8 +3143,15 @@ "Active polls": "Active polls", "Past polls": "Past polls", "Loading polls": "Loading polls", + "Load more polls": "Load more polls", "There are no active polls in this room": "There are no active polls in this room", "There are no past polls in this room": "There are no past polls in this room", + "There are no active polls. Load more polls to view polls for previous months": "There are no active polls. Load more polls to view polls for previous months", + "There are no past polls. Load more polls to view polls for previous months": "There are no past polls. Load more polls to view polls for previous months", + "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months", + "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no active polls for the past day. Load more polls to view polls for previous months", + "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months", + "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no past polls for the past day. Load more polls to view polls for previous months", "View poll": "View poll", "Send custom account data event": "Send custom account data event", "Send custom room account data event": "Send custom room account data event", diff --git a/test/components/views/dialogs/polls/PollHistoryDialog-test.tsx b/test/components/views/dialogs/polls/PollHistoryDialog-test.tsx index f1da27141c..d113d73ac5 100644 --- a/test/components/views/dialogs/polls/PollHistoryDialog-test.tsx +++ b/test/components/views/dialogs/polls/PollHistoryDialog-test.tsx @@ -176,12 +176,20 @@ describe("", () => { expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(1); }); - it("displays loader and list while paging timeline", async () => { + it("renders a no polls message when there are no active polls in the room", async () => { + const { getByText } = getComponent(); + await flushPromises(); + + expect(getByText("There are no active polls in this room")).toBeTruthy(); + }); + + it("renders a no polls message and a load more button when not at end of timeline", async () => { const timelineSet = room.getOrCreateFilteredTimelineSet(expectedFilter); const liveTimeline = timelineSet.getLiveTimeline(); - const tenDaysAgoTs = now - 60000 * 60 * 24 * 10; + const fourtyDaysAgoTs = now - 60000 * 60 * 24 * 40; + const pollStart = makePollStartEvent("Question?", userId, undefined, { ts: fourtyDaysAgoTs, id: "1" }); - jest.spyOn(liveTimeline, "getEvents").mockReset().mockReturnValue([]); + jest.spyOn(liveTimeline, "getEvents").mockReset().mockReturnValueOnce([]).mockReturnValueOnce([pollStart]); // mock three pages of timeline history jest.spyOn(liveTimeline, "getPaginationToken") @@ -189,57 +197,24 @@ describe("", () => { .mockReturnValueOnce("test-pagination-token-2") .mockReturnValueOnce("test-pagination-token-3"); - // reference to pagination resolve, so we can assert between pages - let resolvePagination1: (value: boolean) => void | undefined; - let resolvePagination2: (value: boolean) => void | undefined; - mockClient.paginateEventTimeline - .mockImplementationOnce(async (_p) => { - const pollStart = makePollStartEvent("Question?", userId, undefined, { ts: now, id: "1" }); - jest.spyOn(liveTimeline, "getEvents").mockReturnValue([pollStart]); - room.processPollEvents([pollStart]); - return new Promise((resolve) => (resolvePagination1 = resolve)); - }) - .mockImplementationOnce(async (_p) => { - const pollStart = makePollStartEvent("Older question?", userId, undefined, { - ts: tenDaysAgoTs, - id: "2", - }); - jest.spyOn(liveTimeline, "getEvents").mockReturnValue([pollStart]); - room.processPollEvents([pollStart]); - return new Promise((resolve) => (resolvePagination2 = resolve)); - }); - - const { getByText, queryByText } = getComponent(); - + const { getByText } = getComponent(); await flushPromises(); expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(1); - resolvePagination1!(true); + expect(getByText("There are no active polls. Load more polls to view polls for previous months")).toBeTruthy(); + + fireEvent.click(getByText("Load more polls")); + + // paged again + expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(2); + // load more polls button still in UI, with loader + expect(getByText("Load more polls")).toMatchSnapshot(); + await flushPromises(); - // first page has results, display immediately - expect(getByText("Question?")).toBeInTheDocument(); - // but we are still fetching history, diaply loader - expect(getByText("Loading polls")).toBeInTheDocument(); - - resolvePagination2!(true); - await flushPromises(); - - // additional results addeds - expect(getByText("Older question?")).toBeInTheDocument(); - expect(getByText("Question?")).toBeInTheDocument(); - // finished paging - expect(queryByText("Loading polls")).not.toBeInTheDocument(); - - expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(3); - }); - - it("renders a no polls message when there are no active polls in the room", async () => { - const { getByText } = getComponent(); - await flushPromises(); - - expect(getByText("There are no active polls in this room")).toBeTruthy(); + // no more spinner + expect(getByText("Load more polls")).toMatchSnapshot(); }); it("renders a no past polls message when there are no past polls in the room", async () => { diff --git a/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap b/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap index 76c76484fb..9c08631c2a 100644 --- a/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap +++ b/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap @@ -168,3 +168,32 @@ exports[` renders a list of active polls when there are pol />
`; + +exports[` renders a no polls message and a load more button when not at end of timeline 1`] = ` +
+ Load more polls +
+
+
+
+`; + +exports[` renders a no polls message and a load more button when not at end of timeline 2`] = ` +
+ Load more polls +
+`; From 57ed89e4605dfc45dcbdb11718c3e02ed9b4b256 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 28 Feb 2023 08:02:11 +0000 Subject: [PATCH 11/44] Update babel monorepo (#10233) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- yarn.lock | 283 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 167 insertions(+), 116 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7b359b50df..c699159274 100644 --- a/yarn.lock +++ b/yarn.lock @@ -32,7 +32,7 @@ resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.0.1.tgz#b38b444ad3aa5fedbb15f2f746dcd934226a12dd" integrity sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g== -"@ampproject/remapping@^2.1.0": +"@ampproject/remapping@^2.2.0": version "2.2.0" resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d" integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w== @@ -41,11 +41,11 @@ "@jridgewell/trace-mapping" "^0.3.9" "@babel/cli@^7.12.10": - version "7.20.7" - resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.20.7.tgz#8fc12e85c744a1a617680eacb488fab1fcd35b7c" - integrity sha512-WylgcELHB66WwQqItxNILsMlaTd8/SO6SgTTjMp4uCI7P4QyH1r3nqgFmO3BfM4AtfniHgFMH3EpYFj/zynBkQ== + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.21.0.tgz#1868eb70e9824b427fc607610cce8e9e7889e7e1" + integrity sha512-xi7CxyS8XjSyiwUGCfwf+brtJxjW1/ZTcBUkP10xawIEXLX5HzLn+3aXkgxozcP2UhRhtKTmQurw9Uaes7jZrA== dependencies: - "@jridgewell/trace-mapping" "^0.3.8" + "@jridgewell/trace-mapping" "^0.3.17" commander "^4.0.1" convert-source-map "^1.1.0" fs-readdir-recursive "^1.1.0" @@ -63,31 +63,31 @@ dependencies: "@babel/highlight" "^7.18.6" -"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.0", "@babel/compat-data@^7.20.1": +"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.0", "@babel/compat-data@^7.20.5": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.0.tgz#c241dc454e5b5917e40d37e525e2f4530c399298" + integrity sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g== + +"@babel/compat-data@^7.20.1": version "7.20.5" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.5.tgz#86f172690b093373a933223b4745deeb6049e733" integrity sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g== -"@babel/compat-data@^7.20.5": - version "7.20.10" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.10.tgz#9d92fa81b87542fff50e848ed585b4212c1d34ec" - integrity sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg== - "@babel/core@^7.0.0", "@babel/core@^7.11.6", "@babel/core@^7.12.10", "@babel/core@^7.12.3": - version "7.20.12" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d" - integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg== + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.0.tgz#1341aefdcc14ccc7553fcc688dd8986a2daffc13" + integrity sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA== dependencies: - "@ampproject/remapping" "^2.1.0" + "@ampproject/remapping" "^2.2.0" "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.20.7" + "@babel/generator" "^7.21.0" "@babel/helper-compilation-targets" "^7.20.7" - "@babel/helper-module-transforms" "^7.20.11" - "@babel/helpers" "^7.20.7" - "@babel/parser" "^7.20.7" + "@babel/helper-module-transforms" "^7.21.0" + "@babel/helpers" "^7.21.0" + "@babel/parser" "^7.21.0" "@babel/template" "^7.20.7" - "@babel/traverse" "^7.20.12" - "@babel/types" "^7.20.7" + "@babel/traverse" "^7.21.0" + "@babel/types" "^7.21.0" convert-source-map "^1.7.0" debug "^4.1.0" gensync "^1.0.0-beta.2" @@ -110,13 +110,14 @@ dependencies: eslint-rule-composer "^0.3.0" -"@babel/generator@^7.20.7": - version "7.20.14" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.14.tgz#9fa772c9f86a46c6ac9b321039400712b96f64ce" - integrity sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg== +"@babel/generator@^7.21.0", "@babel/generator@^7.21.1": + version "7.21.1" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.1.tgz#951cc626057bc0af2c35cd23e9c64d384dea83dd" + integrity sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA== dependencies: - "@babel/types" "^7.20.7" + "@babel/types" "^7.21.0" "@jridgewell/gen-mapping" "^0.3.2" + "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" "@babel/generator@^7.7.2": @@ -143,17 +144,7 @@ "@babel/helper-explode-assignable-expression" "^7.18.6" "@babel/types" "^7.18.9" -"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0": - version "7.20.0" - resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz#6bf5374d424e1b3922822f1d9bdaa43b1a139d0a" - integrity sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ== - dependencies: - "@babel/compat-data" "^7.20.0" - "@babel/helper-validator-option" "^7.18.6" - browserslist "^4.21.3" - semver "^6.3.0" - -"@babel/helper-compilation-targets@^7.20.7": +"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.20.7": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb" integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ== @@ -164,7 +155,17 @@ lru-cache "^5.1.1" semver "^6.3.0" -"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.20.2", "@babel/helper-create-class-features-plugin@^7.20.5": +"@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0": + version "7.20.0" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz#6bf5374d424e1b3922822f1d9bdaa43b1a139d0a" + integrity sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ== + dependencies: + "@babel/compat-data" "^7.20.0" + "@babel/helper-validator-option" "^7.18.6" + browserslist "^4.21.3" + semver "^6.3.0" + +"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.20.5": version "7.20.5" resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.5.tgz#327154eedfb12e977baa4ecc72e5806720a85a06" integrity sha512-3RCdA/EmEaikrhayahwToF0fpweU/8o2p8vhc1c/1kftHOdTKuC65kik/TLc+qfbS8JKw4qqJbne4ovICDhmww== @@ -177,6 +178,20 @@ "@babel/helper-replace-supers" "^7.19.1" "@babel/helper-split-export-declaration" "^7.18.6" +"@babel/helper-create-class-features-plugin@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz#64f49ecb0020532f19b1d014b03bccaa1ab85fb9" + integrity sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ== + dependencies: + "@babel/helper-annotate-as-pure" "^7.18.6" + "@babel/helper-environment-visitor" "^7.18.9" + "@babel/helper-function-name" "^7.21.0" + "@babel/helper-member-expression-to-functions" "^7.21.0" + "@babel/helper-optimise-call-expression" "^7.18.6" + "@babel/helper-replace-supers" "^7.20.7" + "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0" + "@babel/helper-split-export-declaration" "^7.18.6" + "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5": version "7.20.5" resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.20.5.tgz#5ea79b59962a09ec2acf20a963a01ab4d076ccca" @@ -217,6 +232,14 @@ "@babel/template" "^7.18.10" "@babel/types" "^7.19.0" +"@babel/helper-function-name@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4" + integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg== + dependencies: + "@babel/template" "^7.20.7" + "@babel/types" "^7.21.0" + "@babel/helper-hoist-variables@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678" @@ -231,6 +254,13 @@ dependencies: "@babel/types" "^7.18.9" +"@babel/helper-member-expression-to-functions@^7.20.7", "@babel/helper-member-expression-to-functions@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5" + integrity sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q== + dependencies: + "@babel/types" "^7.21.0" + "@babel/helper-module-imports@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" @@ -252,10 +282,10 @@ "@babel/traverse" "^7.20.1" "@babel/types" "^7.20.2" -"@babel/helper-module-transforms@^7.20.11": - version "7.20.11" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz#df4c7af713c557938c50ea3ad0117a7944b2f1b0" - integrity sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg== +"@babel/helper-module-transforms@^7.21.0": + version "7.21.2" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2" + integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ== dependencies: "@babel/helper-environment-visitor" "^7.18.9" "@babel/helper-module-imports" "^7.18.6" @@ -263,8 +293,8 @@ "@babel/helper-split-export-declaration" "^7.18.6" "@babel/helper-validator-identifier" "^7.19.1" "@babel/template" "^7.20.7" - "@babel/traverse" "^7.20.10" - "@babel/types" "^7.20.7" + "@babel/traverse" "^7.21.2" + "@babel/types" "^7.21.2" "@babel/helper-optimise-call-expression@^7.18.6": version "7.18.6" @@ -299,6 +329,18 @@ "@babel/traverse" "^7.19.1" "@babel/types" "^7.19.0" +"@babel/helper-replace-supers@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331" + integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A== + dependencies: + "@babel/helper-environment-visitor" "^7.18.9" + "@babel/helper-member-expression-to-functions" "^7.20.7" + "@babel/helper-optimise-call-expression" "^7.18.6" + "@babel/template" "^7.20.7" + "@babel/traverse" "^7.20.7" + "@babel/types" "^7.20.7" + "@babel/helper-simple-access@^7.19.4", "@babel/helper-simple-access@^7.20.2": version "7.20.2" resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9" @@ -306,7 +348,7 @@ dependencies: "@babel/types" "^7.20.2" -"@babel/helper-skip-transparent-expression-wrappers@^7.18.9": +"@babel/helper-skip-transparent-expression-wrappers@^7.18.9", "@babel/helper-skip-transparent-expression-wrappers@^7.20.0": version "7.20.0" resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684" integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg== @@ -330,10 +372,10 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2" integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w== -"@babel/helper-validator-option@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8" - integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw== +"@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180" + integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ== "@babel/helper-wrap-function@^7.18.9": version "7.20.5" @@ -345,14 +387,14 @@ "@babel/traverse" "^7.20.5" "@babel/types" "^7.20.5" -"@babel/helpers@^7.20.7": - version "7.20.7" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.7.tgz#04502ff0feecc9f20ecfaad120a18f011a8e6dce" - integrity sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA== +"@babel/helpers@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e" + integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA== dependencies: "@babel/template" "^7.20.7" - "@babel/traverse" "^7.20.7" - "@babel/types" "^7.20.7" + "@babel/traverse" "^7.21.0" + "@babel/types" "^7.21.0" "@babel/highlight@^7.18.6": version "7.18.6" @@ -363,10 +405,10 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.5", "@babel/parser@^7.20.13", "@babel/parser@^7.20.7": - version "7.20.15" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.15.tgz#eec9f36d8eaf0948bb88c87a46784b5ee9fd0c89" - integrity sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg== +"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.5", "@babel/parser@^7.20.7", "@babel/parser@^7.21.0", "@babel/parser@^7.21.2": + version "7.21.2" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.2.tgz#dacafadfc6d7654c3051a66d6fe55b6cb2f2a0b3" + integrity sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ== "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6": version "7.18.6" @@ -901,12 +943,12 @@ "@babel/helper-plugin-utils" "^7.18.6" "@babel/plugin-transform-runtime@^7.12.10": - version "7.19.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz#9d2a9dbf4e12644d6f46e5e75bfbf02b5d6e9194" - integrity sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw== + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz#2a884f29556d0a68cd3d152dcc9e6c71dfb6eee8" + integrity sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg== dependencies: "@babel/helper-module-imports" "^7.18.6" - "@babel/helper-plugin-utils" "^7.19.0" + "@babel/helper-plugin-utils" "^7.20.2" babel-plugin-polyfill-corejs2 "^0.3.3" babel-plugin-polyfill-corejs3 "^0.6.0" babel-plugin-polyfill-regenerator "^0.4.1" @@ -948,12 +990,12 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.9" -"@babel/plugin-transform-typescript@^7.18.6": - version "7.20.2" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.2.tgz#91515527b376fc122ba83b13d70b01af8fe98f3f" - integrity sha512-jvS+ngBfrnTUBfOQq8NfGnSbF9BrqlR6hjJ2yVxMkmO5nL/cdifNbI30EfjRlN4g5wYWNnMPyj5Sa6R1pbLeag== +"@babel/plugin-transform-typescript@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz#f0956a153679e3b377ae5b7f0143427151e4c848" + integrity sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg== dependencies: - "@babel/helper-create-class-features-plugin" "^7.20.2" + "@babel/helper-create-class-features-plugin" "^7.21.0" "@babel/helper-plugin-utils" "^7.20.2" "@babel/plugin-syntax-typescript" "^7.20.0" @@ -1077,18 +1119,18 @@ "@babel/plugin-transform-react-pure-annotations" "^7.18.6" "@babel/preset-typescript@^7.12.7": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399" - integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ== + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz#bcbbca513e8213691fe5d4b23d9251e01f00ebff" + integrity sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg== dependencies: - "@babel/helper-plugin-utils" "^7.18.6" - "@babel/helper-validator-option" "^7.18.6" - "@babel/plugin-transform-typescript" "^7.18.6" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/helper-validator-option" "^7.21.0" + "@babel/plugin-transform-typescript" "^7.21.0" "@babel/register@^7.12.10": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.18.9.tgz#1888b24bc28d5cc41c412feb015e9ff6b96e439c" - integrity sha512-ZlbnXDcNYHMR25ITwwNKT88JiaukkdVj/nG7r3wnuXkOTHc60Uy05PwMCPre0hSkY68E6zK3xz+vUJSP2jWmcw== + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.21.0.tgz#c97bf56c2472e063774f31d344c592ebdcefa132" + integrity sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw== dependencies: clone-deep "^4.0.1" find-cache-dir "^2.0.0" @@ -1105,9 +1147,9 @@ regenerator-runtime "^0.13.11" "@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": - version "7.20.13" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b" - integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA== + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673" + integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw== dependencies: regenerator-runtime "^0.13.11" @@ -1129,23 +1171,23 @@ "@babel/parser" "^7.18.10" "@babel/types" "^7.18.10" -"@babel/traverse@^7.12.12", "@babel/traverse@^7.18.5", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1", "@babel/traverse@^7.20.10", "@babel/traverse@^7.20.12", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.7.2": - version "7.20.13" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.13.tgz#817c1ba13d11accca89478bd5481b2d168d07473" - integrity sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ== +"@babel/traverse@^7.12.12", "@babel/traverse@^7.18.5", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.7.2": + version "7.21.2" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.2.tgz#ac7e1f27658750892e815e60ae90f382a46d8e75" + integrity sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw== dependencies: "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.20.7" + "@babel/generator" "^7.21.1" "@babel/helper-environment-visitor" "^7.18.9" - "@babel/helper-function-name" "^7.19.0" + "@babel/helper-function-name" "^7.21.0" "@babel/helper-hoist-variables" "^7.18.6" "@babel/helper-split-export-declaration" "^7.18.6" - "@babel/parser" "^7.20.13" - "@babel/types" "^7.20.7" + "@babel/parser" "^7.21.2" + "@babel/types" "^7.21.2" debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": +"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": version "7.20.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.5.tgz#e206ae370b5393d94dfd1d04cd687cace53efa84" integrity sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg== @@ -1154,7 +1196,7 @@ "@babel/helper-validator-identifier" "^7.19.1" to-fast-properties "^2.0.0" -"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7": +"@babel/types@^7.18.10", "@babel/types@^7.19.0": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f" integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg== @@ -1163,6 +1205,15 @@ "@babel/helper-validator-identifier" "^7.19.1" to-fast-properties "^2.0.0" +"@babel/types@^7.18.6", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2": + version "7.21.2" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.2.tgz#92246f6e00f91755893c2876ad653db70c8310d1" + integrity sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw== + dependencies: + "@babel/helper-string-parser" "^7.19.4" + "@babel/helper-validator-identifier" "^7.19.1" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -1541,7 +1592,7 @@ resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24" integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== -"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.8", "@jridgewell/trace-mapping@^0.3.9": +"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9": version "0.3.17" resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985" integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g== @@ -3056,15 +3107,15 @@ braces@^3.0.2, braces@~3.0.2: dependencies: fill-range "^7.0.1" -browserslist@^4.21.3, browserslist@^4.21.4: - version "4.21.4" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987" - integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw== +browserslist@^4.21.3, browserslist@^4.21.5: + version "4.21.5" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7" + integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w== dependencies: - caniuse-lite "^1.0.30001400" - electron-to-chromium "^1.4.251" - node-releases "^2.0.6" - update-browserslist-db "^1.0.9" + caniuse-lite "^1.0.30001449" + electron-to-chromium "^1.4.284" + node-releases "^2.0.8" + update-browserslist-db "^1.0.10" bs58@^5.0.0: version "5.0.0" @@ -3140,10 +3191,10 @@ camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== -caniuse-lite@^1.0.30001400: - version "1.0.30001442" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz#40337f1cf3be7c637b061e2f78582dc1daec0614" - integrity sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow== +caniuse-lite@^1.0.30001449: + version "1.0.30001458" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz#871e35866b4654a7d25eccca86864f411825540c" + integrity sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w== caseless@~0.12.0: version "0.12.0" @@ -3443,11 +3494,11 @@ convert-source-map@^2.0.0: integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== core-js-compat@^3.25.1: - version "3.26.1" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.26.1.tgz#0e710b09ebf689d719545ac36e49041850f943df" - integrity sha512-622/KzTudvXCDLRw70iHW4KKs1aGpcRcowGWyYJr2DEBfRrd6hNJybxSWJFuZYD4ma86xhrwDDHxmDaIq4EA8A== + version "3.29.0" + resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.29.0.tgz#1b8d9eb4191ab112022e7f6364b99b65ea52f528" + integrity sha512-ScMn3uZNAFhK2DGoEfErguoiAHhV2Ju+oJo/jK08p7B3f3UhocUrCCkTvnZaiS+edl5nlIoiBXKcwMc6elv4KQ== dependencies: - browserslist "^4.21.4" + browserslist "^4.21.5" core-js-pure@^3.25.1: version "3.26.1" @@ -3927,10 +3978,10 @@ ecc-jsbn@~0.1.1: jsbn "~0.1.0" safer-buffer "^2.1.0" -electron-to-chromium@^1.4.251: - version "1.4.284" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592" - integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA== +electron-to-chromium@^1.4.284: + version "1.4.313" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.313.tgz#ff95f01926ab748c65beb23fc55f2f178e7a24a9" + integrity sha512-QckB9OVqr2oybjIrbMI99uF+b9+iTja5weFe0ePbqLb5BHqXOJUO1SG6kDj/1WtWPRIBr51N153AEq8m7HuIaA== emittery@^0.13.1: version "0.13.1" @@ -6786,10 +6837,10 @@ node-int64@^0.4.0: resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b" integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw== -node-releases@^2.0.6: - version "2.0.8" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.8.tgz#0f349cdc8fcfa39a92ac0be9bc48b7706292b9ae" - integrity sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A== +node-releases@^2.0.8: + version "2.0.10" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" + integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== normalize-package-data@^2.5.0: version "2.5.0" @@ -8636,7 +8687,7 @@ untildify@^4.0.0: resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b" integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw== -update-browserslist-db@^1.0.9: +update-browserslist-db@^1.0.10: version "1.0.10" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3" integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ== From 6de8d85f7e42062ce56bf40010dd0a1097ead9ed Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 28 Feb 2023 08:44:14 +0000 Subject: [PATCH 12/44] Update dependency eslint-plugin-matrix-org to v1 (#10222) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 2b52f19eea..4c2d7aeadf 100644 --- a/package.json +++ b/package.json @@ -192,7 +192,7 @@ "eslint-plugin-deprecate": "^0.7.0", "eslint-plugin-import": "^2.25.4", "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-matrix-org": "0.10.0", + "eslint-plugin-matrix-org": "1.0.0", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-unicorn": "^45.0.0", diff --git a/yarn.lock b/yarn.lock index c699159274..20d221148e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4305,10 +4305,10 @@ eslint-plugin-jsx-a11y@^6.5.1: minimatch "^3.1.2" semver "^6.3.0" -eslint-plugin-matrix-org@0.10.0: - version "0.10.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-matrix-org/-/eslint-plugin-matrix-org-0.10.0.tgz#8d0998641a4d276343cae2abf253a01bb4d4cc60" - integrity sha512-L7ail0x1yUlF006kn4mHc+OT8/aYZI++i852YXPHxCbM1EY7jeg/fYAQ8tCx5+x08LyqXeS7inAVSL784m0C6Q== +eslint-plugin-matrix-org@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-matrix-org/-/eslint-plugin-matrix-org-1.0.0.tgz#cead71391e2a36d63cb8f8018a38305ecf81b4b8" + integrity sha512-JSjw+hswEcFR+N4N2JXZttK65cK6huykZKkbnwcITxPTelsaOfZ8qXG0Az9BfmVADaLgY3MGmHK1YYKbykUfBQ== eslint-plugin-react-hooks@^4.3.0: version "4.6.0" From dd6fc124d784c76aab8b9a3d236895cedf4e7a5f Mon Sep 17 00:00:00 2001 From: Kerry Date: Tue, 28 Feb 2023 21:55:59 +1300 Subject: [PATCH 13/44] Apply strictNullChecks to src/components/views/location/* (#10249 * strict fixes * accessiblebutton without onClick explicit * strict fix for UserMenu BaseAvatar --- src/components/structures/UserMenu.tsx | 2 +- src/components/views/avatars/BaseAvatar.tsx | 2 +- src/components/views/location/LocationButton.tsx | 6 +++--- src/components/views/location/LocationPicker.tsx | 12 ++++++------ .../views/location/LocationShareMenu.tsx | 7 ++++--- .../views/location/LocationViewDialog.tsx | 4 ++-- src/components/views/location/Map.tsx | 3 +++ src/components/views/location/ShareType.tsx | 16 ++++++++++------ src/components/views/location/SmartMarker.tsx | 12 ++++++++---- src/components/views/location/shareLocation.ts | 7 ++++--- .../views/location/LocationShareMenu-test.tsx | 5 +++-- test/components/views/spaces/SpacePanel-test.tsx | 1 + 12 files changed, 46 insertions(+), 31 deletions(-) diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index aea40bbe57..4f52b2c970 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -432,7 +432,7 @@ export default class UserMenu extends React.Component { public render(): React.ReactNode { const avatarSize = 32; // should match border-radius of the avatar - const userId = MatrixClientPeg.get().getUserId(); + const userId = MatrixClientPeg.get().getSafeUserId(); const displayName = OwnProfileStore.instance.displayName || userId; const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize); diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index 469c5fbb2a..59553e3d7f 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -32,7 +32,7 @@ import { toPx } from "../../../utils/units"; import { _t } from "../../../languageHandler"; interface IProps { - name: string; // The name (first initial used as default) + name?: string; // The name (first initial used as default) idName?: string; // ID for generating hash colours title?: string; // onHover title text url?: string; // highest priority of them all, shortcut to set in urls[0] diff --git a/src/components/views/location/LocationButton.tsx b/src/components/views/location/LocationButton.tsx index 056caaa3da..08e13537d2 100644 --- a/src/components/views/location/LocationButton.tsx +++ b/src/components/views/location/LocationButton.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ReactElement, SyntheticEvent, useContext } from "react"; +import React, { ReactNode, SyntheticEvent, useContext } from "react"; import classNames from "classnames"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { IEventRelation } from "matrix-js-sdk/src/models/event"; @@ -41,9 +41,9 @@ export const LocationButton: React.FC = ({ roomId, sender, menuPosition, overflowMenuCloser?.(); }; - let contextMenu: ReactElement; + let contextMenu: ReactNode = null; if (menuDisplayed) { - const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect()); + const position = menuPosition ?? (button.current && aboveLeftOf(button.current.getBoundingClientRect())) ?? {}; contextMenu = ( class LocationPicker extends React.Component { public static contextType = MatrixClientContext; public context!: React.ContextType; - private map?: maplibregl.Map = null; - private geolocate?: maplibregl.GeolocateControl = null; - private marker?: maplibregl.Marker = null; + private map?: maplibregl.Map; + private geolocate?: maplibregl.GeolocateControl; + private marker?: maplibregl.Marker; public constructor(props: ILocationPickerProps) { super(props); @@ -100,7 +100,7 @@ class LocationPicker extends React.Component { }); this.map.on("load", () => { - this.geolocate.trigger(); + this.geolocate?.trigger(); }); this.geolocate.on("error", this.onGeolocateError); @@ -120,7 +120,7 @@ class LocationPicker extends React.Component { } catch (e) { logger.error("Failed to render map", e); const errorType = - e?.message === LocationShareError.MapStyleUrlNotConfigured + (e as Error)?.message === LocationShareError.MapStyleUrlNotConfigured ? LocationShareError.MapStyleUrlNotConfigured : LocationShareError.Default; this.setState({ error: errorType }); @@ -141,7 +141,7 @@ class LocationPicker extends React.Component { offset: [0, -1], }) .setLngLat(new maplibregl.LngLat(0, 0)) - .addTo(this.map); + .addTo(this.map!); }; private updateStyleUrl = (clientWellKnown: IClientWellKnown): void => { diff --git a/src/components/views/location/LocationShareMenu.tsx b/src/components/views/location/LocationShareMenu.tsx index 5968d50c47..3fc369e3d5 100644 --- a/src/components/views/location/LocationShareMenu.tsx +++ b/src/components/views/location/LocationShareMenu.tsx @@ -64,14 +64,15 @@ const LocationShareMenu: React.FC = ({ menuPosition, onFinished, sender, ); const displayName = OwnProfileStore.instance.displayName; + const userId = matrixClient.getSafeUserId(); const onLocationSubmit = shareType === LocationShareType.Live - ? shareLiveLocation(matrixClient, roomId, displayName, openMenu) - : shareLocation(matrixClient, roomId, shareType, relation, openMenu); + ? shareLiveLocation(matrixClient, roomId, displayName || userId, openMenu) + : shareLocation(matrixClient, roomId, shareType ?? LocationShareType.Own, relation, openMenu); const onLiveShareEnableSubmit = (): void => { - SettingsStore.setValue("feature_location_share_live", undefined, SettingLevel.DEVICE, true); + SettingsStore.setValue("feature_location_share_live", null, SettingLevel.DEVICE, true); }; const shouldAdvertiseLiveLabsFlag = shareType === LocationShareType.Live && !isLiveShareEnabled; diff --git a/src/components/views/location/LocationViewDialog.tsx b/src/components/views/location/LocationViewDialog.tsx index a84ec29c3b..042e37a111 100644 --- a/src/components/views/location/LocationViewDialog.tsx +++ b/src/components/views/location/LocationViewDialog.tsx @@ -31,7 +31,7 @@ interface IProps extends IDialogProps { } interface IState { - error: Error; + error?: Error; } /** @@ -58,7 +58,7 @@ export default class LocationViewDialog extends React.Component const { mxEvent } = this.props; // only pass member to marker when should render avatar marker - const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined; + const markerRoomMember = (isSelfLocation(mxEvent.getContent()) && mxEvent.sender) || undefined; const geoUri = locationEventGeoUri(mxEvent); return ( diff --git a/src/components/views/location/Map.tsx b/src/components/views/location/Map.tsx index 22a4bda63e..2fc9f97280 100644 --- a/src/components/views/location/Map.tsx +++ b/src/components/views/location/Map.tsx @@ -70,6 +70,9 @@ const useMapWithStyle = ({ if (map && centerGeoUri) { try { const coords = parseGeoUri(centerGeoUri); + if (!coords) { + throw new Error("Invalid geo URI"); + } map.setCenter({ lon: coords.longitude, lat: coords.latitude }); } catch (_error) { logger.error("Could not set map center"); diff --git a/src/components/views/location/ShareType.tsx b/src/components/views/location/ShareType.tsx index a794b36e83..81d232e6f5 100644 --- a/src/components/views/location/ShareType.tsx +++ b/src/components/views/location/ShareType.tsx @@ -20,7 +20,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { _t } from "../../../languageHandler"; import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import BaseAvatar from "../avatars/BaseAvatar"; -import AccessibleButton from "../elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import Heading from "../typography/Heading"; import { Icon as LocationIcon } from "../../../../res/img/element-icons/location.svg"; import { LocationShareType } from "./shareLocation"; @@ -28,11 +28,11 @@ import StyledLiveBeaconIcon from "../beacon/StyledLiveBeaconIcon"; const UserAvatar: React.FC = () => { const matrixClient = useContext(MatrixClientContext); - const userId = matrixClient.getUserId(); - const displayName = OwnProfileStore.instance.displayName; + const userId = matrixClient.getSafeUserId(); + const displayName = OwnProfileStore.instance.displayName ?? undefined; // 40 - 2px border const avatarSize = 36; - const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize); + const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize) ?? undefined; return (
@@ -49,9 +49,13 @@ const UserAvatar: React.FC = () => { ); }; -type ShareTypeOptionProps = HTMLAttributes & { label: string; shareType: LocationShareType }; +type ShareTypeOptionProps = HTMLAttributes & { + label: string; + shareType: LocationShareType; + onClick?: ((e: ButtonEvent) => void | Promise) | null; +}; const ShareTypeOption: React.FC = ({ onClick, label, shareType, ...rest }) => ( - + {shareType === LocationShareType.Own && } {shareType === LocationShareType.Pin && ( diff --git a/src/components/views/location/SmartMarker.tsx b/src/components/views/location/SmartMarker.tsx index 225cfbdcdc..f082bce8d8 100644 --- a/src/components/views/location/SmartMarker.tsx +++ b/src/components/views/location/SmartMarker.tsx @@ -33,9 +33,11 @@ const useMapMarker = ( return; } const coords = parseGeoUri(geoUri); - const newMarker = createMarker(coords, element); - newMarker.addTo(map); - setMarker(newMarker); + if (coords) { + const newMarker = createMarker(coords, element); + newMarker.addTo(map); + setMarker(newMarker); + } }, [marker, geoUri, map], ); @@ -43,7 +45,9 @@ const useMapMarker = ( useEffect(() => { if (marker) { const coords = parseGeoUri(geoUri); - marker.setLngLat({ lon: coords.longitude, lat: coords.latitude }); + if (coords) { + marker.setLngLat({ lon: coords.longitude, lat: coords.latitude }); + } } }, [marker, geoUri]); diff --git a/src/components/views/location/shareLocation.ts b/src/components/views/location/shareLocation.ts index 19234cde31..808ef6e4ca 100644 --- a/src/components/views/location/shareLocation.ts +++ b/src/components/views/location/shareLocation.ts @@ -15,6 +15,7 @@ limitations under the License. */ import { MatrixClient } from "matrix-js-sdk/src/client"; +import { IContent } from "matrix-js-sdk/src/matrix"; import { MatrixError } from "matrix-js-sdk/src/http-api"; import { makeLocationContent, makeBeaconInfoContent } from "matrix-js-sdk/src/content-helpers"; import { logger } from "matrix-js-sdk/src/logger"; @@ -94,7 +95,7 @@ const getDefaultErrorParams = ( return { modalParams, errorMessage }; }; -const handleShareError = (error: Error, openMenu: () => void, shareType: LocationShareType): void => { +const handleShareError = (error: unknown, openMenu: () => void, shareType: LocationShareType): void => { const { modalParams, errorMessage } = (error as MatrixError).errcode === "M_FORBIDDEN" ? getPermissionsErrorParams(shareType) @@ -135,9 +136,9 @@ export const shareLocation = async ({ uri, timestamp }): Promise => { if (!uri) return; try { - const threadId = relation?.rel_type === THREAD_RELATION_TYPE.name ? relation.event_id : null; + const threadId = (relation?.rel_type === THREAD_RELATION_TYPE.name && relation?.event_id) || null; const assetType = shareType === LocationShareType.Pin ? LocationAssetType.Pin : LocationAssetType.Self; - const content = makeLocationContent(undefined, uri, timestamp, undefined, assetType); + const content = makeLocationContent(undefined, uri, timestamp, undefined, assetType) as IContent; await doMaybeLocalRoomAction( roomId, (actualRoomId: string) => client.sendMessage(actualRoomId, threadId, content), diff --git a/test/components/views/location/LocationShareMenu-test.tsx b/test/components/views/location/LocationShareMenu-test.tsx index 42331429d3..9ee667f319 100644 --- a/test/components/views/location/LocationShareMenu-test.tsx +++ b/test/components/views/location/LocationShareMenu-test.tsx @@ -33,6 +33,7 @@ import { LocationShareType } from "../../../../src/components/views/location/sha import { flushPromisesWithFakeTimers, getMockClientWithEventEmitter, + mockClientMethodsUser, setupAsyncStoreWithClient, } from "../../../test-utils"; import Modal from "../../../../src/Modal"; @@ -74,7 +75,7 @@ jest.mock("../../../../src/Modal", () => ({ describe("", () => { const userId = "@ernie:server.org"; const mockClient = getMockClientWithEventEmitter({ - getUserId: jest.fn().mockReturnValue(userId), + ...mockClientMethodsUser(userId), getClientWellKnown: jest.fn().mockResolvedValue({ map_style_url: "maps.com", }), @@ -334,7 +335,7 @@ describe("", () => { expect(SettingsStore.setValue).toHaveBeenCalledWith( "feature_location_share_live", - undefined, + null, SettingLevel.DEVICE, true, ); diff --git a/test/components/views/spaces/SpacePanel-test.tsx b/test/components/views/spaces/SpacePanel-test.tsx index 241b1ded73..8ed108ee39 100644 --- a/test/components/views/spaces/SpacePanel-test.tsx +++ b/test/components/views/spaces/SpacePanel-test.tsx @@ -48,6 +48,7 @@ jest.mock("../../../../src/customisations/helpers/UIComponents", () => ({ describe("", () => { const mockClient = { getUserId: jest.fn().mockReturnValue("@test:test"), + getSafeUserId: jest.fn().mockReturnValue("@test:test"), isGuest: jest.fn(), getAccountData: jest.fn(), } as unknown as MatrixClient; From f40d15388c59a0d88fe9ae7ee8c202c349685941 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Telaty=C5=84ski?= <7t3chguy@gmail.com> Date: Tue, 28 Feb 2023 08:58:23 +0000 Subject: [PATCH 14/44] Update tests to prefer RTL over Enzyme (#10247 * Update tests to prefer RTL over Enzyme * Strict types --- .../views/audio_messages/PlayPauseButton.tsx | 2 +- .../audio_messages/RecordingPlayback-test.tsx | 59 +- .../views/auth/RegistrationToken-test.tsx | 32 +- .../views/beacon/BeaconViewDialog-test.tsx | 3 +- .../views/dialogs/ExportDialog-test.tsx | 1 + .../views/elements/EventListSummary-test.tsx | 149 ++--- .../views/elements/PollCreateDialog-test.tsx | 122 ++-- .../PollCreateDialog-test.tsx.snap | 559 ++++++++++++++++- .../views/messages/MBeaconBody-test.tsx | 79 +-- .../views/messages/MLocationBody-test.tsx | 1 + .../__snapshots__/MBeaconBody-test.tsx.snap | 43 +- .../views/rooms/MemberList-test.tsx | 1 + .../views/rooms/RoomHeader-test.tsx | 563 +++++++++--------- .../rooms/VoiceRecordComposerTile-test.tsx | 52 +- .../SpaceSettingsVisibilityTab-test.tsx | 13 +- test/test-utils/composer.ts | 22 +- test/test-utils/test-utils.ts | 3 +- test/test-utils/utilities.ts | 13 - test/utils/DMRoomMap-test.ts | 2 +- test/utils/export-test.tsx | 8 +- 20 files changed, 1095 insertions(+), 632 deletions(-) diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index a865f0aeef..4f2fddc4ab 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/src/components/views/audio_messages/PlayPauseButton.tsx @@ -60,7 +60,7 @@ export default class PlayPauseButton extends React.PureComponent { return ( ({ createAudioContext: jest.fn(), @@ -57,12 +53,13 @@ describe("", () => { const mockChannelData = new Float32Array(); - const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File }; + const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File } as IRoomState; const getComponent = (props: React.ComponentProps, room = defaultRoom) => - mount(, { - wrappingComponent: RoomContext.Provider, - wrappingComponentProps: { value: room }, - }); + render( + + + , + ); beforeEach(() => { jest.spyOn(logger, "error").mockRestore(); @@ -71,7 +68,7 @@ describe("", () => { mocked(createAudioContext).mockReturnValue(mockAudioContext as unknown as AudioContext); }); - const getPlayButton = (component: ReactWrapper) => findByTestId(component, "play-pause-button").at(0); + const getPlayButton = (component: RenderResult) => component.getByTestId("play-pause-button"); it("renders recording playback", () => { const playback = new Playback(new ArrayBuffer(8)); @@ -82,15 +79,16 @@ describe("", () => { it("disables play button while playback is decoding", async () => { const playback = new Playback(new ArrayBuffer(8)); const component = getComponent({ playback }); - expect(getPlayButton(component).props().disabled).toBeTruthy(); + expect(getPlayButton(component)).toHaveAttribute("disabled"); + expect(getPlayButton(component)).toHaveAttribute("aria-disabled", "true"); }); it("enables play button when playback is finished decoding", async () => { const playback = new Playback(new ArrayBuffer(8)); const component = getComponent({ playback }); await flushPromises(); - component.setProps({}); - expect(getPlayButton(component).props().disabled).toBeFalsy(); + expect(getPlayButton(component)).not.toHaveAttribute("disabled"); + expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true"); }); it("displays error when playback decoding fails", async () => { @@ -101,7 +99,7 @@ describe("", () => { const playback = new Playback(new ArrayBuffer(8)); const component = getComponent({ playback }); await flushPromises(); - expect(component.find(".text-warning").length).toBeFalsy(); + expect(component.container.querySelector(".text-warning")).toBeDefined(); }); it("displays pre-prepared playback with correct playback phase", async () => { @@ -109,8 +107,9 @@ describe("", () => { await playback.prepare(); const component = getComponent({ playback }); // playback already decoded, button is not disabled - expect(getPlayButton(component).props().disabled).toBeFalsy(); - expect(component.find(".text-warning").length).toBeFalsy(); + expect(getPlayButton(component)).not.toHaveAttribute("disabled"); + expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true"); + expect(component.container.querySelector(".text-warning")).toBeFalsy(); }); it("toggles playback on play pause button click", async () => { @@ -119,9 +118,7 @@ describe("", () => { await playback.prepare(); const component = getComponent({ playback }); - act(() => { - getPlayButton(component).simulate("click"); - }); + fireEvent.click(getPlayButton(component)); expect(playback.toggle).toHaveBeenCalled(); }); @@ -131,9 +128,9 @@ describe("", () => { const playback = new Playback(new ArrayBuffer(8)); const component = getComponent({ playback, layout: PlaybackLayout.Composer }); - expect(component.find(PlaybackClock).length).toBeTruthy(); - expect(component.find(PlaybackWaveform).length).toBeTruthy(); - expect(component.find(SeekBar).length).toBeFalsy(); + expect(component.container.querySelector(".mx_Clock")).toBeDefined(); + expect(component.container.querySelector(".mx_Waveform")).toBeDefined(); + expect(component.container.querySelector(".mx_SeekBar")).toBeFalsy(); }); }); @@ -142,18 +139,18 @@ describe("", () => { const playback = new Playback(new ArrayBuffer(8)); const component = getComponent({ playback, layout: PlaybackLayout.Timeline }); - expect(component.find(PlaybackClock).length).toBeTruthy(); - expect(component.find(PlaybackWaveform).length).toBeTruthy(); - expect(component.find(SeekBar).length).toBeTruthy(); + expect(component.container.querySelector(".mx_Clock")).toBeDefined(); + expect(component.container.querySelector(".mx_Waveform")).toBeDefined(); + expect(component.container.querySelector(".mx_SeekBar")).toBeDefined(); }); it("should be the default", () => { const playback = new Playback(new ArrayBuffer(8)); const component = getComponent({ playback }); // no layout set for test - expect(component.find(PlaybackClock).length).toBeTruthy(); - expect(component.find(PlaybackWaveform).length).toBeTruthy(); - expect(component.find(SeekBar).length).toBeTruthy(); + expect(component.container.querySelector(".mx_Clock")).toBeDefined(); + expect(component.container.querySelector(".mx_Waveform")).toBeDefined(); + expect(component.container.querySelector(".mx_SeekBar")).toBeDefined(); }); }); }); diff --git a/test/components/views/auth/RegistrationToken-test.tsx b/test/components/views/auth/RegistrationToken-test.tsx index bbe6ebfe36..fef05dd180 100644 --- a/test/components/views/auth/RegistrationToken-test.tsx +++ b/test/components/views/auth/RegistrationToken-test.tsx @@ -17,9 +17,7 @@ limitations under the License. */ import React from "react"; -import { act } from "react-dom/test-utils"; -// eslint-disable-next-line deprecate/import -import { mount, ReactWrapper } from "enzyme"; +import { fireEvent, render, RenderResult } from "@testing-library/react"; import InteractiveAuthComponent from "../../../../src/components/structures/InteractiveAuth"; import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils"; @@ -34,7 +32,7 @@ describe("InteractiveAuthComponent", function () { makeRequest: jest.fn().mockResolvedValue(undefined), onAuthFinished: jest.fn(), }; - const getComponent = (props = {}) => mount(); + const getComponent = (props = {}) => render(); beforeEach(function () { jest.clearAllMocks(); @@ -44,9 +42,10 @@ describe("InteractiveAuthComponent", function () { unmockClientPeg(); }); - const getSubmitButton = (wrapper: ReactWrapper) => wrapper.find('AccessibleButton[kind="primary"]').at(0); - const getRegistrationTokenInput = (wrapper: ReactWrapper) => - wrapper.find('input[name="registrationTokenField"]').at(0); + const getSubmitButton = ({ container }: RenderResult) => + container.querySelector(".mx_AccessibleButton_kind_primary"); + const getRegistrationTokenInput = ({ container }: RenderResult) => + container.querySelector('input[name="registrationTokenField"]'); it("Should successfully complete a registration token flow", async () => { const onAuthFinished = jest.fn(); @@ -61,28 +60,25 @@ describe("InteractiveAuthComponent", function () { const registrationTokenNode = getRegistrationTokenInput(wrapper); const submitNode = getSubmitButton(wrapper); - const formNode = wrapper.find("form").at(0); + const formNode = wrapper.container.querySelector("form"); expect(registrationTokenNode).toBeTruthy(); expect(submitNode).toBeTruthy(); expect(formNode).toBeTruthy(); // submit should be disabled - expect(submitNode.props().disabled).toBe(true); + expect(submitNode).toHaveAttribute("disabled"); + expect(submitNode).toHaveAttribute("aria-disabled", "true"); // put something in the registration token box - act(() => { - registrationTokenNode.simulate("change", { target: { value: "s3kr3t" } }); - wrapper.setProps({}); - }); + fireEvent.change(registrationTokenNode!, { target: { value: "s3kr3t" } }); - expect(getRegistrationTokenInput(wrapper).props().value).toEqual("s3kr3t"); - expect(getSubmitButton(wrapper).props().disabled).toBe(false); + expect(getRegistrationTokenInput(wrapper)).toHaveValue("s3kr3t"); + expect(submitNode).not.toHaveAttribute("disabled"); + expect(submitNode).not.toHaveAttribute("aria-disabled", "true"); // hit enter; that should trigger a request - act(() => { - formNode.simulate("submit"); - }); + fireEvent.submit(formNode!); // wait for auth request to resolve await flushPromises(); diff --git a/test/components/views/beacon/BeaconViewDialog-test.tsx b/test/components/views/beacon/BeaconViewDialog-test.tsx index 11c1863a57..cee880c966 100644 --- a/test/components/views/beacon/BeaconViewDialog-test.tsx +++ b/test/components/views/beacon/BeaconViewDialog-test.tsx @@ -15,8 +15,7 @@ limitations under the License. */ import React from "react"; -import { act } from "react-dom/test-utils"; -import { fireEvent, render, RenderResult } from "@testing-library/react"; +import { act, fireEvent, render, RenderResult } from "@testing-library/react"; import { MatrixClient, MatrixEvent, Room, RoomMember, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix"; import * as maplibregl from "maplibre-gl"; import { mocked } from "jest-mock"; diff --git a/test/components/views/dialogs/ExportDialog-test.tsx b/test/components/views/dialogs/ExportDialog-test.tsx index afc490546f..401dcf8770 100644 --- a/test/components/views/dialogs/ExportDialog-test.tsx +++ b/test/components/views/dialogs/ExportDialog-test.tsx @@ -18,6 +18,7 @@ import React from "react"; // eslint-disable-next-line deprecate/import import { mount, ReactWrapper } from "enzyme"; import { mocked } from "jest-mock"; +// eslint-disable-next-line deprecate/import import { act } from "react-dom/test-utils"; import { Room } from "matrix-js-sdk/src/matrix"; diff --git a/test/components/views/elements/EventListSummary-test.tsx b/test/components/views/elements/EventListSummary-test.tsx index 81fc59e2aa..0f666bfd8b 100644 --- a/test/components/views/elements/EventListSummary-test.tsx +++ b/test/components/views/elements/EventListSummary-test.tsx @@ -15,8 +15,7 @@ limitations under the License. */ import React, { ComponentProps } from "react"; -// eslint-disable-next-line deprecate/import -import { mount, ReactWrapper } from "enzyme"; +import { render, RenderResult } from "@testing-library/react"; import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix"; import { @@ -124,8 +123,8 @@ describe("EventListSummary", function () { events: [], children: [], }; - const renderComponent = (props = {}): ReactWrapper => { - return mount( + const renderComponent = (props = {}): RenderResult => { + return render( , @@ -150,13 +149,11 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); // matrix cli context wrapper + const { container } = renderComponent(props); // matrix cli context wrapper - expect(wrapper.find("GenericEventListSummary").props().children).toEqual([ -
- Expanded membership -
, - ]); + const children = container.querySelector(".mx_GenericEventListSummary_unstyledList")!.children; + expect(children).toHaveLength(1); + expect(children[0]).toHaveTextContent("Expanded membership"); }); it("renders expanded events if there are less than props.threshold", function () { @@ -172,16 +169,12 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); // matrix cli context wrapper + const { container } = renderComponent(props); // matrix cli context wrapper - expect(wrapper.find("GenericEventListSummary").props().children).toEqual([ -
- Expanded membership -
, -
- Expanded membership -
, - ]); + const children = container.querySelector(".mx_GenericEventListSummary_unstyledList")!.children; + expect(children).toHaveLength(2); + expect(children[0]).toHaveTextContent("Expanded membership"); + expect(children[1]).toHaveTextContent("Expanded membership"); }); it("renders collapsed events if events.length = props.threshold", function () { @@ -198,11 +191,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_1 joined and left and joined"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent("user_1 joined and left and joined"); }); it("truncates long join,leave repetitions", function () { @@ -230,11 +221,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_1 joined and left 7 times"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent("user_1 joined and left 7 times"); }); it("truncates long join,leave repetitions between other events", function () { @@ -274,11 +263,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent("user_1 was unbanned, joined and left 7 times and was invited"); }); it("truncates multiple sequences of repetitions with other events between", function () { @@ -320,11 +307,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe( + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent( "user_1 was unbanned, joined and left 2 times, was banned, " + "joined and left 3 times and was invited", ); }); @@ -374,11 +359,11 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_1 and one other were unbanned, joined and left 2 times and were banned"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent( + "user_1 and one other were unbanned, joined and left 2 times and were banned", + ); }); it("handles many users following the same sequence of memberships", function () { @@ -406,11 +391,11 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent( + "user_0 and 19 others were unbanned, joined and left 2 times and were banned", + ); }); it("correctly orders sequences of transitions by the order of their first event", function () { @@ -450,11 +435,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe( + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent( "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " + "joined and left 2 times and was banned", ); @@ -520,11 +503,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe( + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent( "user_1 was invited, was banned, joined, rejected their invitation, left, " + "had their invitation withdrawn, was unbanned, was removed, left and was removed", ); @@ -563,11 +544,11 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_1 and one other rejected their invitations and had their invitations withdrawn"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent( + "user_1 and one other rejected their invitations and had their invitations withdrawn", + ); }); it("handles invitation plurals correctly when there are multiple invites", function () { @@ -591,11 +572,9 @@ describe("EventListSummary", function () { threshold: 1, // threshold = 1 to force collapse }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_1 rejected their invitation 2 times"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent("user_1 rejected their invitation 2 times"); }); it('handles a summary length = 2, with no "others"', function () { @@ -613,11 +592,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_1 and user_2 joined 2 times"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent("user_1 and user_2 joined 2 times"); }); it('handles a summary length = 2, with 1 "other"', function () { @@ -634,11 +611,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_1, user_2 and one other joined"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent("user_1, user_2 and one other joined"); }); it('handles a summary length = 2, with many "others"', function () { @@ -651,11 +626,9 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("user_0, user_1 and 18 others joined"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent("user_0, user_1 and 18 others joined"); }); it("should not blindly group 3pid invites and treat them as distinct users instead", () => { @@ -703,10 +676,8 @@ describe("EventListSummary", function () { threshold: 3, }; - const wrapper = renderComponent(props); - const summary = wrapper.find(".mx_GenericEventListSummary_summary"); - const summaryText = summary.text(); - - expect(summaryText).toBe("n...@d... was invited 2 times, d...@w... was invited"); + const { container } = renderComponent(props); + const summary = container.querySelector(".mx_GenericEventListSummary_summary"); + expect(summary).toHaveTextContent("n...@d... was invited 2 times, d...@w... was invited"); }); }); diff --git a/test/components/views/elements/PollCreateDialog-test.tsx b/test/components/views/elements/PollCreateDialog-test.tsx index 2a0087b355..551aae01aa 100644 --- a/test/components/views/elements/PollCreateDialog-test.tsx +++ b/test/components/views/elements/PollCreateDialog-test.tsx @@ -15,15 +15,14 @@ limitations under the License. */ import React from "react"; -// eslint-disable-next-line deprecate/import -import { mount, ReactWrapper } from "enzyme"; +import { fireEvent, render, RenderResult } from "@testing-library/react"; import { Room } from "matrix-js-sdk/src/models/room"; import { M_POLL_KIND_DISCLOSED, M_POLL_KIND_UNDISCLOSED, M_POLL_START } from "matrix-js-sdk/src/@types/polls"; import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events"; -import { findById, getMockClientWithEventEmitter } from "../../../test-utils"; +import { getMockClientWithEventEmitter } from "../../../test-utils"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog"; import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; @@ -51,40 +50,41 @@ describe("PollCreateDialog", () => { }); it("renders a blank poll", () => { - const dialog = mount(, { - wrappingComponent: MatrixClientContext.Provider, - wrappingComponentProps: { value: mockClient }, - }); - expect(dialog.html()).toMatchSnapshot(); + const dialog = render( + + + , + ); + expect(dialog.asFragment()).toMatchSnapshot(); }); it("autofocuses the poll topic on mount", () => { - const dialog = mount(); - expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(true); + const dialog = render(); + expect(dialog.container.querySelector("#poll-topic-input")).toHaveFocus(); }); it("autofocuses the new poll option field after clicking add option button", () => { - const dialog = mount(); - expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(true); + const dialog = render(); + expect(dialog.container.querySelector("#poll-topic-input")).toHaveFocus(); - dialog.find("div.mx_PollCreateDialog_addOption").simulate("click"); + fireEvent.click(dialog.container.querySelector("div.mx_PollCreateDialog_addOption")!); - expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(false); - expect(findById(dialog, "pollcreate_option_1").at(0).props().autoFocus).toEqual(false); - expect(findById(dialog, "pollcreate_option_2").at(0).props().autoFocus).toEqual(true); + expect(dialog.container.querySelector("#poll-topic-input")).not.toHaveFocus(); + expect(dialog.container.querySelector("#pollcreate_option_1")).not.toHaveFocus(); + expect(dialog.container.querySelector("#pollcreate_option_2")).toHaveFocus(); }); it("renders a question and some options", () => { - const dialog = mount(); - expect(submitIsDisabled(dialog)).toBe(true); + const dialog = render(); + expectSubmitToBeDisabled(dialog, true); // When I set some values in the boxes changeValue(dialog, "Question or topic", "How many turnips is the optimal number?"); changeValue(dialog, "Option 1", "As many as my neighbour"); changeValue(dialog, "Option 2", "The question is meaningless"); - dialog.find("div.mx_PollCreateDialog_addOption").simulate("click"); + fireEvent.click(dialog.container.querySelector("div.mx_PollCreateDialog_addOption")!); changeValue(dialog, "Option 3", "Mu"); - expect(dialog.html()).toMatchSnapshot(); + expect(dialog.asFragment()).toMatchSnapshot(); }); it("renders info from a previous event", () => { @@ -92,23 +92,23 @@ describe("PollCreateDialog", () => { PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_DISCLOSED).serialize(), ); - const dialog = mount( + const dialog = render( , ); - expect(submitIsDisabled(dialog)).toBe(false); - expect(dialog.html()).toMatchSnapshot(); + expectSubmitToBeDisabled(dialog, false); + expect(dialog.asFragment()).toMatchSnapshot(); }); it("doesn't allow submitting until there are options", () => { - const dialog = mount(); - expect(submitIsDisabled(dialog)).toBe(true); + const dialog = render(); + expectSubmitToBeDisabled(dialog, true); }); it("does allow submitting when there are options and a question", () => { // Given a dialog with no info in (which I am unable to submit) - const dialog = mount(); - expect(submitIsDisabled(dialog)).toBe(true); + const dialog = render(); + expectSubmitToBeDisabled(dialog, true); // When I set some values in the boxes changeValue(dialog, "Question or topic", "Q"); @@ -116,28 +116,30 @@ describe("PollCreateDialog", () => { changeValue(dialog, "Option 2", "A2"); // Then I am able to submit - expect(submitIsDisabled(dialog)).toBe(false); + expectSubmitToBeDisabled(dialog, false); }); it("shows the open poll description at first", () => { - const dialog = mount(); - expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_DISCLOSED.name); - expect(dialog.find("p").text()).toEqual("Voters see results as soon as they have voted"); + const dialog = render(); + expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_DISCLOSED.name); + expect(dialog.container.querySelector("p")).toHaveTextContent("Voters see results as soon as they have voted"); }); it("shows the closed poll description if we choose it", () => { - const dialog = mount(); + const dialog = render(); changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name); - expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_UNDISCLOSED.name); - expect(dialog.find("p").text()).toEqual("Results are only revealed when you end the poll"); + expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_UNDISCLOSED.name); + expect(dialog.container.querySelector("p")).toHaveTextContent( + "Results are only revealed when you end the poll", + ); }); it("shows the open poll description if we choose it", () => { - const dialog = mount(); + const dialog = render(); changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name); changeKind(dialog, M_POLL_KIND_DISCLOSED.name); - expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_DISCLOSED.name); - expect(dialog.find("p").text()).toEqual("Voters see results as soon as they have voted"); + expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_DISCLOSED.name); + expect(dialog.container.querySelector("p")).toHaveTextContent("Voters see results as soon as they have voted"); }); it("shows the closed poll description when editing a closed poll", () => { @@ -146,32 +148,34 @@ describe("PollCreateDialog", () => { ); previousEvent.event.event_id = "$prevEventId"; - const dialog = mount( + const dialog = render( , ); - expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_UNDISCLOSED.name); - expect(dialog.find("p").text()).toEqual("Results are only revealed when you end the poll"); + expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_UNDISCLOSED.name); + expect(dialog.container.querySelector("p")).toHaveTextContent( + "Results are only revealed when you end the poll", + ); }); it("displays a spinner after submitting", () => { - const dialog = mount(); + const dialog = render(); changeValue(dialog, "Question or topic", "Q"); changeValue(dialog, "Option 1", "A1"); changeValue(dialog, "Option 2", "A2"); - expect(dialog.find("Spinner").length).toBe(0); + expect(dialog.container.querySelector(".mx_Spinner")).toBeFalsy(); - dialog.find("button").simulate("click"); - expect(dialog.find("Spinner").length).toBe(1); + fireEvent.click(dialog.container.querySelector("button")!); + expect(dialog.container.querySelector(".mx_Spinner")).toBeDefined(); }); it("sends a poll create event when submitted", () => { - const dialog = mount(); + const dialog = render(); changeValue(dialog, "Question or topic", "Q"); changeValue(dialog, "Option 1", "A1"); changeValue(dialog, "Option 2", "A2"); - dialog.find("button").simulate("click"); + fireEvent.click(dialog.container.querySelector("button")!); const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0]; expect(M_POLL_START.matches(eventType)).toBeTruthy(); expect(sentEventContent).toEqual({ @@ -206,14 +210,14 @@ describe("PollCreateDialog", () => { ); previousEvent.event.event_id = "$prevEventId"; - const dialog = mount( + const dialog = render( , ); changeValue(dialog, "Question or topic", "Poll Q updated"); changeValue(dialog, "Option 2", "Answer 2 updated"); changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name); - dialog.find("button").simulate("click"); + fireEvent.click(dialog.container.querySelector("button")!); const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0]; expect(M_POLL_START.matches(eventType)).toBeTruthy(); @@ -255,12 +259,12 @@ describe("PollCreateDialog", () => { ); previousEvent.event.event_id = "$prevEventId"; - const dialog = mount( + const dialog = render( , ); changeValue(dialog, "Question or topic", "Poll Q updated"); - dialog.find("button").simulate("click"); + fireEvent.click(dialog.container.querySelector("button")!); const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0]; expect(M_POLL_START.matches(eventType)).toBeTruthy(); @@ -273,14 +277,20 @@ function createRoom(): Room { return new Room("roomid", MatrixClientPeg.get(), "@name:example.com", {}); } -function changeValue(wrapper: ReactWrapper, labelText: string, value: string) { - wrapper.find(`input[label="${labelText}"]`).simulate("change", { target: { value: value } }); +function changeValue(wrapper: RenderResult, labelText: string, value: string) { + fireEvent.change(wrapper.container.querySelector(`input[label="${labelText}"]`)!, { + target: { value: value }, + }); } -function changeKind(wrapper: ReactWrapper, value: string) { - wrapper.find("select").simulate("change", { target: { value: value } }); +function changeKind(wrapper: RenderResult, value: string) { + fireEvent.change(wrapper.container.querySelector("select")!, { target: { value: value } }); } -function submitIsDisabled(wrapper: ReactWrapper) { - return wrapper.find('button[type="submit"]').prop("aria-disabled") === true; +function expectSubmitToBeDisabled(wrapper: RenderResult, disabled: boolean) { + if (disabled) { + expect(wrapper.container.querySelector('button[type="submit"]')).toHaveAttribute("aria-disabled", "true"); + } else { + expect(wrapper.container.querySelector('button[type="submit"]')).not.toHaveAttribute("aria-disabled", "true"); + } } diff --git a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap index 6fdf8bfb29..ef2306ccdc 100644 --- a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap @@ -1,7 +1,560 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PollCreateDialog renders a blank poll 1`] = `"
"`; +exports[`PollCreateDialog renders a blank poll 1`] = ` + +
+