oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add data-testid for leftpane sections and edit profile dialog

This commit is contained in:
Audric Ackermann 2021-11-18 11:36:14 +11:00
parent c1471426ac
commit 4ce1b7813a
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
14 changed files with 84 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ts/components/Avatar.tsx
View File

@ -23,6 +23,7 @@ type Props = {
base64Data?: string; // if this is not empty, it will be used to render the avatar with base64 encoded data
memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
onAvatarClick?: () => void;
dataTestId?: string;
};
const Identicon = (props: Props) => {
@ -92,7 +93,7 @@ const AvatarImage = (props: {
};
const AvatarInner = (props: Props) => {
const { avatarPath, base64Data, size, memberAvatars, name } = props;
const { avatarPath, base64Data, size, memberAvatars, name, dataTestId } = props;
const [imageBroken, setImageBroken] = useState(false);
// contentType is not important
const { urlToLoad } = useEncryptedFileFetch(avatarPath || '', '');
@ -122,6 +123,7 @@ const AvatarInner = (props: Props) => {
props.onAvatarClick?.();
}}
role="button"
data-testid={dataTestId}
>
{hasImage ? (
<AvatarImage

4
ts/components/conversation/ConversationHeader.tsx
View File

@ -107,7 +107,7 @@ const SelectionOverlay = () => {
return (
<div className="message-selection-overlay">
<div className="close-button">
<SessionIconButton iconType="exit" iconSize={'medium'} onClick={onCloseOverlay} />
<SessionIconButton iconType="exit" iconSize="medium" onClick={onCloseOverlay} />
</div>
<div className="button-group">
@ -145,7 +145,7 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) =
});
}}
>
<SessionIconButton iconType="ellipses" iconSize={'medium'} />
<SessionIconButton iconType="ellipses" iconSize="medium" />
</div>
);
};

2
ts/components/conversation/media-gallery/MediaGallery.tsx
View File

@ -45,7 +45,7 @@ const Sections = (props: Props & { selectedTab: TabType }) => {
const label =
type === 'media' ? window.i18n('mediaEmptyState') : window.i18n('documentsEmptyState');
return <EmptyState data-test="EmptyState" label={label} />;
return <EmptyState data-testid="EmptyState" label={label} />;
}
return (

11
ts/components/dialog/EditProfileDialog.tsx
View File

@ -82,7 +82,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
: undefined;
return (
<div className="edit-profile-dialog">
<div className="edit-profile-dialog" data-testid="edit-profile-dialog">
<SessionWrapperModal
title={i18n('editProfileModalTitle')}
onClose={this.closeDialog}
@ -97,7 +97,10 @@ export class EditProfileDialog extends React.Component<{}, State> {
<div className="session-id-section">
<PillDivider text={window.i18n('yourSessionID')} />
<p className={classNames('text-selectable', 'session-id-section-display')}>
<p
className={classNames('text-selectable', 'session-id-section-display')}
data-testid="your-session-id"
>
{sessionID}
</p>
@ -182,10 +185,10 @@ export class EditProfileDialog extends React.Component<{}, State> {
{this.renderProfileHeader()}
<div className="profile-name-uneditable">
<p>{name}</p>
<p data-testid="your-profile-name">{name}</p>
<SessionIconButton
iconType="pencil"
iconSize={'medium'}
iconSize="medium"
onClick={() => {
this.setState({ mode: 'edit' });
}}

4
ts/components/dialog/OnionStatusPathDialog.tsx
View File

@ -150,8 +150,9 @@ export const ModalStatusLight = (props: StatusLightType) => {
export const ActionPanelOnionStatusLight = (props: {
isSelected: boolean;
handleClick: () => void;
dataTestId?: string;
}) => {
const { isSelected, handleClick } = props;
const { isSelected, handleClick, dataTestId } = props;
const onionPathsCount = useSelector(getOnionPathsCount);
const firstPathLength = useSelector(getFirstOnionPathLength);
@ -179,6 +180,7 @@ export const ActionPanelOnionStatusLight = (props: {
glowStartDelay={0}
noScale={true}
isSelected={isSelected}
dataTestId={dataTestId}
/>
);
};

87
ts/components/session/ActionsPanel.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { SessionIconButton, SessionIconType } from './icon';
import { SessionIconButton } from './icon';
import { Avatar, AvatarSize } from '../Avatar';
import { SessionToastContainer } from './SessionToastContainer';
import { getConversationController } from '../../session/conversations';
@ -96,47 +96,71 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
onAvatarClick={handleClick}
name={userName}
pubkey={ourNumber}
dataTestId="leftpane-primary-avatar"
/>
);
}
const unreadToShow = type === SectionType.Message ? unreadMessageCount : undefined;
let iconType: SessionIconType;
switch (type) {
case SectionType.Message:
iconType = 'chatBubble';
break;
case SectionType.Contact:
iconType = 'users';
break;
case SectionType.Settings:
iconType = 'gear';
break;
case SectionType.Moon:
iconType = 'moon';
break;
default:
iconType = 'moon';
}
const iconColor = undefined;
return (
<>
{type === SectionType.PathIndicator ? (
<ActionPanelOnionStatusLight handleClick={handleClick} isSelected={isSelected} />
) : (
return (
<SessionIconButton
iconSize={'medium'}
iconType={iconType}
iconColor={iconColor}
iconSize="medium"
dataTestId="message-section"
iconType={'chatBubble'}
iconColor={undefined}
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
/>
)}
</>
);
);
case SectionType.Contact:
return (
<SessionIconButton
iconSize="medium"
dataTestId="contact-section"
iconType={'users'}
iconColor={undefined}
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
/>
);
case SectionType.Settings:
return (
<SessionIconButton
iconSize="medium"
dataTestId="settings-section"
iconType={'gear'}
iconColor={undefined}
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
/>
);
case SectionType.PathIndicator:
return (
<ActionPanelOnionStatusLight
dataTestId="onion-status-section"
handleClick={handleClick}
isSelected={isSelected}
/>
);
default:
return (
<SessionIconButton
iconSize="medium"
iconType={'moon'}
dataTestId="theme-section"
iconColor={undefined}
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
/>
);
}
};
const cleanUpMediasInterval = DURATION.MINUTES * 30;
@ -300,7 +324,10 @@ export const ActionsPanel = () => {
<ModalContainer />
<CallContainer />
<div className="module-left-pane__sections-container">
<div
className="module-left-pane__sections-container"
data-testid="leftpane-section-container"
>
<Section type={SectionType.Profile} avatarPath={ourPrimaryConversation.avatarPath} />
<Section type={SectionType.Message} />
<Section type={SectionType.Contact} />

2
ts/components/session/LeftPaneSettingSection.tsx
View File

@ -58,7 +58,7 @@ const LeftPaneSettingsCategoryRow = (props: { item: any }) => {
<div>
{item.id === focusedSettingsSection && (
<SessionIcon iconSize={'medium'} iconType="chevron" iconRotation={270} />
<SessionIcon iconSize="medium" iconType="chevron" iconRotation={270} />
)}
</div>
</div>

2
ts/components/session/SessionInput.tsx
View File

@ -108,7 +108,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
return (
<SessionIconButton
iconType="eye"
iconSize={'medium'}
iconSize="medium"
onClick={() => {
this.setState({
forceShow: !this.state.forceShow,

2
ts/components/session/SessionMemberListItem.tsx
View File

@ -72,7 +72,7 @@ export const SessionMemberListItem = (props: Props) => {
<span className="session-member-item__name">{name}</span>
</div>
<span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
<SessionIcon iconType="check" iconSize={'medium'} iconColor={Constants.UI.COLORS.GREEN} />
<SessionIcon iconType="check" iconSize="medium" iconColor={Constants.UI.COLORS.GREEN} />
</span>
</div>
);

2
ts/components/session/SessionSearchInput.tsx
View File

@ -21,7 +21,7 @@ export const SessionSearchInput = (props: Props) => {
return (
<div className="session-search-input">
<SessionIconButton iconSize={'medium'} iconType="search" />
<SessionIconButton iconSize="medium" iconType="search" />
<input
value={searchString}
onChange={e => onChange(e.target.value)}

6
ts/components/session/conversation/SessionRecording.tsx
View File

@ -125,16 +125,16 @@ export class SessionRecording extends React.Component<Props, State> {
{isRecording && (
<SessionIconButton
iconType="pause"
iconSize={'medium'}
iconSize="medium"
iconColor={Constants.UI.COLORS.DANGER_ALT}
onClick={actionPauseFn}
/>
)}
{actionPauseAudio && (
<SessionIconButton iconType="pause" iconSize={'medium'} onClick={actionPauseFn} />
<SessionIconButton iconType="pause" iconSize="medium" onClick={actionPauseFn} />
)}
{hasRecordingAndPaused && (
<SessionIconButton iconType="play" iconSize={'medium'} onClick={this.playAudio} />
<SessionIconButton iconType="play" iconSize="medium" onClick={this.playAudio} />
)}
{hasRecording && (
<SessionIconButton

2
ts/components/session/conversation/SessionRightPanel.tsx
View File

@ -133,7 +133,7 @@ const HeaderItem = () => {
<div className="group-settings-header">
<SessionIconButton
iconType="chevron"
iconSize={'medium'}
iconSize="medium"
iconRotation={270}
onClick={() => {
dispatch(closeRightPanel());

2
ts/components/session/icon/SessionIconButton.tsx
View File

@ -10,6 +10,7 @@ interface SProps extends SessionIconProps {
isSelected?: boolean;
isHidden?: boolean;
margin?: string;
dataTestId?: string;
}
const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props, ref) => {
@ -43,6 +44,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
ref={ref}
onClick={clickHandler}
style={{ display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }}
data-testid={props.dataTestId}
>
<SessionIcon
iconType={iconType}

2
ts/components/session/settings/SessionSettings.tsx
View File

@ -48,7 +48,7 @@ const SessionInfo = () => {
<div className="session-settings__version-info">
<span className="text-selectable">v{window.versionInfo.version}</span>
<span>
<SessionIconButton iconSize={'medium'} iconType="oxen" onClick={openOxenWebsite} />
<SessionIconButton iconSize="medium" iconType="oxen" onClick={openOxenWebsite} />
</span>
<span className="text-selectable">{window.versionInfo.commitHash}</span>
</div>