xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add a range of data-testid tags to be able to cleanly identify parts of the application.

Browse source
This commit is contained in:
Michael Kaye 2023-04-19 13:47:05 +01:00
parent 8d56a8e8fc
commit 323dba620d
6 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/home/JoinExistingCallModal.tsx
View file

@ -43,7 +43,7 @@ export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
<p>{t("This call already exists, would you like to join?")}</p>
<FieldRow rightAlign className={styles.buttons}>
<Button onPress={onClose}>{t("No")}</Button>
<Button onPress={onJoin}>{t("Yes, join call")}</Button>
<Button onPress={onJoin} data-testid="home_joinExistingRoom">{t("Yes, join call")}</Button>
</FieldRow>
</ModalContent>
</Modal>

4
src/home/UnauthenticatedView.tsx
View file

@ -142,6 +142,7 @@ export const UnauthenticatedView: FC = () => {
type="text"
required
autoComplete="off"
data-testid="home_callName"
/>
</FieldRow>
<FieldRow>
@ -152,6 +153,7 @@ export const UnauthenticatedView: FC = () => {
placeholder={t("Display name")}
type="text"
required
data-testid="home_displayName"
autoComplete="off"
/>
</FieldRow>
@ -171,7 +173,7 @@ export const UnauthenticatedView: FC = () => {
<ErrorMessage error={error} />
</FieldRow>
)}
<Button type="submit" size="lg" disabled={loading}>
<Button type="submit" size="lg" disabled={loading} data-testid="home_go">
{loading ? t("Loading…") : t("Go")}
</Button>
<div id={recaptchaId} />

2
src/icons/VideoMuted.svg
View file

@ -1,4 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg data-testid="videoTile_muted" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.20333 0.963373C0.474437 0.690007 0.913989 0.690007 1.1851 0.963373L11.5983 11.4633C11.8694 11.7367 11.8694 12.1799 11.5983 12.4533C11.3272 12.7267 10.8876 12.7267 10.6165 12.4533L0.20333 1.95332C-0.0677768 1.67995 -0.0677768 1.23674 0.20333 0.963373Z" fill="white"/>
<path d="M0.418261 3.63429C0.226267 3.95219 0.115674 4.32557 0.115674 4.725V9.85832C0.115674 11.0181 1.0481 11.9583 2.19831 11.9583H8.65411L0.447396 3.66596C0.437225 3.65568 0.427513 3.64511 0.418261 3.63429Z" fill="white"/>
<path d="M9.95036 4.725V8.33212L4.30219 2.625H7.86772C9.01793 2.625 9.95036 3.5652 9.95036 4.725Z" fill="white"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 892 B

After

Width:  |  Height:  |  Size: 922 B

1
src/room/LobbyView.tsx
View file

@ -137,6 +137,7 @@ export function LobbyView({
size="lg"
disabled={state !== GroupCallState.LocalCallFeedInitialized}
onPress={onEnter}
data-testid="lobby_joinCall"
>
Join call now
</Button>

2
src/room/VideoPreview.tsx
View file

@ -64,7 +64,7 @@ export function VideoPreview({
return (
<div className={styles.preview} ref={previewRef}>
<video ref={videoRef} muted playsInline disablePictureInPicture />
<video ref={videoRef} muted playsInline disablePictureInPicture data-testid="preview_video" />
{state === GroupCallState.LocalCallFeedUninitialized && (
<Body fontWeight="semiBold" className={styles.cameraPermissions}>
{t("Camera/microphone permissions needed to join the call.")}

5
src/video-grid/VideoTile.tsx
View file

@ -154,6 +154,7 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
"--tileHeight": height?.to((h) => `${h}px`),
}}
ref={ref as ForwardedRef<HTMLDivElement>}
data-testid='videoTile'
{...rest}
>
{toolbarButtons.length > 0 && !maximised && (
@ -180,10 +181,10 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
audioMuted && !videoMuted && !speaking && <MicMutedIcon />
}
{videoMuted && <VideoMutedIcon />}
<span title={caption}>{caption}</span>
<span data-testid="videoTile_caption" title={caption}>{caption}</span>
</div>
))}
<video ref={mediaRef} playsInline disablePictureInPicture />
<video data-testid="videoTile_video" ref={mediaRef} playsInline disablePictureInPicture />
</animated.div>
);
}