fix: prevent adding new item blank spaces (#784)

* fix: validate white spaces for creating new item * test: create a test for whitespaces new item name * test: creating document with blank name led to have inactive btn
graasp · Sep 12, 2023 · 0f02a64 · 0f02a64
1 parent 0cb2e62
commit 0f02a64
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 7 deletions.
diff --git a/cypress/e2e/item/create/createDocument.cy.ts b/cypress/e2e/item/create/createDocument.cy.ts
@@ -1,6 +1,11 @@
+import { ITEM_FORM_CONFIRM_BUTTON_ID } from '@/config/selectors';
+
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
-import { GRAASP_DOCUMENT_ITEM } from '../../../fixtures/documents';
+import {
+  GRAASP_DOCUMENT_BLANK_NAME_ITEM,
+  GRAASP_DOCUMENT_ITEM,
+} from '../../../fixtures/documents';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { createDocument } from '../../../support/createUtils';
 
@@ -37,4 +42,18 @@ describe('Create Document', () => {
       cy.wait('@getItem').its('response.url').should('contain', id);
     });
   });
+
+  it('cannot create Document with blank name', () => {
+    cy.setUpApi();
+    cy.visit(HOME_PATH);
+
+    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+    createDocument(GRAASP_DOCUMENT_BLANK_NAME_ITEM, { confirm: false });
+
+    cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).should(
+      'have.prop',
+      'disabled',
+      true,
+    );
+  });
 });
diff --git a/cypress/e2e/item/create/createFolder.cy.ts b/cypress/e2e/item/create/createFolder.cy.ts
@@ -1,11 +1,16 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
   CREATE_ITEM_BUTTON_ID,
+  ITEM_FORM_CONFIRM_BUTTON_ID,
   ITEM_FORM_NAME_INPUT_ID,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
 import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
-import { CREATED_ITEM, SAMPLE_ITEMS } from '../../../fixtures/items';
+import {
+  CREATED_BLANK_NAME_ITEM,
+  CREATED_ITEM,
+  SAMPLE_ITEMS,
+} from '../../../fixtures/items';
 import { createFolder } from '../../../support/createUtils';
 
 describe('Create Folder', () => {
@@ -33,11 +38,19 @@ describe('Create Folder', () => {
 
       // create
       createFolder(CREATED_ITEM);
+    });
 
-      cy.wait('@postItem').then(() => {
-        // expect update
-        cy.wait('@getItem').its('response.url').should('contain', id);
-      });
+    it('cannot create folder with blank name in item', () => {
+      // create
+      cy.setUpApi();
+      cy.visit(HOME_PATH);
+      createFolder(CREATED_BLANK_NAME_ITEM, { confirm: false });
+
+      cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).should(
+        'have.prop',
+        'disabled',
+        true,
+      );
     });
   });
 

diff --git a/cypress/fixtures/documents.ts b/cypress/fixtures/documents.ts
@@ -19,6 +19,21 @@ export const GRAASP_DOCUMENT_ITEM: DocumentItemType = {
   }),
 };
 
+export const GRAASP_DOCUMENT_BLANK_NAME_ITEM: DocumentItemType = {
+  id: 'ecafbd2a-5688-12eb-ae91-0242ac130004',
+  type: ItemType.DOCUMENT,
+  name: '  ',
+  description: 'a description for graasp text',
+  path: 'ecafbd2a_5688_12eb_ae93_0242ac130002',
+  settings: {},
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  creator: CURRENT_USER,
+  extra: buildDocumentExtra({
+    content: '<h1>Some Title</h1>',
+  }),
+};
+
 export const GRAASP_DOCUMENT_PARENT_FOLDER: Item = {
   ...DEFAULT_FOLDER_ITEM,
   id: 'bdf09f5a-5688-11eb-ae93-0242ac130002',

diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts
@@ -43,6 +43,12 @@ export const CREATED_ITEM: Partial<FolderItemType> = {
   extra: { [ItemType.FOLDER]: { childrenOrder: [] } },
 };
 
+export const CREATED_BLANK_NAME_ITEM: Partial<FolderItemType> = {
+  name: ' ',
+  type: ItemType.FOLDER,
+  extra: { [ItemType.FOLDER]: { childrenOrder: [] } },
+};
+
 export const EDITED_FIELDS = {
   name: 'new name',
 };

diff --git a/src/utils/item.ts b/src/utils/item.ts
@@ -103,7 +103,7 @@ export const isItemValid = (item: Partial<DiscriminatedItem>): boolean => {
     return false;
   }
 
-  const shouldHaveName = Boolean(item.name);
+  const shouldHaveName = Boolean(item.name?.trim());
 
   // item should have a type
   let hasValidTypeProperties =