Fix leaks in Login unit tests (#7704)

* make Login-test tsx, fix leaks

Signed-off-by: Kerry Archibald <kerrya@element.io>

* missed lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

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

@@ -14,22 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
+import { createClient } from "matrix-js-sdk/src/matrix";
 
 import sdk from '../../../skinned-sdk';
 import SdkConfig from '../../../../src/SdkConfig';
 import { mkServerConfig } from "../../../test-utils";
 
+jest.mock("matrix-js-sdk/src/matrix");
+
+const flushPromises = async () => await new Promise(process.nextTick);
+
+jest.useRealTimers();
+
 const Login = sdk.getComponent(
     'structures.auth.Login',
 );
 
 describe('Login', function() {
     let parentDiv;
+    const mockClient = {
+        login: jest.fn().mockResolvedValue({}),
+        loginFlows: jest.fn(),
+    };
 
     beforeEach(function() {
+        mockClient.login.mockClear().mockResolvedValue({});
+        mockClient.loginFlows.mockClear().mockResolvedValue({ flows: [{ type: "m.login.password" }] });
+        createClient.mockReturnValue(mockClient);
+
         parentDiv = document.createElement('div');
         document.body.appendChild(parentDiv);
     });
@@ -42,19 +57,16 @@ describe('Login', function() {
     function render() {
         return ReactDOM.render(<Login
             serverConfig={mkServerConfig("https://matrix.org", "https://vector.im")}
-            onLoggedIn={() => {}}
+            onLoggedIn={() => { }}
-            onRegisterClick={() => {}}
+            onRegisterClick={() => { }}
-            onServerConfigChange={() => {}}
+            onServerConfigChange={() => { }}
-        />, parentDiv);
+        />, parentDiv) as unknown as Component<any, any, any>;
     }
 
-    it('should show form with change server link', function() {
+    it('should show form with change server link', async () => {
         const root = render();
 
-        // Set non-empty flows & matrixClient to get past the loading spinner
+        await flushPromises();
-        root.setState({
-            flows: [{ type: "m.login.password" }],
-        });
 
         const form = ReactTestUtils.findRenderedComponentWithType(
             root,
@@ -66,17 +78,13 @@ describe('Login', function() {
         expect(changeServerLink).toBeTruthy();
     });
 
-    it('should show form without change server link when custom URLs disabled', function() {
+    it('should show form without change server link when custom URLs disabled', async () => {
         jest.spyOn(SdkConfig, "get").mockReturnValue({
             disable_custom_urls: true,
         });
 
         const root = render();
-
+        await flushPromises();
-        // Set non-empty flows & matrixClient to get past the loading spinner
-        root.setState({
-            flows: [{ type: "m.login.password" }],
-        });
 
         const form = ReactTestUtils.findRenderedComponentWithType(
             root,
@@ -88,33 +96,29 @@ describe('Login', function() {
         expect(changeServerLinks).toHaveLength(0);
     });
 
-    it("should show SSO button if that flow is available", () => {
+    it("should show SSO button if that flow is available", async () => {
         jest.spyOn(SdkConfig, "get").mockReturnValue({
             disable_custom_urls: true,
         });
 
-        const root = render();
+        mockClient.loginFlows.mockReturnValue({ flows: [{ type: "m.login.sso" }] });
 
-        // Set non-empty flows & matrixClient to get past the loading spinner
+        const root = render();
-        root.setState({
+        await flushPromises();
-            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", () => {
+    it("should show both SSO button and username+password if both are available", async () => {
         jest.spyOn(SdkConfig, "get").mockReturnValue({
             disable_custom_urls: true,
         });
 
-        const root = render();
+        mockClient.loginFlows.mockReturnValue({ flows: [{ type: "m.login.password" }, { type: "m.login.sso" }] });
 
-        // Set non-empty flows & matrixClient to get past the loading spinner
+        const root = render();
-        root.setState({
+        await flushPromises();
-            flows: [{ type: "m.login.password" }, { type: "m.login.sso" }],
-        });
 
         const form = ReactTestUtils.findRenderedComponentWithType(root, sdk.getComponent('auth.PasswordLogin'));
         expect(form).toBeTruthy();
@@ -123,15 +127,12 @@ describe('Login', function() {
         expect(ssoButton).toBeTruthy();
     });
 
-    it("should show multiple SSO buttons if multiple identity_providers are available", () => {
+    it("should show multiple SSO buttons if multiple identity_providers are available", async () => {
         jest.spyOn(SdkConfig, "get").mockReturnValue({
             disable_custom_urls: true,
         });
 
-        const root = render();
+        mockClient.loginFlows.mockReturnValue({
-
-        // Set non-empty flows & matrixClient to get past the loading spinner
-        root.setState({
             flows: [{
                 "type": "m.login.sso",
                 "identity_providers": [{
@@ -147,6 +148,10 @@ describe('Login', function() {
             }],
         });
 
+        const root = render();
+
+        await flushPromises();
+
         const ssoButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(root, "mx_SSOButton");
         expect(ssoButtons.length).toBe(3);
     });