feat: use ag-grid library for items table

graasp · Sep 29, 2021 · 9efa92d · 9efa92d
1 parent 346012b
commit 9efa92d
Show file tree

Hide file tree

Showing 37 changed files with 557 additions and 658 deletions.
diff --git a/cypress/integration/item/copy/gridCopyItem.spec.js b/cypress/integration/item/copy/gridCopyItem.spec.js
@@ -4,13 +4,13 @@ import { buildItemPath, HOME_PATH } from '../../../../src/config/paths';
 import {
   buildItemCard,
   buildItemMenu,
-  ITEM_MENU_BUTTON_CLASS,
+  buildItemMenuButtonId,
   ITEM_MENU_COPY_BUTTON_CLASS,
 } from '../../../../src/config/selectors';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const copyItem = ({ id, toItemPath }) => {
-  const menuSelector = `#${buildItemCard(id)} .${ITEM_MENU_BUTTON_CLASS}`;
+  const menuSelector = `#${buildItemMenuButtonId(id)}`;
   cy.get(menuSelector).click();
   cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_COPY_BUTTON_CLASS}`).click();
   cy.fillTreeModal(toItemPath);

diff --git a/cypress/integration/item/copy/listCopyItem.spec.js b/cypress/integration/item/copy/listCopyItem.spec.js
@@ -6,18 +6,16 @@ import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 
 import { buildItemPath, HOME_PATH } from '../../../../src/config/paths';
 import {
-  buildItemsTableRowId,
+  buildItemsTableRowIdAttribute,
   buildItemMenu,
-  ITEM_MENU_BUTTON_CLASS,
   ITEM_MENU_COPY_BUTTON_CLASS,
+  buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 
 const copyItem = ({ id, toItemPath }) => {
-  const menuSelector = `#${buildItemsTableRowId(
-    id,
-  )} .${ITEM_MENU_BUTTON_CLASS}`;
+  const menuSelector = `#${buildItemMenuButtonId(id)}`;
   cy.wait(TABLE_ITEM_RENDER_TIME);
   cy.get(menuSelector).click();
   cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_COPY_BUTTON_CLASS}`).click();
@@ -38,11 +36,11 @@ describe('Copy Item in List', () => {
     copyItem({ id: copyItemId, toItemPath });
 
     cy.wait('@copyItems').then(({ response: { body } }) => {
-      cy.get(`#${buildItemsTableRowId(copyItemId)}`).should('exist');
+      cy.get(buildItemsTableRowIdAttribute(copyItemId)).should('exist');
 
       // check in new parent
       cy.goToItemInList(toItem);
-      cy.get(`#${buildItemsTableRowId(body[0].id)}`).should('exist');
+      cy.get(buildItemsTableRowIdAttribute(body[0].id)).should('exist');
     });
   });
 
@@ -62,11 +60,11 @@ describe('Copy Item in List', () => {
     copyItem({ id: copyItemId, toItemPath });
 
     cy.wait('@copyItems').then(({ response: { body } }) => {
-      cy.get(`#${buildItemsTableRowId(copyItemId)}`).should('exist');
+      cy.get(buildItemsTableRowIdAttribute(copyItemId)).should('exist');
 
       // check in new parent
       cy.goToItemInList(toItem);
-      cy.get(`#${buildItemsTableRowId(body[0].id)}`).should('exist');
+      cy.get(buildItemsTableRowIdAttribute(body[0].id)).should('exist');
     });
   });
 
@@ -85,11 +83,11 @@ describe('Copy Item in List', () => {
     copyItem({ id: copyItemId, toItemPath: ROOT_ID });
 
     cy.wait('@copyItems').then(({ response: { body } }) => {
-      cy.get(`#${buildItemsTableRowId(copyItemId)}`).should('exist');
+      cy.get(buildItemsTableRowIdAttribute(copyItemId)).should('exist');
 
       // check in new parent
       cy.goToHome();
-      cy.get(`#${buildItemsTableRowId(body[0].id)}`).should('exist');
+      cy.get(buildItemsTableRowIdAttribute(body[0].id)).should('exist');
     });
   });
 
@@ -111,8 +109,8 @@ describe('Copy Item in List', () => {
 
       cy.wait('@copyItems').then(({ response: { body } }) => {
         // check item is still existing in parent
-        cy.get(`#${buildItemsTableRowId(copyItemId)}`).should('exist');
-        cy.get(`#${buildItemsTableRowId(body[0].id)}`).should('not.exist');
+        cy.get(buildItemsTableRowIdAttribute(copyItemId)).should('exist');
+        cy.get(buildItemsTableRowIdAttribute(body[0].id)).should('not.exist');
       });
     });
   });

diff --git a/cypress/integration/item/copy/listCopyMultiple.spec.js b/cypress/integration/item/copy/listCopyMultiple.spec.js
@@ -6,50 +6,46 @@ import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 
 import { buildItemPath, HOME_PATH } from '../../../../src/config/paths';
 import {
-  buildItemsTableRowId,
-  ITEMS_TABLE_ROW_CHECKBOX_CLASS,
+  buildItemsTableRowIdAttribute,
   ITEMS_TABLE_COPY_SELECTED_ITEMS_ID,
 } from '../../../../src/config/selectors';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
-
-
+
 const copyItems = ({ itemIds, toItemPath }) => {
   // check selected ids
   itemIds.forEach((id) => {
     cy.wait(TABLE_ITEM_RENDER_TIME);
-    cy.get(
-      `#${buildItemsTableRowId(id)} .${ITEMS_TABLE_ROW_CHECKBOX_CLASS}`,
-    ).click();
+    cy.get(`${buildItemsTableRowIdAttribute(id)} input`).click();
   });
 
   cy.wait(TABLE_ITEM_RENDER_TIME);
   cy.get(`#${ITEMS_TABLE_COPY_SELECTED_ITEMS_ID}`).click();
   cy.fillTreeModal(toItemPath);
-}; 
+};
 
 describe('Copy items in List', () => {
   it('Copy items on Home', () => {
     cy.setUpApi(SAMPLE_ITEMS);
     cy.visit(HOME_PATH);
 
     if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
-        cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
     }
 
     const itemIds = [SAMPLE_ITEMS.items[0].id, SAMPLE_ITEMS.items[5].id];
     const { id: toItem, path: toItemPath } = SAMPLE_ITEMS.items[1];
     copyItems({ itemIds, toItemPath });
 
     cy.wait('@copyItems').then(({ response: { body } }) => {
-      itemIds.forEach(id =>{
-        cy.get(`#${buildItemsTableRowId(id)}`).should('exist');
+      itemIds.forEach((id) => {
+        cy.get(`${buildItemsTableRowIdAttribute(id)}`).should('exist');
       });
 
       // check in new parent
       cy.goToItemInList(toItem);
-      body.forEach(item => {
-        cy.get(`#${buildItemsTableRowId(item.id)}`).should('exist');
+      body.forEach((item) => {
+        cy.get(`${buildItemsTableRowIdAttribute(item.id)}`).should('exist');
       });
     });
   });
@@ -70,14 +66,14 @@ describe('Copy items in List', () => {
     copyItems({ itemIds, toItemPath });
 
     cy.wait('@copyItems').then(({ response: { body } }) => {
-      itemIds.forEach(id => {
-        cy.get(`#${buildItemsTableRowId(id)}`).should('exist');
+      itemIds.forEach((id) => {
+        cy.get(`${buildItemsTableRowIdAttribute(id)}`).should('exist');
       });
 
       // check in new parent
       cy.goToItemInList(toItem);
-      body.forEach(item => {
-        cy.get(`#${buildItemsTableRowId(item.id)}`).should('exist');
+      body.forEach((item) => {
+        cy.get(`${buildItemsTableRowIdAttribute(item.id)}`).should('exist');
       });
     });
   });
@@ -94,25 +90,25 @@ describe('Copy items in List', () => {
 
     // copy
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
-    copyItems({itemIds, toItemPath: ROOT_ID });
+    copyItems({ itemIds, toItemPath: ROOT_ID });
 
     cy.wait('@copyItems').then(({ response: { body } }) => {
-      itemIds.forEach(id => {
-        cy.get(`#${buildItemsTableRowId(id)}`).should('exist');
+      itemIds.forEach((id) => {
+        cy.get(`${buildItemsTableRowIdAttribute(id)}`).should('exist');
       });
 
       // check in new parent
       cy.goToHome();
-      body.forEach(item => {
-        cy.get(`#${buildItemsTableRowId(item.id)}`).should('exist');
+      body.forEach((item) => {
+        cy.get(`${buildItemsTableRowIdAttribute(item.id)}`).should('exist');
       });
     });
   });
 
   describe('Error handling', () => {
     it('error while copying item does not create in interface', () => {
       cy.setUpApi({ ...SAMPLE_ITEMS, copyItemError: true });
-      const { id :start } = SAMPLE_ITEMS.items[0];
+      const { id: start } = SAMPLE_ITEMS.items[0];
 
       // go to children item
       cy.visit(buildItemPath(start));
@@ -127,11 +123,13 @@ describe('Copy items in List', () => {
 
       cy.wait('@copyItems').then(({ response: { body } }) => {
         // check item is still existing in parent
-        itemIds.forEach(id => {
-          cy.get(`#${buildItemsTableRowId(id)}`).should('exist');
+        itemIds.forEach((id) => {
+          cy.get(`${buildItemsTableRowIdAttribute(id)}`).should('exist');
         });
-        body.forEach(item => {
-          cy.get(`#${buildItemsTableRowId(item.id)}`).should('not.exist');
+        body.forEach((item) => {
+          cy.get(`${buildItemsTableRowIdAttribute(item.id)}`).should(
+            'not.exist',
+          );
         });
       });
     });

diff --git a/cypress/integration/item/create/createFolder.spec.js b/cypress/integration/item/create/createFolder.spec.js
@@ -1,7 +1,7 @@
 import { DEFAULT_ITEM_LAYOUT_MODE } from '../../../../src/config/constants';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { buildItemPath, HOME_PATH } from '../../../../src/config/paths';
-import { buildItemsTableRowId } from '../../../../src/config/selectors';
+import { buildItemsTableRowIdAttribute } from '../../../../src/config/selectors';
 import { CREATED_ITEM, SAMPLE_ITEMS } from '../../../fixtures/items';
 import { CREATE_ITEM_PAUSE } from '../../../support/constants';
 import { createItem } from './utils';
@@ -95,7 +95,7 @@ describe('Create Folder', () => {
 
       cy.wait('@postItem').then(({ response: { body } }) => {
         // check item is created and displayed
-        cy.get(`#${buildItemsTableRowId(body.id)}`).should('not.exist');
+        cy.get(buildItemsTableRowIdAttribute(body.id)).should('not.exist');
       });
     });
   });

diff --git a/cypress/integration/item/create/createShortcut.spec.js b/cypress/integration/item/create/createShortcut.spec.js
@@ -3,10 +3,8 @@ import { ITEM_LAYOUT_MODES, ITEM_TYPES } from '../../../../src/enums';
 import { ROOT_ID } from '../../../../src/config/constants';
 import { HOME_PATH } from '../../../../src/config/paths';
 import {
-  buildItemCard,
   buildItemMenu,
-  buildItemsTableRowId,
-  ITEM_MENU_BUTTON_CLASS,
+  buildItemMenuButtonId,
   ITEM_MENU_SHORTCUT_BUTTON_CLASS,
 } from '../../../../src/config/selectors';
 import { buildShortcutExtra } from '../../../../src/utils/itemExtra';
@@ -19,15 +17,13 @@ const createShortcut = ({ id, toItemPath }) => {
 };
 
 const createShortcutInGrid = ({ id, toItemPath }) => {
-  const menuSelector = `#${buildItemCard(id)} .${ITEM_MENU_BUTTON_CLASS}`;
+  const menuSelector = `#${buildItemMenuButtonId(id)}`;
   cy.get(menuSelector).click();
   createShortcut({ id, toItemPath });
 };
 
 const createShortcutInList = ({ id, toItemPath }) => {
-  const menuSelector = `#${buildItemsTableRowId(
-    id,
-  )} .${ITEM_MENU_BUTTON_CLASS}`;
+  const menuSelector = `#${buildItemMenuButtonId(id)}`;
   cy.get(menuSelector).click();
   createShortcut({ id, toItemPath });
 };

diff --git a/cypress/integration/item/delete/listDeleteItem.spec.js b/cypress/integration/item/delete/listDeleteItem.spec.js
@@ -2,16 +2,16 @@ import { DEFAULT_ITEM_LAYOUT_MODE } from '../../../../src/config/constants';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { RECYCLE_BIN_PATH } from '../../../../src/config/paths';
 import {
-  buildItemsTableRowId,
+  buildDeleteButtonId,
+  buildItemsTableRowIdAttribute,
   CONFIRM_DELETE_BUTTON_ID,
-  ITEM_DELETE_BUTTON_CLASS,
 } from '../../../../src/config/selectors';
 import { DATABASE_WITH_RECYCLE_BIN } from '../../../fixtures/recycleBin';
 import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 
 const deleteItem = (id) => {
   cy.wait(TABLE_ITEM_RENDER_TIME);
-  cy.get(`#${buildItemsTableRowId(id)} .${ITEM_DELETE_BUTTON_CLASS}`).click();
+  cy.get(`#${buildDeleteButtonId(id)}`).click();
   cy.get(`#${CONFIRM_DELETE_BUTTON_ID}`).click();
 };
 
@@ -51,7 +51,7 @@ describe('Delete Item in List', () => {
 
       cy.wait('@deleteItem').then(() => {
         // check item is still displayed
-        cy.get(`#${buildItemsTableRowId(id)}`).should('exist');
+        cy.get(buildItemsTableRowIdAttribute(id)).should('exist');
       });
     });
   });

diff --git a/cypress/integration/item/delete/listDeleteItems.spec.js b/cypress/integration/item/delete/listDeleteItems.spec.js
@@ -2,10 +2,9 @@ import { DEFAULT_ITEM_LAYOUT_MODE } from '../../../../src/config/constants';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { RECYCLE_BIN_PATH } from '../../../../src/config/paths';
 import {
-  buildItemsTableRowId,
+  buildItemsTableRowIdAttribute,
   CONFIRM_DELETE_BUTTON_ID,
   ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID,
-  ITEMS_TABLE_ROW_CHECKBOX_CLASS,
 } from '../../../../src/config/selectors';
 import { DATABASE_WITH_RECYCLE_BIN } from '../../../fixtures/recycleBin';
 import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
@@ -14,9 +13,7 @@ const deleteItems = (itemIds) => {
   // check selected ids
   itemIds.forEach((id) => {
     cy.wait(TABLE_ITEM_RENDER_TIME);
-    cy.get(
-      `#${buildItemsTableRowId(id)} .${ITEMS_TABLE_ROW_CHECKBOX_CLASS}`,
-    ).click();
+    cy.get(`${buildItemsTableRowIdAttribute(id)} .ag-checkbox-input`).click();
   });
 
   cy.get(`#${ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID}`).click();
@@ -63,7 +60,7 @@ describe('Delete Items in List', () => {
       cy.wait('@deleteItems').then(() => {
         // check items are still displayed
         for (const id of itemIds) {
-          cy.get(`#${buildItemsTableRowId(id)}`).should('exist');
+          cy.get(buildItemsTableRowIdAttribute(id)).should('exist');
         }
       });
     });

diff --git a/cypress/integration/item/edit/utils.js b/cypress/integration/item/edit/utils.js
@@ -1,9 +1,6 @@
 import { ITEM_TYPES, ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { DEFAULT_ITEM_LAYOUT_MODE } from '../../../../src/config/constants';
 import {
-  buildItemCard,
-  buildItemsTableRowId,
-  EDIT_ITEM_BUTTON_CLASS,
   TEXT_EDITOR_CLASS,
   buildSaveButtonId,
   buildEditButtonId,
@@ -15,13 +12,13 @@ export const editItem = (payload, mode = DEFAULT_ITEM_LAYOUT_MODE) => {
   const { id, type } = payload;
   switch (mode) {
     case ITEM_LAYOUT_MODES.GRID: {
-      const button = `#${buildItemCard(id)} .${EDIT_ITEM_BUTTON_CLASS}`;
+      const button = `#${buildEditButtonId(id)}`;
       cy.get(button).click();
       break;
     }
     case ITEM_LAYOUT_MODES.LIST:
     default: {
-      cy.get(`#${buildItemsTableRowId(id)} .${EDIT_ITEM_BUTTON_CLASS}`).click();
+      cy.get(`#${buildEditButtonId(id)}`).click();
     }
   }
 

diff --git a/cypress/integration/item/favorite/favoriteItem.spec.js b/cypress/integration/item/favorite/favoriteItem.spec.js
@@ -1,7 +1,7 @@
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { FAVORITE_ITEMS_PATH, HOME_PATH } from '../../../../src/config/paths';
 import {
-  buildItemsTableRowId,
+  buildItemsTableRowIdAttribute,
   FAVORITE_ITEM_BUTTON_CLASS,
   FAVORITE_ITEMS_ERROR_ALERT_ID,
   CREATE_ITEM_BUTTON_ID,
@@ -12,7 +12,7 @@ import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
 const toggleFavoriteButton = (itemId) => {
   cy.wait(TABLE_ITEM_RENDER_TIME);
   cy.get(
-    `#${buildItemsTableRowId(itemId)} .${FAVORITE_ITEM_BUTTON_CLASS}`,
+    `${buildItemsTableRowIdAttribute(itemId)} .${FAVORITE_ITEM_BUTTON_CLASS}`,
   ).click();
 };
 
@@ -70,7 +70,7 @@ describe('Favorite Item', () => {
 
       const itemId = favoriteItems[0];
 
-      cy.get(`#${buildItemsTableRowId(itemId)}`).should('exist');
+      cy.get(buildItemsTableRowIdAttribute(itemId)).should('exist');
     });
   });