Mobile registration optimizations and tests (#62)

* Mobile registration optimizations

- don't autocaptialize or autocorrect on username field
- show each password field in their own row
- improve position of tooltip on mobile so that it's visible

* Use optional prop rather than default prop.

* Redirect to welcome screen if mobile_registration is requested but not enabled in the config.

* autocorrect value should be "off"

* Add unit tests for mobile registration

* Fix test typo

* Fix typo

test/components/structures/MatrixChat-test.tsx

@@ -55,6 +55,7 @@ import { MatrixClientPeg as peg } from "../../../src/MatrixClientPeg";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
 import { ReleaseAnnouncementStore } from "../../../src/stores/ReleaseAnnouncementStore";
 import { DRAFT_LAST_CLEANUP_KEY } from "../../../src/DraftCleaner";
+import { UIFeature } from "../../../src/settings/UIFeature";
 
 jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
     completeAuthorizationCodeGrant: jest.fn(),
@@ -1462,4 +1463,42 @@ describe("<MatrixChat />", () => {
             });
         });
     });
+
+    describe("mobile registration", () => {
+        const getComponentAndWaitForReady = async (): Promise<RenderResult> => {
+            const renderResult = getComponent();
+            // wait for welcome page chrome render
+            await screen.findByText("powered by Matrix");
+
+            // go to mobile_register page
+            defaultDispatcher.dispatch({
+                action: "start_mobile_registration",
+            });
+
+            await flushPromises();
+
+            return renderResult;
+        };
+
+        const enabledMobileRegistration = (): void => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
+                if (settingName === "Registration.mobileRegistrationHelper") return true;
+                if (settingName === UIFeature.Registration) return true;
+            });
+        };
+
+        it("should render welcome screen if mobile registration is not enabled in settings", async () => {
+            await getComponentAndWaitForReady();
+
+            await screen.findByText("powered by Matrix");
+        });
+
+        it("should render mobile registration", async () => {
+            enabledMobileRegistration();
+
+            await getComponentAndWaitForReady();
+
+            expect(screen.getByTestId("mobile-register")).toBeInTheDocument();
+        });
+    });
 });

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

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
 import { createClient, MatrixClient, MatrixError, OidcClientConfig } from "matrix-js-sdk/src/matrix";
 import { mocked, MockedObject } from "jest-mock";
 import fetchMock from "fetch-mock-jest";
@@ -87,12 +87,23 @@ describe("Registration", function () {
     const defaultHsUrl = "https://matrix.org";
     const defaultIsUrl = "https://vector.im";
 
-    function getRawComponent(hsUrl = defaultHsUrl, isUrl = defaultIsUrl, authConfig?: OidcClientConfig) {
-        return <Registration {...defaultProps} serverConfig={mkServerConfig(hsUrl, isUrl, authConfig)} />;
+    function getRawComponent(
+        hsUrl = defaultHsUrl,
+        isUrl = defaultIsUrl,
+        authConfig?: OidcClientConfig,
+        mobileRegister?: boolean,
+    ) {
+        return (
+            <Registration
+                {...defaultProps}
+                serverConfig={mkServerConfig(hsUrl, isUrl, authConfig)}
+                mobileRegister={mobileRegister}
+            />
+        );
     }
 
-    function getComponent(hsUrl?: string, isUrl?: string, authConfig?: OidcClientConfig) {
-        return render(getRawComponent(hsUrl, isUrl, authConfig));
+    function getComponent(hsUrl?: string, isUrl?: string, authConfig?: OidcClientConfig, mobileRegister?: boolean) {
+        return render(getRawComponent(hsUrl, isUrl, authConfig, mobileRegister));
     }
 
     it("should show server picker", async function () {
@@ -208,5 +219,31 @@ describe("Registration", function () {
                 );
             });
         });
+
+        describe("when is mobile registeration", () => {
+            it("should not show server picker", async function () {
+                const { container } = getComponent(defaultHsUrl, defaultIsUrl, undefined, true);
+                expect(container.querySelector(".mx_ServerPicker")).toBeFalsy();
+            });
+
+            it("should show username field with autocaps disabled", async function () {
+                const { container } = getComponent(defaultHsUrl, defaultIsUrl, undefined, true);
+
+                await waitFor(() =>
+                    expect(container.querySelector("#mx_RegistrationForm_username")).toHaveAttribute(
+                        "autocapitalize",
+                        "none",
+                    ),
+                );
+            });
+
+            it("should show password and confirm password fields in separate rows", async function () {
+                const { container } = getComponent(defaultHsUrl, defaultIsUrl, undefined, true);
+
+                await waitFor(() => expect(container.querySelector("#mx_RegistrationForm_username")).toBeTruthy());
+                // when password and confirm password fields are in separate rows there should be 4 rather than 3
+                expect(container.querySelectorAll(".mx_AuthBody_fieldRow")).toHaveLength(4);
+            });
+        });
     });
 });