fix(test): add regression test for delte category with buttons and ba…

…ckspace
graasp · Jul 18, 2023 · 5b737e5 · 5b737e5
1 parent 7a46182
commit 5b737e5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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';