fix: all tests for the full functionality

graasp · Oct 2, 2024 · 1f1d1fc · 1f1d1fc
1 parent 7374639
commit 1f1d1fc
Show file tree

Hide file tree

Showing 10 changed files with 289 additions and 121 deletions.
diff --git a/cypress/e2e/resetPassword.cy.ts b/cypress/e2e/resetPassword.cy.ts
@@ -1,10 +1,17 @@
 import { RESET_PASSWORD_PATH } from '../../src/config/paths';
 import {
-  REQUEST_PASSWORD_RESET_EMAIL_FIELD_HELPER_ID,
   REQUEST_PASSWORD_RESET_EMAIL_FIELD_ID,
   REQUEST_PASSWORD_RESET_ERROR_MESSAGE_ID,
   REQUEST_PASSWORD_RESET_SUBMIT_BUTTON_ID,
   REQUEST_PASSWORD_RESET_SUCCESS_MESSAGE_ID,
+  RESET_PASSWORD_ERROR_MESSAGE_ID,
+  RESET_PASSWORD_ERROR_MISSING_TOKEN_ID,
+  RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ERROR_TEXT_ID,
+  RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ID,
+  RESET_PASSWORD_NEW_PASSWORD_FIELD_ERROR_TEXT_ID,
+  RESET_PASSWORD_NEW_PASSWORD_FIELD_ID,
+  RESET_PASSWORD_SUBMIT_BUTTON_ID,
+  RESET_PASSWORD_SUCCESS_MESSAGE_ID,
 } from '../../src/config/selectors';
 import { MEMBERS } from '../fixtures/members';
 
@@ -15,61 +22,84 @@ describe('Reset password', () => {
       const token = '1234';
       cy.visit(`${RESET_PASSWORD_PATH}?t=${token}`);
 
-      // request password reset for an existing member
-      cy.get(`#${REQUEST_PASSWORD_RESET_EMAIL_FIELD_ID}`).type(
-        MEMBERS.GRAASP.email,
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_FIELD_ID}`).type(
+        MEMBERS.GRAASP.password,
       );
-      cy.get(`#${REQUEST_PASSWORD_RESET_SUBMIT_BUTTON_ID}`).click();
-      cy.get(`#${REQUEST_PASSWORD_RESET_SUCCESS_MESSAGE_ID}`).should(
-        'be.visible',
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ID}`).type(
+        MEMBERS.GRAASP.password,
       );
+      cy.get(`#${RESET_PASSWORD_SUBMIT_BUTTON_ID}`).click();
+      cy.get(`#${RESET_PASSWORD_SUCCESS_MESSAGE_ID}`).should('be.visible');
     });
+
     it('With weak password', () => {
       cy.setUpApi();
       const token = '1234';
       cy.visit(`${RESET_PASSWORD_PATH}?t=${token}`);
 
-      // request password reset for an existing member
-      cy.get(`#${REQUEST_PASSWORD_RESET_EMAIL_FIELD_ID}`).type(
-        MEMBERS.GRAASP.email,
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_FIELD_ID}`).type('weak');
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ID}`).type(
+        'weak',
       );
-      cy.get(`#${REQUEST_PASSWORD_RESET_SUBMIT_BUTTON_ID}`).click();
-      cy.get(`#${REQUEST_PASSWORD_RESET_SUCCESS_MESSAGE_ID}`).should(
-        'be.visible',
+      cy.get(`#${RESET_PASSWORD_SUBMIT_BUTTON_ID}`).click();
+      cy.get(`#${RESET_PASSWORD_SUBMIT_BUTTON_ID}`).should('be.disabled');
+
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_FIELD_ERROR_TEXT_ID}`).should(
+        'contain.text',
+        'This password is too weak',
       );
+
+      cy.get(
+        `#${RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ERROR_TEXT_ID}`,
+      ).should('contain.text', 'This password is too weak');
     });
-  });
-  it('Without token', () => {
-    cy.setUpApi();
-    cy.visit(RESET_PASSWORD_PATH);
 
-    cy.get(`#${REQUEST_PASSWORD_RESET_EMAIL_FIELD_ID}`).type(
-      MEMBERS.WRONG_EMAIL.email,
-    );
+    it('Without matching passwords', () => {
+      cy.setUpApi();
+      const token = '1234';
+      cy.visit(`${RESET_PASSWORD_PATH}?t=${token}`);
 
-    // click the button to trigger the validation
-    cy.get(`#${REQUEST_PASSWORD_RESET_SUBMIT_BUTTON_ID}`).click();
-    cy.get(`#${REQUEST_PASSWORD_RESET_SUBMIT_BUTTON_ID}`).should('be.disabled');
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_FIELD_ID}`).type('aPassword1');
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ID}`).type(
+        'aPassword2',
+      );
+      cy.get(`#${RESET_PASSWORD_SUBMIT_BUTTON_ID}`).click();
+      cy.get(`#${RESET_PASSWORD_SUBMIT_BUTTON_ID}`).should('be.disabled');
 
-    cy.get(`#${REQUEST_PASSWORD_RESET_EMAIL_FIELD_HELPER_ID}`).should(
-      'contain.text',
-      'This does not look like a valid email address',
-    );
-  });
-  it('With server error', () => {
-    cy.setUpApi({ shouldFailRequestPasswordReset: true });
-    cy.visit(RESET_PASSWORD_PATH);
+      cy.get(
+        `#${RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ERROR_TEXT_ID}`,
+      ).should('contain.text', 'The passwords do not match.');
+    });
 
-    cy.get(`#${REQUEST_PASSWORD_RESET_EMAIL_FIELD_ID}`).type(
-      MEMBERS.GRAASP.email,
-    );
+    it('With server error', () => {
+      cy.setUpApi({ shouldFailResetPassword: true });
+      const token = '1234';
+      cy.visit(`${RESET_PASSWORD_PATH}?t=${token}`);
+
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_FIELD_ID}`).type('aPassword1');
+      cy.get(`#${RESET_PASSWORD_NEW_PASSWORD_CONFIRMATION_FIELD_ID}`).type(
+        'aPassword1',
+      );
+
+      cy.get(`#${RESET_PASSWORD_SUBMIT_BUTTON_ID}`).click();
 
-    cy.get(`#${REQUEST_PASSWORD_RESET_SUBMIT_BUTTON_ID}`).click();
+      // the backend fails the request (token is not valid for example)
+      cy.get(`#${RESET_PASSWORD_ERROR_MESSAGE_ID}`).should(
+        'contain.text',
+        'An error prevented the password reset operation.',
+      );
+    });
+  });
+
+  it('Without token', () => {
+    cy.setUpApi();
+    cy.visit(RESET_PASSWORD_PATH);
 
-    // expect the backend to fail the request because the captcha was not sent
-    cy.get(`#${REQUEST_PASSWORD_RESET_ERROR_MESSAGE_ID}`).should(
+    // a rough error message is displayed when the url does not
+    // contain the required query string argument `t` containing the token
+    cy.get(`#${RESET_PASSWORD_ERROR_MISSING_TOKEN_ID}`).should(
       'contain.text',
-      'There was an error making your request',
+      'Error: The current page is missing some required information.',
     );
   });
 });
diff --git a/cypress/fixtures/members.ts b/cypress/fixtures/members.ts
@@ -5,7 +5,7 @@ export const MEMBERS = {
     id: 'graasp-id',
     name: 'graasp',
     email: '[email protected]',
-    password: 'test',
+    password: 'aPassword1',
     nameValid: true,
     emailValid: true,
     passwordValid: true,
@@ -20,7 +20,7 @@ export const MEMBERS = {
     id: 'graasp_other-id',
     name: 'graasp_other',
     email: '[email protected]',
-    password: 'test',
+    password: 'aPassword2',
     nameValid: true,
     emailValid: true,
     passwordValid: true,

diff --git a/src/components/layout/CenteredContent.tsx b/src/components/layout/CenteredContent.tsx
@@ -4,6 +4,7 @@ import { Stack } from '@mui/material';
 
 import { BACKGROUND_PATTERN } from '../../config/constants';
 import APIChecker from '../APIChecker';
+import Footer from '../Footer';
 import { styledBox } from '../styles';
 
 export const CenteredContent = ({
@@ -33,6 +34,7 @@ export const CenteredContent = ({
           {children}
         </Stack>
       </Stack>
+      <Footer />
     </Stack>
   );
 };
diff --git a/src/components/layout/DialogHeader.tsx b/src/components/layout/DialogHeader.tsx
@@ -1,21 +1,29 @@
+import { ReactNode } from 'react';
+
 import { GraaspLogo } from '@graasp/ui';
 
 import { Stack, Typography, useTheme } from '@mui/material';
 
 type DialogHeaderProps = {
   title: string;
-  description?: string;
+  description?: string | ReactNode;
 };
 export const DialogHeader = ({ title, description }: DialogHeaderProps) => {
   const theme = useTheme();
 
   return (
-    <Stack direction="column" alignItems="center" spacing={1}>
+    <Stack direction="column" alignItems="center" spacing={1} width="100%">
       <GraaspLogo height={90} sx={{ fill: theme.palette.primary.main }} />
       <Typography variant="h4" component="h2">
         {title}
       </Typography>
-      {description && <Typography pt={2}>{description}</Typography>}
+      {description ? (
+        typeof description === 'string' ? (
+          <Typography pt={2}>{description}</Typography>
+        ) : (
+          description
+        )
+      ) : null}
     </Stack>
   );
 };