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

Merge pull request #1036 from vector-im/michaelk/data_id_tags_two

Browse source 
Add data-testid tags for registration, login, displayname & logout
This commit is contained in:
Michael Kaye 2023-05-10 13:15:12 +01:00 • committed by GitHub
commit 283b5d4504
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/UserMenu.tsx
View file

@ -58,6 +58,7 @@ export function UserMenu({
key: "user", key: "user",
icon: UserIcon, icon: UserIcon,
label: displayName, label: displayName,
dataTestid: "usermenu_user",
}); });
if (isPasswordlessUser && !preventNavigation) { if (isPasswordlessUser && !preventNavigation) {
@ -65,6 +66,7 @@ export function UserMenu({
key: "login", key: "login",
label: t("Sign in"), label: t("Sign in"),
icon: LoginIcon, icon: LoginIcon,
dataTestid: "usermenu_login",
}); });
} }
@ -73,6 +75,7 @@ export function UserMenu({
key: "logout", key: "logout",
label: t("Sign out"), label: t("Sign out"),
icon: LogoutIcon, icon: LogoutIcon,
dataTestid: "usermenu_logout",
}); });
} }
} }
@ -93,7 +96,11 @@ export function UserMenu({
return ( return (
<PopoverMenuTrigger placement="bottom right"> <PopoverMenuTrigger placement="bottom right">
<TooltipTrigger tooltip={tooltip} placement="bottom left"> <TooltipTrigger tooltip={tooltip} placement="bottom left">
<Button variant="icon" className={styles.userButton}> <Button
variant="icon"
className={styles.userButton}
data-testid="usermenu_open"
>
{isAuthenticated && (!isPasswordlessUser || avatarUrl) ? ( {isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
<Avatar <Avatar
size={Size.SM} size={Size.SM}
@ -108,9 +115,14 @@ export function UserMenu({
</TooltipTrigger> </TooltipTrigger>
{(props) => ( {(props) => (
<Menu {...props} label={t("User menu")} onAction={onAction}> <Menu {...props} label={t("User menu")} onAction={onAction}>
{items.map(({ key, icon: Icon, label }) => ( {items.map(({ key, icon: Icon, label, dataTestid }) => (
<Item key={key} textValue={label}> <Item key={key} textValue={label}>
<Icon width={24} height={24} className={styles.menuIcon} /> <Icon
width={24}
height={24}
className={styles.menuIcon}
data-testid={dataTestid}
/>
<Body overflowEllipsis>{label}</Body> <Body overflowEllipsis>{label}</Body>
</Item> </Item>
))} ))}

8
src/auth/LoginPage.tsx
View file

@ -88,6 +88,7 @@ export const LoginPage: FC = () => {
autoCapitalize="none" autoCapitalize="none"
prefix="@" prefix="@"
suffix={`:${Config.defaultServerName()}`} suffix={`:${Config.defaultServerName()}`}
data-testid="login_username"
/> />
</FieldRow> </FieldRow>
<FieldRow> <FieldRow>
@ -96,6 +97,7 @@ export const LoginPage: FC = () => {
ref={passwordRef} ref={passwordRef}
placeholder={t("Password")} placeholder={t("Password")}
label={t("Password")} label={t("Password")}
data-testid="login_password"
/> />
</FieldRow> </FieldRow>
{error && ( {error && (
@ -104,7 +106,11 @@ export const LoginPage: FC = () => {
</FieldRow> </FieldRow>
)} )}
<FieldRow> <FieldRow>
<Button type="submit" disabled={loading}> <Button
type="submit"
disabled={loading}
data-testid="login_login"
>
{loading ? t("Logging in…") : t("Login")} {loading ? t("Logging in…") : t("Login")}
</Button> </Button>
</FieldRow> </FieldRow>

9
src/auth/RegisterPage.tsx
View file

@ -166,6 +166,7 @@ export const RegisterPage: FC = () => {
autoCapitalize="none" autoCapitalize="none"
prefix="@" prefix="@"
suffix={`:${Config.defaultServerName()}`} suffix={`:${Config.defaultServerName()}`}
data-testid="register_username"
/> />
</FieldRow> </FieldRow>
<FieldRow> <FieldRow>
@ -179,6 +180,7 @@ export const RegisterPage: FC = () => {
value={password} value={password}
placeholder={t("Password")} placeholder={t("Password")}
label={t("Password")} label={t("Password")}
data-testid="register_password"
/> />
</FieldRow> </FieldRow>
<FieldRow> <FieldRow>
@ -193,6 +195,7 @@ export const RegisterPage: FC = () => {
placeholder={t("Confirm password")} placeholder={t("Confirm password")}
label={t("Confirm password")} label={t("Confirm password")}
ref={confirmPasswordRef} ref={confirmPasswordRef}
data-testid="register_confirm_password"
/> />
</FieldRow> </FieldRow>
<Caption> <Caption>
@ -217,7 +220,11 @@ export const RegisterPage: FC = () => {
</FieldRow> </FieldRow>
)} )}
<FieldRow> <FieldRow>
<Button type="submit" disabled={registering}> <Button
type="submit"
disabled={registering}
data-testid="register_register"
>
{registering ? t("Registering…") : t("Register")} {registering ? t("Registering…") : t("Register")}
</Button> </Button>
</FieldRow> </FieldRow>

2
src/home/RegisteredView.tsx
View file

@ -133,6 +133,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
type="text" type="text"
required required
autoComplete="off" autoComplete="off"
data-testid="home_callName"
/> />
<Button <Button
@ -140,6 +141,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
size="lg" size="lg"
className={styles.button} className={styles.button}
disabled={loading} disabled={loading}
data-testid="home_go"
> >
{loading ? t("Loading…") : t("Go")} {loading ? t("Loading…") : t("Go")}
</Button> </Button>

4
src/home/UnauthenticatedView.tsx
View file

@ -186,14 +186,14 @@ export const UnauthenticatedView: FC = () => {
</main> </main>
<footer className={styles.footer}> <footer className={styles.footer}>
<Body className={styles.mobileLoginLink}> <Body className={styles.mobileLoginLink}>
<Link color="primary" to="/login"> <Link color="primary" to="/login" data-testid="home_login">
{t("Login to your account")} {t("Login to your account")}
</Link> </Link>
</Body> </Body>
<Body> <Body>
<Trans> <Trans>
Not registered yet?{" "} Not registered yet?{" "}
<Link color="primary" to="/register"> <Link color="primary" to="/register" data-testid="home_register">
Create an account Create an account
</Link> </Link>
</Trans> </Trans>

7
src/profile/ProfileModal.tsx
View file

@ -119,6 +119,7 @@ export function ProfileModal({ client, ...rest }: Props) {
placeholder={t("Display name")} placeholder={t("Display name")}
value={displayName} value={displayName}
onChange={onChangeDisplayName} onChange={onChangeDisplayName}
data-testid="profile_displayname"
/> />
</FieldRow> </FieldRow>
{error && ( {error && (
@ -130,7 +131,11 @@ export function ProfileModal({ client, ...rest }: Props) {
<Button type="button" variant="secondary" onPress={onClose}> <Button type="button" variant="secondary" onPress={onClose}>
Cancel Cancel
</Button> </Button>
<Button type="submit" disabled={loading}> <Button
type="submit"
disabled={loading}
data-testid="profile_submit"
>
{loading ? t("Saving…") : t("Save")} {loading ? t("Saving…") : t("Save")}
</Button> </Button>
</FieldRow> </FieldRow>