From 3b004d090fdeddee7ac22da10b035e9b98bc01ad Mon Sep 17 00:00:00 2001
From: Julien Torrent <julien.torrent@outlook.com>
Date: Fri, 15 Oct 2021 13:10:35 +0200
Subject: [PATCH] test: add test for pin button

---
 cypress/integration/item/pin/pinItem.spec.js | 104 +++++++++++++++++++
 src/components/common/PinButton.js           |   4 +-
 src/components/main/ItemsTable.js            |   3 +-
 src/config/selectors.js                      |   1 +
 4 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 cypress/integration/item/pin/pinItem.spec.js

diff --git a/cypress/integration/item/pin/pinItem.spec.js b/cypress/integration/item/pin/pinItem.spec.js
new file mode 100644
index 000000000..647573794
--- /dev/null
+++ b/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);
+        },
+      );
+    });
+  });
+});
diff --git a/src/components/common/PinButton.js b/src/components/common/PinButton.js
index e80ab7e0e..d2be8d929 100644
--- a/src/components/common/PinButton.js
+++ b/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 ? (
diff --git a/src/components/main/ItemsTable.js b/src/components/main/ItemsTable.js
index 6fa264e2b..3f018d61a 100644
--- a/src/components/main/ItemsTable.js
+++ b/src/components/main/ItemsTable.js
@@ -72,7 +72,7 @@ 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,
@@ -80,6 +80,7 @@ const ItemsTable = ({
       updatedAt,
       createdAt,
       extra,
+      settings
     };
   });
 
diff --git a/src/config/selectors.js b/src/config/selectors.js
index d9545f8d6..ec8e4f3d1 100644
--- a/src/config/selectors.js
+++ b/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';