Skip to content

Commit

Permalink
refactor: add tests for html caption
Browse files Browse the repository at this point in the history
  • Loading branch information
atomrc committed Oct 11, 2023
1 parent 0d7b631 commit 08d1f48
Show file tree
Hide file tree
Showing 5 changed files with 311 additions and 42 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ import {User} from 'src/script/entity/User';
import {useKoSubscribableChildren} from 'Util/ComponentUtil';
import {t} from 'Util/LocalizerUtil';

export interface ConnectedMessageProps {
interface ConnectedMessageProps {
classifiedDomains?: string[];
onClickCancelRequest: () => void;
showServicesWarning?: boolean;
user: User;
}

const ConnectedMessage: React.FC<ConnectedMessageProps> = ({
export const ConnectedMessage: React.FC<ConnectedMessageProps> = ({
user,
onClickCancelRequest,
showServicesWarning = false,
Expand Down Expand Up @@ -105,5 +105,3 @@ const ConnectedMessage: React.FC<ConnectedMessageProps> = ({
</div>
);
};

export {ConnectedMessage};
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,12 @@ import {SystemMessageType} from 'src/script/message/SystemMessageType';
import {useKoSubscribableChildren} from 'Util/ComponentUtil';
import {t} from 'Util/LocalizerUtil';

import {ConnectedMessage} from './MemberMessageTypes/ConnectedMessage';
import {ConnectedMessage} from './ConnectedMessage';
import {MessageContent} from './MessageContent';

import {MessageTime} from '../MessageTime';

export interface MemberMessageProps {
interface MemberMessageProps {
classifiedDomains?: string[];
hasReadReceiptsTurnedOn: boolean;
isSelfTemporaryGuest: boolean;
Expand All @@ -44,7 +45,7 @@ export interface MemberMessageProps {
conversationName: string;
}

const MemberMessage: React.FC<MemberMessageProps> = ({
export const MemberMessage: React.FC<MemberMessageProps> = ({
message,
shouldShowInvitePeople,
isSelfTemporaryGuest,
Expand All @@ -55,26 +56,17 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
classifiedDomains,
conversationName,
}) => {
const {
otherUser,
timestamp,
user,
htmlGroupCreationHeader,
htmlCaption,
highlightedUsers,
showNamedCreation,
hasUsers,
} = useKoSubscribableChildren(message, [
'otherUser',
'timestamp',
'user',
'name',
'htmlGroupCreationHeader',
'htmlCaption',
'highlightedUsers',
'showNamedCreation',
'hasUsers',
]);
const {otherUser, timestamp, user, htmlGroupCreationHeader, highlightedUsers, showNamedCreation, hasUsers} =
useKoSubscribableChildren(message, [
'otherUser',
'timestamp',
'user',
'name',
'htmlGroupCreationHeader',
'highlightedUsers',
'showNamedCreation',
'hasUsers',
]);

const isGroupCreation = message.isGroupCreation();
const isMemberRemoval = message.isMemberRemoval();
Expand All @@ -89,18 +81,19 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
}
};

switch (message.memberMessageType) {
case SystemMessageType.CONNECTION_ACCEPTED:
case SystemMessageType.CONNECTION_REQUEST:
return (
<ConnectedMessage
user={otherUser}
showServicesWarning={message.showServicesWarning}
onClickCancelRequest={() => onClickCancelRequest(message)}
classifiedDomains={classifiedDomains}
/>
);
break;
const isConnectedMessage = [SystemMessageType.CONNECTION_ACCEPTED, SystemMessageType.CONNECTION_REQUEST].includes(
message.memberMessageType,
);

if (isConnectedMessage) {
return (
<ConnectedMessage
user={otherUser}
showServicesWarning={message.showServicesWarning}
onClickCancelRequest={() => onClickCancelRequest(message)}
classifiedDomains={classifiedDomains}
/>
);
}

return (
Expand All @@ -116,6 +109,7 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
</h2>
</div>
)}

{hasUsers && (
<div className="message-header">
<div className="message-header-icon message-header-icon--svg text-foreground">
Expand All @@ -126,7 +120,7 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
{/* event is being triggered only when clicked on <a> tag with specified class (keyboard accessible by default) */}
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
<div onClick={handleShowMoreClick} className="message-header-label">
<p className="message-header-caption" dangerouslySetInnerHTML={{__html: htmlCaption}} />
<MessageContent message={message} />
</div>
{isMemberChange && (
<div className="message-body-actions">
Expand All @@ -139,6 +133,7 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
)}
</div>
)}

{hasUsers && message.showServicesWarning && (
<p className="message-services-warning" data-uie-name="label-services-warning">
{t('conversationServicesWarning')}
Expand Down Expand Up @@ -167,6 +162,7 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
<p className="message-member-footer-description">{t('temporaryGuestJoinDescription')}</p>
</div>
)}

{isGroupCreation && hasReadReceiptsTurnedOn && (
<div className="message-header" data-uie-name="label-group-creation-receipts">
<div className="message-header-icon message-header-icon--svg text-foreground">
Expand All @@ -177,11 +173,13 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
</p>
</div>
)}

{isMemberLeave && user.isMe && isSelfTemporaryGuest && (
<div className="message-member-footer">
<p className="message-member-footer-description">{t('temporaryGuestLeaveDescription')}</p>
</div>
)}

{isGroupCreation && (
<>
<div className="message-header">
Expand All @@ -199,5 +197,3 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
</>
);
};

export {MemberMessage};
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/*
* Wire
* Copyright (C) 2021 Wire Swiss GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see http://www.gnu.org/licenses/.
*
*/

import {render} from '@testing-library/react';

import en from 'I18n/en-US.json';
import {MemberMessage as MemberMessageEntity} from 'src/script/entity/message/MemberMessage';
import {User} from 'src/script/entity/User';
import {SystemMessageType} from 'src/script/message/SystemMessageType';
import {generateUser} from 'test/helper/UserGenerator';
import {setStrings} from 'Util/LocalizerUtil';

import {config, MessageContent} from './MessageContent';

setStrings({en});

function createMemberMessage(type: SystemMessageType, users: User[]) {
const message = new MemberMessageEntity();
message.memberMessageType = type;
message.userIds(users.map(user => user.qualifiedId));
message.userEntities(users);
message.name('message');

return message;
}

describe('MessageContent', () => {
describe('CONVERSATION_CREATE', () => {
it('displays participants of a newly created conversation', () => {
const nbUsers = Math.floor(Math.random() * 10);
const users = Array.from({length: nbUsers}, () => generateUser());
const message = createMemberMessage(SystemMessageType.CONVERSATION_CREATE, users);

const {getByText} = render(<MessageContent message={message} />);
users.forEach(user => {
expect(getByText(user.name())).not.toBeNull();
});
});

it('displays a showMore when there are more than 17 users', () => {
const nbExtraUsers = Math.floor(Math.random() * 10);
const nbUsers = config.MAX_USERS_VISIBLE + nbExtraUsers;

const users = Array.from({length: nbUsers}, () => generateUser());
const message = createMemberMessage(SystemMessageType.CONVERSATION_CREATE, users);

const {getByText} = render(<MessageContent message={message} />);
expect(getByText(`${nbUsers - config.REDUCED_USERS_COUNT} more`)).not.toBeNull();
});

it('displays all team members', () => {
const nbExtraUsers = Math.floor(Math.random() * 10);
const nbTeamUsers = config.MAX_WHOLE_TEAM_USERS_VISIBLE + nbExtraUsers;

const teamUsers = Array.from({length: nbTeamUsers}, () => generateUser());
const message = createMemberMessage(SystemMessageType.CONVERSATION_CREATE, teamUsers);
message.allTeamMembers = teamUsers;

const {getByText} = render(<MessageContent message={message} />);
expect(getByText(`all team members`)).not.toBeNull();
});

it('displays all team members and one guest message', () => {
const nbExtraUsers = Math.floor(Math.random() * 10);
const nbTeamUsers = config.MAX_WHOLE_TEAM_USERS_VISIBLE + nbExtraUsers;

const teamUsers = Array.from({length: nbTeamUsers}, () => generateUser());
const guest = generateUser();
guest.isGuest(true);
const message = createMemberMessage(SystemMessageType.CONVERSATION_CREATE, [...teamUsers, guest]);
message.allTeamMembers = teamUsers;

const {getByText} = render(<MessageContent message={message} />);
expect(getByText(`all team members and one guest`)).not.toBeNull();
});

it('displays all team members and multiple guests message', () => {
const nbGuests = 2 + Math.floor(Math.random() * 10);
const nbTeamUsers = config.MAX_WHOLE_TEAM_USERS_VISIBLE;

const teamUsers = Array.from({length: nbTeamUsers}, () => generateUser());
const guests = Array.from({length: nbGuests}, () => {
const guest = generateUser();
guest.isGuest(true);
return guest;
});
const message = createMemberMessage(SystemMessageType.CONVERSATION_CREATE, [...teamUsers, ...guests]);
message.allTeamMembers = teamUsers;

const {getByText} = render(<MessageContent message={message} />);
expect(getByText(`all team members and ${nbGuests} guests`)).not.toBeNull();
});
});
});
Loading

0 comments on commit 08d1f48

Please sign in to comment.