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();
+ const el = container.querySelector('span');
+ expect(el).toHaveTextContent('data');
+ });
+ it('handle undefined - bug/13', () => {
+ const { container } = render();
+ 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 (
{textToShow}
);
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.`;
}