AAE-20420 - Use latest editorjs and fix storybook (#9336)

* Use latest editorjs and fix storybook

* Remove unit with haveBeenCalled

* AAE-20420 Fix for broken tests

---------

Co-authored-by: wiktord2000 <wiktor.danielewski@hyland.com>

lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts

@@ -48,7 +48,7 @@ export class DisplayRichTextWidgetComponent extends WidgetComponent implements O
 
     ngOnInit(): void {
         /* cspell:disable-next-line */
-        this.parsedHTML = edjsHTML().parseStrict(this.field.value).join('\n');
+        this.parsedHTML = edjsHTML().parseStrict(this.field.value);
     }
 
 }

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts

@@ -46,11 +46,16 @@ describe('RichTextEditorComponent', () => {
         version: 1
     };
 
+    const whenEditorIsReady = async () => {
+        fixture.detectChanges();
+        await component.editorInstance.isReady;
+        await fixture.whenStable();
+    };
+
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             declarations: [RichTextEditorComponent]
-        })
-            .compileComponents();
+        }).compileComponents();
     });
 
     beforeEach(() => {
@@ -59,64 +64,61 @@ describe('RichTextEditorComponent', () => {
         debugElement = fixture.debugElement;
     });
 
-    it('should create', () => {
-        fixture.detectChanges();
-        expect(component).toBeTruthy();
-    });
-
     it('should render rich text editor', async () => {
-        fixture.detectChanges();
-        await fixture.whenStable();
+        await whenEditorIsReady();
         const editor = debugElement.query(By.css(cssSelectors.editorContent));
+
         expect(editor).toBeTruthy();
     });
 
     it('should generate dynamic id', async () => {
-        fixture.detectChanges();
-        await fixture.whenStable();
+        await whenEditorIsReady();
+
         expect(component.dynamicId).toContain('editorjs');
     });
 
     it('should get editorjs data by calling getEditorContent', async () => {
-        fixture.detectChanges();
-        await fixture.whenStable();
+        await whenEditorIsReady();
+
         spyOn(component.editorInstance, 'save').and.returnValue(Promise.resolve(mockEditorData) as any);
         const savedEditorData = await component.getEditorContent();
+
         expect(savedEditorData).toEqual(mockEditorData);
     });
 
     it('should destroy editor instance on ngOnDestroy', async () => {
-        fixture.detectChanges();
-        await fixture.whenStable();
+        await whenEditorIsReady();
+
         const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
         component.ngOnDestroy();
+
         expect(destroyEditorSpy).toHaveBeenCalledTimes(1);
         expect(destroyEditorSpy).toHaveBeenCalled();
     });
 
     it('should not destroy editor instance on ngOnDestroy if editor is not ready', async () => {
-        fixture.detectChanges();
-        await fixture.whenStable();
+        await whenEditorIsReady();
+
         const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
         component.isReady = false;
         component.ngOnDestroy();
+
         expect(destroyEditorSpy).not.toHaveBeenCalled();
     });
 
     it('should add readonly class if readOnly is set to true', async () => {
         component.readOnly = true;
-        fixture.detectChanges();
-        await fixture.whenStable();
+        await whenEditorIsReady();
+
         const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
         expect(editorEl.nativeElement.classList).toContain('readonly');
     });
 
     it('should not add readonly class if readOnly is set to false', async () => {
         component.readOnly = false;
-        fixture.detectChanges();
-        await fixture.whenStable();
+        await whenEditorIsReady();
+
         const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
         expect(editorEl.nativeElement.classList).not.toContain('readonly');
     });
-
 });

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.stories.ts

@@ -23,7 +23,7 @@ import { exampleData } from './mocks/rich-text-editor.mock';
 
 export default {
     component: RichTextEditorComponent,
-    title: 'Core/Rich Text Editor/Rich Text Editor',
+    title: 'Process Services Cloud/Rich Text Editor',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, RichTextEditorModule]
@@ -51,11 +51,11 @@ export default {
 const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent) => ({
     props: args,
     template: `
-    <adf-rich-text-editor
+    <adf-cloud-rich-text-editor
         [data]=data
         [readOnly]=readOnly
         #editor >
-    </adf-rich-text-editor>
+    </adf-cloud-rich-text-editor>
     <hr/>
     <h3>Output data from editor:</h3>
     <pre>{{editor.outputData$ | async | json}}</pre>
@@ -65,17 +65,29 @@ const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent)
 export const defaultRichTextEditor = template.bind({});
 defaultRichTextEditor.args = {
     data: {
-        time: 1663761278752,
-        blocks: [
+        time : 1550476186479,
+        blocks : [
             {
-                id: 'yOV_DfEQhC',
-                type: 'paragraph',
-                data: {
-                    text: 'text'
+                type : 'paragraph',
+                data : {
+                    text : 'The example of text that was written in <b>one of popular</b> text editors.'
+                }
+            },
+            {
+                type : 'header',
+                data : {
+                    text : 'With the header of course',
+                    level : 2
+                }
+            },
+            {
+                type : 'paragraph',
+                data : {
+                    text : 'So what do we have?'
                 }
             }
         ],
-        version: '2.25.0'
+        version : '2.29.0'
     }
 };