OIDC: unit test ServerPickerDialog (#11019)

* add aria-label to default homeserver checkbox

* test ServerPickerDialog

* remove debug

* strict fixes

* use testid instead of aria-label

* i18n

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -202,6 +202,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                         value="true"
                         checked={this.state.defaultChosen}
                         onChange={this.onDefaultChosen}
+                        data-testid="defaultHomeserver"
                     >
                         {defaultServerName}
                     </StyledRadioButton>

test/components/views/dialogs/ServerPickerDialog-test.tsx

@@ -0,0 +1,241 @@
+/*
+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 { fireEvent, render, screen } from "@testing-library/react";
+import fetchMock from "fetch-mock-jest";
+
+import ServerPickerDialog from "../../../../src/components/views/dialogs/ServerPickerDialog";
+import SdkConfig from "../../../../src/SdkConfig";
+import { flushPromises } from "../../../test-utils";
+import { ValidatedServerConfig } from "../../../../src/utils/ValidatedServerConfig";
+
+// Fake random strings to give a predictable snapshot for IDs
+jest.mock("matrix-js-sdk/src/randomstring", () => ({
+    randomString: () => "abdefghi",
+}));
+
+describe("<ServerPickerDialog />", () => {
+    const defaultServerConfig = {
+        hsUrl: "https://matrix.org",
+        hsName: "matrix.org",
+        hsNameIsDifferent: true,
+        isUrl: "https://is.org",
+        isDefault: true,
+        isNameResolvable: true,
+        warning: "",
+    };
+    const wkHsUrl = "https://hsbaseurlfrom.wk";
+    const wkIsUrl = "https://isbaseurlfrom.wk";
+    const validWellKnown = {
+        "m.homeserver": {
+            base_url: wkHsUrl,
+        },
+        "m.identity_server": {
+            base_url: wkIsUrl,
+        },
+    };
+    const defaultProps = {
+        serverConfig: defaultServerConfig,
+        onFinished: jest.fn(),
+    };
+    const getComponent = (
+        props: Partial<{
+            onFinished: any;
+            serverConfig: ValidatedServerConfig;
+        }> = {},
+    ) => render(<ServerPickerDialog {...defaultProps} {...props} />);
+
+    beforeEach(() => {
+        SdkConfig.add({
+            validated_server_config: defaultServerConfig,
+        });
+
+        fetchMock.resetHistory();
+    });
+
+    it("should render dialog", () => {
+        const { container } = getComponent();
+        expect(container).toMatchSnapshot();
+    });
+
+    // checkbox and text input have the same aria-label
+    const getOtherHomeserverCheckBox = () =>
+        screen.getAllByLabelText("Other homeserver").find((node) => node.getAttribute("type") === "radio")!;
+    const getOtherHomeserverInput = () =>
+        screen.getAllByLabelText("Other homeserver").find((node) => node.getAttribute("type") === "text")!;
+
+    describe("when default server config is selected", () => {
+        it("should select other homeserver field on open", () => {
+            getComponent();
+            expect(getOtherHomeserverCheckBox()).toBeChecked();
+            // empty field
+            expect(getOtherHomeserverInput()).toHaveDisplayValue("");
+        });
+
+        it("should display an error when trying to continue with an empty homeserver field", async () => {
+            const onFinished = jest.fn();
+            const { container } = getComponent({ onFinished });
+
+            fireEvent.click(screen.getByText("Continue"));
+
+            await flushPromises();
+
+            // error on field
+            expect(container.querySelector(".mx_ServerPickerDialog_otherHomeserver.mx_Field_invalid")).toBeTruthy();
+
+            // didn't close dialog
+            expect(onFinished).not.toHaveBeenCalled();
+        });
+
+        it("should close when selecting default homeserver and clicking continue", async () => {
+            const onFinished = jest.fn();
+            getComponent({ onFinished });
+
+            fireEvent.click(screen.getByTestId("defaultHomeserver"));
+            expect(screen.getByTestId("defaultHomeserver")).toBeChecked();
+
+            fireEvent.click(screen.getByText("Continue"));
+
+            // serverpicker still validates the 'other homeserver' field on submit
+            // when default is chosen
+            // so this throws a lot of errors into the console
+            // and is asynchronous while waiting for validation
+            await flushPromises();
+
+            // closed dialog with default server
+            expect(onFinished).toHaveBeenCalledWith(defaultServerConfig);
+        });
+
+        it("should submit successfully with a valid custom homeserver", async () => {
+            const homeserver = "https://myhomeserver.site";
+            fetchMock.get(`${homeserver}/_matrix/client/versions`, {
+                unstable_features: {},
+                versions: [],
+            });
+            const onFinished = jest.fn();
+            getComponent({ onFinished });
+
+            fireEvent.change(getOtherHomeserverInput(), { target: { value: homeserver } });
+            expect(getOtherHomeserverInput()).toHaveDisplayValue(homeserver);
+
+            fireEvent.click(screen.getByText("Continue"));
+
+            // validation on submit is async
+            await flushPromises();
+
+            // closed dialog with validated custom server
+            expect(onFinished).toHaveBeenCalledWith({
+                hsName: "myhomeserver.site",
+                hsUrl: homeserver,
+                hsNameIsDifferent: false,
+                warning: null,
+                isDefault: false,
+                isNameResolvable: false,
+                isUrl: defaultServerConfig.isUrl,
+            });
+        });
+
+        describe("validates custom homeserver", () => {
+            it("should lookup .well-known for homeserver without protocol", async () => {
+                const homeserver = "myhomeserver1.site";
+                const wellKnownUrl = `https://${homeserver}/.well-known/matrix/client`;
+                fetchMock.get(wellKnownUrl, {});
+                getComponent();
+
+                fireEvent.change(getOtherHomeserverInput(), { target: { value: homeserver } });
+                expect(getOtherHomeserverInput()).toHaveDisplayValue(homeserver);
+                // trigger validation
+                fireEvent.blur(getOtherHomeserverInput());
+
+                // validation on submit is async
+                await flushPromises();
+
+                expect(fetchMock).toHaveFetched(wellKnownUrl);
+            });
+
+            it("should submit using validated config from a valid .well-known", async () => {
+                const homeserver = "myhomeserver2.site";
+                const wellKnownUrl = `https://${homeserver}/.well-known/matrix/client`;
+
+                // urls from homeserver well-known
+                const versionsUrl = `${wkHsUrl}/_matrix/client/versions`;
+                const isWellKnownUrl = `${wkIsUrl}/_matrix/identity/v2`;
+
+                fetchMock.getOnce(wellKnownUrl, validWellKnown);
+                fetchMock.getOnce(versionsUrl, {
+                    versions: [],
+                });
+                fetchMock.getOnce(isWellKnownUrl, {});
+                const onFinished = jest.fn();
+                getComponent({ onFinished });
+
+                fireEvent.change(getOtherHomeserverInput(), { target: { value: homeserver } });
+                fireEvent.click(screen.getByText("Continue"));
+
+                // validation on submit is async
+                await flushPromises();
+
+                expect(fetchMock).toHaveFetched(wellKnownUrl);
+                // fetched using urls from .well-known
+                expect(fetchMock).toHaveFetched(versionsUrl);
+                expect(fetchMock).toHaveFetched(isWellKnownUrl);
+
+                expect(onFinished).toHaveBeenCalledWith({
+                    hsName: homeserver,
+                    hsUrl: wkHsUrl,
+                    hsNameIsDifferent: true,
+                    warning: null,
+                    isDefault: false,
+                    isNameResolvable: true,
+                    isUrl: wkIsUrl,
+                });
+
+                await flushPromises();
+            });
+
+            it("should fall back to static config when well-known lookup fails", async () => {
+                const homeserver = "myhomeserver3.site";
+                // this server returns 404 for well-known
+                const wellKnownUrl = `https://${homeserver}/.well-known/matrix/client`;
+                fetchMock.get(wellKnownUrl, { status: 404 });
+                // but is otherwise live (happy versions response)
+                fetchMock.get(`https://${homeserver}/_matrix/client/versions`, { versions: ["1"] });
+                const onFinished = jest.fn();
+                getComponent({ onFinished });
+
+                fireEvent.change(getOtherHomeserverInput(), { target: { value: homeserver } });
+                fireEvent.click(screen.getByText("Continue"));
+
+                // validation on submit is async
+                await flushPromises();
+
+                expect(fetchMock).toHaveFetched(wellKnownUrl);
+                expect(fetchMock).toHaveFetched(`https://${homeserver}/_matrix/client/versions`);
+
+                expect(onFinished).toHaveBeenCalledWith({
+                    hsName: homeserver,
+                    hsUrl: "https://" + homeserver,
+                    hsNameIsDifferent: false,
+                    warning: null,
+                    isDefault: false,
+                    isNameResolvable: false,
+                    isUrl: defaultServerConfig.isUrl,
+                });
+            });
+        });
+    });
+});

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

@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ServerPickerDialog /> should render dialog 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_ServerPickerDialog"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ServerPickerDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    >
+      <h2
+        class="mx_Heading_h2 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Sign into your homeserver
+      </h2>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_Dialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <form
+      class="mx_Dialog_content"
+      id="mx_ServerPickerDialog"
+    >
+      <p>
+        We call the places where you can host your account 'homeservers'.
+         
+        Matrix.org is the biggest public homeserver in the world, so it's a good place for many.
+      </p>
+      <label
+        class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+      >
+        <input
+          checked=""
+          data-testid="defaultHomeserver"
+          name="defaultChosen"
+          type="radio"
+          value="true"
+        />
+        <div>
+          <div />
+        </div>
+        <div
+          class="mx_StyledRadioButton_content"
+        >
+          <div
+            aria-describedby="mx_TooltipTarget_abdefghi"
+            class="mx_TextWithTooltip_target mx_Login_underlinedServerName"
+            tabindex="0"
+          >
+            matrix.org
+          </div>
+        </div>
+        <div
+          class="mx_StyledRadioButton_spacer"
+        />
+      </label>
+      <div
+        class="mx_StyledRadioButton mx_ServerPickerDialog_otherHomeserverRadio mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+      >
+        <label
+          class="mx_StyledRadioButton_innerLabel"
+        >
+          <input
+            aria-label="Other homeserver"
+            name="defaultChosen"
+            type="radio"
+            value="false"
+          />
+          <div>
+            <div />
+          </div>
+        </label>
+        <div
+          class="mx_StyledRadioButton_content"
+        >
+          <div
+            class="mx_Field mx_Field_input mx_ServerPickerDialog_otherHomeserver"
+          >
+            <input
+              id="mx_homeserverInput"
+              label="Other homeserver"
+              placeholder="Other homeserver"
+              type="text"
+              value=""
+            />
+            <label
+              for="mx_homeserverInput"
+            >
+              Other homeserver
+            </label>
+          </div>
+        </div>
+        <div
+          class="mx_StyledRadioButton_spacer"
+        />
+      </div>
+      <p>
+        Use your preferred Matrix homeserver if you have one, or host your own.
+      </p>
+      <div
+        class="mx_AccessibleButton mx_ServerPickerDialog_continue mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        role="button"
+        tabindex="0"
+      >
+        Continue
+      </div>
+      <h2>
+        Learn more
+      </h2>
+      <a
+        class="mx_ExternalLink"
+        href="https://matrix.org/faq/#what-is-a-homeserver%3F"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        About homeservers
+        <i
+          class="mx_ExternalLink_icon"
+        />
+      </a>
+    </form>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</div>
+`;