From 6468298bb0ad68681d5d90b87412bdca998c0064 Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Thu, 15 Feb 2024 13:56:34 +0000 Subject: [PATCH] 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 --- .../display-rich-text.widget.ts | 2 +- .../rich-text-editor.component.spec.ts | 46 ++++---- .../rich-text-editor.component.stories.ts | 32 ++++-- package-lock.json | 105 +++++------------- package.json | 12 +- 5 files changed, 82 insertions(+), 115 deletions(-) diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts index 376812d9c7f..dc21d070c5d 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts +++ b/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); } } diff --git a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts b/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts index 1883865c913..ce77a3501be 100644 --- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts +++ b/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'); }); - }); diff --git a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.stories.ts b/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.stories.ts index 40582e19a57..b5ab66fdda4 100644 --- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.stories.ts +++ b/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 = (args: RichTextEditorComponent) => ({ props: args, template: ` - - +

Output data from editor:

{{editor.outputData$ | async | json}}
@@ -65,17 +65,29 @@ const template: Story = (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 one of popular 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' } }; diff --git a/package-lock.json b/package-lock.json index 3c7ec51f0d0..0b66a274fd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,9 +24,9 @@ "@angular/router": "14.1.3", "@apollo/client": "^3.8.4", "@cspell/eslint-plugin": "^7.3.6", - "@editorjs/editorjs": "^2.26.5", - "@editorjs/header": "2.7.0", - "@editorjs/list": "1.8.0", + "@editorjs/editorjs": "^2.29.0", + "@editorjs/header": "2.8.1", + "@editorjs/list": "1.9.0", "@editorjs/underline": "1.1.0", "@mat-datetimepicker/core": "^10.1.1", "@ngx-translate/core": "^14.0.0", @@ -38,7 +38,7 @@ "cropperjs": "1.5.13", "date-fns": "^2.30.0", "dotenv-expand": "^5.1.0", - "editorjs-html": "3.4.2", + "editorjs-html": "3.4.3", "editorjs-paragraph-with-alignment": "3.0.0", "event-emitter": "^0.3.5", "material-icons": "^1.13.12", @@ -64,7 +64,7 @@ "@angular/compiler-cli": "14.1.3", "@editorjs/code": "2.8.0", "@editorjs/inline-code": "1.4.0", - "@editorjs/marker": "1.2.2", + "@editorjs/marker": "1.4.0", "@nrwl/angular": "14.8.9", "@nrwl/cli": "14.8.9", "@nrwl/eslint-plugin-nx": "14.5.4", @@ -97,7 +97,7 @@ "commander": "6.2.1", "css-loader": "^6.8.1", "dotenv": "16.1.3", - "editorjs-text-color-plugin": "1.13.1", + "editorjs-text-color-plugin": "2.0.3", "ejs": "^3.1.9", "eslint": "^8.47.0", "eslint-config-prettier": "^8.10.0", @@ -109,7 +109,6 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-rxjs": "^5.0.3", "eslint-plugin-unicorn": "^49.0.0", - "github-api": "^3.4.0", "graphql": "^16.8.1", "husky": "^7.0.4", "jasmine-ajax": "4.0.0", @@ -4402,23 +4401,14 @@ } }, "node_modules/@editorjs/editorjs": { - "version": "2.26.5", - "license": "Apache-2.0", - "dependencies": { - "@codexteam/icons": "0.1.0", - "codex-notifier": "^1.1.2", - "codex-tooltip": "^1.0.5", - "html-janitor": "^2.0.4", - "nanoid": "^3.1.22" - } - }, - "node_modules/@editorjs/editorjs/node_modules/@codexteam/icons": { - "version": "0.1.0", - "license": "MIT" + "version": "2.29.0", + "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.29.0.tgz", + "integrity": "sha512-w2BVboSHokMBd/cAOZn0UU328o3gSZ8XUvFPA2e9+ciIGKILiRSPB70kkNdmhHkuNS3q2px+vdaIFaywBl7wGA==" }, "node_modules/@editorjs/header": { - "version": "2.7.0", - "license": "MIT", + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/@editorjs/header/-/header-2.8.1.tgz", + "integrity": "sha512-y0HVXRP7m2W617CWo3fsb5HhXmSLaRpb9GzFx0Vkp/HEm9Dz5YO1s8tC7R8JD3MskwoYh7V0hRFQt39io/r6hA==", "dependencies": { "@codexteam/icons": "^0.0.5" } @@ -4432,8 +4422,9 @@ } }, "node_modules/@editorjs/list": { - "version": "1.8.0", - "license": "MIT", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@editorjs/list/-/list-1.9.0.tgz", + "integrity": "sha512-BQEvZW4vi0O0dBvGNljiKxiE89vMSHoM2Tu2OzKUndoj7pY9AxqpgCh1qvwIVsJAlG4Lbt/vBFQilnoStMmI6A==", "dependencies": { "@codexteam/icons": "^0.0.4" } @@ -4443,9 +4434,13 @@ "license": "MIT" }, "node_modules/@editorjs/marker": { - "version": "1.2.2", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@editorjs/marker/-/marker-1.4.0.tgz", + "integrity": "sha512-5ipEXfL44jTTRzgNp/p/YjMO7jT08S5z4V8qA3FFJTfdhKgQyM3mvP1zpdYKw47ZZpVWMCncvk5Nto3BxihEtg==", "dev": true, - "license": "MIT" + "dependencies": { + "@codexteam/icons": "^0.0.5" + } }, "node_modules/@editorjs/underline": { "version": "1.1.0", @@ -27673,14 +27668,6 @@ "node": ">= 0.12.0" } }, - "node_modules/codex-notifier": { - "version": "1.1.2", - "license": "MIT" - }, - "node_modules/codex-tooltip": { - "version": "1.0.5", - "license": "MIT" - }, "node_modules/collapse-white-space": { "version": "1.0.6", "dev": true, @@ -30364,17 +30351,19 @@ } }, "node_modules/editorjs-html": { - "version": "3.4.2", - "license": "MIT" + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/editorjs-html/-/editorjs-html-3.4.3.tgz", + "integrity": "sha512-HMqQ3BCE98uhSpJsbfH0c3CoMctUMCHlap2Eq/7/VjaHas+g3IJqyf+ERtMByoQCzvcW22ISYaZEeE7rGkd8Xg==" }, "node_modules/editorjs-paragraph-with-alignment": { "version": "3.0.0", "license": "MIT" }, "node_modules/editorjs-text-color-plugin": { - "version": "1.13.1", - "dev": true, - "license": "MIT" + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-2.0.3.tgz", + "integrity": "sha512-4ASQg4s0wpHLRi8+U9IOyFLQVXrI12MiAKCgf1AUEAEngYuRrwmuElLHQgJWeM2o8TruP8VkrT7UT7G2vTrJMA==", + "dev": true }, "node_modules/ee-first": { "version": "1.1.1", @@ -33172,30 +33161,6 @@ "assert-plus": "^1.0.0" } }, - "node_modules/github-api": { - "version": "3.4.0", - "dev": true, - "license": "BSD-3-Clause-Clear", - "dependencies": { - "axios": "^0.21.1", - "debug": "^2.2.0", - "js-base64": "^2.1.9", - "utf8": "^2.1.1" - } - }, - "node_modules/github-api/node_modules/debug": { - "version": "2.6.9", - "dev": true, - "license": "MIT", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/github-api/node_modules/ms": { - "version": "2.0.0", - "dev": true, - "license": "MIT" - }, "node_modules/github-slugger": { "version": "1.5.0", "dev": true, @@ -33976,9 +33941,6 @@ "dev": true, "license": "MIT" }, - "node_modules/html-janitor": { - "version": "2.0.4" - }, "node_modules/html-minifier-terser": { "version": "6.1.0", "dev": true, @@ -38676,11 +38638,6 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, - "node_modules/js-base64": { - "version": "2.6.4", - "dev": true, - "license": "BSD-3-Clause" - }, "node_modules/js-string-escape": { "version": "1.0.1", "dev": true, @@ -41594,6 +41551,7 @@ }, "node_modules/nanoid": { "version": "3.3.6", + "dev": true, "funding": [ { "type": "github", @@ -51900,11 +51858,6 @@ "node": ">=0.10.0" } }, - "node_modules/utf8": { - "version": "2.1.2", - "dev": true, - "license": "MIT" - }, "node_modules/util": { "version": "0.11.1", "dev": true, diff --git a/package.json b/package.json index 38081f80b94..18bdbfc6b0e 100644 --- a/package.json +++ b/package.json @@ -68,9 +68,9 @@ "@angular/router": "14.1.3", "@apollo/client": "^3.8.4", "@cspell/eslint-plugin": "^7.3.6", - "@editorjs/editorjs": "^2.26.5", - "@editorjs/header": "2.7.0", - "@editorjs/list": "1.8.0", + "@editorjs/editorjs": "^2.29.0", + "@editorjs/header": "2.8.1", + "@editorjs/list": "1.9.0", "@editorjs/underline": "1.1.0", "@mat-datetimepicker/core": "^10.1.1", "@ngx-translate/core": "^14.0.0", @@ -82,7 +82,7 @@ "cropperjs": "1.5.13", "date-fns": "^2.30.0", "dotenv-expand": "^5.1.0", - "editorjs-html": "3.4.2", + "editorjs-html": "3.4.3", "editorjs-paragraph-with-alignment": "3.0.0", "event-emitter": "^0.3.5", "material-icons": "^1.13.12", @@ -108,7 +108,7 @@ "@angular/compiler-cli": "14.1.3", "@editorjs/code": "2.8.0", "@editorjs/inline-code": "1.4.0", - "@editorjs/marker": "1.2.2", + "@editorjs/marker": "1.4.0", "@nrwl/angular": "14.8.9", "@nrwl/cli": "14.8.9", "@nrwl/eslint-plugin-nx": "14.5.4", @@ -141,7 +141,7 @@ "commander": "6.2.1", "css-loader": "^6.8.1", "dotenv": "16.1.3", - "editorjs-text-color-plugin": "1.13.1", + "editorjs-text-color-plugin": "2.0.3", "ejs": "^3.1.9", "eslint": "^8.47.0", "eslint-config-prettier": "^8.10.0",