fix: minor fix and simple test

cypress/fixtures/categories.js

@@ -0,0 +1,40 @@
+import { PUBLISHED_ITEM } from './items';
+
+// eslint-disable-next-line import/prefer-default-export
+export const SAMPLE_CATEGORY_TYPES = [
+  {
+    id: '3f7b79e2-7e78-4aea-b697-2b6a6ba92e91',
+    name: 'level',
+  },
+  {
+    id: 'c344bf4f-19e0-4674-b2a2-06bb5ac6e11c',
+    name: 'discipline',
+  },
+];
+
+export const SAMPLE_CATEGORIES = [
+  {
+    id: 'e873d800-5647-442c-930d-2d677532846a',
+    name: 'test_category',
+    type: '3f7b79e2-7e78-4aea-b697-2b6a6ba92e91',
+  },
+  {
+    id: '352ef74e-8893-4736-926e-214c17396ed3',
+    name: 'test_category_2',
+    type: 'c344bf4f-19e0-4674-b2a2-06bb5ac6e11c',
+  },
+];
+
+export const SAMPLE_ITEM_CATEGORIES = [
+  {
+    id: 'e75e1950-c5b4-4e21-95a2-c7c3bfa4072b',
+    itemId: PUBLISHED_ITEM.id,
+    categoryId: 'e873d800-5647-442c-930d-2d677532846a',
+  },
+];
+
+export const ITEM_WITH_CATEGORIES = {
+  ...PUBLISHED_ITEM,
+  // for tests
+  categories: SAMPLE_ITEM_CATEGORIES,
+};

cypress/integration/item/share/categories.spec.js

@@ -0,0 +1,34 @@
+import {
+  buildShareButtonId,
+  SHARE_ITEM_CATEGORY_LEVEL,
+} from '../../../../src/config/selectors';
+import { buildItemPath } from '../../../../src/config/paths';
+import {
+  ITEM_WITH_CATEGORIES,
+  SAMPLE_CATEGORIES,
+} from '../../../fixtures/categories';
+import { DEFAULT_TAGS } from '../../../fixtures/itemTags';
+
+const openShareItemTab = (id) => {
+  cy.get(`#${buildShareButtonId(id)}`).click();
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const changeCategory = (value) => {
+  cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`).click();
+  cy.get(`li[data-value="${value}"]`).click();
+};
+
+describe('Categories', () => {
+  it('Item Categories', () => {
+    const item = ITEM_WITH_CATEGORIES;
+    cy.setUpApi({ items: [item], tags: DEFAULT_TAGS });
+    cy.visit(buildItemPath(item.id));
+    openShareItemTab(item.id);
+
+    // css selector
+    const categorySelect = cy.get('span.MuiChip-label');
+
+    categorySelect.contains(SAMPLE_CATEGORIES[0].name);
+  });
+});

cypress/integration/item/share/shareItem.spec.js

@@ -1,5 +1,6 @@
 import {
   buildShareButtonId,
+  SHARE_ITEM_CATEGORY_LEVEL,
   SHARE_ITEM_DIALOG_LINK_ID,
   SHARE_ITEM_DIALOG_LINK_SELECT_ID,
   SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID,
@@ -34,6 +35,11 @@ export const changeVisibility = (value) => {
   cy.get(`li[data-value="${value}"]`).click();
 };
 
+export const changeCategory = (value) => {
+  cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`).click();
+  cy.get(`li[data-value="${value}"]`).click();
+};
+
 describe('Share Item', () => {
   it('Default Private Item', () => {
     cy.setUpApi({ ...SAMPLE_ITEMS, tags: DEFAULT_TAGS });
@@ -123,7 +129,6 @@ describe('Share Item', () => {
       expect(body?.tagId).to.equal(ITEM_PUBLISHED_TAG.id);
     });
   });
-
   it('Published Item', () => {
     const item = PUBLISHED_ITEM;
     cy.setUpApi({ items: [item], tags: DEFAULT_TAGS });

cypress/support/commands.js

@@ -66,12 +66,20 @@ import {
   mockPostItemThumbnail,
   mockPostAvatar,
   mockImportZip,
+  mockGetCategoryTypes,
+  mockGetCategories,
+  mockGetItemCategories,
 } from './server';
 import './commands/item';
 import './commands/navigation';
 import { CURRENT_USER, MEMBERS } from '../fixtures/members';
 import { SAMPLE_FLAGS } from '../fixtures/flags';
 import { APPS_LIST } from '../fixtures/apps/apps';
+import {
+  ITEM_WITH_CATEGORIES,
+  SAMPLE_CATEGORIES,
+  SAMPLE_CATEGORY_TYPES,
+} from '../fixtures/categories';
 
 Cypress.Commands.add(
   'setUpApi',
@@ -81,6 +89,9 @@ Cypress.Commands.add(
     members = Object.values(MEMBERS),
     currentMember = CURRENT_USER,
     tags = [],
+    categories = SAMPLE_CATEGORIES,
+    categoryTypes = SAMPLE_CATEGORY_TYPES,
+    itemWithCategories = ITEM_WITH_CATEGORIES,
     flags = SAMPLE_FLAGS,
     deleteItemError = false,
     deleteItemsError = false,
@@ -112,6 +123,7 @@ Cypress.Commands.add(
     postItemThumbnailError = false,
     postAvatarError = false,
     importZipError = false,
+    getCategoriesError = false,
   } = {}) => {
     const cachedItems = JSON.parse(JSON.stringify(items));
     const cachedMembers = JSON.parse(JSON.stringify(members));
@@ -231,6 +243,12 @@ Cypress.Commands.add(
     mockPostAvatar(postAvatarError);
 
     mockImportZip(importZipError);
+
+    mockGetCategoryTypes(categoryTypes);
+
+    mockGetCategories(categories, getCategoriesError);
+
+    mockGetItemCategories(itemWithCategories, getCategoriesError);
   },
 );
 

cypress/support/server.js

@@ -77,6 +77,9 @@ const {
   buildUploadItemThumbnailRoute,
   buildUploadAvatarRoute,
   buildImportZipRoute,
+  GET_CATEGORY_TYPES_ROUTE,
+  buildGetCategoriesRoute,
+  buildGetItemCategoriesRoute,
 } = API_ROUTES;
 
 const API_HOST = Cypress.env('API_HOST');
@@ -1270,3 +1273,55 @@ export const mockPostAvatar = (shouldThrowError) => {
     },
   ).as('uploadAvatar');
 };
+
+export const mockGetCategoryTypes = (categoryTypes) => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(
+        `${API_HOST}/${parseStringToRegExp(GET_CATEGORY_TYPES_ROUTE)}$`,
+      ),
+    },
+    ({ reply }) => {
+      reply(categoryTypes);
+    },
+  ).as('getCategoryTypes');
+};
+
+export const mockGetCategories = (categories, shouldThrowError) => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(
+        `${API_HOST}/${parseStringToRegExp(buildGetCategoriesRoute())}`,
+      ),
+    },
+    ({ reply }) => {
+      if (shouldThrowError) {
+        reply({ statusCode: StatusCodes.BAD_REQUEST, body: null });
+        return;
+      }
+      reply(categories);
+    },
+  ).as('getCategories');
+};
+
+export const mockGetItemCategories = (itemWithCategories, shouldThrowError) => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(
+        `${API_HOST}/${parseStringToRegExp(
+          buildGetItemCategoriesRoute(itemWithCategories.id),
+        )}`,
+      ),
+    },
+    ({ reply }) => {
+      if (shouldThrowError) {
+        reply({ statusCode: StatusCodes.BAD_REQUEST, body: null });
+        return;
+      }
+      reply(itemWithCategories.categories);
+    },
+  ).as('getItemCategories');
+};

src/components/item/sharing/CategorySelection.js

@@ -50,12 +50,18 @@ const CategorySelection = ({ item, edit }) => {
   const { itemId } = useParams();
 
   // get itemCategories, categoryTypes and allCategories
-  const { data: itemCategories, isLoading: isItemCategoriesLoading } =
-    useItemCategories(itemId);
-  const { data: categoryTypes, isLoading: isCategoryTypesLoading } =
-    useCategoryTypes();
-  const { data: allCategories, isLoading: isCategoriesLoading } =
-    useCategories();
+  const {
+    data: itemCategories,
+    isLoading: isItemCategoriesLoading,
+  } = useItemCategories(itemId);
+  const {
+    data: categoryTypes,
+    isLoading: isCategoryTypesLoading,
+  } = useCategoryTypes();
+  const {
+    data: allCategories,
+    isLoading: isCategoriesLoading,
+  } = useCategories();
 
   // process data
   const categoriesMap = allCategories?.groupBy((entry) => entry.type);

src/components/item/sharing/CustomizedTagsEdit.js

@@ -41,7 +41,7 @@ const CustomizedTagsEdit = ({ item, edit }) => {
   const settings = item?.get('settings');
   const itemName = item?.get('name');
 
-  const [displayValues, setDisplayValues] = useState(false);
+  const [displayValues, setDisplayValues] = useState(null);
 
   useEffect(() => {
     if (settings) {

src/langs/fr.json

@@ -146,7 +146,7 @@
     "Crop your chosen image to fit the image size requirements.": "Couper l'image choisie pour correspondre aux critères d'image.",
     "File Upload": "Charger un Fichier",
     "small thumbnail": "petite icone",
-    "Please choose from list": "Choisir dans la liste",
+    "Please choose from the list": "Choisir dans la liste",
     "Discipline": "Discipline",
     "Age Range": "Tranche d'âge",
     "Category": "Catégorie",