fix: textarea handle undefined

src/admin/components/views/collections/List/Cell/cellTypes.spec.tsx

@@ -4,6 +4,7 @@ import { render } from '@testing-library/react';
 import BlocksCell from './field-types/Blocks';
 import DateCell from './field-types/Date';
 import Checkbox from './field-types/Checkbox';
+import Textarea from './field-types/Textarea';
 
 describe('Cell Types', () => {
   describe('Blocks', () => {
@@ -87,4 +88,17 @@ describe('Cell Types', () => {
       expect(el).toHaveTextContent('false');
     });
   });
+
+  describe('Textarea', () => {
+    it('renders data', () => {
+      const { container } = render(<Textarea data="data" />);
+      const el = container.querySelector('span');
+      expect(el).toHaveTextContent('data');
+    });
+    it('handle undefined - bug/13', () => {
+      const { container } = render(<Textarea data={undefined} />);
+      const el = container.querySelector('span');
+      expect(el).toHaveTextContent('');
+    });
+  });
 });

src/admin/components/views/collections/List/Cell/field-types/Textarea/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const TextareaCell = ({ data }) => {
-  const textToShow = data.length > 100 ? `${data.substr(0, 100)}\u2026` : data;
+  const textToShow = data?.length > 100 ? `${data.substr(0, 100)}\u2026` : data;
   return (
     <span>{textToShow}</span>
   );

src/fields/validations.spec.ts

@@ -0,0 +1,34 @@
+
+import { textarea } from './validations';
+
+describe('Field Validations', () => {
+  describe('textarea', () => {
+    it('should validate', () => {
+      const val = 'test';
+      const result = textarea(val);
+      expect(result).toBe(true);
+    });
+    it('should show default message when required and not present', () => {
+      const val = undefined;
+      const result = textarea(val, { required: true });
+      expect(result).toBe('This field is required.');
+    });
+
+    it('should handle undefined', () => {
+      const val = undefined;
+      const result = textarea(val);
+      expect(result).toBe(true);
+    });
+    it('should validate maxLength', () => {
+      const val = 'toolong';
+      const result = textarea(val, { maxLength: 5 });
+      expect(result).toBe('This value must be shorter than the max length of 5 characters.');
+    });
+
+    it('should validate minLength', () => {
+      const val = 'short';
+      const result = textarea(val, { minLength: 10 });
+      expect(result).toBe('This value must be longer than the minimum length of 10 characters.');
+    });
+  });
+});

src/fields/validations.ts

@@ -26,16 +26,16 @@ export const number: Validate = (value: string, options = {}) => {
 };
 
 export const text: Validate = (value: string, options = {}) => {
-  if (options.maxLength && (value && value.length > options.maxLength)) {
+  if (value && options.maxLength && value.length > options.maxLength) {
     return `This value must be shorter than the max length of ${options.maxLength} characters.`;
   }
 
-  if (options.minLength && (value && value.length < options.minLength)) {
+  if (value && options.minLength && value?.length < options.minLength) {
     return `This value must be longer than the minimum length of ${options.minLength} characters.`;
   }
 
   if (options.required) {
-    if (typeof value !== 'string' || (typeof value === 'string' && value.length === 0)) {
+    if (typeof value !== 'string' || (typeof value === 'string' && value?.length === 0)) {
       return defaultMessage;
     }
   }
@@ -44,11 +44,11 @@ export const text: Validate = (value: string, options = {}) => {
 };
 
 export const password: Validate = (value: string, options = {}) => {
-  if (options.maxLength && value.length > options.maxLength) {
+  if (value && options.maxLength && value.length > options.maxLength) {
     return `This value must be shorter than the max length of ${options.maxLength} characters.`;
   }
 
-  if (options.minLength && value.length < options.minLength) {
+  if (value && options.minLength && value.length < options.minLength) {
     return `This value must be longer than the minimum length of ${options.minLength} characters.`;
   }
 
@@ -69,11 +69,11 @@ export const email: Validate = (value: string, options = {}) => {
 };
 
 export const textarea: Validate = (value: string, options = {}) => {
-  if (options.maxLength && value.length > options.maxLength) {
+  if (value && options.maxLength && value.length > options.maxLength) {
     return `This value must be shorter than the max length of ${options.maxLength} characters.`;
   }
 
-  if (options.minLength && value.length < options.minLength) {
+  if (value && options.minLength && value.length < options.minLength) {
     return `This value must be longer than the minimum length of ${options.minLength} characters.`;
   }