fix: changed by review

cypress/fixtures/categories.js

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

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

@@ -1,9 +1,11 @@
 import {
   buildShareButtonId,
+  SHARE_ITEM_CATEGORY_DISCIPLINE,
   SHARE_ITEM_CATEGORY_LEVEL,
 } from '../../../../src/config/selectors';
 import { buildItemPath } from '../../../../src/config/paths';
 import {
+  CUSTOMIZED_TAGS,
   ITEM_WITH_CATEGORIES,
   SAMPLE_CATEGORIES,
 } from '../../../fixtures/categories';
@@ -14,9 +16,14 @@ const openShareItemTab = (id) => {
 };
 
 // eslint-disable-next-line import/prefer-default-export
-export const changeCategory = (value) => {
+export const deleteOption = () => {
   cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`).click();
-  cy.get(`li[data-value="${value}"]`).click();
+  cy.get('.MuiAutocomplete-popper li[data-option-index="0"]').click();
+};
+
+export const addOption = () => {
+  cy.get(`#${SHARE_ITEM_CATEGORY_DISCIPLINE}`).click();
+  cy.get('.MuiAutocomplete-popper li[data-option-index="0"]').click();
 };
 
 describe('Categories', () => {
@@ -26,9 +33,38 @@ describe('Categories', () => {
     cy.visit(buildItemPath(item.id));
     openShareItemTab(item.id);
 
-    // css selector
-    const categorySelect = cy.get('span.MuiChip-label');
+    // check for displaying value
+    const levelValue = cy.get(
+      'div.MuiChip-root.MuiAutocomplete-tag.MuiChip-deletable > span',
+    );
+    levelValue.first().contains(SAMPLE_CATEGORIES[0].name);
+
+    // check for not displaying if no categories
+    const disciplineValue = cy.get(`#${SHARE_ITEM_CATEGORY_DISCIPLINE}`);
+    disciplineValue.should('be.empty');
+
+    const displayTags = cy.get('span.MuiChip-label');
+    displayTags.contains(CUSTOMIZED_TAGS[0]);
+
+    // delete selection
+    deleteOption();
+    cy.wait(['@deleteItemCategory']).then((data) => {
+      const entryId = item.categories[0].id;
+      const {
+        request: { url },
+      } = data;
+      expect(url.split('/')[4]).equal('item-category');
+      expect(url.split('/')[5]).equal(entryId);
+    });
 
-    categorySelect.contains(SAMPLE_CATEGORIES[0].name);
+    // add selection
+    addOption();
+    cy.wait(['@postItemCategory']).then((data) => {
+      const {
+        request: { url },
+      } = data;
+      expect(url.split('/')[3]).equal('items');
+      expect(url.split('/')[4]).equal(item.id);
+    });
   });
 });

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

@@ -1,6 +1,5 @@
 import {
   buildShareButtonId,
-  SHARE_ITEM_CATEGORY_LEVEL,
   SHARE_ITEM_DIALOG_LINK_ID,
   SHARE_ITEM_DIALOG_LINK_SELECT_ID,
   SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID,
@@ -35,11 +34,6 @@ 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 });

cypress/support/commands.js

@@ -69,14 +69,15 @@ import {
   mockGetCategoryTypes,
   mockGetCategories,
   mockGetItemCategories,
+  mockPostItemCategory,
+  mockDeleteItemCategory,
 } 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';
@@ -91,7 +92,6 @@ Cypress.Commands.add(
     tags = [],
     categories = SAMPLE_CATEGORIES,
     categoryTypes = SAMPLE_CATEGORY_TYPES,
-    itemWithCategories = ITEM_WITH_CATEGORIES,
     flags = SAMPLE_FLAGS,
     deleteItemError = false,
     deleteItemsError = false,
@@ -124,6 +124,7 @@ Cypress.Commands.add(
     postAvatarError = false,
     importZipError = false,
     getCategoriesError = false,
+    getItemCategoriesError = false,
   } = {}) => {
     const cachedItems = JSON.parse(JSON.stringify(items));
     const cachedMembers = JSON.parse(JSON.stringify(members));
@@ -248,7 +249,11 @@ Cypress.Commands.add(
 
     mockGetCategories(categories, getCategoriesError);
 
-    mockGetItemCategories(itemWithCategories, getCategoriesError);
+    mockGetItemCategories(items, getCategoriesError);
+
+    mockPostItemCategory(getItemCategoriesError);
+
+    mockDeleteItemCategory(getItemCategoriesError);
   },
 );
 

cypress/support/server.js

@@ -80,6 +80,8 @@ const {
   GET_CATEGORY_TYPES_ROUTE,
   buildGetCategoriesRoute,
   buildGetItemCategoriesRoute,
+  buildPostItemCategoryRoute,
+  buildDeleteItemCategoryRoute,
 } = API_ROUTES;
 
 const API_HOST = Cypress.env('API_HOST');
@@ -1306,22 +1308,59 @@ export const mockGetCategories = (categories, shouldThrowError) => {
   ).as('getCategories');
 };
 
-export const mockGetItemCategories = (itemWithCategories, shouldThrowError) => {
+export const mockGetItemCategories = (items, shouldThrowError) => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
       url: new RegExp(
         `${API_HOST}/${parseStringToRegExp(
-          buildGetItemCategoriesRoute(itemWithCategories.id),
+          buildGetItemCategoriesRoute(items[0].id),
         )}`,
       ),
     },
-    ({ reply }) => {
+    ({ reply, url }) => {
       if (shouldThrowError) {
         reply({ statusCode: StatusCodes.BAD_REQUEST, body: null });
         return;
       }
-      reply(itemWithCategories.categories);
+      const itemId = url.slice(API_HOST.length).split('/')[2];
+      console.log(itemId);
+      const result = items.find(({ id }) => id === itemId).categories || [];
+      reply(result);
     },
   ).as('getItemCategories');
 };
+
+export const mockPostItemCategory = (shouldThrowError) => {
+  cy.intercept(
+    {
+      method: DEFAULT_POST.method,
+      url: new RegExp(`${API_HOST}/${buildPostItemCategoryRoute(ID_FORMAT)}$`),
+    },
+    ({ reply, body }) => {
+      if (shouldThrowError) {
+        return reply({ statusCode: StatusCodes.BAD_REQUEST });
+      }
+
+      return reply(body);
+    },
+  ).as('postItemCategory');
+};
+
+export const mockDeleteItemCategory = (shouldThrowError) => {
+  cy.intercept(
+    {
+      method: DEFAULT_DELETE.method,
+      url: new RegExp(
+        `${API_HOST}/${buildDeleteItemCategoryRoute(ID_FORMAT)}$`,
+      ),
+    },
+    ({ reply, body }) => {
+      if (shouldThrowError) {
+        return reply({ statusCode: StatusCodes.BAD_REQUEST });
+      }
+
+      return reply(body);
+    },
+  ).as('deleteItemCategory');
+};

src/components/item/sharing/CategorySelection.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, ErrorAlert } from 'react';
 import PropTypes from 'prop-types';
 import { Loader } from '@graasp/ui';
 import { Map } from 'immutable';