Iterate tests

res/css/views/elements/_ServerPicker.scss

@@ -65,7 +65,7 @@ limitations under the License.
         margin-bottom: 16px;
     }
 
-    .mx_AccessibleButton_kind_link {
+    .mx_ServerPicker_change {
         padding: 0;
         font-size: inherit;
         grid-column: 2;

src/components/structures/auth/Registration.tsx

@@ -437,19 +437,6 @@ export default class Registration extends React.Component<IProps, IState> {
         }
     };
 
-    private renderServerComponent() {
-        if (SdkConfig.get()['disable_custom_urls']) {
-            return null;
-        }
-
-        return <ServerPicker
-            title={_t("Host account on")}
-            dialogTitle={_t("Decide where your account is hosted")}
-            serverConfig={this.props.serverConfig}
-            onServerConfigChange={this.state.doingUIAuth ? undefined : this.props.onServerConfigChange}
-        />;
-    }
-
     private renderRegisterComponent() {
         const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
         const Spinner = sdk.getComponent('elements.Spinner');
@@ -474,16 +461,16 @@ export default class Registration extends React.Component<IProps, IState> {
                 <Spinner />
             </div>;
         } else if (this.state.flows.length) {
+            let ssoSection;
+            if (this.state.ssoFlow) {
                 let continueWithSection;
                 const providers = this.state.ssoFlow["org.matrix.msc2858.identity_providers"]
-                || this.state.ssoFlow.identity_providers || [];
+                    || this.state.ssoFlow["identity_providers"] || [];
                 // when there is only a single (or 0) providers we show a wide button with `Continue with X` text
                 if (providers.length > 1) {
                     continueWithSection = <h3 className="mx_AuthBody_centered">{_t("Continue with")}</h3>;
                 }
 
-            let ssoSection;
-            if (this.state.ssoFlow) {
                 ssoSection = <React.Fragment>
                     { continueWithSection }
                     <SSOButtons
@@ -596,7 +583,12 @@ export default class Registration extends React.Component<IProps, IState> {
                 <h2>{ _t('Create account') }</h2>
                 { errorText }
                 { serverDeadSection }
-                { this.renderServerComponent() }
+                <ServerPicker
+                    title={_t("Host account on")}
+                    dialogTitle={_t("Decide where your account is hosted")}
+                    serverConfig={this.props.serverConfig}
+                    onServerConfigChange={this.state.doingUIAuth ? undefined : this.props.onServerConfigChange}
+                />
                 { this.renderRegisterComponent() }
                 { goBack }
                 { signIn }

src/components/views/elements/ServerPicker.tsx

@@ -63,7 +63,7 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
                 }
             });
         };
-        editBtn = <AccessibleButton kind="link" onClick={onClick}>
+        editBtn = <AccessibleButton className="mx_ServerPicker_change" kind="link" onClick={onClick}>
             {_t("Edit")}
         </AccessibleButton>;
     }

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

@@ -52,7 +52,7 @@ describe('Login', function() {
 
         // Set non-empty flows & matrixClient to get past the loading spinner
         root.setState({
-            currentFlow: "m.login.password",
+            flows: [{ type: "m.login.password" }],
         });
 
         const form = ReactTestUtils.findRenderedComponentWithType(
@@ -61,10 +61,7 @@ describe('Login', function() {
         );
         expect(form).toBeTruthy();
 
-        const changeServerLink = ReactTestUtils.findRenderedDOMComponentWithClass(
-            root,
-            'mx_AuthBody_editServerDetails',
-        );
+        const changeServerLink = ReactTestUtils.findRenderedDOMComponentWithClass(root, 'mx_ServerPicker_change');
         expect(changeServerLink).toBeTruthy();
     });
 
@@ -77,7 +74,7 @@ describe('Login', function() {
 
         // Set non-empty flows & matrixClient to get past the loading spinner
         root.setState({
-            currentFlow: "m.login.password",
+            flows: [{ type: "m.login.password" }],
         });
 
         const form = ReactTestUtils.findRenderedComponentWithType(
@@ -86,10 +83,70 @@ describe('Login', function() {
         );
         expect(form).toBeTruthy();
 
-        const changeServerLinks = ReactTestUtils.scryRenderedDOMComponentsWithClass(
-            root,
-            'mx_AuthBody_editServerDetails',
-        );
+        const changeServerLinks = ReactTestUtils.scryRenderedDOMComponentsWithClass(root, 'mx_ServerPicker_change');
         expect(changeServerLinks).toHaveLength(0);
     });
+
+    it("should show SSO button if that flow is available", () => {
+        jest.spyOn(SdkConfig, "get").mockReturnValue({
+            disable_custom_urls: true,
+        });
+
+        const root = render();
+
+        // Set non-empty flows & matrixClient to get past the loading spinner
+        root.setState({
+            flows: [{ type: "m.login.sso" }],
+        });
+
+        const ssoButton = ReactTestUtils.findRenderedDOMComponentWithClass(root, "mx_SSOButton");
+        expect(ssoButton).toBeTruthy();
+    });
+
+    it("should show both SSO button and username+password if both are available", () => {
+        jest.spyOn(SdkConfig, "get").mockReturnValue({
+            disable_custom_urls: true,
+        });
+
+        const root = render();
+
+        // Set non-empty flows & matrixClient to get past the loading spinner
+        root.setState({
+            flows: [{ type: "m.login.password" }, { type: "m.login.sso" }],
+        });
+
+        const form = ReactTestUtils.findRenderedComponentWithType(root, sdk.getComponent('auth.PasswordLogin'));
+        expect(form).toBeTruthy();
+
+        const ssoButton = ReactTestUtils.findRenderedDOMComponentWithClass(root, "mx_SSOButton");
+        expect(ssoButton).toBeTruthy();
+    });
+
+    it("should show multiple SSO buttons if multiple identity_providers are available", () => {
+        jest.spyOn(SdkConfig, "get").mockReturnValue({
+            disable_custom_urls: true,
+        });
+
+        const root = render();
+
+        // Set non-empty flows & matrixClient to get past the loading spinner
+        root.setState({
+            flows: [{
+                type: "m.login.sso",
+                identity_providers: [{
+                    id: "a",
+                    name: "Provider 1",
+                }, {
+                    id: "b",
+                    name: "Provider 2",
+                }, {
+                    id: "c",
+                    name: "Provider 3",
+                }],
+            }],
+        });
+
+        const ssoButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(root, "mx_SSOButton");
+        expect(ssoButtons.length).toBe(3);
+    });
 });

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

@@ -48,12 +48,9 @@ describe('Registration', function() {
         />, parentDiv);
     }
 
-    it('should show server type selector', function() {
+    it('should show server picker', function() {
         const root = render();
-        const selector = ReactTestUtils.findRenderedComponentWithType(
-            root,
-            sdk.getComponent('auth.ServerTypeSelector'),
-        );
+        const selector = ReactTestUtils.findRenderedDOMComponentWithClass(root, "mx_ServerPicker");
         expect(selector).toBeTruthy();
     });
 
@@ -79,4 +76,27 @@ describe('Registration', function() {
         );
         expect(form).toBeTruthy();
     });
+
+    it("should show SSO options if those are available", () => {
+        jest.spyOn(SdkConfig, "get").mockReturnValue({
+            disable_custom_urls: true,
+        });
+
+        const root = render();
+
+        // Set non-empty flows & matrixClient to get past the loading spinner
+        root.setState({
+            flows: [{
+                stages: [],
+            }],
+            ssoFlow: {
+                type: "m.login.sso",
+            },
+            matrixClient: {},
+            busy: false,
+        });
+
+        const ssoButton = ReactTestUtils.findRenderedDOMComponentWithClass(root, "mx_SSOButton");
+        expect(ssoButton).toBeTruthy();
+    });
 });