diff --git a/cypress/integration/create.js b/cypress/integration/create.js index d645620aa58..e1e1490d132 100644 --- a/cypress/integration/create.js +++ b/cypress/integration/create.js @@ -299,19 +299,22 @@ describe('Create Page', () => { ); }); - // FIXME Skipped as we are going to replace the RichTextInput with the tip tap version - it.skip('should not show rich text input error message when field is untouched', () => { + it('should not show rich text input error message when field is untouched', () => { cy.get(CreatePage.elements.richTextInputError).should('not.have.value'); }); - // FIXME Skipped as we are going to replace the RichTextInput with the tip tap version - it.skip('should show rich text input error message when form is submitted', () => { + it('should show rich text input error message when form is submitted', () => { const values = [ { type: 'input', name: 'title', value: 'Test title', }, + { + type: 'textarea', + name: 'teaser', + value: 'Test teaser', + }, ]; CreatePage.setValues(values); CreatePage.submit(false); @@ -320,8 +323,7 @@ describe('Create Page', () => { .contains('Required'); }); - // FIXME Skipped as we are going to replace the RichTextInput with the tip tap version - it.skip('should not show rich text input error message when form is submitted and input is filled with text', () => { + it('should not show rich text input error message when form is submitted and input is filled with text', () => { const values = [ { type: 'input', @@ -338,9 +340,9 @@ describe('Create Page', () => { // Quill take a little time to boot and Cypress is too fast which can leads to unstable tests // so we wait a bit before interacting with the rich-text-input cy.wait(250); - cy.get(CreatePage.elements.input('body', 'rich-text-input')).type( - 'text' - ); + cy.get(CreatePage.elements.input('body', 'rich-text-input')) + .type('text') + .blur(); cy.get(CreatePage.elements.richTextInputError).should('not.exist'); }); diff --git a/cypress/integration/edit.js b/cypress/integration/edit.js index 3e5e5c9aec2..38487635a6b 100644 --- a/cypress/integration/edit.js +++ b/cypress/integration/edit.js @@ -150,7 +150,7 @@ describe('Edit Page', () => { 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') + expect(el.text()).to.equal('') ); }); diff --git a/cypress/support/CreatePage.js b/cypress/support/CreatePage.js index f21fd5af8cc..ac6ecda6ac0 100644 --- a/cypress/support/CreatePage.js +++ b/cypress/support/CreatePage.js @@ -4,7 +4,7 @@ export default url => ({ body: 'body', input: (name, type = 'input') => { if (type === 'rich-text-input') { - return `.ra-input-${name} .ql-editor`; + return `.ra-input-${name} .ProseMirror`; } return `.create-page ${type}[name='${name}']`; }, @@ -18,7 +18,7 @@ export default url => ({ ".create-page form div[role='toolbar'] button[type='button']:nth-child(3)", submitCommentable: ".create-page form div[role='toolbar'] button[type='button']:last-child", - descInput: '.ql-editor', + descInput: '.ProseMirror', tab: index => `.form-tab:nth-of-type(${index})`, title: '#react-admin-title', userMenu: 'button[aria-label="Profile"]', diff --git a/cypress/support/EditPage.js b/cypress/support/EditPage.js index 099d90c2e7d..b4e6c21ee57 100644 --- a/cypress/support/EditPage.js +++ b/cypress/support/EditPage.js @@ -6,7 +6,7 @@ export default url => ({ removeBacklinkButton: '[aria-label="Remove"]', input: (name, type = 'input') => { if (type === 'rich-text-input') { - return `.ra-input-${name} .ql-editor`; + return `.ra-input-${name} .ProseMirror`; } if (type === 'checkbox-group-input') { return `.ra-input-${name} label`; diff --git a/examples/simple/src/posts/PostCreate.tsx b/examples/simple/src/posts/PostCreate.tsx index 4ba5b0f8139..f930a5a7c03 100644 --- a/examples/simple/src/posts/PostCreate.tsx +++ b/examples/simple/src/posts/PostCreate.tsx @@ -7,8 +7,13 @@ import { BooleanInput, Create, DateInput, + FileField, + FileInput, FormDataConsumer, + maxValue, + minValue, NumberInput, + required, ReferenceInput, SaveButton, SelectInput, @@ -16,14 +21,12 @@ import { SimpleFormIterator, TextInput, Toolbar, - required, - FileInput, - FileField, useNotify, usePermissions, useRedirect, } from 'react-admin'; import { useFormContext, useWatch } from 'react-hook-form'; +import { DevTool } from '@hookform/devtools'; const PostCreateToolbar = props => { const notify = useNotify(); @@ -105,20 +108,6 @@ const PostCreate = () => { } defaultValues={defaultValues} - validate={values => { - const errors = {} as any; - ['title', 'teaser'].forEach(field => { - if (!values[field]) { - errors[field] = 'Required field'; - } - }); - - if (values.average_note < 0 || values.average_note > 5) { - errors.average_note = 'Should be between 0 and 5'; - } - - return errors; - }} > { > - - + + - + { )} + ); diff --git a/examples/simple/src/posts/PostEdit.tsx b/examples/simple/src/posts/PostEdit.tsx index 1d8bed406f3..d4503b3e655 100644 --- a/examples/simple/src/posts/PostEdit.tsx +++ b/examples/simple/src/posts/PostEdit.tsx @@ -190,7 +190,7 @@ const PostEdit = () => { source="body" label="" validate={required()} - addLabel={false} + fullWidth />