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 {
/* 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
};
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');
});
});

26
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 {
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,
time : 1550476186479,
blocks : [
{
id: 'yOV_DfEQhC',
type : 'paragraph',
data : {
text: 'text'
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'
}
};

105
package-lock.json generated
View File

@@ -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,

12
package.json
View File

@@ -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",