From ba31397ac15402eb3837bcbe454e0aaf82ecbf03 Mon Sep 17 00:00:00 2001
From: Elliot DeNolf <denolfe@gmail.com>
Date: Sun, 17 Jan 2021 21:40:07 -0500
Subject: [PATCH] fix: textarea handle undefined

---
 .../collections/List/Cell/cellTypes.spec.tsx  | 14 ++++++++
 .../List/Cell/field-types/Textarea/index.tsx  |  2 +-
 src/fields/validations.spec.ts                | 34 +++++++++++++++++++
 src/fields/validations.ts                     | 14 ++++----
 4 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 src/fields/validations.spec.ts

diff --git a/src/admin/components/views/collections/List/Cell/cellTypes.spec.tsx b/src/admin/components/views/collections/List/Cell/cellTypes.spec.tsx
index c6bbc9923d..8819215908 100644
--- a/src/admin/components/views/collections/List/Cell/cellTypes.spec.tsx
+++ b/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('');
+    });
+  });
 });
diff --git a/src/admin/components/views/collections/List/Cell/field-types/Textarea/index.tsx b/src/admin/components/views/collections/List/Cell/field-types/Textarea/index.tsx
index 84f3015ec0..7584cb3fdd 100644
--- a/src/admin/components/views/collections/List/Cell/field-types/Textarea/index.tsx
+++ b/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>
   );
diff --git a/src/fields/validations.spec.ts b/src/fields/validations.spec.ts
new file mode 100644
index 0000000000..b214b7f9c8
--- /dev/null
+++ b/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.');
+    });
+  });
+});
diff --git a/src/fields/validations.ts b/src/fields/validations.ts
index 78f73334b8..b16ae44d4b 100644
--- a/src/fields/validations.ts
+++ b/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.`;
   }