unit test basic paths in UserInfo

src/components/views/right_panel/BaseCard.tsx

@@ -69,6 +69,7 @@ const BaseCard: React.FC<IProps> = ({
     let closeButton;
     if (onClose) {
         closeButton = <AccessibleButton
+            data-test-id='base-card-close-button'
             className="mx_BaseCard_close"
             onClick={onClose}
             title={closeLabel || _t("Close")}

src/components/views/right_panel/EncryptionInfo.tsx

@@ -101,7 +101,7 @@ const EncryptionInfo: React.FC<IProps> = ({
     }
 
     return <React.Fragment>
-        <div className="mx_UserInfo_container">
+        <div data-test-id='encryption-info-description' className="mx_UserInfo_container">
             <h3>{ _t("Encryption") }</h3>
             { description }
         </div>

src/components/views/right_panel/EncryptionPanel.tsx

@@ -106,6 +106,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
             setPhase(request.phase);
         }
     }, [onClose, request]);
+
     useEventEmitter(request, "change", changeHandler);
 
     const onStartVerification = useCallback(async () => {
@@ -131,6 +132,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
     const isSelfVerification = request ?
         request.isSelfVerification :
         member.userId === MatrixClientPeg.get().getUserId();
+
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
         return (

src/components/views/right_panel/UserInfo.tsx

@@ -1096,6 +1096,7 @@ function useRoomPermissions(cli: MatrixClient, room: Room, user: RoomMember): IR
             modifyLevelMax,
         });
     }, [cli, user, room]);
+
     useEventEmitter(cli, "RoomState.members", updateRoomPermissions);
     useEffect(() => {
         updateRoomPermissions();
@@ -1702,16 +1703,16 @@ const UserInfo: React.FC<IProps> = ({
 
     let scopeHeader;
     if (SpaceStore.spacesEnabled && room?.isSpaceRoom()) {
-        scopeHeader = <div className="mx_RightPanel_scopeHeader">
+        scopeHeader = <div data-test-id='space-header' className="mx_RightPanel_scopeHeader">
             <RoomAvatar room={room} height={32} width={32} />
             <RoomName room={room} />
         </div>;
     }
 
-    const header = <React.Fragment>
+    const header = <>
         { scopeHeader }
         <UserInfoHeader member={member} e2eStatus={e2eStatus} roomId={room?.roomId} />
-    </React.Fragment>;
+    </>;
     return <BaseCard
         className={classes.join(" ")}
         header={header}

test/components/views/right_panel/UserInfo-test.tsx

@@ -0,0 +1,182 @@
+/*
+Copyright 2022 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 { mount } from 'enzyme';
+import { act } from "react-dom/test-utils";
+import { Room, User } from 'matrix-js-sdk';
+import { Phase, VerificationRequest } from 'matrix-js-sdk/src/crypto/verification/request/VerificationRequest';
+
+import "../../../skinned-sdk";
+import UserInfo from '../../../../src/components/views/right_panel/UserInfo';
+import { RightPanelPhases } from '../../../../src/stores/right-panel/RightPanelStorePhases';
+import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import VerificationPanel from '../../../../src/components/views/right_panel/VerificationPanel';
+import EncryptionInfo from '../../../../src/components/views/right_panel/EncryptionInfo';
+
+const findByTestId = (component, id) => component.find(`[data-test-id="${id}"]`);
+
+jest.mock('../../../../src/utils/DMRoomMap', () => {
+    const mock = {
+        getUserIdForRoomId: jest.fn(),
+        getDMRoomsForUserId: jest.fn(),
+    };
+
+    return {
+        shared: jest.fn().mockReturnValue(mock),
+        sharedInstance: mock,
+    };
+});
+
+describe('<UserInfo />', () => {
+    const defaultUserId = '@test:test';
+    const defaultUser = new User(defaultUserId);
+
+    const defaultProps = {
+        user: defaultUser,
+        phase: RightPanelPhases.RoomMemberInfo,
+        onClose: jest.fn(),
+    };
+
+    const mockClient = {
+        getUser: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+        isUserIgnored: jest.fn(),
+        isCryptoEnabled: jest.fn(),
+        getUserId: jest.fn(),
+        on: jest.fn(),
+        isSynapseAdministrator: jest.fn().mockResolvedValue(false),
+        isRoomEncrypted: jest.fn().mockReturnValue(false),
+        doesServerSupportUnstableFeature: jest.fn().mockReturnValue(false),
+        mxcUrlToHttp: jest.fn().mockReturnValue('mock-mxcUrlToHttp'),
+        removeListerner: jest.fn(),
+        currentState: {
+            on: jest.fn(),
+        },
+    };
+
+    const verificationRequest = {
+        pending: true, on: jest.fn(), phase: Phase.Ready,
+        channel: { transactionId: 1 },
+        otherPartySupportsMethod: jest.fn(),
+    } as unknown as VerificationRequest;
+
+    const getComponent = (props = {}) => mount(<UserInfo {...defaultProps} {...props} />, {
+        wrappingComponent: MatrixClientContext.Provider,
+        wrappingComponentProps: { value: mockClient },
+    });
+
+    beforeAll(() => {
+        jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient);
+    });
+
+    beforeEach(() => {
+        mockClient.getUser.mockClear().mockResolvedValue(undefined);
+    });
+
+    it('closes on close button click', () => {
+        const onClose = jest.fn();
+        const component = getComponent({ onClose });
+        act(() => {
+            findByTestId(component, 'base-card-close-button').at(0).simulate('click');
+        });
+
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    describe('without a room', () => {
+        it('does not render space header', () => {
+            const component = getComponent();
+            expect(findByTestId(component, 'space-header').length).toBeFalsy();
+        });
+
+        it('renders user info', () => {
+            const component = getComponent();
+            expect(component.find("BasicUserInfo").length).toBeTruthy();
+        });
+
+        it('renders encryption info panel without pending verification', () => {
+            const phase = RightPanelPhases.EncryptionPanel;
+            const component = getComponent({ phase });
+
+            expect(component.find(EncryptionInfo).length).toBeTruthy();
+        });
+
+        it('renders encryption verification panel with pending verification', () => {
+            const phase = RightPanelPhases.EncryptionPanel;
+            const component = getComponent({ phase, verificationRequest });
+
+            expect(component.find(EncryptionInfo).length).toBeFalsy();
+            expect(component.find(VerificationPanel).length).toBeTruthy();
+        });
+
+        it('renders close button correctly when encryption panel with a pending verification request', () => {
+            const phase = RightPanelPhases.EncryptionPanel;
+            const component = getComponent({ phase, verificationRequest });
+
+            expect(findByTestId(component, 'base-card-close-button').at(0).props().title).toEqual('Cancel');
+        });
+    });
+
+    describe('with a room', () => {
+        const room = {
+            roomId: '!fkfk',
+            isSpaceRoom: jest.fn().mockReturnValue(false),
+            getMember: jest.fn().mockReturnValue(undefined),
+            getMxcAvatarUrl: jest.fn().mockReturnValue('mock-avatar-url'),
+            name: 'test room',
+            on: jest.fn(),
+            currentState: {
+                getStateEvents: jest.fn(),
+                on: jest.fn(),
+            },
+        } as unknown as Room;
+
+        it('renders user info', () => {
+            const component = getComponent();
+            expect(component.find("BasicUserInfo").length).toBeTruthy();
+        });
+
+        it('does not render space header when room is not a space room', () => {
+            const component = getComponent({ room });
+            expect(findByTestId(component, 'space-header').length).toBeFalsy();
+        });
+
+        it('renders space header when room is a space room', () => {
+            const spaceRoom = {
+                ...room, isSpaceRoom: jest.fn().mockReturnValue(true),
+            };
+            const component = getComponent({ room: spaceRoom });
+            expect(findByTestId(component, 'space-header').length).toBeTruthy();
+        });
+
+        it('renders encryption info panel without pending verification', () => {
+            const phase = RightPanelPhases.EncryptionPanel;
+            const component = getComponent({ phase, room });
+
+            expect(component.find(EncryptionInfo).length).toBeTruthy();
+        });
+
+        it('renders encryption verification panel with pending verification', () => {
+            const phase = RightPanelPhases.EncryptionPanel;
+            const component = getComponent({ phase, verificationRequest, room });
+
+            expect(component.find(EncryptionInfo).length).toBeFalsy();
+            expect(component.find(VerificationPanel).length).toBeTruthy();
+        });
+    });
+});