Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Oct 10, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b63dee
Refactor user authentication flow and improve UI consistency
epixieme Oct 9, 2024
0059909
Refactor scroll behavior for radar canvas in new user flow
epixieme Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 68 additions & 30 deletions cypress/e2e/new-user-a.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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');
});
});
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 .",
Expand Down
5 changes: 2 additions & 3 deletions src/pages/UserAUnauthorizedPages/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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} />
Expand Down
4 changes: 1 addition & 3 deletions src/pages/UserAUnauthorizedPages/SignUpPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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>
Expand Down
6 changes: 2 additions & 4 deletions src/pages/UserBPages/UserBLoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 4 additions & 3 deletions src/pages/UserBPages/UserBSignUpPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down