Add login tests

3 files changed, 11 insertions, 10 deletions

diff --git a/gui/src/renderer/components/AccountTokenLabel.tsx b/gui/src/renderer/components/AccountTokenLabel.tsx
index 704f41af10..479beed9a1 100644
--- a/gui/src/renderer/components/AccountTokenLabel.tsx
+++ b/gui/src/renderer/components/AccountTokenLabel.tsx
@@ -14,6 +14,7 @@ export default function AccountTokenLabel(props: IAccountTokenLabelProps) {
       displayValue={formatAccountToken(props.accountToken)}
       obscureValue={props.obscureValue}
       className={props.className}
+      data-testid="account-number"
     />
   );
 }
diff --git a/gui/src/renderer/components/ClipboardLabel.tsx b/gui/src/renderer/components/ClipboardLabel.tsx
index 98fcede85e..582e03b02d 100644
--- a/gui/src/renderer/components/ClipboardLabel.tsx
+++ b/gui/src/renderer/components/ClipboardLabel.tsx
@@ -10,12 +10,11 @@ import ImageView from './ImageView';
 
 const COPIED_ICON_DURATION = 2000;
 
-interface IProps {
+interface IProps extends React.HTMLAttributes<HTMLElement> {
   value: string;
   displayValue?: string;
   obscureValue?: boolean;
   message?: string;
-  className?: string;
 }
 
 const StyledLabelContainer = styled.div({
@@ -42,29 +41,30 @@ const StyledCopyButton = styled(StyledButton)({
 });
 
 export default function ClipboardLabel(props: IProps) {
-  const [obscured, , , toggleObscured] = useBoolean(props.obscureValue ?? true);
+  const { value, obscureValue, displayValue, message, ...otherProps } = props;
+
+  const [obscured, , , toggleObscured] = useBoolean(obscureValue ?? true);
   const [justCopied, setJustCopied, resetJustCopied] = useBoolean(false);
 
   const copiedScheduler = useScheduler();
 
   const onCopy = useCallback(async () => {
     try {
-      await navigator.clipboard.writeText(props.value);
+      await navigator.clipboard.writeText(value);
       copiedScheduler.schedule(resetJustCopied, COPIED_ICON_DURATION);
       setJustCopied();
     } catch (e) {
       const error = e as Error;
       log.error(`Failed to copy to clipboard: ${error.message}`);
     }
-  }, [props.value, copiedScheduler, setJustCopied, resetJustCopied]);
+  }, [value, copiedScheduler, setJustCopied, resetJustCopied]);
 
-  const value = props.displayValue ?? props.value;
   return (
     <StyledLabelContainer>
-      <StyledLabel className={props.className} aria-hidden={obscured}>
-        {obscured ? '●●●● ●●●● ●●●● ●●●●' : value}
+      <StyledLabel aria-hidden={obscured} {...otherProps}>
+        {obscured ? '●●●● ●●●● ●●●● ●●●●' : displayValue ?? value}
       </StyledLabel>
-      {props.obscureValue !== false && (
+      {obscureValue !== false && (
         <StyledButton
           onClick={toggleObscured}
           aria-label={
diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index b1d2a1392b..4219c0572f 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -274,7 +274,7 @@ export default class Login extends React.Component<IProps, IState> {
 
     return (
       <>
-        <StyledSubtitle>{this.formSubtitle()}</StyledSubtitle>
+        <StyledSubtitle data-testid="subtitle">{this.formSubtitle()}</StyledSubtitle>
         <StyledAccountInputGroup
           active={allowInteraction && this.state.isActive}
           editable={allowInteraction}