diff --git a/cypress/fixtures/items.js b/cypress/fixtures/items.js
index 1d926a0b7..a44241cea 100644
--- 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
new file mode 100644
index 000000000..d57fe09b3
--- /dev/null
+++ 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
index 5e96b85da..bd408387b 100644
--- 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 }) => {
- )
+
}
/>
- )
+
}
/>
diff --git a/src/config/selectors.js b/src/config/selectors.js
index 234b85fb6..d9545f8d6 100644
--- 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';