fix: update crop modal (#966)

fix: use medium thumbnail size fix(test): accessible url test fix(test): remove waits
graasp · Jan 29, 2024 · 5b15fb7 · 5b15fb7
1 parent 311dc1f
commit 5b15fb7
Show file tree

Hide file tree

Showing 25 changed files with 210 additions and 184 deletions.
diff --git a/cypress/e2e/item/create/createShortcut.cy.ts b/cypress/e2e/item/create/createShortcut.cy.ts
@@ -43,7 +43,6 @@ const createShortcutInList = ({
   id: string;
   toItemPath?: string;
 }) => {
-  // cy.wait(TABLE_ITEM_RENDER_TIME);
   const menuSelector = `#${buildItemMenuButtonId(id)}`;
   cy.get(menuSelector).click();
   createShortcut({ id, toItemPath });

diff --git a/cypress/e2e/item/delete/gridRecycleItem.cy.ts b/cypress/e2e/item/delete/gridRecycleItem.cy.ts
@@ -9,7 +9,6 @@ import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const recycleItem = (id: string) => {
   const menuSelector = `#${buildItemMenuButtonId(id)}`;
-  // cy.wait(TABLE_ITEM_RENDER_TIME);
   cy.get(menuSelector).click();
   cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_RECYCLE_BUTTON_CLASS}`).click();
 };

diff --git a/cypress/e2e/item/delete/listDeleteItem.cy.ts b/cypress/e2e/item/delete/listDeleteItem.cy.ts
@@ -8,7 +8,6 @@ import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { RECYCLED_ITEM_DATA, SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const deleteItem = (id: string) => {
-  // cy.wait(TABLE_ITEM_RENDER_TIME);
   cy.get(
     `${buildItemsTableRowIdAttribute(id)} .${ITEM_DELETE_BUTTON_CLASS}`,
   ).click();

diff --git a/cypress/e2e/item/delete/listDeleteItems.cy.ts b/cypress/e2e/item/delete/listDeleteItems.cy.ts
@@ -10,7 +10,6 @@ import { RECYCLED_ITEM_DATA, SAMPLE_ITEMS } from '../../../fixtures/items';
 const deleteItems = (itemIds: string[]) => {
   // check selected ids
   itemIds.forEach((id) => {
-    // cy.wait(TABLE_ITEM_RENDER_TIME);
     cy.get(`${buildItemsTableRowIdAttribute(id)} .ag-checkbox-input`).click();
   });
 

diff --git a/cypress/e2e/item/delete/listRecycleItem.cy.ts b/cypress/e2e/item/delete/listRecycleItem.cy.ts
@@ -6,11 +6,9 @@ import {
 } from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
-import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 
 const recycleItem = (id: string) => {
   const menuSelector = `#${buildItemMenuButtonId(id)}`;
-  cy.wait(TABLE_ITEM_RENDER_TIME);
   cy.get(menuSelector).click();
   cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_RECYCLE_BUTTON_CLASS}`).click();
 };

diff --git a/cypress/e2e/item/delete/listRecycleItems.cy.ts b/cypress/e2e/item/delete/listRecycleItems.cy.ts
@@ -5,12 +5,10 @@ import {
 } from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
-import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 
 const recycleItems = (itemIds: string[]) => {
   // check selected ids
   itemIds.forEach((id) => {
-    cy.wait(TABLE_ITEM_RENDER_TIME);
     cy.get(`${buildItemsTableRowIdAttribute(id)} .ag-checkbox-input`).click();
   });
 

diff --git a/cypress/e2e/item/edit/editFolder.cy.ts b/cypress/e2e/item/edit/editFolder.cy.ts
@@ -5,10 +5,7 @@ import {
 } from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { EDITED_FIELDS, SAMPLE_ITEMS } from '../../../fixtures/items';
-import {
-  EDIT_ITEM_PAUSE,
-  TABLE_ITEM_RENDER_TIME,
-} from '../../../support/constants';
+import { EDIT_ITEM_PAUSE } from '../../../support/constants';
 import { editItem } from '../../../support/editUtils';
 
 describe('Edit Folder', () => {
@@ -35,9 +32,6 @@ describe('Edit Folder', () => {
       cy.setUpApi(SAMPLE_ITEMS);
       cy.visit(HOME_PATH);
 
-      // wait for the render
-      cy.wait(TABLE_ITEM_RENDER_TIME);
-
       // click edit button
       const itemId = SAMPLE_ITEMS.items[0].id;
       cy.get(`#${buildEditButtonId(itemId)}`).click();

diff --git a/cypress/e2e/item/favorite/favoriteItem.cy.ts b/cypress/e2e/item/favorite/favoriteItem.cy.ts
@@ -10,12 +10,9 @@ import {
 } from '../../../../src/config/selectors';
 import { SAMPLE_FAVORITE, SAMPLE_ITEMS } from '../../../fixtures/items';
 import { CURRENT_USER } from '../../../fixtures/members';
-import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 
 const toggleFavoriteButton = (itemId: string) => {
-  cy.wait(TABLE_ITEM_RENDER_TIME);
-  const menuSelector = `#${buildItemMenuButtonId(itemId)}`;
-  cy.get(menuSelector).click();
+  cy.get(`#${buildItemMenuButtonId(itemId)}`).click();
   cy.get(`#${buildItemMenu(itemId)} .${FAVORITE_ITEM_BUTTON_CLASS}`).click();
 };
 

diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts
@@ -1,5 +1,5 @@
 import i18n, { BUILDER_NAMESPACE } from '../../../../src/config/i18n';
-import { HOME_PATH } from '../../../../src/config/paths';
+import { HOME_PATH, ITEMS_PATH } from '../../../../src/config/paths';
 import {
   ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR,
   ACCESSIBLE_ITEMS_ONLY_ME_ID,
@@ -16,17 +16,24 @@ import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { BUILDER } from '../../../../src/langs/constants';
 import { SAMPLE_ITEMS, generateOwnItems } from '../../../fixtures/items';
 import { CURRENT_USER } from '../../../fixtures/members';
-import {
-  NAVIGATION_LOAD_PAUSE,
-  TABLE_ITEM_RENDER_TIME,
-} from '../../../support/constants';
+import { NAVIGATION_LOAD_PAUSE } from '../../../support/constants';
 import { ItemForTest } from '../../../support/types';
 
 const translateBuilder = (key: string) =>
   i18n.t(key, { ns: BUILDER_NAMESPACE });
 
 const sampleItems = generateOwnItems(30);
 
+// register a custom one time interceptor to listen specifically
+// to the request made with the search parameter we want
+const interceptAccessibleItemsSearch = (searchTerm: string) =>
+  cy
+    .intercept({
+      pathname: `/${ITEMS_PATH}/accessible`,
+      query: { name: searchTerm },
+    })
+    .as('getAccessibleSearch');
+
 describe('Home', () => {
   describe('Grid', () => {
     describe('Features', () => {
@@ -70,6 +77,8 @@ describe('Home', () => {
 
         it('Search on second page should reset page number', () => {
           const searchText = 'mysearch';
+          interceptAccessibleItemsSearch(searchText);
+
           cy.wait('@getAccessibleItems');
           // navigate to seconde page
           cy.get(`#${ITEMS_GRID_PAGINATION_ID} > ul > li`).eq(2).click();
@@ -79,17 +88,13 @@ describe('Home', () => {
           });
           cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(searchText);
 
-          cy.wait(['@getAccessibleItems', '@getAccessibleItems']).then(
-            ([
-              _unused,
-              {
-                request: { url },
-              },
-            ]) => {
-              expect(url).to.contain(searchText);
-              expect(url).to.contain('page=1');
-            },
-          );
+          // using our custom interceptor with the search parameter we can distinguish the complete
+          // search request from possibly other incomplete search requests
+          cy.wait('@getAccessibleSearch').then(({ request: { query } }) => {
+            expect(query.name).to.eq(searchText);
+            expect(query.page).to.eq('1');
+          });
+          cy.get(`#${buildItemCard(sampleItems[0].id)}`).should('be.visible');
         });
       });
 
@@ -155,14 +160,12 @@ describe('Home', () => {
         cy.goToItemInGrid(childId);
 
         // should get children
-        cy.wait('@getChildren', { timeout: TABLE_ITEM_RENDER_TIME }).then(
-          ({ response: { body } }) => {
-            // check item is created and displayed
-            for (const item of body) {
-              cy.get(`#${buildItemCard(item.id)}`).should('exist');
-            }
-          },
-        );
+        cy.wait('@getChildren').then(({ response: { body } }) => {
+          // check item is created and displayed
+          for (const item of body) {
+            cy.get(`#${buildItemCard(item.id)}`).should('exist');
+          }
+        });
 
         // root title
         cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
@@ -283,6 +286,8 @@ describe('Home', () => {
 
         it('Search on second page should reset page number', () => {
           const searchText = 'mysearch';
+          interceptAccessibleItemsSearch(searchText);
+
           cy.wait('@getAccessibleItems');
           // navigate to second page
           cy.get(ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR).click();
@@ -292,17 +297,10 @@ describe('Home', () => {
           });
           cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(searchText);
 
-          cy.wait(['@getAccessibleItems', '@getAccessibleItems']).then(
-            ([
-              _unused,
-              {
-                request: { url },
-              },
-            ]) => {
-              expect(url).to.contain(searchText);
-              expect(url).to.contain('page=1');
-            },
-          );
+          cy.wait('@getAccessibleSearch').then(({ request: { query } }) => {
+            expect(query.name).to.eq(searchText);
+            expect(query.page).to.eq('1');
+          });
         });
       });
 

diff --git a/cypress/e2e/item/move/listMoveItem.cy.ts b/cypress/e2e/item/move/listMoveItem.cy.ts
@@ -8,12 +8,9 @@ import {
 } from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
-import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 
 const openMoveModal = ({ id: movedItemId }: { id: string }) => {
-  const menuSelector = `#${buildItemMenuButtonId(movedItemId)}`;
-  cy.wait(TABLE_ITEM_RENDER_TIME);
-  cy.get(menuSelector).click();
+  cy.get(`#${buildItemMenuButtonId(movedItemId)}`).click();
   cy.get(
     `#${buildItemMenu(movedItemId)} .${ITEM_MENU_MOVE_BUTTON_CLASS}`,
   ).click();

diff --git a/cypress/e2e/item/move/listMoveMultiple.cy.ts b/cypress/e2e/item/move/listMoveMultiple.cy.ts
@@ -5,7 +5,6 @@ import {
 } from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
-import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 
 const moveItems = ({
   itemIds,
@@ -16,11 +15,9 @@ const moveItems = ({
 }) => {
   // check selected ids
   itemIds.forEach((id) => {
-    cy.wait(TABLE_ITEM_RENDER_TIME);
     cy.get(`${buildItemsTableRowIdAttribute(id)} input`).click();
   });
 
-  cy.wait(TABLE_ITEM_RENDER_TIME);
   cy.get(`#${ITEMS_TABLE_MOVE_SELECTED_ITEMS_ID}`).click();
   cy.handleTreeMenu(toItemPath);
 };

diff --git a/cypress/e2e/item/pin/pinItem.cy.ts b/cypress/e2e/item/pin/pinItem.cy.ts
@@ -6,12 +6,9 @@ import {
 } from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { ITEMS_SETTINGS, PINNED_ITEM } from '../../../fixtures/items';
-import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 
 const togglePinButton = (itemId: string) => {
-  cy.wait(TABLE_ITEM_RENDER_TIME);
-  const menuSelector = `#${buildItemMenuButtonId(itemId)}`;
-  cy.get(menuSelector).click();
+  cy.get(`#${buildItemMenuButtonId(itemId)}`).click();
   cy.get(`#${buildItemMenu(itemId)} .${PIN_ITEM_BUTTON_CLASS}`).click();
 };
 

diff --git a/cypress/support/commands/navigation.ts b/cypress/support/commands/navigation.ts
@@ -4,11 +4,7 @@ import {
   buildItemLink,
   buildItemsTableRowIdAttribute,
 } from '../../../src/config/selectors';
-import {
-  NAVIGATE_PAUSE,
-  TABLE_ITEM_RENDER_TIME,
-  WAIT_FOR_ITEM_TABLE_ROW_TIME,
-} from '../constants';
+import { NAVIGATE_PAUSE, WAIT_FOR_ITEM_TABLE_ROW_TIME } from '../constants';
 
 Cypress.Commands.add('goToItemInGrid', (id) => {
   cy.wait(NAVIGATE_PAUSE);
@@ -30,5 +26,4 @@ Cypress.Commands.add('goToHome', () => {
 Cypress.Commands.add('goToItemWithNavigation', (id) => {
   cy.wait(NAVIGATE_PAUSE);
   cy.get(`[href="${buildItemPath(id)}"]`).click();
-  cy.wait(TABLE_ITEM_RENDER_TIME);
 });
diff --git a/cypress/support/constants.ts b/cypress/support/constants.ts
@@ -20,7 +20,6 @@ export const REDIRECTION_TIME = 500;
 export const CAPTION_EDIT_PAUSE = 2000;
 
 export const ROW_HEIGHT = 48;
-export const TABLE_ITEM_RENDER_TIME = 7000;
 export const TABLE_MEMBERSHIP_RENDER_TIME = 3000;
 export const FIXTURES_THUMBNAILS_FOLDER = './thumbnails';
 export const CHATBOX_LOADING_TIME = 5000;

diff --git a/cypress/support/editUtils.ts b/cypress/support/editUtils.ts
@@ -8,7 +8,7 @@ import {
   buildEditButtonId,
 } from '../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../src/enums';
-import { CAPTION_EDIT_PAUSE, TABLE_ITEM_RENDER_TIME } from './constants';
+import { CAPTION_EDIT_PAUSE } from './constants';
 
 // eslint-disable-next-line import/prefer-default-export
 // bug: use string for type to fit usage
@@ -21,9 +21,6 @@ export const editItem = (
   },
   mode = DEFAULT_ITEM_LAYOUT_MODE,
 ): void => {
-  if (DEFAULT_ITEM_LAYOUT_MODE === ITEM_LAYOUT_MODES.LIST) {
-    cy.wait(TABLE_ITEM_RENDER_TIME);
-  }
   const { id, type } = payload;
   switch (mode) {
     case ITEM_LAYOUT_MODES.GRID: {

diff --git a/cypress/support/server.ts b/cypress/support/server.ts
@@ -99,7 +99,6 @@ const {
   buildPostShortLinkRoute,
   buildPatchShortLinkRoute,
   buildDeleteShortLinkRoute,
-  buildGetAccessibleItems,
 } = API_ROUTES;
 
 const API_HOST = Cypress.env('API_HOST');
@@ -177,7 +176,7 @@ export const mockGetAccessibleItems = (items: ItemForTest[]): void => {
   cy.intercept(
     {
       method: HttpMethod.GET,
-      url: new RegExp(`${API_HOST}/${buildGetAccessibleItems({}, {})}`),
+      pathname: `/${ITEMS_ROUTE}/accessible`,
     },
     ({ url, reply }) => {
       const params = new URL(url).searchParams;

diff --git a/package.json b/package.json
@@ -18,10 +18,10 @@
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.0.1",
-    "@graasp/query-client": "2.3.2",
+    "@graasp/query-client": "github:graasp/graasp-query-client#no-cachetime-for-item-thumbnail",
     "@graasp/sdk": "3.4.1",
     "@graasp/translations": "1.22.1",
-    "@graasp/ui": "4.3.1",
+    "@graasp/ui": "github:graasp/graasp-ui#remove-memo-on-thumbnail",
     "@mui/icons-material": "5.14.19",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.14.19",
@@ -55,7 +55,7 @@
     "react-dom": "18.2.0",
     "react-ga4": "2.1.0",
     "react-i18next": "13.5.0",
-    "react-image-crop": "9.1.1",
+    "react-image-crop": "11.0.5",
     "react-qr-code": "2.0.12",
     "react-query": "3.39.3",
     "react-quill": "2.0.0",