test: add tests for settings

graasp · Oct 14, 2021 · 56b978f · 56b978f
1 parent 2cfb892
commit 56b978f
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 14 deletions.
diff --git a/cypress/fixtures/items.js b/cypress/fixtures/items.js
@@ -606,3 +606,48 @@ export const PUBLISHED_ITEM = {
     },
   ],
 };
+
+export const ITEMS_SETTINGS = {
+  items: [
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'ecafbd2a-5688-11eb-ae93-0242ac130002',
+      name: 'parent public item',
+      path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
+      extra: {
+        image: 'someimageurl',
+      },
+      settings: {
+        isPinned: true,
+        showChatbox: true,
+      },
+      memberships: [
+        {
+          itemPath: 'fdf09f5a_5688_11eb_ae93_0242ac130002',
+          permission: PERMISSION_LEVELS.ADMIN,
+          memberId: MEMBERS.ANNA.id,
+        },
+      ],
+    },
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'ecafbd2a-5688-11eb-ae93-0242ac130003',
+      name: 'parent public item',
+      path: 'ecafbd2a_5688_11eb_ae93_0242ac130003',
+      extra: {
+        image: 'someimageurl',
+      },
+      settings: {
+        isPinned: false,
+        showChatbox: false,
+      },
+      memberships: [
+        {
+          itemPath: 'fdf09f5a_5688_11eb_ae93_0242ac130003',
+          permission: PERMISSION_LEVELS.ADMIN,
+          memberId: MEMBERS.ANNA.id,
+        },
+      ],
+    },
+  ],
+};
diff --git a/cypress/integration/item/settings/itemSettings.spec.js b/cypress/integration/item/settings/itemSettings.spec.js
@@ -0,0 +1,61 @@
+import { buildItemPath } from '../../../../src/config/paths';
+import {
+  ITEM_SETTINGS_BUTTON_CLASS,
+  SETTINGS_CHATBOX_TOGGLE,
+  SETTINGS_PINNED_TOGGLE,
+} from '../../../../src/config/selectors';
+import { ITEMS_SETTINGS } from '../../../fixtures/items';
+
+describe('Item Settings', () => {
+  beforeEach(() => {
+    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');
+
+      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).click();
+
+      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).should('not.be.checked');
+    });
+
+    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');
+
+      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).click();
+
+      cy.get(`#${SETTINGS_CHATBOX_TOGGLE}`).should('be.checked');
+    });
+  });
+
+  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');
+
+      cy.get(`#${SETTINGS_PINNED_TOGGLE}`).click();
+
+      cy.get(`#${SETTINGS_PINNED_TOGGLE}`).should('not.be.checked');
+    });
+
+    it('Pin Item', () => {
+      cy.visit(buildItemPath(ITEMS_SETTINGS.items[1].id));
+      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');
+    });
+  });
+});
diff --git a/src/components/item/settings/ItemSettings.js b/src/components/item/settings/ItemSettings.js
@@ -11,6 +11,10 @@ import {
 } from '@material-ui/core';
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { useMutation } from '../../../config/queryClient';
+import {
+  SETTINGS_CHATBOX_TOGGLE,
+  SETTINGS_PINNED_TOGGLE,
+} from '../../../config/selectors';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -63,25 +67,23 @@ const ItemSettings = ({ item }) => {
         <FormControlLabel
           label="Pin Item"
           control={
-            (
-              <Switch
-                onChange={handlePinned}
-                checked={settings.isPinned}
-                color="primary"
-              />
-            )
+            <Switch
+              id={SETTINGS_PINNED_TOGGLE}
+              onChange={handlePinned}
+              checked={settings.isPinned}
+              color="primary"
+            />
           }
         />
         <FormControlLabel
           label="Show Chatbox"
           control={
-            (
-              <Switch
-                onChange={handleChatbox}
-                checked={settings.showChatbox}
-                color="primary"
-              />
-            )
+            <Switch
+              id={SETTINGS_CHATBOX_TOGGLE}
+              onChange={handleChatbox}
+              checked={settings.showChatbox}
+              color="primary"
+            />
           }
         />
       </FormGroup>

diff --git a/src/config/selectors.js b/src/config/selectors.js
@@ -149,3 +149,6 @@ export const SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID =
   'shareItemPseudonymizedSchema';
 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';