test: improve test based on PR comments

cypress/integration/item/settings/itemSettings.spec.js

@@ -1,61 +1,109 @@
 import { buildItemPath } from '../../../../src/config/paths';
 import {
   ITEM_SETTINGS_BUTTON_CLASS,
-  SETTINGS_CHATBOX_TOGGLE,
-  SETTINGS_PINNED_TOGGLE,
+  SETTINGS_CHATBOX_TOGGLE_ID,
+  SETTINGS_PINNED_TOGGLE_ID,
 } from '../../../../src/config/selectors';
 import { ITEMS_SETTINGS } from '../../../fixtures/items';
+import { EDIT_ITEM_PAUSE } from '../../../support/constants';
 
 describe('Item Settings', () => {
   beforeEach(() => {
-    cy.setUpApi(ITEMS_SETTINGS);
+    cy.setUpApi({...ITEMS_SETTINGS});
   });
 
   describe('Chatbox Settings', () => {
     it('Disabling Chatbox', () => {
-      cy.visit(buildItemPath(ITEMS_SETTINGS.items[0].id));
-      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
-
-      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).should('be.checked');
+      const itemId = ITEMS_SETTINGS.items[0].id;
 
-      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).click();
+      cy.visit(buildItemPath(itemId));
+      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
 
-      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).should('not.be.checked');
+      cy.get(`#${SETTINGS_CHATBOX_TOGGLE_ID}`).should('be.checked');
+
+      cy.get(`#${SETTINGS_CHATBOX_TOGGLE_ID}`).click();
+
+      cy.wait('@editItem').then(
+        ({
+            response: {
+              body: { settings },
+            }
+        }) => {
+          expect(settings.showChatbox).equals(false);
+          cy.wait(EDIT_ITEM_PAUSE);
+          cy.get('@getItem').its('response.url').should('contain', itemId);
+        },
+      );
     });
 
     it('Enabling Chatbox', () => {
-      cy.visit(buildItemPath(ITEMS_SETTINGS.items[1].id));
-      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
-
-      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).should('not.be.checked');
+      const itemId = ITEMS_SETTINGS.items[1].id;
 
-      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).click();
+      cy.visit(buildItemPath(itemId));
+      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
 
-      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).should('be.checked');
+      cy.get(`#${SETTINGS_CHATBOX_TOGGLE_ID}`).should('not.be.checked');
+
+      cy.get(`#${SETTINGS_CHATBOX_TOGGLE_ID}`).click();
+
+      cy.wait('@editItem').then(
+        ({
+            response: {
+              body: { settings },
+            }
+        }) => {
+          expect(settings.showChatbox).equals(true);
+          cy.wait(EDIT_ITEM_PAUSE);
+          cy.get('@getItem').its('response.url').should('contain', itemId);
+        },
+      );
     });
   });
 
   describe('Pinned Settings', () => {
     it('Unpin Items', () => {
-      cy.visit(buildItemPath(ITEMS_SETTINGS.items[0].id));
-      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
-
-      cy.get(`#${SETTINGS_PINNED_TOGGLE}`).should('be.checked');
+      const itemId = ITEMS_SETTINGS.items[0].id;
 
-      cy.get(`#${SETTINGS_PINNED_TOGGLE}`).click();
+      cy.visit(buildItemPath(itemId));
+      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
 
-      cy.get(`#${SETTINGS_PINNED_TOGGLE}`).should('not.be.checked');
+      cy.get(`#${SETTINGS_PINNED_TOGGLE_ID}`).should('be.checked');
+
+      cy.get(`#${SETTINGS_PINNED_TOGGLE_ID}`).click();
+
+      cy.wait('@editItem').then(
+        ({
+            response: {
+              body: { settings },
+            }
+        }) => {
+          expect(settings.isPinned).equals(false);
+          cy.wait(EDIT_ITEM_PAUSE);
+          cy.get('@getItem').its('response.url').should('contain', itemId);
+        },
+      );
     });
 
     it('Pin Item', () => {
-      cy.visit(buildItemPath(ITEMS_SETTINGS.items[1].id));
+      const itemId = ITEMS_SETTINGS.items[1].id;
+      cy.visit(buildItemPath(itemId));
       cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
 
-      cy.get(`#${SETTINGS_PINNED_TOGGLE}`).should('not.be.checked');
-
-      cy.get(`#${SETTINGS_PINNED_TOGGLE}`).click();
-
-      cy.get(`#${SETTINGS_PINNED_TOGGLE}`).should('be.checked');
+      cy.get(`#${SETTINGS_PINNED_TOGGLE_ID}`).should('not.be.checked');
+
+      cy.get(`#${SETTINGS_PINNED_TOGGLE_ID}`).click();
+
+      cy.wait('@editItem').then(
+        ({
+            response: {
+              body: { settings },
+            }
+        }) => {
+          expect(settings.isPinned).equals(true);
+          cy.wait(EDIT_ITEM_PAUSE);
+          cy.get('@getItem').its('response.url').should('contain', itemId);
+        },
+      );
     });
   });
 });

src/components/item/settings/ItemSettings.js

@@ -12,8 +12,8 @@ import {
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { useMutation } from '../../../config/queryClient';
 import {
-  SETTINGS_CHATBOX_TOGGLE,
-  SETTINGS_PINNED_TOGGLE,
+  SETTINGS_CHATBOX_TOGGLE_ID,
+  SETTINGS_PINNED_TOGGLE_ID,
 } from '../../../config/selectors';
 
 const useStyles = makeStyles((theme) => ({
@@ -68,7 +68,7 @@ const ItemSettings = ({ item }) => {
           label={t('Pin')}
           control={(
             <Switch
-              id={SETTINGS_PINNED_TOGGLE}
+              id={SETTINGS_PINNED_TOGGLE_ID}
               onChange={handlePinned}
               checked={settings.isPinned}
               color="primary"
@@ -79,7 +79,7 @@ const ItemSettings = ({ item }) => {
           label={t('Show Chat')}
           control={(
             <Switch
-              id={SETTINGS_CHATBOX_TOGGLE}
+              id={SETTINGS_CHATBOX_TOGGLE_ID}
               onChange={handleChatbox}
               checked={settings.showChatbox}
               color="primary"

src/config/selectors.js

@@ -151,5 +151,5 @@ export const SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID =
 export const ITEM_RECYCLE_BUTTON_CLASS = 'itemRecycleButton';
 export const buildItemsTableId = (id) => `itemsTable-${id}`;
 
-export const SETTINGS_PINNED_TOGGLE = 'pinned';
-export const SETTINGS_CHATBOX_TOGGLE = 'chatbox';
+export const SETTINGS_PINNED_TOGGLE_ID = 'pinned';
+export const SETTINGS_CHATBOX_TOGGLE_ID = 'chatbox';