Fix tests

marmelab · Jan 28, 2022 · 4330939 · 4330939
1 parent 7f40949
commit 4330939
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -7,23 +7,26 @@ import {
     BooleanInput,
     Create,
     DateInput,
+    FileField,
+    FileInput,
     FormDataConsumer,
+    maxValue,
+    minValue,
     NumberInput,
+    required,
     ReferenceInput,
     SaveButton,
     SelectInput,
     SimpleForm,
     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 = () => {
             <SimpleForm
                 toolbar={<PostCreateToolbar />}
                 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;
-                }}
             >
                 <FileInput
                     source="pdffile"
@@ -127,11 +116,26 @@ const PostCreate = () => {
                 >
                     <FileField source="src" title="title" />
                 </FileInput>
-                <TextInput autoFocus source="title" />
-                <TextInput source="teaser" fullWidth multiline />
+                <TextInput
+                    autoFocus
+                    source="title"
+                    validate={required('Required field')}
+                />
+                <TextInput
+                    source="teaser"
+                    fullWidth
+                    multiline
+                    validate={required('Required field')}
+                />
                 <RichTextInput source="body" fullWidth validate={required()} />
                 <DependantInput dependency="title">
-                    <NumberInput source="average_note" />
+                    <NumberInput
+                        source="average_note"
+                        validate={[
+                            minValue(0, 'Should be between 0 and 5'),
+                            maxValue(5, 'Should be between 0 and 5'),
+                        ]}
+                    />
                 </DependantInput>
 
                 <DateInput
@@ -192,6 +196,7 @@ const PostCreate = () => {
                         </SimpleFormIterator>
                     </ArrayInput>
                 )}
+                <DevTool />
             </SimpleForm>
         </Create>
     );

diff --git 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
                     />
                 </FormTab>
                 <FormTab label="post.form.miscellaneous">