Merge pull request #27 from graasp/14/editItem

feat: edit item

cypress/fixtures/items.js

@@ -1,46 +1,65 @@
+import { ITEM_TYPES } from '../../src/config/constants';
+
 export const CURRENT_USER_ID = 'some_creator_id';
 
 const DEFAULT_ITEM = {
   description: '',
   extra: {},
   creator: CURRENT_USER_ID,
-  type: 'Space',
+  type: ITEM_TYPES.SPACE,
 };
 
 export const CREATED_ITEM = {
   name: 'created item',
-  type: 'Space',
+  type: ITEM_TYPES.SPACE,
   description: 'I am a newly created element',
   extra: {
     image: 'someimageurl',
   },
 };
 
+export const EDITED_FIELDS = {
+  name: 'new name',
+  description: 'new description',
+};
+
 export const SIMPLE_ITEMS = [
   {
     ...DEFAULT_ITEM,
     id: 'ecafbd2a-5688-11eb-ae93-0242ac130002',
     name: 'own_item_name1',
     path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
+    extra: {
+      image: 'someimageurl',
+    },
   },
   {
     ...DEFAULT_ITEM,
     id: 'fdf09f5a-5688-11eb-ae93-0242ac130002',
     name: 'own_item_name2',
     path: 'fdf09f5a_5688_11eb_ae93_0242ac130002',
+    extra: {
+      image: 'someimageurl',
+    },
   },
   {
     ...DEFAULT_ITEM,
     id: 'fdf09f5a-5688-11eb-ae93-0242ac130003',
     name: 'own_item_name3',
     path:
       'ecafbd2a_5688_11eb_ae93_0242ac130002.fdf09f5a_5688_11eb_ae93_0242ac130003',
+    extra: {
+      image: 'someimageurl',
+    },
   },
   {
     ...DEFAULT_ITEM,
     id: 'fdf09f5a-5688-11eb-ae93-0242ac130004',
     name: 'own_item_name4',
     path:
       'ecafbd2a_5688_11eb_ae93_0242ac130002.fdf09f5a_5688_11eb_ae93_0242ac130004',
+    extra: {
+      image: 'someimageurl',
+    },
   },
 ];

cypress/integration/createItem.spec.js

@@ -1,32 +1,34 @@
+import { ITEM_TYPES } from '../../src/config/constants';
 import { buildItemPath } from '../../src/config/paths';
 import {
   buildItemCard,
   CREATE_ITEM_BUTTON_ID,
-  NEW_ITEM_CONFIRM_BUTTON_ID,
-  NEW_ITEM_DESCRIPTION_INPUT_ID,
-  NEW_ITEM_IMAGE_INPUT_ID,
-  NEW_ITEM_NAME_INPUT_ID,
-  NEW_ITEM_TYPE_SELECT_ID,
+  ITEM_FORM_CONFIRM_BUTTON_ID,
+  ITEM_FORM_DESCRIPTION_INPUT_ID,
+  ITEM_FORM_IMAGE_INPUT_ID,
+  ITEM_FORM_NAME_INPUT_ID,
+  ITEM_FORM_TYPE_SELECT_ID,
 } from '../../src/config/selectors';
 import { CREATED_ITEM, SIMPLE_ITEMS } from '../fixtures/items';
+import { CREATE_ITEM_PAUSE } from '../support/constants';
 
 const createItem = ({
   name = '',
-  type = 'Space',
+  type = ITEM_TYPES.SPACE,
   extra = {},
   description = '',
 }) => {
   cy.get(`#${CREATE_ITEM_BUTTON_ID}`).click();
 
-  cy.get(`#${NEW_ITEM_NAME_INPUT_ID}`).type(name);
+  cy.get(`#${ITEM_FORM_NAME_INPUT_ID}`).type(name);
 
-  cy.get(`#${NEW_ITEM_DESCRIPTION_INPUT_ID}`).type(description);
+  cy.get(`#${ITEM_FORM_DESCRIPTION_INPUT_ID}`).type(description);
 
-  cy.get(`#${NEW_ITEM_TYPE_SELECT_ID}`).click();
+  cy.get(`#${ITEM_FORM_TYPE_SELECT_ID}`).click();
   cy.get(`li[data-value="${type}"]`).click();
-  cy.get(`#${NEW_ITEM_IMAGE_INPUT_ID}`).type(extra.image);
+  cy.get(`#${ITEM_FORM_IMAGE_INPUT_ID}`).type(extra.image);
 
-  cy.get(`#${NEW_ITEM_CONFIRM_BUTTON_ID}`).click();
+  cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
 };
 
 describe('Create Item', () => {
@@ -39,7 +41,7 @@ describe('Create Item', () => {
 
     cy.wait('@postItem').then(({ response: { body } }) => {
       // check item is created and displayed
-      cy.wait(1000);
+      cy.wait(CREATE_ITEM_PAUSE);
       cy.get(`#${buildItemCard(body.id)}`).should('exist');
     });
   });

cypress/integration/editItem.spec.js

@@ -0,0 +1,93 @@
+import { ITEM_TYPES } from '../../src/config/constants';
+import { buildItemPath } from '../../src/config/paths';
+import {
+  buildItemCard,
+  buildItemLink,
+  buildItemMenu,
+  ITEM_MENU_BUTTON_CLASS,
+  ITEM_MENU_EDIT_BUTTON_CLASS,
+  ITEM_FORM_CONFIRM_BUTTON_ID,
+  ITEM_FORM_DESCRIPTION_INPUT_ID,
+  ITEM_FORM_IMAGE_INPUT_ID,
+  ITEM_FORM_NAME_INPUT_ID,
+  ITEM_FORM_TYPE_SELECT_ID,
+} from '../../src/config/selectors';
+import { EDITED_FIELDS, SIMPLE_ITEMS } from '../fixtures/items';
+import { EDIT_ITEM_PAUSE } from '../support/constants';
+
+const editItem = ({
+  id,
+  name = '',
+  type = ITEM_TYPES.SPACE,
+  extra = {},
+  description = '',
+}) => {
+  const menuSelector = `#${buildItemCard(id)} .${ITEM_MENU_BUTTON_CLASS}`;
+  cy.get(menuSelector).click();
+  cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_EDIT_BUTTON_CLASS}`).click();
+
+  cy.get(`#${ITEM_FORM_NAME_INPUT_ID}`).clear().type(name);
+
+  cy.get(`#${ITEM_FORM_DESCRIPTION_INPUT_ID}`).clear().type(description);
+
+  cy.get(`#${ITEM_FORM_TYPE_SELECT_ID}`).click();
+  cy.get(`li[data-value="${type}"]`).click();
+  cy.get(`#${ITEM_FORM_IMAGE_INPUT_ID}`).clear().type(extra.image);
+
+  cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
+};
+
+describe('Edit Item', () => {
+  it('edit item on Home', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS });
+    cy.visit('/');
+
+    const itemToEdit = SIMPLE_ITEMS[0];
+
+    // edit
+    editItem({
+      ...itemToEdit,
+      ...EDITED_FIELDS,
+    });
+
+    cy.wait('@editItem').then(
+      ({
+        response: {
+          body: { id, name },
+        },
+      }) => {
+        // check item is edited and updated
+        cy.wait(EDIT_ITEM_PAUSE);
+        cy.get(`#${buildItemCard(id)}`).should('exist');
+        cy.get(`#${buildItemLink(id)}`).contains(name);
+      },
+    );
+  });
+
+  it('create item in item', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS });
+    // go to children item
+    cy.visit(buildItemPath(SIMPLE_ITEMS[0].id));
+
+    const itemToEdit = SIMPLE_ITEMS[2];
+
+    // edit
+    editItem({
+      ...itemToEdit,
+      ...EDITED_FIELDS,
+    });
+
+    cy.wait('@editItem').then(
+      ({
+        response: {
+          body: { id, name },
+        },
+      }) => {
+        // check item is edited and updated
+        cy.wait(EDIT_ITEM_PAUSE);
+        cy.get(`#${buildItemCard(id)}`).should('exist');
+        cy.get(`#${buildItemLink(id)}`).contains(name);
+      },
+    );
+  });
+});

cypress/support/commands.js

@@ -3,6 +3,7 @@ import {
   buildNavigationLink,
   NAVIGATION_HOME_LINK_ID,
 } from '../../src/config/selectors';
+import { NAVIGATE_PAUSE } from './constants';
 import {
   mockCopyItem,
   mockDeleteItem,
@@ -11,6 +12,7 @@ import {
   mockGetOwnItems,
   mockMoveItem,
   mockPostItem,
+  mockEditItem,
 } from './server';
 
 Cypress.Commands.add(
@@ -22,6 +24,7 @@ Cypress.Commands.add(
     moveItemError = false,
     copyItemError = false,
     getItemError = false,
+    editItemError = false,
   } = {}) => {
     const cachedItems = JSON.parse(JSON.stringify(items));
 
@@ -38,20 +41,22 @@ Cypress.Commands.add(
     mockMoveItem(cachedItems, moveItemError);
 
     mockCopyItem(cachedItems, copyItemError);
+
+    mockEditItem(cachedItems, editItemError);
   },
 );
 
 Cypress.Commands.add('goToItem', (id) => {
-  cy.wait(500);
+  cy.wait(NAVIGATE_PAUSE);
   cy.get(`#${buildItemLink(id)}`).click();
 });
 
 Cypress.Commands.add('goToHome', () => {
-  cy.wait(500);
+  cy.wait(NAVIGATE_PAUSE);
   cy.get(`#${NAVIGATION_HOME_LINK_ID}`).click();
 });
 
 Cypress.Commands.add('goToItemWithNavigation', (id) => {
-  cy.wait(500);
+  cy.wait(NAVIGATE_PAUSE);
   cy.get(`#${buildNavigationLink(id)}`).click();
 });

cypress/support/constants.js

@@ -0,0 +1,3 @@
+export const CREATE_ITEM_PAUSE = 1000;
+export const EDIT_ITEM_PAUSE = 1000;
+export const NAVIGATE_PAUSE = 500;

cypress/support/server.js

@@ -2,6 +2,7 @@ import { v4 as uuidv4 } from 'uuid';
 import {
   buildCopyItemRoute,
   buildDeleteItemRoute,
+  buildEditItemRoute,
   buildGetChildrenRoute,
   buildGetItemRoute,
   buildMoveItemRoute,
@@ -21,13 +22,19 @@ import {
   parseStringToRegExp,
   SUCCESS_CODE,
 } from './utils';
+import {
+  DEFAULT_PATCH,
+  DEFAULT_GET,
+  DEFAULT_POST,
+  DEFAULT_DELETE,
+} from '../../src/api/utils';
 
 const API_HOST = Cypress.env('API_HOST');
 
 export const mockGetOwnItems = (items) => {
   cy.intercept(
     {
-      method: 'GET',
+      method: DEFAULT_GET.method,
       url: `${API_HOST}/${GET_OWN_ITEMS_ROUTE}`,
     },
     (req) => {
@@ -40,7 +47,7 @@ export const mockGetOwnItems = (items) => {
 export const mockPostItem = (items, shouldThrowError) => {
   cy.intercept(
     {
-      method: 'POST',
+      method: DEFAULT_POST.method,
       url: new RegExp(
         `${API_HOST}/${parseStringToRegExp(
           buildPostItemRoute(ID_FORMAT),
@@ -67,7 +74,7 @@ export const mockPostItem = (items, shouldThrowError) => {
 export const mockDeleteItem = (items, shouldThrowError) => {
   cy.intercept(
     {
-      method: 'DELETE',
+      method: DEFAULT_DELETE.method,
       url: new RegExp(`${API_HOST}/${buildDeleteItemRoute(ID_FORMAT)}`),
     },
     ({ url, reply }) => {
@@ -87,7 +94,7 @@ export const mockDeleteItem = (items, shouldThrowError) => {
 export const mockGetItem = (items, shouldThrowError) => {
   cy.intercept(
     {
-      method: 'GET',
+      method: DEFAULT_GET.method,
       url: new RegExp(`${API_HOST}/${buildGetItemRoute(ID_FORMAT)}$`),
     },
     ({ url, reply }) => {
@@ -108,7 +115,7 @@ export const mockGetItem = (items, shouldThrowError) => {
 export const mockGetChildren = (items) => {
   cy.intercept(
     {
-      method: 'GET',
+      method: DEFAULT_GET.method,
       url: new RegExp(`${API_HOST}/${buildGetChildrenRoute(ID_FORMAT)}`),
     },
     ({ url, reply }) => {
@@ -122,7 +129,7 @@ export const mockGetChildren = (items) => {
 export const mockMoveItem = (items, shouldThrowError) => {
   cy.intercept(
     {
-      method: 'POST',
+      method: DEFAULT_POST.method,
       url: new RegExp(`${API_HOST}/${buildMoveItemRoute(ID_FORMAT)}`),
     },
     ({ url, reply, body }) => {
@@ -152,7 +159,7 @@ export const mockMoveItem = (items, shouldThrowError) => {
 export const mockCopyItem = (items, shouldThrowError) => {
   cy.intercept(
     {
-      method: 'POST',
+      method: DEFAULT_POST.method,
       url: new RegExp(`${API_HOST}/${buildCopyItemRoute(ID_FORMAT)}`),
     },
     ({ url, reply, body }) => {
@@ -180,3 +187,19 @@ export const mockCopyItem = (items, shouldThrowError) => {
     },
   ).as('copyItem');
 };
+
+export const mockEditItem = (items, shouldThrowError) => {
+  cy.intercept(
+    {
+      method: DEFAULT_PATCH.method,
+      url: new RegExp(`${API_HOST}/${buildEditItemRoute(ID_FORMAT)}`),
+    },
+    ({ reply, body }) => {
+      if (shouldThrowError) {
+        return reply({ statusCode: ERROR_CODE });
+      }
+
+      return reply(body);
+    },
+  ).as('editItem');
+};

package.json

@@ -13,6 +13,7 @@
     "i18next": "19.8.4",
     "immutable": "4.0.0-rc.12",
     "js-cookie": "2.2.1",
+    "lodash.truncate": "4.4.2",
     "node-fetch": "2.6.1",
     "prop-types": "15.7.2",
     "react": "^17.0.1",