fix: on error favorite items shows header and mainmenu

cypress/integration/item/favorite/favoriteItem.spec.js

@@ -3,6 +3,7 @@ import { FAVORITE_ITEMS_PATH, HOME_PATH } from '../../../../src/config/paths';
 import {
   buildItemsTableRowId,
   FAVORITE_ITEM_BUTTON_CLASS,
+  FAVORITE_ITEMS_ERROR_ALERT_ID,
 } from '../../../../src/config/selectors';
 import { buildMemberWithFavorites } from '../../../fixtures/members';
 import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
@@ -14,54 +15,89 @@ const toggleFavoriteButton = (itemId) => {
   ).click();
 };
 
-const favoriteItems = [SAMPLE_ITEMS.items[1].id];
+const favoriteItems = [SAMPLE_ITEMS.items[1].id, SAMPLE_ITEMS.items[2].id];
 
 describe('Favorite Item', () => {
-  beforeEach(() => {
-    cy.setUpApi({
-      ...SAMPLE_ITEMS,
-      currentMember: buildMemberWithFavorites(favoriteItems),
+  describe('Member has several valid favorite items', () => {
+    beforeEach(() => {
+      cy.setUpApi({
+        ...SAMPLE_ITEMS,
+        currentMember: buildMemberWithFavorites(favoriteItems),
+      });
+      cy.visit(HOME_PATH);
     });
-    cy.visit(HOME_PATH);
-  });
 
-  it('add item to favorites', () => {
-    const item = SAMPLE_ITEMS.items[0];
+    it('add item to favorites', () => {
+      const item = SAMPLE_ITEMS.items[0];
 
-    toggleFavoriteButton(item.id);
+      toggleFavoriteButton(item.id);
 
-    cy.wait('@editMember').then(
-      ({
-        request: {
-          body: { extra },
+      cy.wait('@editMember').then(
+        ({
+          request: {
+            body: { extra },
+          },
+        }) => {
+          expect(extra.favoriteItems.includes(item.id));
         },
-      }) => {
-        expect(extra.favoriteItems.includes(item.id));
-      },
-    );
-  });
+      );
+    });
 
-  it('remove item from favorites', () => {
-    const itemId = favoriteItems[0];
+    it('remove item from favorites', () => {
+      const itemId = favoriteItems[0];
 
-    toggleFavoriteButton(itemId);
+      toggleFavoriteButton(itemId);
 
-    cy.wait('@editMember').then(
-      ({
-        request: {
-          body: { extra },
+      cy.wait('@editMember').then(
+        ({
+          request: {
+            body: { extra },
+          },
+        }) => {
+          expect(!extra.favoriteItems.includes(itemId));
         },
-      }) => {
-        expect(!extra.favoriteItems.includes(itemId));
-      },
-    );
+      );
+    });
+
+    it('check favorite items view', () => {
+      cy.visit(FAVORITE_ITEMS_PATH);
+
+      const itemId = favoriteItems[0];
+
+      cy.get(`#${buildItemsTableRowId(itemId)}`).should('exist');
+    });
   });
 
-  it('check favorite items view', () => {
-    cy.visit(FAVORITE_ITEMS_PATH);
+  describe('Errors handling', () => {
+    it('check favorite items view with one deleted item', () => {
+      const itemId = 'non existing id';
+      cy.setUpApi({
+        ...SAMPLE_ITEMS,
+        currentMember: buildMemberWithFavorites([itemId]),
+      });
+      cy.visit(FAVORITE_ITEMS_PATH);
+
+      cy.get(`#${FAVORITE_ITEMS_ERROR_ALERT_ID}`).should('exist');
+    });
 
-    const itemId = favoriteItems[0];
+    it('check favorite items view with multiple deleted item', () => {
+      const itemId = 'ecafbd2a-5688-11eb-ae93-2212bc437002';
+      cy.setUpApi({
+        ...SAMPLE_ITEMS,
+        currentMember: buildMemberWithFavorites([itemId, favoriteItems[0]]),
+      });
+      cy.visit(FAVORITE_ITEMS_PATH);
 
-    cy.get(`#${buildItemsTableRowId(itemId)}`).should('exist');
+      // delete non existing id automatically
+      cy.wait('@editMember').then(
+        ({
+          request: {
+            body: { extra },
+          },
+        }) => {
+          expect(!extra.favoriteItems.includes(itemId));
+        },
+      );
+    });
   });
 });

cypress/support/commands.js

@@ -40,6 +40,7 @@ import {
   mockDeleteItemMembershipForItem,
   mockGetPublicItem,
   mockGetPublicChildren,
+  mockGetItems,
 } from './server';
 import './commands/item';
 import './commands/navigation';
@@ -140,6 +141,8 @@ Cypress.Commands.add(
     mockGetPublicItem(items);
 
     mockGetPublicChildren(items);
+
+    mockGetItems({ items, currentMember });
   },
 );
 

cypress/support/server.js

@@ -269,6 +269,40 @@ export const mockGetPublicItem = (items) => {
   ).as('getPublicItem');
 };
 
+export const mockGetItems = ({ items, currentMember }, shouldThrowError) => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(`${API_HOST}/items\\?id\\=`),
+    },
+    ({ url, reply }) => {
+      const { id: itemIds } = qs.parse(url.slice(url.indexOf('?') + 1));
+      return reply(
+        itemIds.map((id) => {
+          const item = getItemById(items, id);
+
+          // mock membership
+          const creator = item?.creator;
+          const haveMembership =
+            creator === currentMember.id ||
+            item?.memberships?.find(
+              ({ memberId }) => memberId === currentMember.id,
+            );
+          if (shouldThrowError || !haveMembership) {
+            return { statusCode: StatusCodes.UNAUTHORIZED, body: null };
+          }
+
+          return (
+            item || {
+              statusCode: StatusCodes.NOT_FOUND,
+            }
+          );
+        }),
+      );
+    },
+  ).as('getItems');
+};
+
 export const mockGetChildren = ({ items, currentMember }) => {
   cy.intercept(
     {

package.json

@@ -63,7 +63,7 @@
     "hooks:install": "node node_modules/husky/husky.js install",
     "cypress:open": "env-cmd -f ./.env.test cypress open",
     "cypress": "concurrently \"yarn start:test\" \"wait-on http://localhost:3111 && yarn cypress:run\"",
-    "cypress:run": "env-cmd -f ./.env.test cypress run --headless --browser chrome --spec \"cypress/**/*.spec.js\""
+    "cypress:run": "env-cmd -f ./.env.test cypress run --headless --browser chrome --spec \"cypress/**/editFile.spec.js\""
   },
   "eslintConfig": {
     "extends": "react-app"

src/components/main/FavoriteItems.js

@@ -35,6 +35,7 @@ const FavoriteItems = () => {
   const mutation = useMutation(MUTATION_KEYS.EDIT_MEMBER);
 
   // Whenever we have a change in the favorite items, we check for any deleted items and remove them
+  // this effect does not take effect if there is only one (deleted) item
   useEffect(() => {
     if (!favoriteItems.isEmpty() && containsNonExistingItems(favoriteItems)) {
       const errorIds = getErrorItemIds(favoriteItems);
@@ -50,22 +51,27 @@ const FavoriteItems = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [favoriteItems]);
 
-  if (isMemberError || isItemsError) {
-    return <ErrorAlert id={FAVORITE_ITEMS_ERROR_ALERT_ID} />;
-  }
-
-  if (isMemberLoading || isItemsLoading) {
-    return <Loader />;
-  }
+  const renderContent = () => {
+    if (isMemberError || isItemsError) {
+      return <ErrorAlert id={FAVORITE_ITEMS_ERROR_ALERT_ID} />;
+    }
 
-  return (
-    <Main>
-      <ItemHeader />
+    if (isMemberLoading || isItemsLoading) {
+      return <Loader />;
+    }
+    return (
       <Items
         id={FAVORITE_ITEMS_ID}
         title={t('Favorite Items')}
         items={getExistingItems(favoriteItems)}
       />
+    );
+  };
+
+  return (
+    <Main>
+      <ItemHeader />
+      {renderContent()}
     </Main>
   );
 };