696 - Minor Fix on cypress to amend the wait times and failures (#706)

* Refactor user authentication flow and improve UI consistency * Refactor scroll behavior for radar canvas in new user flow
ClimateMind · Oct 10, 2024 · 5f69cf8 · 5f69cf8
1 parent 19a6bbf
commit 5f69cf8
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 44 deletions.
diff --git a/cypress/e2e/new-user-a.cy.ts b/cypress/e2e/new-user-a.cy.ts
@@ -15,20 +15,26 @@ describe('New UserA', () => {
   it('allows new userA to go through 10 questions, see his results (personal values) and sign up', () => {
     // Load the HomePage and accept cookies
     cy.visit('/');
-    cy.get('button').contains(/accept/i).click();
+    cy.get('button')
+      .contains(/accept/i)
+      .click();
 
     // Transition to the PreQuizPage through button click
-    cy.get('button').contains(/get started/i).click({ force: true });
+    cy.get('button')
+      .contains(/get started/i)
+      .click({ force: true });
     cy.location('pathname').should('equal', '/start');
 
     // Transition to the QuizPage through button click
-    cy.get('button').contains(/take the quiz/i).click({ force: true });
+    cy.get('button')
+      .contains(/take the quiz/i)
+      .click({ force: true });
     cy.location('pathname').should('equal', '/questionnaire');
 
     // Complete the quiz.
     for (let i = 0; i < 10; i++) {
-      cy.contains('Q' + (i+1));
-      cy.contains('/10')
+      cy.contains('Q' + (i + 1));
+      cy.contains('/10');
       cy.contains(/not like me at all/i).click({ force: true });
       cy.tick(300); // Skip the animation between questions
       cy.wait(100); // Wait for the next question to appear
@@ -37,21 +43,32 @@ describe('New UserA', () => {
     // Submit the feedback and finish the quiz
     cy.contains(/bonus/i);
     cy.get('input').type('Some custom feedback');
-    cy.get('button').contains(/finish quiz/i).click();
+    cy.get('button')
+      .contains(/finish quiz/i)
+      .click();
 
     // Find out the results (personal values)
     cy.location('pathname').should('equal', '/submit');
-    cy.get('button').contains(/find out my climate personality/i).click();
+    cy.get('button')
+      .contains(/find out my climate personality/i)
+      .click();
     cy.location('pathname').should('equal', '/personal-values');
-
-    cy.contains(/power/i).should('be.visible');
-    cy.contains(/security/i).should('be.visible');
-    cy.contains(/tradition/i).should('be.visible');
-
-    cy.get('canvas[typeof="radar"]').should('be.visible');
+    cy.tick(300);
+    cy.wait(100);
+    cy.contains(/power/i).scrollIntoView().should('be.visible');
+    cy.contains(/security/i)
+      .scrollIntoView()
+      .should('be.visible');
+    cy.contains(/tradition/i)
+      .scrollIntoView()
+      .should('be.visible');
+
+    cy.get('canvas[typeof="radar"]').scrollIntoView().should('be.visible');
 
     // Complete by going to the sign up page
-    cy.get('button').contains(/dive in/i).click();
+    cy.get('button')
+      .contains(/dive in/i)
+      .click();
     cy.location('pathname').should('equal', '/sign-up');
 
     // At first the sign up button should be disabled
@@ -64,26 +81,34 @@ describe('New UserA', () => {
     cy.get('input[id="confirmPassword"]').type('asdf1234');
 
     // Now the sign up button should be enabled and login the user as well
-    cy.get('button').contains(/create account/i).click();
+    cy.get('button')
+      .contains(/create account/i)
+      .click();
     cy.location('pathname').should('equal', '/climate-feed');
   });
 
   it('allows new userA to go through 20 questions, see his results (personal values) and sign up', () => {
     // Load the HomePage and accept cookies
     cy.visit('/');
-    cy.get('button').contains(/accept/i).click();
+    cy.get('button')
+      .contains(/accept/i)
+      .click();
 
     // Transition to the PreQuizPage through button click
-    cy.get('button').contains(/get started/i).click({ force: true });
+    cy.get('button')
+      .contains(/get started/i)
+      .click({ force: true });
     cy.location('pathname').should('equal', '/start');
 
     // Transition to the QuizPage through button click
-    cy.get('button').contains(/take the quiz/i).click({ force: true });
+    cy.get('button')
+      .contains(/take the quiz/i)
+      .click({ force: true });
     cy.location('pathname').should('equal', '/questionnaire');
 
     // Complete the quiz.
     for (let i = 0; i < 10; i++) {
-      cy.contains('Q' + (i+1));
+      cy.contains('Q' + (i + 1));
       cy.contains('/10');
       cy.contains(/not like me at all/i).click({ force: true });
       cy.tick(300); // Skip the animation between questions
@@ -93,16 +118,20 @@ describe('New UserA', () => {
     // Submit the feedback and finish the quiz
     cy.contains(/bonus/i);
     cy.get('input').type('Some custom feedback');
-    cy.get('button').contains(/finish quiz/i).click();
+    cy.get('button')
+      .contains(/finish quiz/i)
+      .click();
 
     // Continue with the next 10 questions
     cy.location('pathname').should('equal', '/submit');
-    cy.get('button').contains(/continue/i).click();
+    cy.get('button')
+      .contains(/continue/i)
+      .click();
     cy.location('pathname').should('equal', '/questionnaire');
 
     // Complete the quiz.
     for (let i = 10; i < 20; i++) {
-      cy.contains('Q' + (i+1));
+      cy.contains('Q' + (i + 1));
       cy.contains('/20');
       cy.contains(/not like me at all/i).click({ force: true });
       cy.tick(300); // Skip the animation between questions
@@ -111,17 +140,26 @@ describe('New UserA', () => {
 
     // Find out the results (personal values)
     cy.location('pathname').should('equal', '/submit-set-two');
-    cy.get('button').contains(/find out my climate personality/i).click();
+    cy.get('button')
+      .contains(/find out my climate personality/i)
+      .click();
     cy.location('pathname').should('equal', '/personal-values');
-
-    cy.contains(/power/i).should('be.visible');
-    cy.contains(/security/i).should('be.visible');
-    cy.contains(/tradition/i).should('be.visible');
-
-    cy.get('canvas[typeof="radar"]').should('be.visible');
+    cy.tick(300);
+    cy.wait(100);
+    cy.contains(/power/i).scrollIntoView().should('be.visible');
+    cy.contains(/security/i)
+      .scrollIntoView()
+      .should('be.visible');
+    cy.contains(/tradition/i)
+      .scrollIntoView()
+      .should('be.visible');
+
+    cy.get('canvas[typeof="radar"]').scrollIntoView().should('be.visible');
 
     // Complete by going to the sign up page
-    cy.get('button').contains(/dive in/i).click();
+    cy.get('button')
+      .contains(/dive in/i)
+      .click();
     cy.location('pathname').should('equal', '/sign-up');
   });
 });
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
-    "test": "cypress run",
+    "test": "cypress run --headed",
     "docker:build": "docker build -t react-docker .",
     "docker:run": "docker run -p 3000:80 -e http://localhost:5000 --rm react-docker",
     "docker:dev:build": "docker build -f Dockerfile.dev -t react-docker-dev .",

diff --git a/src/pages/UserAUnauthorizedPages/LoginPage.tsx b/src/pages/UserAUnauthorizedPages/LoginPage.tsx
@@ -8,7 +8,6 @@ import { LoginForm, RequestPasswordResetModal, useLogin, useResetPassword } from
 import { useMobileView } from 'shared/hooks';
 
 function LoginPage() {
-  const devMode = localStorage.getItem('devMode') === 'true';
   const navigate = useNavigate();
   const location = useLocation();
   const isMobile = useMobileView();
@@ -50,8 +49,8 @@ function LoginPage() {
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>
           <LoginForm isLoading={isLoading} onLogin={handleSubmit} onForgotPasswordClick={() => setShowPasswordResetModal(true)} />
-          {devMode && <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>}
-          {devMode && <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />}
+          <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>
+          <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />
         </div>
 
         <RequestPasswordResetModal isOpen={showPasswordResetModal} onClose={() => setShowPasswordResetModal(false)} onSubmit={handlePasswordReset} />

diff --git a/src/pages/UserAUnauthorizedPages/SignUpPage.tsx b/src/pages/UserAUnauthorizedPages/SignUpPage.tsx
@@ -10,8 +10,6 @@ import { SignUpForm, useSignUp } from 'features/auth';
 import GoogleLogin from 'features/auth/components/GoogleLogin';
 
 function SignUpPage() {
-  const devMode = localStorage.getItem('devMode') === 'true';
-
   const signUpId = uuidv4();
   const navigate = useNavigate();
 
@@ -51,7 +49,7 @@ function SignUpPage() {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>
           <SignUpForm isLoading={isLoading} onSignUp={signUpHandler} />
           <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>
-          {devMode && <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Continue With Google" />}
+          <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Continue With Google" />
         </div>
       </PageContent>
     </Page>

diff --git a/src/pages/UserBPages/UserBLoginPage.tsx b/src/pages/UserBPages/UserBLoginPage.tsx
@@ -8,8 +8,6 @@ import { useMobileView } from 'shared/hooks';
 import GoogleLogin from 'features/auth/components/GoogleLogin';
 
 function UserBLoginPage() {
-  const devMode = localStorage.getItem('devMode') === 'true';
-
   const navigate = useNavigate();
   const { conversationId } = useParams();
   const isMobile = useMobileView();
@@ -52,8 +50,8 @@ function UserBLoginPage() {
         <img src="/logos/slogan.png" alt="Climate Mind Logo" style={styles.slogan} />
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>
           <LoginForm isLoading={isLoading} onLogin={handleSubmit} onForgotPasswordClick={() => setShowPasswordResetModal(true)} />
-          {devMode && <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>}
-          {devMode && <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />}
+          <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>
+          <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />
         </div>
         <RequestPasswordResetModal isOpen={showPasswordResetModal} onClose={() => setShowPasswordResetModal(false)} onSubmit={handlePasswordReset} />
       </PageContent>

diff --git a/src/pages/UserBPages/UserBSignUpPage.tsx b/src/pages/UserBPages/UserBSignUpPage.tsx
@@ -20,7 +20,6 @@ function UserBSignUpPage() {
   const { sessionId, quizId } = useAppSelector((state) => state.auth.userB);
   const { signUp } = useSignUp();
   const [isLoading, setIsLoading] = useState(false);
-  const devMode = localStorage.getItem('devMode') === 'true';
 
   async function signUpHandler(firstName: string, lastName: string, email: string, password: string) {
     setIsLoading(true);
@@ -48,13 +47,15 @@ function UserBSignUpPage() {
         <CmTypography variant="h1">Welcome to Climate Mind</CmTypography>
 
         <div style={{ display: 'flex' }}>
-          <CmTypography variant="body" style={{ textAlign: 'center' }}>Already have an account?</CmTypography>
+          <CmTypography variant="body" style={{ textAlign: 'center' }}>
+            Already have an account?
+          </CmTypography>
           <CmButton variant="text" text="Login" onClick={() => navigate(ROUTES.LOGIN_PAGE)} style={styles.loginButton} />
         </div>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>
           <SignUpForm isLoading={isLoading} onSignUp={signUpHandler} />
           <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>
-          {devMode && <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Continue With Google" />}
+          <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Continue With Google" />
         </div>
       </PageContent>
     </Page>