[RichTextInput] add tests and fix bugs

cypress/integration/create.js

@@ -76,6 +76,11 @@ describe('Create Page', () => {
                 name: 'teaser',
                 value: 'Test teaser',
             },
+            {
+                type: 'rich-text-input',
+                name: 'body',
+                value: 'Test body',
+            },
         ];
 
         CreatePage.setValues(values);
@@ -103,6 +108,11 @@ describe('Create Page', () => {
                 name: 'teaser',
                 value: 'Test teaser',
             },
+            {
+                type: 'rich-text-input',
+                name: 'body',
+                value: 'Test body',
+            },
         ];
 
         CreatePage.setValues(values);
@@ -124,6 +134,11 @@ describe('Create Page', () => {
                 name: 'teaser',
                 value: 'Test teaser',
             },
+            {
+                type: 'rich-text-input',
+                name: 'body',
+                value: 'Test body',
+            },
         ];
         CreatePage.setValues(values);
         CreatePage.submitAndAdd();
@@ -153,6 +168,11 @@ describe('Create Page', () => {
                 name: 'commentable',
                 value: false,
             },
+            {
+                type: 'rich-text-input',
+                name: 'body',
+                value: 'Test body',
+            },
         ];
 
         CreatePage.setValues(values);
@@ -212,4 +232,45 @@ describe('Create Page', () => {
             expect(el).to.have.value('The real Slim Shady!')
         );
     });
+
+    it('should not show rich text input error message when field is untouched', () => {
+        cy.get(CreatePage.elements.richTextInputError).should('not.exist');
+    });
+
+    it('should show rich text input error message when form is submitted', () => {
+        CreatePage.submit();
+        cy.get(CreatePage.elements.richTextInputError).should('exist').contains('Required');
+    });
+
+    it('should not show rich text input error message when form is submitted and input is filled with text', () => {
+        CreatePage.submit();
+        cy.get(CreatePage.elements.richTextInputError).should('exist').contains('Required');
+        cy.get(CreatePage.elements.input('body', 'rich-text-input')).type('text');
+        cy.get(CreatePage.elements.richTextInputError).should('not.exist');
+    });
+
+    it('should show body in edit view after creating new post', () => {
+        const values = [
+            {
+                type: 'input',
+                name: 'title',
+                value: 'Test title',
+            },
+            {
+                type: 'textarea',
+                name: 'teaser',
+                value: 'Test teaser',
+            },
+            {
+                type: 'rich-text-input',
+                name: 'body',
+                value: 'Test body',
+            },
+        ];
+
+        CreatePage.setValues(values);
+        CreatePage.submit();
+        EditPage.gotoTab(2);
+        cy.get(EditPage.elements.input('body', 'rich-text-input')).contains('Test body');
+    });
 });

cypress/integration/edit.js

@@ -25,7 +25,7 @@ describe('Edit Page', () => {
         });
 
         it('should allow to update elements', () => {
-            EditPostPage.setInputValue('title', 'Lorem Ipsum');
+            EditPostPage.setInputValue('input', 'title', 'Lorem Ipsum');
             EditPostPage.submit();
             EditPostPage.navigate();
             cy.get(EditPostPage.elements.input('title')).should(el =>
@@ -34,7 +34,7 @@ describe('Edit Page', () => {
         });
 
         it('should redirect to list page after edit success', () => {
-            EditPostPage.setInputValue('title', 'Lorem Ipsum +');
+            EditPostPage.setInputValue('input', 'title', 'Lorem Ipsum +');
             EditPostPage.submit();
             cy.url().then(url => expect(url).to.contain('/#/posts'));
         });
@@ -68,11 +68,11 @@ describe('Edit Page', () => {
         );
 
         // This validate that the current redux form values are not kept after we navigate
-        EditCommentPage.setInputValue('body', 'Test');
+        EditCommentPage.setInputValue('input', 'body', 'Test');
 
         CreatePostPage.navigate();
 
-        cy.get(CreatePostPage.elements.bodyInput).should(el =>
+        cy.get(CreatePostPage.elements.input('body', 'rich-text-input')).should(el =>
             // When the Quill editor is empty, it add the "ql-blank" CSS class
             expect(el).to.have.class('ql-blank')
         );
@@ -108,7 +108,7 @@ describe('Edit Page', () => {
         );
 
         // This validate that the current redux form values are not kept after we navigate
-        EditPostPage.setInputValue('title', 'Another title');
+        EditPostPage.setInputValue('input', 'title', 'Another title');
 
         CreatePostPage.navigate();
         cy.get(CreatePostPage.elements.input('title')).should(el =>

cypress/support/CreatePage.js

@@ -2,9 +2,14 @@ export default url => ({
     elements: {
         addAuthor: '.button-add-authors',
         body: 'body',
-        bodyInput: '.ra-input-body .ql-editor',
-        input: (name, type = 'input') => `.create-page ${type}[name='${name}']`,
+        input: (name, type = 'input') => {
+            if (type === 'rich-text-input') {
+                return `.ra-input-${name} .ql-editor`;
+            }
+            return `.create-page ${type}[name='${name}']`
+        },
         inputs: `.ra-input`,
+        richTextInputError: '.create-page .ra-rich-text-input-error',
         snackbar: 'div[role="alertdialog"]',
         submitButton: ".create-page div[role='toolbar'] button[type='submit']",
         submitAndShowButton:
@@ -37,6 +42,9 @@ export default url => ({
             cy.get(this.elements.input(name, type)).clear();
         }
         cy.get(this.elements.input(name, type)).type(value);
+        if (type === 'rich-text-input') {
+            cy.wait(500);
+        }
     },
 
     setValues(values, clearPreviousValue = true) {

cypress/support/EditPage.js

@@ -2,7 +2,12 @@ export default url => ({
     elements: {
         body: 'body',
         deleteButton: '.ra-delete-button',
-        input: name => `.edit-page [name='${name}']`,
+        input: (name, type = 'input') => {
+            if (type === 'rich-text-input') {
+                return `.ra-input-${name} .ql-editor`;
+            }
+            return `.edit-page [name='${name}']`
+        },
         inputs: `.ra-input`,
         tabs: `.form-tab`,
         snackbar: 'div[role="alertdialog"]',
@@ -20,11 +25,14 @@ export default url => ({
         return cy.get(this.elements.title);
     },
 
-    setInputValue(name, value, clearPreviousValue = true) {
+    setInputValue(type, name, value, clearPreviousValue = true) {
         if (clearPreviousValue) {
             cy.get(this.elements.input(name)).clear();
         }
-        return cy.get(this.elements.input(name)).type(value);
+        cy.get(this.elements.input(name)).type(value);
+        if (type === 'rich-text-input') {
+            cy.wait(500);
+        }
     },
 
     clickInput(name) {

examples/simple/src/posts/PostCreate.js

@@ -19,6 +19,7 @@ import {
     TextInput,
     Toolbar,
     crudCreate,
+    required,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
 
 const saveWithNote = (values, basePath, redirectTo) =>
@@ -102,7 +103,7 @@ const PostCreate = ({ permissions, ...props }) => (
         >
             <TextInput autoFocus source="title" />
             <LongTextInput source="teaser" />
-            <RichTextInput source="body" />
+            <RichTextInput source="body" validate={[required()]} />
             <FormDataConsumer>
                 {({ formData, ...rest }) =>
                     formData.title && (

packages/ra-input-rich-text/src/index.js

@@ -55,15 +55,11 @@ export class RichTextInput extends Component {
         this.quill.setContents(this.quill.clipboard.convert(value));
 
         this.editor = this.divRef.querySelector('.ql-editor');
-        this.quill.on('text-change', debounce(this.onTextChange, 500));
+        this.quill.on('text-change', this.onTextChange);
     }
 
-    shouldComponentUpdate(nextProps) {
-        return nextProps.input.value !== this.lastValueChange;
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.input.value !== this.props.input.value) {
+    componentDidUpdate() {
+        if (this.lastValueChange !== this.props.input.value) {
             const selection = this.quill.getSelection();
             this.quill.setContents(
                 this.quill.clipboard.convert(this.props.input.value)
@@ -76,30 +72,31 @@ export class RichTextInput extends Component {
 
     componentWillUnmount() {
         this.quill.off('text-change', this.onTextChange);
+        this.onTextChange.cancel();
         this.quill = null;
     }
 
-    onTextChange = () => {
+    onTextChange = debounce(() => {
         const value =
             this.editor.innerHTML == '<p><br></p>' ? '' : this.editor.innerHTML;
         this.lastValueChange = value;
         this.props.input.onChange(value);
-    };
+    }, 500);
 
     updateDivRef = ref => {
         this.divRef = ref;
     };
 
     render() {
-        const { error, helperText = false } = this.props.meta;
+        const { touched, error, helperText = false } = this.props.meta;
         return (
             <FormControl
-                error={error !== null && error != undefined}
+                error={!!(touched && error)}
                 fullWidth={this.props.fullWidth}
                 className="ra-rich-text-input"
             >
                 <div data-testid="quill" ref={this.updateDivRef} />
-                {error && <FormHelperText error>{error}</FormHelperText>}
+                {touched && error && <FormHelperText error className="ra-rich-text-input-error">{error}</FormHelperText>}
                 {helperText && <FormHelperText>{helperText}</FormHelperText>}
             </FormControl>
         );