Merge pull request #118 from near/playwright-add-data-ids

Data-test-ids for playwright testing
near · Dec 4, 2023 · 3f2602b · 3f2602b
2 parents 14448f0 + 046e8ea
commit 3f2602b
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 16 deletions.
diff --git a/packages/near-fast-auth-signer/src/components/AddDevice/AddDevice.tsx b/packages/near-fast-auth-signer/src/components/AddDevice/AddDevice.tsx
@@ -343,13 +343,14 @@ function SignInPage() {
               placeholder="[email protected]"
               type="email"
               id="email"
+              data-test-id="add-device-email"
               required
             />
           </label>
 
         </InputContainer>
 
-        <Button type="submit" size="large" label="Continue" variant="affirmative" onClick={onSubmit} />
+        <Button type="submit" size="large" label="Continue" variant="affirmative" data-test-id="add-device-continue-button" onClick={onSubmit} />
       </FormContainer>
     </StyledContainer>
   );

diff --git a/packages/near-fast-auth-signer/src/components/AuthCallback/AuthCallback.tsx b/packages/near-fast-auth-signer/src/components/AuthCallback/AuthCallback.tsx
@@ -300,7 +300,7 @@ function AuthCallbackPage() {
     }
   }, []); // DEC-1294 leaving dependencies empty to ensure the effect runs only once
 
-  return <StyledStatusMessage>{statusMessage}</StyledStatusMessage>;
+  return <StyledStatusMessage data-test-id="callback-status-message">{statusMessage}</StyledStatusMessage>;
 }
 
 export default AuthCallbackPage;
diff --git a/packages/near-fast-auth-signer/src/components/AuthIndicator/AuthIndicator.tsx b/packages/near-fast-auth-signer/src/components/AuthIndicator/AuthIndicator.tsx
@@ -15,7 +15,7 @@ function AuthIndicator() {
   }, [authenticated]);
 
   return (
-    <AuthIndicatorButton $buttonType="secondary" $isSignedIn={authenticated && authenticated !== 'loading'}>
+    <AuthIndicatorButton data-test-id="auth-indicator-button" $buttonType="secondary" $isSignedIn={authenticated && authenticated !== 'loading'}>
       {authenticated ? <p>signed in</p>
         : <p>not signed in</p>}
     </AuthIndicatorButton>

diff --git a/packages/near-fast-auth-signer/src/components/CreateAccount/CreateAccount.tsx b/packages/near-fast-auth-signer/src/components/CreateAccount/CreateAccount.tsx
@@ -191,11 +191,11 @@ function CreateAccount() {
     <StyledContainer>
       <FormContainer onSubmit={onSubmit}>
         <header>
-          <h1>Create account</h1>
+          <h1 data-test-id="heading_create">Create account</h1>
           <p className="desc">
             <span>Have an account?</span>
             {' '}
-            <Link to="/login">Sign in</Link>
+            <Link to="/login" data-test-id="create_login_link">Sign in</Link>
           </p>
         </header>
 
@@ -222,6 +222,7 @@ function CreateAccount() {
             placeholder="[email protected]"
             type="email"
             id="email"
+            data-test-id="email_create"
           />
           <div className="select-mail-provider">
             {emailProviders.map((provider) => {
@@ -238,7 +239,7 @@ function CreateAccount() {
             })}
           </div>
           <div className="subText">
-            <div className="error">
+            <div className="error" data-test-id="create_email_subtext_error">
               <ErrorMessage
                 errors={errors}
                 name="email"
@@ -280,6 +281,7 @@ function CreateAccount() {
                 setIsUsernameAvailable(isAccountAvailable);
                 return null;
               }}
+              data-test-id="username_create"
               placeholder="user_name"
             />
             <div className="input-group-right">
@@ -291,14 +293,14 @@ function CreateAccount() {
             {isUsernameAvailable && (
               <div className="success">
                 <SuccessSvg />
-                <span>Account ID available</span>
+                <span data-test-id="account_available_notice">Account ID available</span>
               </div>
             )}
             <ErrorMessage
               errors={errors}
               name="username"
               render={({ message }) => (
-                <div className="error">
+                <div className="error" data-test-id="create-error-subtext">
                   <ErrorSvg />
                   <span>{message}</span>
                 </div>
@@ -307,7 +309,7 @@ function CreateAccount() {
           </div>
         </InputContainer>
 
-        <Button label="Continue" variant="affirmative" type="submit" size="large" />
+        <Button label="Continue" variant="affirmative" type="submit" size="large" data-test-id="continue_button_create" />
       </FormContainer>
     </StyledContainer>
   );

diff --git a/packages/near-fast-auth-signer/src/components/Layout/Layout.tsx b/packages/near-fast-auth-signer/src/components/Layout/Layout.tsx
@@ -7,16 +7,16 @@ function Layout() {
       <div>
         <ul>
           <li>
-            <Link to="/">Home</Link>
+            <Link data-test-id="layout-link-home" to="/">Home</Link>
           </li>
           <li>
-            <Link to="/add-device">Add Device</Link>
+            <Link data-test-id="layout-link-add-device" to="/add-device">Add Device</Link>
           </li>
           <li>
-            <Link to="/create-account">Create Account</Link>
+            <Link data-test-id="layout-link-create-account" to="/create-account">Create Account</Link>
           </li>
           <li>
-            <Link to="/sign">Sign</Link>
+            <Link data-test-id="layout-link-sign" to="/sign">Sign</Link>
           </li>
         </ul>
       </div>

diff --git a/packages/near-fast-auth-signer/src/components/Login/Login.tsx b/packages/near-fast-auth-signer/src/components/Login/Login.tsx
@@ -62,7 +62,7 @@ function Login() {
     <LoginWrapper>
       <form onSubmit={onSubmit}>
         <header>
-          <h1>Log In</h1>
+          <h1 data-test-id="heading_login">Log In</h1>
           <p className="desc">Please enter your email</p>
         </header>
 
@@ -77,6 +77,7 @@ function Login() {
               }}
               placeholder="[email protected]"
               type="email"
+              data-test-id="email_login"
               required
             />
           </label>
@@ -87,6 +88,7 @@ function Login() {
           type="submit"
           label="Continue"
           variant="affirmative"
+          data-test-id="login_button"
           onClick={onSubmit}
         />
       </form>

diff --git a/packages/near-fast-auth-signer/src/components/VerifyEmail/verify-email.tsx b/packages/near-fast-auth-signer/src/components/VerifyEmail/verify-email.tsx
@@ -135,12 +135,12 @@ function VerifyEmailPage() {
         <EmailSvg />
         <header>
           <h1>Verify Your Email</h1>
-          <p>{query.get('email')}</p>
+          <p data-test-id="verify-email-address">{query.get('email')}</p>
         </header>
 
         <p>Check your inbox to activate your account.</p>
 
-        <Button size="large" label="Resend" onClick={handleResendEmail} />
+        <Button size="large" label="Resend" data-test-id="resend-verify-email-button" onClick={handleResendEmail} />
       </FormContainer>
     </StyledContainer>
   );