test: add tests for delete, view and create item

.eslintrc

@@ -47,6 +47,7 @@
       }
     ],
     "react/state-in-constructor": ["error", "never"],
-    "no-console": [2, { "allow": ["error"] }]
+    "no-console": [2, { "allow": ["error"] }],
+    "no-restricted-syntax": "off"
   }
 }

.gitignore

@@ -24,3 +24,7 @@ yarn-error.log*
 
 # cache
 .eslintcache
+
+# test
+cypress/screenshots
+cypress/videos

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://web.graasp.org:3111"
+}

cypress/fixtures/items.js

@@ -0,0 +1,43 @@
+export const CURRENT_USER_ID = 'some_creator_id';
+
+const DEFAULT_ITEM = {
+  description: '',
+  extra: {},
+  creator: CURRENT_USER_ID,
+};
+
+export const CREATED_ITEM = {
+  name: 'created item',
+  type: 'Space',
+  description: 'I am a newly created element',
+  extra: {
+    image: 'someimageurl',
+  },
+};
+
+export const SIMPLE_ITEMS = [
+  {
+    ...DEFAULT_ITEM,
+    id: 'item-id-1',
+    name: 'own_item_name1',
+    path: 'item_id_1',
+  },
+  {
+    ...DEFAULT_ITEM,
+    id: 'item-id-2',
+    name: 'own_item_name2',
+    path: 'item_id_2',
+  },
+  {
+    ...DEFAULT_ITEM,
+    id: 'item-id-3',
+    name: 'own_item_name3',
+    path: 'item_id_1.item_id_3',
+  },
+  {
+    ...DEFAULT_ITEM,
+    id: 'item-id-4',
+    name: 'own_item_name4',
+    path: 'item_id_1.item_id_4',
+  },
+];

cypress/integration/createItem.spec.js

@@ -0,0 +1,76 @@
+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,
+} from '../../src/config/selectors';
+import { CREATED_ITEM, SIMPLE_ITEMS } from '../fixtures/items';
+
+const createItem = ({
+  name = '',
+  type = 'Space',
+  extra = {},
+  description = '',
+}) => {
+  cy.get(`#${CREATE_ITEM_BUTTON_ID}`).click();
+  cy.get(`#${NEW_ITEM_NAME_INPUT_ID}`).type(name);
+
+  cy.get(`#${NEW_ITEM_DESCRIPTION_INPUT_ID}`).type(description);
+
+  cy.get(`#${NEW_ITEM_TYPE_SELECT_ID}`).click();
+  cy.get(`li[data-value="${type}"]`).click();
+  cy.get(`#${NEW_ITEM_IMAGE_INPUT_ID}`).type(extra.image);
+
+  cy.get(`#${NEW_ITEM_CONFIRM_BUTTON_ID}`).click();
+};
+
+describe('Create Item', () => {
+  it('create item on Home', () => {
+    cy.setUpApi();
+    cy.visit('/');
+
+    // create
+    createItem(CREATED_ITEM);
+
+    cy.wait('@postItem').then(({ response: { body } }) => {
+      // check item is created and displayed
+      cy.get(`#${buildItemCard(body.id)}`).should('exist');
+    });
+  });
+
+  it('create item in item', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS });
+    const { id } = SIMPLE_ITEMS[0];
+
+    // go to children item
+    cy.visit(buildItemPath(id));
+
+    // create
+    createItem(CREATED_ITEM);
+
+    cy.wait('@postItem').then(({ response: { body } }) => {
+      // check item is created and displayed
+      cy.get(`#${buildItemCard(body.id)}`).should('exist');
+    });
+  });
+
+  it('error while creating item does not create in interface', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS, postItemError: true });
+    const { id } = SIMPLE_ITEMS[0];
+
+    // go to children item
+    cy.visit(buildItemPath(id));
+
+    // create
+    createItem(CREATED_ITEM);
+
+    cy.wait('@postItem').then(({ response: { body } }) => {
+      // check item is created and displayed
+      cy.get(`#${buildItemCard(body.id)}`).should('not.exist');
+    });
+  });
+});

cypress/integration/deleteItem.spec.js

@@ -0,0 +1,61 @@
+import { buildItemPath } from '../../src/config/paths';
+import {
+  buildItemCard,
+  ITEM_DELETE_BUTTON_CLASS,
+} from '../../src/config/selectors';
+import { SIMPLE_ITEMS } from '../fixtures/items';
+
+const deleteItem = (id) => {
+  cy.get(`#${buildItemCard(id)} .${ITEM_DELETE_BUTTON_CLASS}`).click();
+};
+
+describe('Delete Item', () => {
+  it('delete item on Home', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS });
+    cy.visit('/');
+
+    const { id } = SIMPLE_ITEMS[0];
+
+    // delete
+    deleteItem(id);
+    cy.wait('@deleteItem').then(() => {
+      // check item is deleted, others are still displayed
+      cy.get(`#${buildItemCard(id)}`).should('not.exist');
+      cy.get(`#${buildItemCard(SIMPLE_ITEMS[1].id)}`).should('exist');
+    });
+  });
+
+  it('delete item inside parent', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS });
+    const { id } = SIMPLE_ITEMS[0];
+    const { id: idToDelete } = SIMPLE_ITEMS[2];
+
+    // go to children item
+    cy.visit(buildItemPath(id));
+
+    // delete
+    deleteItem(idToDelete);
+    cy.wait('@deleteItem').then(() => {
+      // check item is deleted, others are still displayed
+      cy.get(`#${buildItemCard(idToDelete)}`).should('not.exist');
+      cy.get(`#${buildItemCard(SIMPLE_ITEMS[3].id)}`).should('exist');
+    });
+  });
+
+  it.only('error while deleting item does not delete in interface', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS, deleteItemError: true });
+    const { id } = SIMPLE_ITEMS[0];
+    const { id: idToDelete } = SIMPLE_ITEMS[2];
+
+    // go to children item
+    cy.visit(buildItemPath(id));
+
+    // delete
+    deleteItem(idToDelete);
+
+    cy.wait('@deleteItem').then(() => {
+      // check item is still displayed
+      cy.get(`#${buildItemCard(idToDelete)}`).should('exist');
+    });
+  });
+});

cypress/integration/viewItem.spec.js

@@ -0,0 +1,95 @@
+import { buildItemPath } from '../../src/config/paths';
+import {
+  buildItemCard,
+  buildItemLink,
+  buildNavigationLink,
+  ITEM_SCREEN_ERROR_ALERT_ID,
+  NAVIGATION_HOME_LINK_ID,
+} from '../../src/config/selectors';
+import { SIMPLE_ITEMS } from '../fixtures/items';
+
+describe('Create Item', () => {
+  it('visit Home', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS });
+    cy.visit('/');
+
+    // should get own items
+    cy.wait('@getOwnItems').then(({ response: { body } }) => {
+      // check item is created and displayed
+      for (const item of body) {
+        cy.get(`#${buildItemCard(item.id)}`).should('exist');
+      }
+    });
+
+    // visit child
+    const { id: childId } = SIMPLE_ITEMS[0];
+    cy.get(`#${buildItemLink(childId)}`).click();
+
+    // should get children
+    cy.wait('@getChildren').then(({ response: { body } }) => {
+      // check item is created and displayed
+      for (const item of body) {
+        cy.get(`#${buildItemCard(item.id)}`).should('exist');
+      }
+    });
+
+    // visit child
+    const { id: childChildId } = SIMPLE_ITEMS[2];
+    cy.get(`#${buildItemLink(childChildId)}`).click();
+
+    // should get children
+    cy.wait('@getChildren').then(({ response: { body } }) => {
+      // check has no children
+      expect(body.length).to.equal(0);
+    });
+
+    // return parent with navigation
+    cy.get(`#${buildNavigationLink(childId)}`).click();
+    // should get children
+    cy.wait('@getChildren').then(({ response: { body } }) => {
+      // check item is created and displayed
+      for (const item of body) {
+        cy.get(`#${buildItemCard(item.id)}`).should('exist');
+      }
+    });
+  });
+
+  it('visit item by id', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS });
+    const { id } = SIMPLE_ITEMS[0];
+    cy.visit(buildItemPath(id));
+
+    // should get current item
+    cy.wait('@getItem');
+
+    // should get children
+    cy.wait('@getChildren').then(({ response: { body } }) => {
+      // check item is created and displayed
+      for (const item of body) {
+        cy.get(`#${buildItemCard(item.id)}`).should('exist');
+      }
+    });
+
+    // visit home
+    cy.get(`#${NAVIGATION_HOME_LINK_ID}`).click();
+
+    // should get own items
+    cy.wait('@getOwnItems').then(({ response: { body } }) => {
+      // check item is created and displayed
+      for (const item of body) {
+        cy.get(`#${buildItemCard(item.id)}`).should('exist');
+      }
+    });
+  });
+
+  it('visiting non-existing item display no item here', () => {
+    cy.setUpApi({ items: SIMPLE_ITEMS, getItemError: true });
+    const { id } = SIMPLE_ITEMS[0];
+    cy.visit(buildItemPath(id));
+
+    // should get current item
+    cy.wait('@getItem').then(() => {
+      cy.get(`#${ITEM_SCREEN_ERROR_ALERT_ID}`).should('exist');
+    });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,23 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => ({
+  ...config,
+  env: {
+    API_HOST: process.env.REACT_APP_API_HOST,
+  },
+});