From 5b737e59e4a3f0fc84bd8c456d3ea68b9b5bbe9b Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Tue, 18 Jul 2023 08:17:45 +0200
Subject: [PATCH] fix(test): add regression test for delte category with
 buttons and backspace

---
 cypress/e2e/item/publish/categories.cy.ts    | 69 ++++++++++++++++----
 src/components/item/publish/DropdownMenu.tsx |  2 +
 src/config/selectors.ts                      |  2 +
 3 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/cypress/e2e/item/publish/categories.cy.ts b/cypress/e2e/item/publish/categories.cy.ts
index 1060d0abd..817c21193 100644
--- a/cypress/e2e/item/publish/categories.cy.ts
+++ b/cypress/e2e/item/publish/categories.cy.ts
@@ -3,6 +3,7 @@ import { CategoryType } from '@graasp/sdk';
 import { buildItemPath } from '../../../../src/config/paths';
 import {
   LIBRARY_SETTINGS_CATEGORIES_ID,
+  buildCategoryDropdownParentSelector,
   buildCategorySelectionId,
   buildCategorySelectionOptionId,
   buildPublishButtonId,
@@ -60,20 +61,62 @@ describe('Categories', () => {
       categoryContent.contains(name);
     });
 
-    it('Delete a category', () => {
-      const {
-        categories: [itemCategory],
-      } = item;
-      const { category, id } = itemCategory;
-      const categoryType = SAMPLE_CATEGORIES.find(
-        ({ id: cId }) => cId === category.id,
-      )?.type;
-      toggleOption(category.id, categoryType);
-      cy.wait('@deleteItemCategory').then((data) => {
+    describe('Delete a category', () => {
+      it('Using Dropdown', () => {
         const {
-          request: { url },
-        } = data;
-        expect(url.split('/')).contains(id);
+          categories: [itemCategory],
+        } = item;
+        const { category, id } = itemCategory;
+        const categoryType = SAMPLE_CATEGORIES.find(
+          ({ id: cId }) => cId === category.id,
+        )?.type;
+        toggleOption(category.id, categoryType);
+        cy.wait('@deleteItemCategory').then((data) => {
+          const {
+            request: { url },
+          } = data;
+          expect(url.split('/')).contains(id);
+        });
+      });
+
+      it('Using cross on category tag', () => {
+        const {
+          categories: [itemCategory],
+        } = item;
+        const { category, id } = itemCategory;
+        const categoryType = SAMPLE_CATEGORIES.find(
+          ({ id: cId }) => cId === category.id,
+        )?.type;
+        cy.get(`[data-cy=${buildCategoryDropdownParentSelector(categoryType)}]`)
+          .find(`[data-tag-index=0] > svg`)
+          .click();
+        cy.wait('@deleteItemCategory').then((data) => {
+          const {
+            request: { url },
+          } = data;
+          expect(url.split('/')).contains(id);
+        });
+      });
+
+      it('Using backspace in textfield', () => {
+        const {
+          categories: [itemCategory],
+        } = item;
+        const { category, id } = itemCategory;
+        const categoryType = SAMPLE_CATEGORIES.find(
+          ({ id: cId }) => cId === category.id,
+        )?.type;
+        cy.get(
+          `[data-cy=${buildCategoryDropdownParentSelector(
+            categoryType,
+          )}] input`,
+        ).type('{backspace}');
+        cy.wait('@deleteItemCategory').then((data) => {
+          const {
+            request: { url },
+          } = data;
+          expect(url.split('/')).contains(id);
+        });
       });
     });
 
diff --git a/src/components/item/publish/DropdownMenu.tsx b/src/components/item/publish/DropdownMenu.tsx
index 8fa1d6ca2..9b788fc4e 100644
--- a/src/components/item/publish/DropdownMenu.tsx
+++ b/src/components/item/publish/DropdownMenu.tsx
@@ -15,6 +15,7 @@ import { BUILDER } from '@graasp/translations';
 
 import { useBuilderTranslation } from '../../../config/i18n';
 import {
+  buildCategoryDropdownParentSelector,
   buildCategorySelectionId,
   buildCategorySelectionOptionId,
   buildCategorySelectionTitleId,
@@ -58,6 +59,7 @@ const DropdownMenu = ({
         {title}
       </Typography>
       <Autocomplete
+        data-cy={buildCategoryDropdownParentSelector(type)}
         sx={{ width: 'auto', maxWidth: '85%' }}
         disabled={disabled || !values}
         multiple
diff --git a/src/config/selectors.ts b/src/config/selectors.ts
index e5f5c6d77..09580da6b 100644
--- a/src/config/selectors.ts
+++ b/src/config/selectors.ts
@@ -176,6 +176,8 @@ export const buildCategorySelectionTitleId = (title: string): string =>
   `itemCategoryTitle-${title}`;
 export const buildCategorySelectionId = (title: string): string =>
   `itemCategoryDropdown-${title}`;
+export const buildCategoryDropdownParentSelector = (title: string): string =>
+  `itemCategoryDropdownParent-${title}`;
 export const SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID =
   'shareItemPseudonymizedSchema';
 export const ITEM_RECYCLE_BUTTON_CLASS = 'itemRecycleButton';