Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/languageHandler.tsx

@@ -52,6 +52,13 @@ counterpart.setSeparator(KEY_SEPARATOR);
 const FALLBACK_LOCALE = "en";
 counterpart.setFallbackLocale(FALLBACK_LOCALE);
 
+export interface ErrorOptions {
+    // Because we're mixing the substitution variables and `cause` into the same object
+    // below, we want them to always explicitly say whether there is an underlying error
+    // or not to avoid typos of "cause" slipping through unnoticed.
+    cause: unknown | undefined;
+}
+
 /**
  * Used to rethrow an error with a user-friendly translatable message while maintaining
  * access to that original underlying error. Downstream consumers can display the
@@ -71,11 +78,15 @@ counterpart.setFallbackLocale(FALLBACK_LOCALE);
 export class UserFriendlyError extends Error {
     public readonly translatedMessage: string;
 
-    public constructor(message: TranslationKey, cause?: Error | unknown, substitutionVariables?: IVariables) {
+    public constructor(
+        message: TranslationKey,
+        substitutionVariablesAndCause?: Omit<IVariables, keyof ErrorOptions> | ErrorOptions,
+    ) {
+        // Prevent "Could not find /%\(cause\)s/g in x" logs to the console by removing it from the list
+        const { cause, ...substitutionVariables } = substitutionVariablesAndCause ?? {};
         const errorOptions = { cause };
 
-        // Create the error with the English version of the message that we want to show
+        // Create the error with the English version of the message that we want to show up in the logs
-        // up in the logs
         const englishTranslatedMessage = _t(message, { ...substitutionVariables, locale: "en" });
         super(englishTranslatedMessage, errorOptions);
 

test/components/structures/RoomView-test.tsx

@@ -144,6 +144,9 @@ describe("RoomView", () => {
                     wrappedRef={ref as any}
                 />
             </SDKContext.Provider>,
+            {
+                legacyRoot: true,
+            },
         );
         await flushPromises();
         return roomView;
@@ -181,6 +184,9 @@ describe("RoomView", () => {
                     onRegistered={jest.fn()}
                 />
             </SDKContext.Provider>,
+            {
+                legacyRoot: true,
+            },
         );
         await flushPromises();
         return roomView;

test/components/structures/auth/Login-test.tsx

@@ -98,7 +98,7 @@ describe("Login", function () {
     }
 
     function getComponent(hsUrl?: string, isUrl?: string, delegatedAuthentication?: OidcClientConfig) {
-        return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication));
+        return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication), { legacyRoot: true });
     }
 
     it("should show form with change server link", async () => {
@@ -359,7 +359,9 @@ describe("Login", function () {
             unstable_features: {},
             versions: ["v1.1"],
         });
-        const { rerender } = render(getRawComponent());
+        const { rerender } = render(getRawComponent(), {
+            legacyRoot: true,
+        });
         await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading…"));
 
         // error displayed

test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap

@@ -73,7 +73,6 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
       </details>
     </div>
     <div
-      aria-describedby=":rm:"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"

test/components/views/rooms/MemberList-test.tsx

@@ -441,11 +441,11 @@ describe("MemberList", () => {
                 jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
                 jest.spyOn(room, "canInvite").mockReturnValue(true);
 
-                const { getByRole, getAllByRole } = renderComponent();
+                const { getByRole } = renderComponent();
                 await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
 
                 await waitFor(() =>
-                    expect(getAllByRole("button", { name: "Invite to this room" })).not.toHaveAttribute(
+                    expect(getByRole("button", { name: "Invite to this room" })).not.toHaveAttribute(
                         "aria-disabled",
                         "true",
                     ),

test/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx

@@ -47,6 +47,7 @@ describe("<SecurityRoomSettingsTab />", () => {
             wrapper: ({ children }) => (
                 <MatrixClientContext.Provider value={client}>{children}</MatrixClientContext.Provider>
             ),
+            legacyRoot: true,
         });
 
     const setRoomStateEvents = (