diff --git a/cypress/e2e/island.cy.ts b/cypress/e2e/island.cy.ts index de613164..7a18f263 100644 --- a/cypress/e2e/island.cy.ts +++ b/cypress/e2e/island.cy.ts @@ -1,15 +1,23 @@ -import { PackedFolderItemFactory } from '@graasp/sdk'; +import { + DocumentItemExtra, + PackedFolderItemFactory, + getDocumentExtra, +} from '@graasp/sdk'; import { buildContentPagePath } from '@/config/paths'; import { ITEM_CHATBOX_BUTTON_ID, ITEM_MAP_BUTTON_ID, + NAVIGATION_ISLAND_CY, + buildDataCyWrapper, + buildDocumentId, buildTreeItemClass, } from '@/config/selectors'; import { DOCUMENT_WITHOUT_CHAT_BOX, DOCUMENT_WITH_CHAT_BOX, + getFolderWithShortcutFixture, } from '../fixtures/items'; describe('Island', () => { @@ -111,4 +119,19 @@ describe('Island', () => { .should('be.disabled'); }); }); + + it('Shows only one island when folder contains shortcut', () => { + const items = getFolderWithShortcutFixture(); + const parent = items[0]; + const documentTarget = items[1]; + cy.setUpApi({ items }); + cy.visit(buildContentPagePath({ rootId: parent.id, itemId: parent.id })); + cy.get(`#${buildDocumentId(documentTarget.id)}`).should( + 'contain', + getDocumentExtra(documentTarget.extra as DocumentItemExtra).content, + ); + cy.get(buildDataCyWrapper(NAVIGATION_ISLAND_CY)) + .should('be.visible') + .and('have.length', 1); + }); }); diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts index 1381b15f..3c77612f 100644 --- a/cypress/fixtures/items.ts +++ b/cypress/fixtures/items.ts @@ -1,4 +1,11 @@ -import { ItemType, PermissionLevel, buildPathFromIds } from '@graasp/sdk'; +import { + DocumentItemFactory, + FolderItemFactory, + ItemType, + PermissionLevel, + ShortcutItemFactory, + buildPathFromIds, +} from '@graasp/sdk'; import { DEFAULT_LANG } from '@graasp/translations'; import { v4 } from 'uuid'; @@ -364,6 +371,30 @@ export const FOLDER_WITH_HIDDEN_ITEMS: { items: MockItem[] } = { ], }; +export const getFolderWithShortcutFixture = (): MockItem[] => { + const parent = FolderItemFactory({ name: 'Lesson', creator: CURRENT_USER }); + const child = FolderItemFactory({ + parentItem: parent, + name: 'Part 1', + creator: CURRENT_USER, + }); + const documentItem = DocumentItemFactory({ + extra: { document: { content: 'I am a document' } }, + creator: CURRENT_USER, + }); + return [ + parent, + documentItem, + child, + DocumentItemFactory({ parentItem: parent, creator: CURRENT_USER }), + ShortcutItemFactory({ + parentItem: parent, + creator: CURRENT_USER, + extra: { shortcut: { target: documentItem.id } }, + }), + ]; +}; + export const FOLDER_WITH_COLLAPSIBLE_SHORTCUT_ITEMS: { items: MockItem[] } = { items: [ // original for the shortcut diff --git a/src/config/selectors.ts b/src/config/selectors.ts index 528d874b..85e11909 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -37,6 +37,9 @@ export const buildTreeItemClass = (id: string): string => `buildTreeItem-${id}`; export const buildTreeShortcutItemClass = (id: string): string => `buildTreeShortcutItem-${id}`; +export const buildDataCyWrapper = (dataCy: string): string => + `[data-cy="${dataCy}"]`; + export const HEADER_MEMBER_MENU_BUTTON_ID = 'headerMemberMenuButton'; export const HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID = 'headerMemberMenuSeeProfileButton'; @@ -65,6 +68,8 @@ export const APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS = { [Platform.Analytics]: 'appNavigationPlatformSwitchButtonAnalytics', }; +export const NAVIGATION_ISLAND_CY = 'navigationIsland'; + export const TREE_NODE_GROUP_CLASS = 'tree-node-group'; export const BACK_TO_SHORTCUT_ID = 'backToButtonShortcut'; export const ITEM_MAP_BUTTON_ID = 'itemMapButton'; diff --git a/src/modules/item/Item.tsx b/src/modules/item/Item.tsx index f2718652..8d7afcda 100644 --- a/src/modules/item/Item.tsx +++ b/src/modules/item/Item.tsx @@ -513,7 +513,10 @@ const Item = ({ return ( <> - + { + // only render the island when the item is not a children + isChildren ? false : + } ); } diff --git a/src/modules/navigationIsland/NavigationIsland.tsx b/src/modules/navigationIsland/NavigationIsland.tsx index ae2770dc..a5299a61 100644 --- a/src/modules/navigationIsland/NavigationIsland.tsx +++ b/src/modules/navigationIsland/NavigationIsland.tsx @@ -1,5 +1,7 @@ import { Box, Stack } from '@mui/material'; +import { NAVIGATION_ISLAND_CY } from '@/config/selectors'; + import useChatButton from './ChatButton'; // import useGeolocationButton from './GeolocationButton'; import usePinnedItemsButton from './PinnedItemsButton'; @@ -24,6 +26,7 @@ const NavigationIslandBox = (): JSX.Element | false => { return (