feat: fix flickering tree and shuffle test

graasp · Sep 30, 2024 · 26e379e · 26e379e
1 parent 41fc199
commit 26e379e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 42 deletions.
diff --git a/cypress/e2e/shuffle.cy.ts b/cypress/e2e/shuffle.cy.ts
@@ -1,3 +1,5 @@
+import { DiscriminatedItem } from '@graasp/sdk';
+
 import { buildContentPagePath } from '@/config/paths.ts';
 import {
   FOLDER_NAME_TITLE_CLASS,
@@ -32,7 +34,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       cy.get(`.${buildTreeItemClass(root.id)}`)
@@ -61,7 +64,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id
@@ -99,7 +103,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id
@@ -137,7 +142,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id
@@ -175,7 +181,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id
@@ -227,7 +234,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id
@@ -266,7 +274,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id
@@ -320,7 +329,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id
@@ -360,7 +370,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id
@@ -401,7 +412,8 @@ describe('Shuffle', () => {
 
       expectFolderLayout({
         rootId: root.id,
-        items: YET_ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+        items:
+          YET_ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items as DiscriminatedItem[],
       });
 
       // shuffled order is always the same for a given member + item id

diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts
@@ -625,15 +625,7 @@ export const FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS: { items: MockItem[] } = {
       name: 'parent folder',
       path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
       extra: {
-        [ItemType.FOLDER]: {
-          childrenOrder: [
-            'fdf09f5a-5688-11eb-ae93-0242ac130003',
-            'fdf09f5a-5688-11eb-ae93-0242ac130004',
-            'fdf09f5a-5688-11eb-ae93-0242ac130007',
-            'fdf09f5a-5688-11eb-ae93-0242ac130008',
-            'fdf09f5a-5688-11eb-ae93-0242ac130009',
-          ],
-        },
+        [ItemType.FOLDER]: {},
       },
       settings: {
         isPinned: false,
@@ -705,15 +697,7 @@ export const ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS: {
       name: 'parent folder',
       path: 'acafbd2a_5688_11eb_ae93_0242ac130002',
       extra: {
-        [ItemType.FOLDER]: {
-          childrenOrder: [
-            'fdf09f5a-5688-11eb-ae93-0242ac130003',
-            'fdf09f5a-5688-11eb-ae93-0242ac130004',
-            'fdf09f5a-5688-11eb-ae93-0242ac130007',
-            'fdf09f5a-5688-11eb-ae93-0242ac130008',
-            'fdf09f5a-5688-11eb-ae93-0242ac130009',
-          ],
-        },
+        [ItemType.FOLDER]: {},
       },
       settings: {
         isPinned: false,
@@ -785,15 +769,7 @@ export const YET_ANOTHER_FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS: {
       name: 'parent folder',
       path: 'acafbd2a_5688_11eb_ae93_0242ac130012',
       extra: {
-        [ItemType.FOLDER]: {
-          childrenOrder: [
-            'fdf09f5a-5688-11eb-ae93-0242ac130013',
-            'fdf09f5a-5688-11eb-ae93-0242ac130014',
-            'fdf09f5a-5688-11eb-ae93-0242ac130017',
-            'fdf09f5a-5688-11eb-ae93-0242ac130018',
-            'fdf09f5a-5688-11eb-ae93-0242ac130019',
-          ],
-        },
+        [ItemType.FOLDER]: {},
       },
       settings: {
         isPinned: false,

diff --git a/src/modules/navigation/tree/TreeView.tsx b/src/modules/navigation/tree/TreeView.tsx
@@ -17,7 +17,6 @@ import {
 import { ErrorBoundary } from '@sentry/react';
 
 import { GRAASP_MENU_ITEMS } from '@/config/constants';
-import { hooks } from '@/config/queryClient';
 import { ItemMetaData, getItemTree } from '@/utils/tree';
 
 import Node from './Node';
@@ -48,8 +47,7 @@ const TreeView = ({
   const itemsToShow = items?.filter((item) =>
     onlyShowContainerItems ? GRAASP_MENU_ITEMS.includes(item.type) : true,
   );
-
-  const { data: focusedItem } = hooks.useItem(itemId);
+  const focusedItem = itemsToShow?.find((i) => i.id === itemId);
 
   // types based on TreeView types
   const onSelect = (value: string) => {

diff --git a/yarn.lock b/yarn.lock
@@ -1566,7 +1566,7 @@ __metadata:
 
 "@graasp/query-client@github:graasp/graasp-query-client#889-migrate-to-v5":
   version: 3.22.3
-  resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=3d353a1e67453d535efdededff467f894323a7ac"
+  resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=2f4b188b9a22eaecd254af5fa7ac1ec5b91aa346"
   dependencies:
     "@tanstack/react-query": "npm:5.52.0"
     "@tanstack/react-query-devtools": "npm:5.52.0"
@@ -1576,7 +1576,7 @@ __metadata:
     "@graasp/sdk": ^4.0.0
     "@graasp/translations": "*"
     react: ^18.0.0
-  checksum: 10/426982d88d660473d3c1f45489bb647f5805d4e27fbb258d9a5544080e0403b32742380298445da10a6ff00a5d8e828164b50ebfda55df4746a6bacef2824caa
+  checksum: 10/b5f45e764affb23798f9b95fcf466c9048bcd7ca7831f373bdedf832e622439f5720a1401c5934cc4d8660ea5ffc948ac0eeeae431b957b6386efe45a76c7c32
   languageName: node
   linkType: hard