inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Use latest editorjs and fix storybook

* Remove unit with haveBeenCalled

* AAE-20420 Fix for broken tests

---------

Co-authored-by: wiktord2000 <wiktor.danielewski@hyland.com>
This commit is contained in:
Maurizio Vitale
2024-02-15 13:56:34 +00:00
committed by GitHub
parent 16005ef298
commit 6468298bb0
5 changed files with 82 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

105
package-lock.json generated
View File

@@ -24,9 +24,9 @@
"@angular/router": "14.1.3", "@angular/router": "14.1.3",
"@apollo/client": "^3.8.4", "@apollo/client": "^3.8.4",
"@cspell/eslint-plugin": "^7.3.6", "@cspell/eslint-plugin": "^7.3.6",
"@editorjs/editorjs": "^2.26.5", "@editorjs/editorjs": "^2.29.0",
"@editorjs/header": "2.7.0", "@editorjs/header": "2.8.1",
"@editorjs/list": "1.8.0", "@editorjs/list": "1.9.0",
"@editorjs/underline": "1.1.0", "@editorjs/underline": "1.1.0",
"@mat-datetimepicker/core": "^10.1.1", "@mat-datetimepicker/core": "^10.1.1",
"@ngx-translate/core": "^14.0.0", "@ngx-translate/core": "^14.0.0",
@@ -38,7 +38,7 @@
"cropperjs": "1.5.13", "cropperjs": "1.5.13",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"dotenv-expand": "^5.1.0", "dotenv-expand": "^5.1.0",
"editorjs-html": "3.4.2", "editorjs-html": "3.4.3",
"editorjs-paragraph-with-alignment": "3.0.0", "editorjs-paragraph-with-alignment": "3.0.0",
"event-emitter": "^0.3.5", "event-emitter": "^0.3.5",
"material-icons": "^1.13.12", "material-icons": "^1.13.12",
@@ -64,7 +64,7 @@
"@angular/compiler-cli": "14.1.3", "@angular/compiler-cli": "14.1.3",
"@editorjs/code": "2.8.0", "@editorjs/code": "2.8.0",
"@editorjs/inline-code": "1.4.0", "@editorjs/inline-code": "1.4.0",
"@editorjs/marker": "1.2.2", "@editorjs/marker": "1.4.0",
"@nrwl/angular": "14.8.9", "@nrwl/angular": "14.8.9",
"@nrwl/cli": "14.8.9", "@nrwl/cli": "14.8.9",
"@nrwl/eslint-plugin-nx": "14.5.4", "@nrwl/eslint-plugin-nx": "14.5.4",
@@ -97,7 +97,7 @@
"commander": "6.2.1", "commander": "6.2.1",
"css-loader": "^6.8.1", "css-loader": "^6.8.1",
"dotenv": "16.1.3", "dotenv": "16.1.3",
"editorjs-text-color-plugin": "1.13.1", "editorjs-text-color-plugin": "2.0.3",
"ejs": "^3.1.9", "ejs": "^3.1.9",
"eslint": "^8.47.0", "eslint": "^8.47.0",
"eslint-config-prettier": "^8.10.0", "eslint-config-prettier": "^8.10.0",
@@ -109,7 +109,6 @@
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-rxjs": "^5.0.3", "eslint-plugin-rxjs": "^5.0.3",
"eslint-plugin-unicorn": "^49.0.0", "eslint-plugin-unicorn": "^49.0.0",
"github-api": "^3.4.0",
"graphql": "^16.8.1", "graphql": "^16.8.1",
"husky": "^7.0.4", "husky": "^7.0.4",
"jasmine-ajax": "4.0.0", "jasmine-ajax": "4.0.0",
@@ -4402,23 +4401,14 @@
} }
}, },
"node_modules/@editorjs/editorjs": { "node_modules/@editorjs/editorjs": {
"version": "2.26.5", "version": "2.29.0",
"license": "Apache-2.0", "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.29.0.tgz",
"dependencies": { "integrity": "sha512-w2BVboSHokMBd/cAOZn0UU328o3gSZ8XUvFPA2e9+ciIGKILiRSPB70kkNdmhHkuNS3q2px+vdaIFaywBl7wGA=="
"@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"
}, },
"node_modules/@editorjs/header": { "node_modules/@editorjs/header": {
"version": "2.7.0", "version": "2.8.1",
"license": "MIT", "resolved": "https://registry.npmjs.org/@editorjs/header/-/header-2.8.1.tgz",
"integrity": "sha512-y0HVXRP7m2W617CWo3fsb5HhXmSLaRpb9GzFx0Vkp/HEm9Dz5YO1s8tC7R8JD3MskwoYh7V0hRFQt39io/r6hA==",
"dependencies": { "dependencies": {
"@codexteam/icons": "^0.0.5" "@codexteam/icons": "^0.0.5"
} }
@@ -4432,8 +4422,9 @@
} }
}, },
"node_modules/@editorjs/list": { "node_modules/@editorjs/list": {
"version": "1.8.0", "version": "1.9.0",
"license": "MIT", "resolved": "https://registry.npmjs.org/@editorjs/list/-/list-1.9.0.tgz",
"integrity": "sha512-BQEvZW4vi0O0dBvGNljiKxiE89vMSHoM2Tu2OzKUndoj7pY9AxqpgCh1qvwIVsJAlG4Lbt/vBFQilnoStMmI6A==",
"dependencies": { "dependencies": {
"@codexteam/icons": "^0.0.4" "@codexteam/icons": "^0.0.4"
} }
@@ -4443,9 +4434,13 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@editorjs/marker": { "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, "dev": true,
"license": "MIT" "dependencies": {
"@codexteam/icons": "^0.0.5"
}
}, },
"node_modules/@editorjs/underline": { "node_modules/@editorjs/underline": {
"version": "1.1.0", "version": "1.1.0",
@@ -27673,14 +27668,6 @@
"node": ">= 0.12.0" "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": { "node_modules/collapse-white-space": {
"version": "1.0.6", "version": "1.0.6",
"dev": true, "dev": true,
@@ -30364,17 +30351,19 @@
} }
}, },
"node_modules/editorjs-html": { "node_modules/editorjs-html": {
"version": "3.4.2", "version": "3.4.3",
"license": "MIT" "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": { "node_modules/editorjs-paragraph-with-alignment": {
"version": "3.0.0", "version": "3.0.0",
"license": "MIT" "license": "MIT"
}, },
"node_modules/editorjs-text-color-plugin": { "node_modules/editorjs-text-color-plugin": {
"version": "1.13.1", "version": "2.0.3",
"dev": true, "resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-2.0.3.tgz",
"license": "MIT" "integrity": "sha512-4ASQg4s0wpHLRi8+U9IOyFLQVXrI12MiAKCgf1AUEAEngYuRrwmuElLHQgJWeM2o8TruP8VkrT7UT7G2vTrJMA==",
"dev": true
}, },
"node_modules/ee-first": { "node_modules/ee-first": {
"version": "1.1.1", "version": "1.1.1",
@@ -33172,30 +33161,6 @@
"assert-plus": "^1.0.0" "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": { "node_modules/github-slugger": {
"version": "1.5.0", "version": "1.5.0",
"dev": true, "dev": true,
@@ -33976,9 +33941,6 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/html-janitor": {
"version": "2.0.4"
},
"node_modules/html-minifier-terser": { "node_modules/html-minifier-terser": {
"version": "6.1.0", "version": "6.1.0",
"dev": true, "dev": true,
@@ -38676,11 +38638,6 @@
"url": "https://github.com/chalk/supports-color?sponsor=1" "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": { "node_modules/js-string-escape": {
"version": "1.0.1", "version": "1.0.1",
"dev": true, "dev": true,
@@ -41594,6 +41551,7 @@
}, },
"node_modules/nanoid": { "node_modules/nanoid": {
"version": "3.3.6", "version": "3.3.6",
"dev": true,
"funding": [ "funding": [
{ {
"type": "github", "type": "github",
@@ -51900,11 +51858,6 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/utf8": {
"version": "2.1.2",
"dev": true,
"license": "MIT"
},
"node_modules/util": { "node_modules/util": {
"version": "0.11.1", "version": "0.11.1",
"dev": true, "dev": true,

12
package.json
View File

@@ -68,9 +68,9 @@
"@angular/router": "14.1.3", "@angular/router": "14.1.3",
"@apollo/client": "^3.8.4", "@apollo/client": "^3.8.4",
"@cspell/eslint-plugin": "^7.3.6", "@cspell/eslint-plugin": "^7.3.6",
"@editorjs/editorjs": "^2.26.5", "@editorjs/editorjs": "^2.29.0",
"@editorjs/header": "2.7.0", "@editorjs/header": "2.8.1",
"@editorjs/list": "1.8.0", "@editorjs/list": "1.9.0",
"@editorjs/underline": "1.1.0", "@editorjs/underline": "1.1.0",
"@mat-datetimepicker/core": "^10.1.1", "@mat-datetimepicker/core": "^10.1.1",
"@ngx-translate/core": "^14.0.0", "@ngx-translate/core": "^14.0.0",
@@ -82,7 +82,7 @@
"cropperjs": "1.5.13", "cropperjs": "1.5.13",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"dotenv-expand": "^5.1.0", "dotenv-expand": "^5.1.0",
"editorjs-html": "3.4.2", "editorjs-html": "3.4.3",
"editorjs-paragraph-with-alignment": "3.0.0", "editorjs-paragraph-with-alignment": "3.0.0",
"event-emitter": "^0.3.5", "event-emitter": "^0.3.5",
"material-icons": "^1.13.12", "material-icons": "^1.13.12",
@@ -108,7 +108,7 @@
"@angular/compiler-cli": "14.1.3", "@angular/compiler-cli": "14.1.3",
"@editorjs/code": "2.8.0", "@editorjs/code": "2.8.0",
"@editorjs/inline-code": "1.4.0", "@editorjs/inline-code": "1.4.0",
"@editorjs/marker": "1.2.2", "@editorjs/marker": "1.4.0",
"@nrwl/angular": "14.8.9", "@nrwl/angular": "14.8.9",
"@nrwl/cli": "14.8.9", "@nrwl/cli": "14.8.9",
"@nrwl/eslint-plugin-nx": "14.5.4", "@nrwl/eslint-plugin-nx": "14.5.4",
@@ -141,7 +141,7 @@
"commander": "6.2.1", "commander": "6.2.1",
"css-loader": "^6.8.1", "css-loader": "^6.8.1",
"dotenv": "16.1.3", "dotenv": "16.1.3",
"editorjs-text-color-plugin": "1.13.1", "editorjs-text-color-plugin": "2.0.3",
"ejs": "^3.1.9", "ejs": "^3.1.9",
"eslint": "^8.47.0", "eslint": "^8.47.0",
"eslint-config-prettier": "^8.10.0", "eslint-config-prettier": "^8.10.0",