test: add test for authentication, refactor

cypress/fixtures/items.js

@@ -1,16 +1,10 @@
 import { ITEM_TYPES } from '../../src/config/constants';
-
-export const MEMBERS = {
-  ANNA: { id: 'anna-id', name: 'anna', email: '[email protected]' },
-  BOB: { id: 'bob-id', name: 'bob', email: '[email protected]' },
-};
-
-export const CURRENT_USER_ID = MEMBERS.ANNA.id;
+import { CURRENT_USER } from './members';
 
 const DEFAULT_ITEM = {
   description: '',
   extra: {},
-  creator: CURRENT_USER_ID,
+  creator: CURRENT_USER.id,
   type: ITEM_TYPES.SPACE,
 };
 

cypress/fixtures/members.js

@@ -0,0 +1,6 @@
+export const MEMBERS = {
+  ANNA: { id: 'anna-id', name: 'anna', email: '[email protected]' },
+  BOB: { id: 'bob-id', name: 'bob', email: '[email protected]' },
+};
+
+export const CURRENT_USER = MEMBERS.ANNA;

cypress/integration/authentication.spec.js

@@ -0,0 +1,74 @@
+import {
+  buildItemPath,
+  HOME_PATH,
+  SHARED_ITEMS_PATH,
+} from '../../src/config/paths';
+import {
+  HEADER_APP_BAR_ID,
+  HEADER_USER_ID,
+  USER_MENU_SIGN_OUT_OPTION_ID,
+} from '../../src/config/selectors';
+import { SAMPLE_ITEMS } from '../fixtures/items';
+import { CURRENT_USER } from '../fixtures/members';
+
+const PAGE_LOAD_WAITING_TIME = 3000;
+
+describe('Authentication', () => {
+  describe('Signed Off > Redirect to sign in route', () => {
+    beforeEach(() => {
+      cy.setUpApi({ items: SAMPLE_ITEMS, getCurrentMemberError: true });
+    });
+    it('Home', () => {
+      cy.visit(HOME_PATH);
+      cy.wait('@signInRedirection');
+    });
+    it('Shared Items', () => {
+      cy.visit(SHARED_ITEMS_PATH);
+      cy.wait('@signInRedirection');
+    });
+    it('Item', () => {
+      cy.visit(buildItemPath(SAMPLE_ITEMS[0].id));
+      cy.wait('@signInRedirection');
+    });
+  });
+
+  describe('Signed In', () => {
+    beforeEach(() => {
+      cy.setUpApi({ items: SAMPLE_ITEMS });
+    });
+
+    it('Signing Off redirect to sign in route', () => {
+      cy.visit(HOME_PATH);
+      // user name in header
+      cy.get(`#${HEADER_USER_ID}`).click();
+      cy.get(`#${USER_MENU_SIGN_OUT_OPTION_ID}`).click();
+      cy.wait('@signInRedirection');
+    });
+
+    describe('Load page correctly', () => {
+      it('Home', () => {
+        cy.visit(HOME_PATH);
+        cy.wait(PAGE_LOAD_WAITING_TIME);
+        cy.get(`#${HEADER_APP_BAR_ID}`).should('exist');
+      });
+      it('Shared Items', () => {
+        cy.visit(SHARED_ITEMS_PATH);
+        cy.wait(PAGE_LOAD_WAITING_TIME);
+        cy.get(`#${HEADER_APP_BAR_ID}`).should('exist');
+      });
+      it('Item', () => {
+        cy.visit(buildItemPath(SAMPLE_ITEMS[0].id));
+        cy.wait(PAGE_LOAD_WAITING_TIME);
+        cy.get(`#${HEADER_APP_BAR_ID}`).should('exist');
+      });
+    });
+
+    describe('Display User Information', () => {
+      it('Header', () => {
+        cy.visit(HOME_PATH);
+        // user name in header
+        cy.get(`#${HEADER_USER_ID}`).should('contain', CURRENT_USER.name);
+      });
+    });
+  });
+});

cypress/integration/item/share/gridShareItem.spec.js

@@ -4,7 +4,8 @@ import {
   buildItemCard,
   SHARE_ITEM_BUTTON_CLASS,
 } from '../../../../src/config/selectors';
-import { MEMBERS, SAMPLE_ITEMS } from '../../../fixtures/items';
+import { SAMPLE_ITEMS } from '../../../fixtures/items';
+import { MEMBERS } from '../../../fixtures/members';
 
 const shareItem = ({ id, member, permission }) => {
   cy.get(`#${buildItemCard(id)} .${SHARE_ITEM_BUTTON_CLASS}`).click();

cypress/integration/item/share/listShareItem.spec.js

@@ -8,7 +8,8 @@ import {
   buildItemsTableRowId,
   SHARE_ITEM_BUTTON_CLASS,
 } from '../../../../src/config/selectors';
-import { MEMBERS, SAMPLE_ITEMS } from '../../../fixtures/items';
+import { SAMPLE_ITEMS } from '../../../fixtures/items';
+import { MEMBERS } from '../../../fixtures/members';
 
 const shareItem = ({ id, member, permission }) => {
   cy.get(`#${buildItemsTableRowId(id)} .${SHARE_ITEM_BUTTON_CLASS}`).click();

cypress/support/commands.js

@@ -22,6 +22,8 @@ import {
   mockGetS3FileContent,
   mockUploadItem,
   mockGetCurrentMember,
+  mockSignInRedirection,
+  mockSignOut,
 } from './server';
 import './commands/item';
 import './commands/navigation';
@@ -80,6 +82,10 @@ Cypress.Commands.add(
     mockGetS3FileContent(getS3FileContentError);
 
     mockGetCurrentMember(getCurrentMemberError);
+
+    mockSignInRedirection();
+
+    mockSignOut();
   },
 );
 

cypress/support/server.js

@@ -18,14 +18,16 @@ import {
   buildGetS3MetadataRoute,
   buildS3UploadFileRoute,
   GET_CURRENT_MEMBER_ROUTE,
+  buildSignInPath,
+  SIGN_OUT_ROUTE,
 } from '../../src/api/routes';
 import {
   getItemById,
   isChild,
   isRootItem,
   transformIdForPath,
 } from '../../src/utils/item';
-import { CURRENT_USER_ID, MEMBERS } from '../fixtures/items';
+import { CURRENT_USER, MEMBERS } from '../fixtures/members';
 import { ID_FORMAT, parseStringToRegExp, EMAIL_FORMAT } from './utils';
 import {
   DEFAULT_PATCH,
@@ -37,7 +39,7 @@ import {
 const API_HOST = Cypress.env('API_HOST');
 const S3_FILES_HOST = Cypress.env('S3_FILES_HOST');
 
-export const mockGetCurrentMember = (members, shouldThrowError = false) => {
+export const mockGetCurrentMember = (shouldThrowError = false) => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
@@ -89,7 +91,7 @@ export const mockPostItem = (items, shouldThrowError) => {
         ...body,
         id,
         path: transformIdForPath(id),
-        creator: CURRENT_USER_ID,
+        creator: CURRENT_USER.id,
       });
     },
   ).as('postItem');
@@ -383,3 +385,33 @@ export const mockGetS3FileContent = (items, shouldThrowError) => {
     },
   ).as('getS3FileContent');
 };
+
+export const mockSignInRedirection = () => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(buildSignInPath()),
+    },
+    ({ reply }) => {
+      reply({
+        headers: { 'content-type': 'text/html' },
+        statusCode: StatusCodes.OK,
+      });
+    },
+  ).as('signInRedirection');
+};
+
+export const mockSignOut = () => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(SIGN_OUT_ROUTE),
+    },
+    ({ reply }) => {
+      reply({
+        headers: { 'content-type': 'text/html' },
+        statusCode: StatusCodes.OK,
+      });
+    },
+  ).as('signOut');
+};

src/api/authentication.js

@@ -1,8 +1,11 @@
 import { API_HOST } from '../config/constants';
+import { SIGN_OUT_ROUTE } from './routes';
 import { DEFAULT_GET, checkRequest } from './utils';
 
 // eslint-disable-next-line import/prefer-default-export
 export const signOut = async () => {
-  const req = await fetch(`${API_HOST}/logout`, DEFAULT_GET).then(checkRequest);
+  const req = await fetch(`${API_HOST}/${SIGN_OUT_ROUTE}`, DEFAULT_GET).then(
+    checkRequest,
+  );
   return req.ok;
 };

src/api/routes.js

@@ -1,3 +1,4 @@
+import qs from 'qs';
 import { S3_FILES_HOST } from '../config/constants';
 
 export const ITEMS_ROUTE = 'items';
@@ -39,7 +40,7 @@ export const buildGetS3MetadataRoute = (id) =>
 export const buildS3FileUrl = (key) => `${S3_FILES_HOST}/${key}`;
 export const GET_CURRENT_MEMBER_ROUTE = `${MEMBERS_ROUTE}/current`;
 export const buildSignInPath = (to) => {
-  const qs = to ? `?to=${to}` : '';
-  return `signin${qs}`;
+  const queryString = qs.stringify({ to }, { addQueryPrefix: true });
+  return `signin${queryString}`;
 };
-export const SIGN_UP_PATH = 'signup';
+export const SIGN_OUT_ROUTE = 'logout';

src/components/common/SettingsHeader.js

@@ -15,6 +15,10 @@ import {
   USERNAME_MAX_LENGTH,
 } from '../../config/constants';
 import { buildSignInPath } from '../../api/routes';
+import {
+  HEADER_USER_ID,
+  USER_MENU_SIGN_OUT_OPTION_ID,
+} from '../../config/selectors';
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
@@ -62,7 +66,11 @@ function SettingsHeader() {
       return <MenuItem onClick={handleSignIn}>{t('Sign In')}</MenuItem>;
     }
 
-    return <MenuItem onClick={handleSignOut}>{t('Sign Out')}</MenuItem>;
+    return (
+      <MenuItem onClick={handleSignOut} id={USER_MENU_SIGN_OUT_OPTION_ID}>
+        {t('Sign Out')}
+      </MenuItem>
+    );
   };
 
   const username = user.get('name');
@@ -71,7 +79,11 @@ function SettingsHeader() {
 
   return (
     <>
-      <Box className={classes.wrapper} onClick={handleClick}>
+      <Box
+        className={classes.wrapper}
+        onClick={handleClick}
+        id={HEADER_USER_ID}
+      >
         <Avatar className={classes.avatar} alt={username} src={avatarImage} />
         {username && (
           <Typography variant="subtitle1" className={classes.username}>

src/components/layout/Header.js

@@ -9,6 +9,7 @@ import { AppBar, Toolbar, Typography } from '@material-ui/core';
 import { ReactComponent as GraaspLogo } from '../../resources/graasp-logo.svg';
 import { APP_NAME, HEADER_HEIGHT } from '../../config/constants';
 import SettingsHeader from '../common/SettingsHeader';
+import { HEADER_APP_BAR_ID } from '../../config/selectors';
 
 const useStyles = makeStyles((theme) => ({
   header: {
@@ -55,7 +56,7 @@ const Header = ({ isMenuOpen, toggleMenu }) => {
   };
 
   return (
-    <AppBar position="fixed">
+    <AppBar position="fixed" id={HEADER_APP_BAR_ID}>
       <Toolbar className={classes.header}>
         <div className={classes.headerLeft}>
           {renderMenuIcon()}

src/config/selectors.js

@@ -49,3 +49,6 @@ export const CREATE_ITEM_FILE_ID = 'createItemFile';
 export const ITEM_FORM_LINK_INPUT_ID = 'itemFormLinkInput';
 export const DASHBOARD_UPLOADER_ID = 'dashboardUploader';
 export const CREATE_ITEM_CLOSE_BUTTON_ID = 'createItemCloseButton';
+export const HEADER_APP_BAR_ID = 'headerAppBar';
+export const HEADER_USER_ID = 'headerUser';
+export const USER_MENU_SIGN_OUT_OPTION_ID = 'userMenuSignOutOption';