feat: add thumbnail setting

graasp · Dec 2, 2021 · 0929131 · 0929131
1 parent eaca02f
commit 0929131
Show file tree

Hide file tree

Showing 45 changed files with 1,108 additions and 280 deletions.
diff --git a/cypress/fixtures/members.js b/cypress/fixtures/members.js
@@ -1,3 +1,5 @@
+import { FIXTURES_THUMBNAILS_FOLDER } from '../support/constants';
+
 export const SIGNED_OUT_MEMBER = {};
 
 export const MEMBERS = {
@@ -16,12 +18,16 @@ export const MEMBERS = {
     email: '[email protected]',
     createdAt: '2021-04-13 14:56:34.749946',
     extra: { lang: 'en' },
+    // this only exists for test
+    thumbnails: FIXTURES_THUMBNAILS_FOLDER,
   },
   CEDRIC: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130006',
     name: 'cedric',
     email: '[email protected]',
     createdAt: '2021-04-13 14:56:34.749946',
+    // this only exists for test
+    thumbnails: FIXTURES_THUMBNAILS_FOLDER,
   },
   DAVID: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130062',

diff --git a/cypress/fixtures/thumbnails.js b/cypress/fixtures/thumbnails.js
@@ -0,0 +1,71 @@
+import { PERMISSION_LEVELS } from '../../src/enums';
+import { FIXTURES_THUMBNAILS_FOLDER } from '../support/constants';
+import { DEFAULT_FOLDER_ITEM } from './items';
+import { MEMBERS } from './members';
+
+// eslint-disable-next-line import/prefer-default-export
+export const SAMPLE_ITEMS_WITH_THUMBNAILS = {
+  items: [
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'bfafbd2a-5688-11eb-ae93-0242ac130002',
+      name: 'own_item_name1',
+      path: 'bfafbd2a_5688_11eb_ae93_0242ac130002',
+      extra: {
+        image: 'someimageurl',
+      },
+      memberships: [
+        {
+          itemPath: 'bfa09f5a_5688_11eb_ae93_0242ac130002',
+          permission: PERMISSION_LEVELS.ADMIN,
+          memberId: MEMBERS.ANNA.id,
+        },
+      ],
+    },
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'bfa09f5a-5688-11eb-ae93-0242ac130002',
+      name: 'own_item_name2',
+      path: 'bfa09f5a_5688_11eb_ae93_0242ac130002',
+      extra: {
+        image: 'someimageurl',
+      },
+      memberships: [
+        {
+          itemPath: 'fdf09f5a-5688-11eb-ae93-0242ac130002',
+          permission: PERMISSION_LEVELS.ADMIN,
+          memberId: MEMBERS.CEDRIC.id,
+        },
+        {
+          itemPath: 'bfa09f5a_5688_11eb_ae93_0242ac130002',
+          permission: PERMISSION_LEVELS.ADMIN,
+          memberId: MEMBERS.BOB.id,
+        },
+      ],
+      thumbnails: FIXTURES_THUMBNAILS_FOLDER,
+    },
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'bfa09f5a-5688-11eb-ae93-0242ac130002',
+      name: 'own_item_name3',
+      path: 'bfa09f5a_5688_11eb_ae93_0242ac130002',
+      extra: {
+        image: 'someimageurl',
+      },
+      creator: MEMBERS.CEDRIC.id,
+      memberships: [
+        {
+          itemPath: 'fdf09f5a-5688-11eb-ae93-0242ac130002',
+          permission: PERMISSION_LEVELS.ADMIN,
+          memberId: MEMBERS.CEDRIC.id,
+        },
+        {
+          itemPath: 'bfa09f5a_5688_11eb_ae93_0242ac130002',
+          permission: PERMISSION_LEVELS.ADMIN,
+          memberId: MEMBERS.BOB.id,
+        },
+      ],
+    },
+  ],
+  memberships: [],
+};
diff --git a/cypress/fixtures/thumbnails/medium b/cypress/fixtures/thumbnails/medium
diff --git a/cypress/fixtures/thumbnails/small b/cypress/fixtures/thumbnails/small
diff --git a/cypress/integration/item/share/shareItem.spec.js b/cypress/integration/item/share/shareItem.spec.js
@@ -35,7 +35,7 @@ export const changeVisibility = (value) => {
 };
 
 describe('Share Item', () => {
-  it.only('Default Private Item', () => {
+  it('Default Private Item', () => {
     cy.setUpApi({ ...SAMPLE_ITEMS, tags: DEFAULT_TAGS });
     const item = SAMPLE_ITEMS.items[0];
     cy.visit(buildItemPath(item.id));

diff --git a/cypress/integration/item/thumbnails/uploadThumbnail.spec.js b/cypress/integration/item/thumbnails/uploadThumbnail.spec.js
@@ -0,0 +1,54 @@
+import {
+  buildItemPath,
+  MEMBER_PROFILE_PATH,
+} from '../../../../src/config/paths';
+import {
+  ITEM_SETTINGS_BUTTON_CLASS,
+  THUMBNAIL_SETTING_UPLOAD_BUTTON_CLASSNAME,
+  CROP_MODAL_CONFIRM_BUTTON_CLASSNAME,
+  MEMBER_PROFILE_AVATAR_UPLOAD_BUTTON_CLASSNAME,
+} from '../../../../src/config/selectors';
+import { SAMPLE_ITEMS_WITH_THUMBNAILS } from '../../../fixtures/thumbnails';
+import { FILE_LOADING_PAUSE } from '../../../support/constants';
+
+describe('Upload Thumbnails', () => {
+  beforeEach(() => {
+    cy.setUpApi(SAMPLE_ITEMS_WITH_THUMBNAILS);
+  });
+
+  it(`upload item thumbnail`, () => {
+    const { items } = SAMPLE_ITEMS_WITH_THUMBNAILS;
+    cy.visit(buildItemPath(items[0].id));
+    cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
+
+    // change item thumbnail
+    cy.fixture('thumbnails/medium', 'binary')
+      .then(Cypress.Blob.binaryStringToBlob)
+      .then((fileContent) => {
+        cy.get(`.${THUMBNAIL_SETTING_UPLOAD_BUTTON_CLASSNAME}`).attachFile({
+          fileContent,
+          fileName: 'testPicture',
+        });
+        cy.wait(FILE_LOADING_PAUSE);
+        cy.get(`.${CROP_MODAL_CONFIRM_BUTTON_CLASSNAME}`).click();
+        cy.wait(`@uploadItemThumbnail`);
+      });
+  });
+
+  it(`upload member avatar`, () => {
+    cy.visit(MEMBER_PROFILE_PATH);
+
+    // change item thumbnail
+    cy.fixture('thumbnails/medium', 'binary')
+      .then(Cypress.Blob.binaryStringToBlob)
+      .then((fileContent) => {
+        cy.get(`.${MEMBER_PROFILE_AVATAR_UPLOAD_BUTTON_CLASSNAME}`).attachFile({
+          fileContent,
+          fileName: 'testPicture',
+        });
+        cy.wait(FILE_LOADING_PAUSE);
+        cy.get(`.${CROP_MODAL_CONFIRM_BUTTON_CLASSNAME}`).click();
+        cy.wait(`@uploadAvatar`);
+      });
+  });
+});
diff --git a/cypress/integration/item/thumbnails/viewThumbnails.spec.js b/cypress/integration/item/thumbnails/viewThumbnails.spec.js
@@ -0,0 +1,63 @@
+import { DEFAULT_IMAGE_SRC } from '../../../../src/config/constants';
+import { HOME_PATH, SHARED_ITEMS_PATH } from '../../../../src/config/paths';
+import {
+  buildItemCard,
+  buildNameCellRendererId,
+  HEADER_USER_ID,
+} from '../../../../src/config/selectors';
+import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { MEMBERS } from '../../../fixtures/members';
+import { SAMPLE_ITEMS_WITH_THUMBNAILS } from '../../../fixtures/thumbnails';
+
+describe('View Thumbnails', () => {
+  beforeEach(() => {});
+
+  it(`display thumbnail icons`, () => {
+    cy.setUpApi(SAMPLE_ITEMS_WITH_THUMBNAILS);
+
+    cy.visit(HOME_PATH);
+
+    const { items } = SAMPLE_ITEMS_WITH_THUMBNAILS;
+
+    // check default material icon
+    // first item doesn't have a thumbnail so it displays the material icon
+    cy.get(`#${buildNameCellRendererId(items[0].id)} svg path`).should('exist');
+
+    // the second item has a defined thumbnail
+    cy.get(`#${buildNameCellRendererId(items[1].id)} img`).should('exist');
+
+    // GRID
+    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.get(`#${buildItemCard(items[0].id)} img`)
+      .should('have.attr', 'src')
+      .and('contain', DEFAULT_IMAGE_SRC);
+
+    cy.get(`#${buildItemCard(items[1].id)} img`)
+      .should('have.attr', 'src')
+      .and('contain', 'blob:');
+  });
+
+  it(`display member avatar`, () => {
+    cy.setUpApi({
+      ...SAMPLE_ITEMS_WITH_THUMBNAILS,
+      currentMember: MEMBERS.BOB,
+    });
+
+    cy.visit(HOME_PATH);
+
+    const { items } = SAMPLE_ITEMS_WITH_THUMBNAILS;
+
+    // display member avatar in header
+    cy.get(`#${HEADER_USER_ID} img`)
+      .should('have.attr', 'src')
+      .and('contain', 'blob:');
+
+    cy.visit(SHARED_ITEMS_PATH);
+
+    // check bob avatar in shared items, grid mode
+    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.get(`#${buildItemCard(items[2].id)} img`)
+      .should('have.attr', 'src')
+      .and('contain', 'blob:');
+  });
+});
diff --git a/cypress/integration/item/view/viewFolder.spec.js b/cypress/integration/item/view/viewFolder.spec.js
@@ -17,6 +17,7 @@ import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { IMAGE_ITEM_DEFAULT, VIDEO_ITEM_S3 } from '../../../fixtures/files';
 import { generateOwnItems, SAMPLE_ITEMS } from '../../../fixtures/items';
 import { GRAASP_LINK_ITEM } from '../../../fixtures/links';
+import { NAVIGATION_LOAD_PAUSE } from '../../../support/constants';
 import { expectFolderViewScreenLayout } from './utils';
 
 describe('View Folder', () => {
@@ -64,6 +65,7 @@ describe('View Folder', () => {
       cy.get(`#${ITEMS_GRID_NO_ITEM_ID}`).should('exist');
 
       // return parent with navigation and should display children
+      cy.wait(NAVIGATION_LOAD_PAUSE);
       cy.goToItemWithNavigation(childId);
       // should get children
       cy.wait('@getChildren').then(({ response: { body } }) => {

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -63,6 +63,10 @@ import {
   mockDeleteItemTag,
   mockRestoreItems,
   mockGetMembers,
+  mockGetItemThumbnail,
+  mockGetAvatar,
+  mockPostItemThumbnail,
+  mockPostAvatar,
 } from './server';
 import './commands/item';
 import './commands/navigation';
@@ -106,6 +110,10 @@ Cypress.Commands.add(
     getRecycledItemsError = false,
     deleteItemTagError = false,
     restoreItemsError = false,
+    getItemThumbnailError = false,
+    getAvatarError = false,
+    postItemThumbnailError = false,
+    postAvatarError = false,
   } = {}) => {
     const cachedItems = JSON.parse(JSON.stringify(items));
     const cachedMembers = JSON.parse(JSON.stringify(members));
@@ -217,6 +225,14 @@ Cypress.Commands.add(
     mockGetRecycledItems(recycledItems, getRecycledItemsError);
 
     mockRestoreItems(recycledItems, restoreItemsError);
+
+    mockGetItemThumbnail(items, getItemThumbnailError);
+
+    mockGetAvatar(members, getAvatarError);
+
+    mockPostItemThumbnail(postItemThumbnailError);
+
+    mockPostAvatar(postAvatarError);
   },
 );
 

diff --git a/cypress/support/commands/item.js b/cypress/support/commands/item.js
@@ -8,7 +8,6 @@ import {
   TREE_MODAL_CONFIRM_BUTTON_ID,
   TREE_MODAL_TREE_ID,
   ITEM_FORM_CONFIRM_BUTTON_ID,
-  ITEM_FORM_IMAGE_INPUT_ID,
   ITEM_FORM_NAME_INPUT_ID,
   ITEM_FORM_LINK_INPUT_ID,
   ITEM_FORM_DOCUMENT_TEXT_SELECTOR,
@@ -80,11 +79,9 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   'fillFolderModal',
-  ({ name = '', extra = {}, description = '' }, { confirm = true } = {}) => {
+  ({ name = '', description = '' }, { confirm = true } = {}) => {
     cy.fillBaseItemModal({ name }, { confirm: false });
 
-    cy.get(`#${ITEM_FORM_IMAGE_INPUT_ID}`).type(`{selectall}${extra.image}`);
-
     cy.get(`#${FOLDER_FORM_DESCRIPTION_ID}`).type(`{selectall}${description}`);
 
     if (confirm) {
@@ -128,9 +125,9 @@ Cypress.Commands.add(
 
     cy.get(`#${ITEM_FORM_APP_URL_ID}`).click();
 
-    if(type){
+    if (type) {
       cy.get(`#${ITEM_FORM_APP_URL_ID}`).type(getAppExtra(extra)?.url);
-    }else{
+    } else {
       cy.get(`#${buildItemFormAppOptionId(getAppExtra(extra)?.name)}`).click();
     }
 

diff --git a/cypress/support/constants.js b/cypress/support/constants.js
@@ -2,8 +2,10 @@ export const CREATE_ITEM_PAUSE = 1000;
 export const EDIT_ITEM_PAUSE = 1000;
 export const ITEM_LOGIN_PAUSE = 1000;
 export const NAVIGATE_PAUSE = 1000;
+export const NAVIGATION_LOAD_PAUSE = 1500;
 export const PAGE_LOAD_WAITING_PAUSE = 3000;
 export const REQUEST_FAILURE_LOADING_TIME = 1500;
+export const FILE_LOADING_PAUSE = 2000;
 export const TREE_VIEW_PAUSE = 2000;
 export const ITEM_LOADING_PAUSE = 2000;
 export const WEBSOCKETS_DELAY_TIME = 1500;