test: add test for pin button

cypress/integration/item/pin/pinItem.spec.js

@@ -0,0 +1,104 @@
+import { ITEMS_SETTINGS } from '../../../fixtures/items';
+import { HOME_PATH } from '../../../../src/config/paths';
+import {
+  buildItemCard,
+  buildItemsTableRowIdAttribute,
+  PIN_ITEM_BUTTON_CLASS,
+} from '../../../../src/config/selectors';
+import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
+import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+
+const togglePinButton = (itemId) => {
+  cy.wait(TABLE_ITEM_RENDER_TIME);
+  cy.get(
+    `${buildItemsTableRowIdAttribute(itemId)} .${PIN_ITEM_BUTTON_CLASS}`,
+  ).click();
+};
+
+const togglePinButtonCard = (itemId) => {
+  cy.wait(TABLE_ITEM_RENDER_TIME);
+  cy.get(
+    `#${buildItemCard(itemId)} .${PIN_ITEM_BUTTON_CLASS}`,
+  ).click();
+};
+
+describe('Pinning Item', () => {
+
+  describe('Successfully pinning item in List', () => {
+    beforeEach(() => {
+      cy.setUpApi(ITEMS_SETTINGS);
+      cy.visit(HOME_PATH);
+    });
+
+    it('Pin an item', () => {
+      const item = ITEMS_SETTINGS.items[1];
+
+      togglePinButton(item.id);
+
+      cy.wait(`@editItem`).then(
+        ({
+            request: {  
+              body : { settings }
+            } 
+        }) => {
+        expect(settings.isPinned).to.equals(true);
+      });
+    });
+
+    it('Unpin Item', () => {
+      const item = ITEMS_SETTINGS.items[0];
+
+      togglePinButton(item.id);
+
+      cy.wait('@editItem').then(
+        ({
+          request: {
+            body: { settings },
+          },
+        }) => {
+          expect(settings.isPinned).to.equals(false);
+        },
+      );
+    });
+  });
+
+
+  describe('Successfully pinning item in Grid', () => {
+    beforeEach(() => {
+      cy.setUpApi(ITEMS_SETTINGS);
+      cy.visit(HOME_PATH);
+      cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    });
+
+    it('Pin an item', () => {
+      const item = ITEMS_SETTINGS.items[1];
+
+      togglePinButtonCard(item.id);
+
+      cy.wait(`@editItem`).then(
+        ({
+            request: {  
+              body : { settings }
+            } 
+        }) => {
+        expect(settings.isPinned).to.equals(true);
+      });
+    });
+
+    it('Unpin Item', () => {
+      const item = ITEMS_SETTINGS.items[0];
+
+      togglePinButtonCard(item.id);
+
+      cy.wait('@editItem').then(
+        ({
+          request: {
+            body: { settings },
+          },
+        }) => {
+          expect(settings.isPinned).to.equals(false);
+        },
+      );
+    });
+  });
+});

src/components/common/PinButton.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '@material-ui/core/Tooltip';
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { useMutation } from '../../config/queryClient';
-import { FAVORITE_ITEM_BUTTON_CLASS } from '../../config/selectors';
+import { PIN_ITEM_BUTTON_CLASS } from '../../config/selectors';
 
 const PinButton = ({ item }) => {
   const { t } = useTranslation();
@@ -47,7 +47,7 @@ const PinButton = ({ item }) => {
     <Tooltip title={isPinned ? t('Unpin') : t('Pin')}>
       <IconButton
         aria-label="favorite"
-        className={FAVORITE_ITEM_BUTTON_CLASS}
+        className={PIN_ITEM_BUTTON_CLASS}
         onClick={isPinned ? handleUnpin : handlePin}
       >
         {isPinned ? (

src/components/main/ItemsTable.js

@@ -72,14 +72,15 @@ const ItemsTable = ({
   const mutation = useMutation(MUTATION_KEYS.EDIT_ITEM);
 
   const mappedRows = rows.map((item) => {
-    const { id, updatedAt, name, createdAt, type, extra } = item;
+    const { id, updatedAt, name, createdAt, type, extra, settings } = item;
     return {
       id,
       name,
       type,
       updatedAt,
       createdAt,
       extra,
+      settings
     };
   });
 

src/config/selectors.js

@@ -24,6 +24,7 @@ export const TREE_MODAL_CONFIRM_BUTTON_ID = 'treeModalConfirmButton';
 export const ITEMS_GRID_NO_ITEM_ID = 'itemsGridNoItem';
 export const EDIT_ITEM_BUTTON_CLASS = 'editButton';
 export const FAVORITE_ITEM_BUTTON_CLASS = 'favoriteButton';
+export const PIN_ITEM_BUTTON_CLASS = 'pinButton';
 export const SHARE_ITEM_BUTTON_CLASS = 'itemMenuShareButton';
 export const RESTORE_ITEMS_BUTTON_CLASS = 'itemMenuRestoreButton';
 export const SHARE_ITEM_EMAIL_INPUT_ID = 'shareItemModalEmailInput';