Prepare for repo merge

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

test/unit-tests/modules/AppModule-test.ts

@@ -0,0 +1,28 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { MockModule } from "./MockModule";
+import { AppModule } from "../../src/modules/AppModule";
+
+describe("AppModule", () => {
+    describe("constructor", () => {
+        it("should call the factory immediately", () => {
+            let module: MockModule | undefined;
+            const appModule = new AppModule((api) => {
+                if (module) {
+                    throw new Error("State machine error: Factory called twice");
+                }
+                module = new MockModule(api);
+                return module;
+            });
+            expect(appModule.module).toBeDefined();
+            expect(appModule.module).toBe(module);
+            expect(appModule.api).toBeDefined();
+        });
+    });
+});

test/unit-tests/modules/MockModule.ts

@@ -0,0 +1,130 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { RuntimeModule } from "@matrix-org/react-sdk-module-api/lib/RuntimeModule";
+import { ModuleApi } from "@matrix-org/react-sdk-module-api/lib/ModuleApi";
+import { AllExtensions } from "@matrix-org/react-sdk-module-api/lib/types/extensions";
+import { ProvideCryptoSetupExtensions } from "@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions";
+import { ProvideExperimentalExtensions } from "@matrix-org/react-sdk-module-api/lib/lifecycles/ExperimentalExtensions";
+
+import { ModuleRunner } from "../../src/modules/ModuleRunner";
+
+export class MockModule extends RuntimeModule {
+    public get apiInstance(): ModuleApi {
+        return this.moduleApi;
+    }
+
+    public constructor(moduleApi: ModuleApi) {
+        super(moduleApi);
+    }
+}
+
+/**
+ * Register a mock module
+ *
+ * @returns The registered module.
+ */
+export function registerMockModule(): MockModule {
+    let module: MockModule | undefined;
+    ModuleRunner.instance.registerModule((api) => {
+        if (module) {
+            throw new Error("State machine error: ModuleRunner created the module twice");
+        }
+        module = new MockModule(api);
+        return module;
+    });
+    if (!module) {
+        throw new Error("State machine error: ModuleRunner did not create module");
+    }
+    return module;
+}
+
+class MockModuleWithCryptoSetupExtension extends RuntimeModule {
+    public get apiInstance(): ModuleApi {
+        return this.moduleApi;
+    }
+
+    moduleName: string = MockModuleWithCryptoSetupExtension.name;
+
+    extensions: AllExtensions = {
+        cryptoSetup: {
+            SHOW_ENCRYPTION_SETUP_UI: true,
+            examineLoginResponse: jest.fn(),
+            persistCredentials: jest.fn(),
+            getSecretStorageKey: jest.fn().mockReturnValue(Uint8Array.from([0x11, 0x22, 0x99])),
+            createSecretStorageKey: jest.fn(),
+            catchAccessSecretStorageError: jest.fn(),
+            setupEncryptionNeeded: jest.fn(),
+            getDehydrationKeyCallback: jest.fn(),
+        } as ProvideCryptoSetupExtensions,
+    };
+
+    public constructor(moduleApi: ModuleApi) {
+        super(moduleApi);
+    }
+}
+
+class MockModuleWithExperimentalExtension extends RuntimeModule {
+    public get apiInstance(): ModuleApi {
+        return this.moduleApi;
+    }
+
+    moduleName: string = MockModuleWithExperimentalExtension.name;
+
+    extensions: AllExtensions = {
+        experimental: {
+            experimentalMethod: jest.fn().mockReturnValue(Uint8Array.from([0x22, 0x44, 0x88])),
+        } as ProvideExperimentalExtensions,
+    };
+
+    public constructor(moduleApi: ModuleApi) {
+        super(moduleApi);
+    }
+}
+
+/**
+ * Register a mock module which implements the cryptoSetup extension.
+ *
+ * @returns The registered module.
+ */
+export function registerMockModuleWithCryptoSetupExtension(): MockModuleWithCryptoSetupExtension {
+    let module: MockModuleWithCryptoSetupExtension | undefined;
+
+    ModuleRunner.instance.registerModule((api) => {
+        if (module) {
+            throw new Error("State machine error: ModuleRunner created the module twice");
+        }
+        module = new MockModuleWithCryptoSetupExtension(api);
+        return module;
+    });
+    if (!module) {
+        throw new Error("State machine error: ModuleRunner did not create module");
+    }
+    return module;
+}
+
+/**
+ * Register a mock module which implements the experimental extension.
+ *
+ * @returns The registered module.
+ */
+export function registerMockModuleWithExperimentalExtension(): MockModuleWithExperimentalExtension {
+    let module: MockModuleWithExperimentalExtension | undefined;
+
+    ModuleRunner.instance.registerModule((api) => {
+        if (module) {
+            throw new Error("State machine error: ModuleRunner created the module twice");
+        }
+        module = new MockModuleWithExperimentalExtension(api);
+        return module;
+    });
+    if (!module) {
+        throw new Error("State machine error: ModuleRunner did not create module");
+    }
+    return module;
+}

test/unit-tests/modules/ModuleComponents-test.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import { TextInputField } from "@matrix-org/react-sdk-module-api/lib/components/TextInputField";
+import { Spinner as ModuleSpinner } from "@matrix-org/react-sdk-module-api/lib/components/Spinner";
+
+import "../../src/modules/ModuleRunner";
+
+describe("Module Components", () => {
+    // Note: we're not testing to see if there's components that are missing a renderFactory()
+    // but rather that the renderFactory() for components we do know about is actually defined
+    // and working.
+    //
+    // We do this by deliberately not importing the ModuleComponents file itself, relying on the
+    // ModuleRunner import to do its job (as per documentation in ModuleComponents).
+
+    it("should override the factory for a TextInputField", () => {
+        const { asFragment } = render(<TextInputField label="My Label" value="My Value" onChange={() => {}} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should override the factory for a ModuleSpinner", () => {
+        const { asFragment } = render(<ModuleSpinner />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/modules/ModuleRunner-test.ts

@@ -0,0 +1,93 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { RoomPreviewOpts, RoomViewLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
+
+import {
+    MockModule,
+    registerMockModule,
+    registerMockModuleWithCryptoSetupExtension,
+    registerMockModuleWithExperimentalExtension,
+} from "./MockModule";
+import { ModuleRunner } from "../../src/modules/ModuleRunner";
+
+describe("ModuleRunner", () => {
+    afterEach(() => {
+        ModuleRunner.instance.reset();
+    });
+
+    // Translations implicitly tested by ProxiedModuleApi integration tests.
+
+    describe("invoke", () => {
+        it("should invoke to every registered module", async () => {
+            const module1 = registerMockModule();
+            const module2 = registerMockModule();
+
+            const wrapEmit = (module: MockModule) =>
+                new Promise((resolve) => {
+                    module.on(RoomViewLifecycle.PreviewRoomNotLoggedIn, (val1, val2) => {
+                        resolve([val1, val2]);
+                    });
+                });
+            const promises = Promise.all([wrapEmit(module1), wrapEmit(module2)]);
+
+            const roomId = "!room:example.org";
+            const opts: RoomPreviewOpts = { canJoin: false };
+            ModuleRunner.instance.invoke(RoomViewLifecycle.PreviewRoomNotLoggedIn, opts, roomId);
+            const results = await promises;
+            expect(results).toEqual([
+                [opts, roomId], // module 1
+                [opts, roomId], // module 2
+            ]);
+        });
+    });
+
+    describe("extensions", () => {
+        it("should return default values when no crypto-setup extensions are provided by a registered module", async () => {
+            registerMockModule();
+            const result = ModuleRunner.instance.extensions.cryptoSetup.getSecretStorageKey();
+            expect(result).toBeNull();
+        });
+
+        it("should return default values when no experimental extensions are provided by a registered module", async () => {
+            registerMockModule();
+            const result = ModuleRunner.instance.extensions?.experimental.experimentalMethod();
+            expect(result).toBeNull();
+        });
+
+        it("should return value from crypto-setup-extensions provided by a registered module", async () => {
+            registerMockModuleWithCryptoSetupExtension();
+            const result = ModuleRunner.instance.extensions.cryptoSetup.getSecretStorageKey();
+            expect(result).toEqual(Uint8Array.from([0x11, 0x22, 0x99]));
+        });
+
+        it("should return value from experimental-extensions provided by a registered module", async () => {
+            registerMockModuleWithExperimentalExtension();
+            const result = ModuleRunner.instance.extensions.experimental.experimentalMethod();
+            expect(result).toEqual(Uint8Array.from([0x22, 0x44, 0x88]));
+        });
+
+        it("must not allow multiple modules to provide cryptoSetup extension", async () => {
+            registerMockModuleWithCryptoSetupExtension();
+            const t = () => registerMockModuleWithCryptoSetupExtension();
+            expect(t).toThrow(Error);
+            expect(t).toThrow(
+                "adding cryptoSetup extension implementation from module MockModuleWithCryptoSetupExtension but an implementation was already provided",
+            );
+        });
+
+        it("must not allow multiple modules to provide experimental extension", async () => {
+            registerMockModuleWithExperimentalExtension();
+            const t = () => registerMockModuleWithExperimentalExtension();
+            expect(t).toThrow(Error);
+            expect(t).toThrow(
+                "adding experimental extension implementation from module MockModuleWithExperimentalExtension but an implementation was already provided",
+            );
+        });
+    });
+});

test/unit-tests/modules/ProxiedModuleApi-test.tsx

@@ -0,0 +1,364 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { TranslationStringsObject } from "@matrix-org/react-sdk-module-api/lib/types/translations";
+import { AccountAuthInfo } from "@matrix-org/react-sdk-module-api/lib/types/AccountAuthInfo";
+import { DialogContent, DialogProps } from "@matrix-org/react-sdk-module-api/lib/components/DialogContent";
+import { screen, within } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { Mocked } from "jest-mock";
+
+import { ProxiedModuleApi } from "../../src/modules/ProxiedModuleApi";
+import { getMockClientWithEventEmitter, mkRoom, stubClient } from "../test-utils";
+import { setLanguage } from "../../src/languageHandler";
+import { ModuleRunner } from "../../src/modules/ModuleRunner";
+import { registerMockModule } from "./MockModule";
+import defaultDispatcher from "../../src/dispatcher/dispatcher";
+import { Action } from "../../src/dispatcher/actions";
+import WidgetStore, { IApp } from "../../src/stores/WidgetStore";
+import { Container, WidgetLayoutStore } from "../../src/stores/widgets/WidgetLayoutStore";
+
+describe("ProxiedApiModule", () => {
+    afterEach(() => {
+        ModuleRunner.instance.reset();
+    });
+
+    // Note: Remainder is implicitly tested from end-to-end tests of modules.
+
+    describe("translations", () => {
+        it("should cache translations", () => {
+            const api = new ProxiedModuleApi();
+            expect(api.translations).toBeFalsy();
+
+            const translations: TranslationStringsObject = {
+                ["custom string"]: {
+                    en: "custom string",
+                    fr: "custom french string",
+                },
+            };
+            api.registerTranslations(translations);
+            expect(api.translations).toBe(translations);
+        });
+
+        it("should overwriteAccountAuth", async () => {
+            const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch");
+
+            const api = new ProxiedModuleApi();
+            const accountInfo = {} as unknown as AccountAuthInfo;
+            const promise = api.overwriteAccountAuth(accountInfo);
+
+            expect(dispatchSpy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    action: Action.OverwriteLogin,
+                    credentials: {
+                        ...accountInfo,
+                        guest: false,
+                    },
+                }),
+                expect.anything(),
+            );
+
+            defaultDispatcher.fire(Action.OnLoggedIn);
+
+            await expect(promise).resolves.toBeUndefined();
+        });
+
+        describe("integration", () => {
+            it("should translate strings using translation system", async () => {
+                // Test setup
+                stubClient();
+
+                // Set up a module to pull translations through
+                const module = registerMockModule();
+                const en = "custom string";
+                const de = "custom german string";
+                const enVars = "custom variable %(var)s";
+                const varVal = "string";
+                const deVars = "custom german variable %(var)s";
+                const deFull = `custom german variable ${varVal}`;
+                expect(module.apiInstance).toBeInstanceOf(ProxiedModuleApi);
+                module.apiInstance.registerTranslations({
+                    [en]: {
+                        en: en,
+                        de: de,
+                    },
+                    [enVars]: {
+                        en: enVars,
+                        de: deVars,
+                    },
+                });
+                await setLanguage("de"); // calls `registerCustomTranslations()` for us
+
+                // See if we can pull the German string out
+                expect(module.apiInstance.translateString(en)).toEqual(de);
+                expect(module.apiInstance.translateString(enVars, { var: varVal })).toEqual(deFull);
+            });
+
+            afterEach(async () => {
+                await setLanguage("en"); // reset the language
+            });
+        });
+    });
+
+    describe("openDialog", () => {
+        it("should open dialog with a custom title and default options", async () => {
+            class MyDialogContent extends DialogContent {
+                public constructor(props: DialogProps) {
+                    super(props);
+                }
+                trySubmit = async () => ({ result: true });
+                render = () => <p>This is my example content.</p>;
+            }
+
+            const api = new ProxiedModuleApi();
+
+            const resultPromise = api.openDialog<{ result: boolean }, DialogProps, MyDialogContent>(
+                "My Dialog Title",
+                (props, ref) => <MyDialogContent ref={ref} {...props} />,
+            );
+
+            const dialog = await screen.findByRole("dialog");
+
+            expect(within(dialog).getByRole("heading", { name: "My Dialog Title" })).toBeInTheDocument();
+            expect(within(dialog).getByText("This is my example content.")).toBeInTheDocument();
+            expect(within(dialog).getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+
+            await userEvent.click(within(dialog).getByRole("button", { name: "OK" }));
+
+            expect(await resultPromise).toEqual({
+                didOkOrSubmit: true,
+                model: { result: true },
+            });
+
+            expect(dialog).not.toBeInTheDocument();
+        });
+
+        it("should open dialog with custom options", async () => {
+            class MyDialogContent extends DialogContent {
+                public constructor(props: DialogProps) {
+                    super(props);
+                }
+                trySubmit = async () => ({ result: true });
+                render = () => <p>This is my example content.</p>;
+            }
+
+            const api = new ProxiedModuleApi();
+
+            const resultPromise = api.openDialog<{ result: boolean }, DialogProps, MyDialogContent>(
+                {
+                    title: "My Custom Dialog Title",
+                    actionLabel: "Submit it",
+                    cancelLabel: "Cancel it",
+                    canSubmit: false,
+                },
+                (props, ref) => <MyDialogContent ref={ref} {...props} />,
+            );
+
+            const dialog = await screen.findByRole("dialog");
+
+            expect(within(dialog).getByRole("heading", { name: "My Custom Dialog Title" })).toBeInTheDocument();
+            expect(within(dialog).getByText("This is my example content.")).toBeInTheDocument();
+            expect(within(dialog).getByRole("button", { name: "Submit it" })).toBeDisabled();
+
+            await userEvent.click(within(dialog).getByRole("button", { name: "Cancel it" }));
+
+            expect(await resultPromise).toEqual({ didOkOrSubmit: false });
+
+            expect(dialog).not.toBeInTheDocument();
+        });
+
+        it("should update the options from the opened dialog", async () => {
+            class MyDialogContent extends DialogContent {
+                public constructor(props: DialogProps) {
+                    super(props);
+                }
+                trySubmit = async () => ({ result: true });
+                render = () => {
+                    const onClick = () => {
+                        this.props.setOptions({
+                            title: "My New Title",
+                            actionLabel: "New Action",
+                            cancelLabel: "New Cancel",
+                        });
+
+                        // check if delta updates work
+                        this.props.setOptions({
+                            canSubmit: false,
+                        });
+                    };
+
+                    return (
+                        <button type="button" onClick={onClick}>
+                            Change the settings!
+                        </button>
+                    );
+                };
+            }
+
+            const api = new ProxiedModuleApi();
+
+            const resultPromise = api.openDialog<{ result: boolean }, DialogProps, MyDialogContent>(
+                "My Dialog Title",
+                (props, ref) => <MyDialogContent ref={ref} {...props} />,
+            );
+
+            const dialog = await screen.findByRole("dialog");
+
+            expect(within(dialog).getByRole("heading", { name: "My Dialog Title" })).toBeInTheDocument();
+            expect(within(dialog).getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+            expect(within(dialog).getByRole("button", { name: "OK" })).toBeEnabled();
+
+            await userEvent.click(within(dialog).getByRole("button", { name: "Change the settings!" }));
+
+            expect(within(dialog).getByRole("heading", { name: "My New Title" })).toBeInTheDocument();
+            expect(within(dialog).getByRole("button", { name: "New Action" })).toBeDisabled();
+
+            await userEvent.click(within(dialog).getByRole("button", { name: "New Cancel" }));
+
+            expect(await resultPromise).toEqual({
+                didOkOrSubmit: false,
+                model: undefined,
+            });
+
+            expect(dialog).not.toBeInTheDocument();
+        });
+
+        it("should cancel the dialog from within the dialog", async () => {
+            class MyDialogContent extends DialogContent {
+                public constructor(props: DialogProps) {
+                    super(props);
+                }
+                trySubmit = async () => ({ result: true });
+                render = () => (
+                    <button type="button" onClick={this.props.cancel}>
+                        No need for action
+                    </button>
+                );
+            }
+
+            const api = new ProxiedModuleApi();
+
+            const resultPromise = api.openDialog<{ result: boolean }, DialogProps, MyDialogContent>(
+                "My Dialog Title",
+                (props, ref) => <MyDialogContent ref={ref} {...props} />,
+            );
+
+            const dialog = await screen.findByRole("dialog");
+
+            await userEvent.click(within(dialog).getByRole("button", { name: "No need for action" }));
+
+            expect(await resultPromise).toEqual({
+                didOkOrSubmit: false,
+                model: undefined,
+            });
+
+            expect(dialog).not.toBeInTheDocument();
+        });
+    });
+
+    describe("getApps", () => {
+        it("should return apps from the widget store", () => {
+            const api = new ProxiedModuleApi();
+            const app = {} as unknown as IApp;
+            const apps: IApp[] = [app];
+
+            jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue(apps);
+            expect(api.getApps("!room:example.com")).toEqual(apps);
+        });
+    });
+
+    describe("getAppAvatarUrl", () => {
+        const app = {} as unknown as IApp;
+        const avatarUrl = "https://example.com/avatar.png";
+
+        let api: ProxiedModuleApi;
+        let client: Mocked<MatrixClient>;
+
+        beforeEach(() => {
+            api = new ProxiedModuleApi();
+            client = getMockClientWithEventEmitter({ mxcUrlToHttp: jest.fn().mockReturnValue(avatarUrl) });
+        });
+
+        it("should return null if the app has no avatar URL", () => {
+            expect(api.getAppAvatarUrl(app)).toBeNull();
+        });
+
+        it("should return the app avatar URL", () => {
+            expect(api.getAppAvatarUrl({ ...app, avatar_url: avatarUrl })).toBe(avatarUrl);
+        });
+
+        it("should support optional thumbnail params", () => {
+            api.getAppAvatarUrl({ ...app, avatar_url: avatarUrl }, 1, 2, "3");
+            // eslint-disable-next-line no-restricted-properties
+            expect(client.mxcUrlToHttp).toHaveBeenCalledWith(avatarUrl, 1, 2, "3");
+        });
+    });
+
+    describe("isAppInContainer", () => {
+        const app = {} as unknown as IApp;
+        const roomId = "!room:example.com";
+
+        let api: ProxiedModuleApi;
+        let client: MatrixClient;
+
+        beforeEach(() => {
+            api = new ProxiedModuleApi();
+            client = stubClient();
+
+            jest.spyOn(WidgetLayoutStore.instance, "isInContainer");
+        });
+
+        it("should return false if there is no room", () => {
+            client.getRoom = jest.fn().mockReturnValue(null);
+
+            expect(api.isAppInContainer(app, Container.Top, roomId)).toBe(false);
+            expect(WidgetLayoutStore.instance.isInContainer).not.toHaveBeenCalled();
+        });
+
+        it("should return false if the app is not in the container", () => {
+            jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(false);
+            expect(api.isAppInContainer(app, Container.Top, roomId)).toBe(false);
+        });
+
+        it("should return true if the app is in the container", () => {
+            jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(true);
+            expect(api.isAppInContainer(app, Container.Top, roomId)).toBe(true);
+        });
+    });
+
+    describe("moveAppToContainer", () => {
+        const app = {} as unknown as IApp;
+        const roomId = "!room:example.com";
+
+        let api: ProxiedModuleApi;
+        let client: MatrixClient;
+
+        beforeEach(() => {
+            api = new ProxiedModuleApi();
+            client = stubClient();
+
+            jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
+        });
+
+        it("should not move if there is no room", () => {
+            client.getRoom = jest.fn().mockReturnValue(null);
+            api.moveAppToContainer(app, Container.Top, roomId);
+            expect(WidgetLayoutStore.instance.moveToContainer).not.toHaveBeenCalled();
+        });
+
+        it("should move if there is a room", () => {
+            const room = mkRoom(client, roomId);
+            client.getRoom = jest.fn().mockReturnValue(room);
+
+            api.moveAppToContainer(app, Container.Top, roomId);
+            expect(WidgetLayoutStore.instance.moveToContainer).toHaveBeenCalledWith(room, app, Container.Top);
+        });
+    });
+});

test/unit-tests/modules/__snapshots__/ModuleComponents-test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Module Components should override the factory for a ModuleSpinner 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_Spinner"
+  >
+    <div
+      aria-label="Loading…"
+      class="mx_Spinner_icon"
+      data-testid="spinner"
+      role="progressbar"
+      style="width: 32px; height: 32px;"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Module Components should override the factory for a TextInputField 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_Field mx_Field_input"
+  >
+    <input
+      autocomplete="off"
+      id="mx_Field_1"
+      label="My Label"
+      placeholder="My Label"
+      type="text"
+      value="My Value"
+    />
+    <label
+      for="mx_Field_1"
+    >
+      My Label
+    </label>
+  </div>
+</DocumentFragment>
+`;