chore(block-editor): Upgrade Tiptap

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.spec.ts

@@ -43,7 +43,7 @@ const BLOCK_EDITOR_FIELD = {
     standalone: true,
     template: `
         <form [formGroup]="form">
-            <dot-block-editor formControlName="block"></dot-block-editor>
+            <dot-block-editor formControlName="block" />
         </form>
     `
 })
@@ -66,24 +66,9 @@ describe('DotBlockEditorComponent - ControlValueAccesor', () => {
 
     it('should set form value when binary file changes', () => {
         const blockEditorComponent = spectator.query(DotBlockEditorComponent);
-        blockEditorComponent.value = BLOCK_EDITOR_FIELD;
+        blockEditorComponent.writeValue(BLOCK_EDITOR_FIELD);
 
         const formValue = spectator.component.form.get('block').value;
-        const expected = {
-            type: 'doc',
-            content: [
-                {
-                    type: 'paragraph',
-                    attrs: { textAlign: 'left' },
-                    content: [
-                        {
-                            type: 'text',
-                            text: '{"attrs":{"charCount":9,"readingTime":1,"wordCount":2},"content":[{"attrs":{"level":1,"textAlign":"left"},"content":[{"text":"A title!!","type":"text"}],"type":"heading"}],"type":"doc"}'
-                        }
-                    ]
-                }
-            ]
-        };
-        expect(formValue).toEqual(JSON.stringify(expected));
+        expect(formValue).toEqual(JSON.stringify(BLOCK_EDITOR_FIELD));
     });
 });

core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.spec.ts

@@ -1,28 +1,32 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
+import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
 
-import { DotAiService } from '@dotcms/data-access';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
-import { AIContentPromptComponent } from './ai-content-prompt.component';
+import { ConfirmationService } from 'primeng/api';
 
-describe('AIContentPromptComponent', () => {
-    let component: AIContentPromptComponent;
-    let fixture: ComponentFixture<AIContentPromptComponent>;
+import { DotAiService, DotMessageService } from '@dotcms/data-access';
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [ReactiveFormsModule, HttpClientTestingModule],
-            declarations: [AIContentPromptComponent],
-            providers: [DotAiService]
-        }).compileComponents();
+import { AIContentPromptComponent } from './ai-content-prompt.component';
+import { AiContentPromptStore } from './store/ai-content-prompt.store';
 
-        fixture = TestBed.createComponent(AIContentPromptComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+describe('AIContentPromptComponent', () => {
+    let spectator: Spectator<AIContentPromptComponent>;
+    const createComponent = createComponentFactory({
+        component: AIContentPromptComponent,
+        providers: [
+            AiContentPromptStore,
+            DotMessageService,
+            DotAiService,
+            ConfirmationService,
+            provideHttpClient(),
+            provideHttpClientTesting()
+        ]
     });
 
+    beforeEach(() => (spectator = createComponent()));
+
     it('should create', () => {
-        expect(component).toBeTruthy();
+        expect(spectator.component).toBeTruthy();
     });
 });

core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/store/ai-content-prompt.store.spec.ts

@@ -4,68 +4,63 @@ import { of } from 'rxjs';
 import { DotAiService } from '@dotcms/data-access';
 import { ComponentStatus } from '@dotcms/dotcms-models';
 
-import { AiContentPromptState, AiContentPromptStore } from './ai-content-prompt.store';
+import { initialState, AiContentPromptStore } from './ai-content-prompt.store';
 
 describe('AiContentPromptStore', () => {
     let spectator: SpectatorService<AiContentPromptStore>;
     let store: AiContentPromptStore;
     let dotAiService: SpyObject<DotAiService>;
 
-    const createStoreService = createServiceFactory({
+    const createService = createServiceFactory({
         service: AiContentPromptStore,
         mocks: [DotAiService]
     });
 
     beforeEach(() => {
-        spectator = createStoreService();
+        spectator = createService();
         store = spectator.service;
         dotAiService = spectator.inject(DotAiService);
     });
 
     it('should set open state', (done) => {
-        spectator.service.setStatus(ComponentStatus.INIT);
+        store.setStatus(ComponentStatus.INIT);
         store.state$.subscribe((state) => {
             expect(state.status).toBe(ComponentStatus.INIT);
             done();
         });
     });
 
     it('should showDialog and set the initial state', (done) => {
-        const initialState: AiContentPromptState = {
-            prompt: '',
-            generatedContent: [],
-            selectedContent: '',
-            activeIndex: null,
-            status: ComponentStatus.INIT,
-            showDialog: false,
-            submitLabel: 'block-editor.extension.ai-image.generate'
-        };
-
-        //dirty state
-        spectator.service.patchState({
+        store.patchState({
             prompt: 'test prompt',
             selectedContent: 'test selected content'
         });
 
-        spectator.service.showDialog();
+        store.showDialog();
+
         store.state$.subscribe((state) => {
-            expect(state.showDialog).toEqual(true);
-            expect(state).toEqual(initialState);
+            expect(JSON.stringify(state)).toBe(
+                JSON.stringify({
+                    ...initialState,
+                    generatedContent: [],
+                    showDialog: true
+                })
+            );
             done();
         });
     });
 
     it('should hideDialog', (done) => {
-        spectator.service.patchState({ showDialog: true });
-        spectator.service.hideDialog();
+        store.patchState({ showDialog: true });
+        store.hideDialog();
         store.state$.subscribe((state) => {
             expect(state.showDialog).toEqual(false);
             done();
         });
     });
 
     it('should handle subscription on selected Content', (done) => {
-        spectator.service.patchState({ selectedContent: 'test selected content' });
+        store.patchState({ selectedContent: 'test selected content' });
 
         store.selectedContent$.subscribe((selectedContent) => {
             expect(selectedContent).toBe('test selected content');
@@ -81,12 +76,14 @@ describe('AiContentPromptStore', () => {
         dotAiService.generateContent.mockReturnValue(of(content));
 
         // Trigger the effect
-        spectator.service.generateContent(of(prompt));
+        store.generateContent(of(prompt));
 
         // Check if state is updated correctly
         store.state$.subscribe((state) => {
             expect(state.status).toBe(ComponentStatus.IDLE);
-            expect(state.generatedContent).toBe([{ content, prompt }]);
+            expect(state.generatedContent[0].content).toBe(content);
+            expect(state.generatedContent[0].prompt).toBe(prompt);
+
             done();
         });
     });

core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/store/ai-content-prompt.store.ts

@@ -25,7 +25,7 @@ export interface AiContentPromptState {
     submitLabel: string;
 }
 
-const initialState: AiContentPromptState = {
+export const initialState: AiContentPromptState = {
     prompt: '',
     generatedContent: [],
     selectedContent: '',

core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.spec.ts

@@ -1,22 +1,14 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 
-import { ImageTabviewFormComponent } from './image-tabview-form.component';
+import { AssetFormComponent } from './asset-form.component';
 
-describe('ImageTabviewFormComponent', () => {
-    let component: ImageTabviewFormComponent;
-    let fixture: ComponentFixture<ImageTabviewFormComponent>;
+describe('AssetFormComponent', () => {
+    let spectator: Spectator<AssetFormComponent>;
+    const createComponent = createComponentFactory(AssetFormComponent);
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [ImageTabviewFormComponent]
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(ImageTabviewFormComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+    beforeEach(() => (spectator = createComponent()));
 
     it('should create', () => {
-        expect(component).toBeTruthy();
+        expect(spectator.component).toBeTruthy();
     });
 });

core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.html

@@ -1,27 +1,23 @@
-<p-fileUpload
-    *ngIf="status === 'SELECT'; else preview"
-    (onSelect)="onSelectFile($event.files)"
-    [accept]="type + '/*'"
-    [customUpload]="true"
-    chooseLabel="browse files"
-    mode="basic"></p-fileUpload>
-
-<ng-template #preview>
+@if (status === 'SELECT') {
+    <p-fileUpload
+        (onSelect)="onSelectFile($event.files)"
+        [accept]="type + '/*'"
+        [customUpload]="true"
+        chooseLabel="browse files"
+        mode="basic" />
+} @else {
     <div class="preview-container">
-        <dot-asset-preview
-            *ngIf="status === 'UPLOAD'"
-            [type]="type"
-            [file]="file"
-            [src]="src"></dot-asset-preview>
-
-        <ng-template *ngIf="status === 'ERROR'" #errorTemplate>
+        @if (status === 'UPLOAD') {
+            <dot-asset-preview [type]="type" [file]="file" [src]="src" />
+        }
+        @if (status === 'ERROR') {
             <span class="error">{{ error }}</span>
-        </ng-template>
+        }
     </div>
 
     <div class="action-container">
         <div class="loading-message">
-            <dot-spinner [size]="'30px'"></dot-spinner>
+            <dot-spinner [size]="'30px'" />
             <span (@shakeit.done)="shakeEnd($event)" class="warning" [@shakeit]="animation">
                 {{ errorMessage }}
             </span>
@@ -30,4 +26,4 @@
             Cancel
         </button>
     </div>
-</ng-template>
+}

core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.spec.ts

@@ -3,15 +3,17 @@ import { of } from 'rxjs';
 import { Component, DebugElement, EventEmitter, Input, Output } from '@angular/core';
 import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ButtonModule } from 'primeng/button';
 
 import { delay } from 'rxjs/operators';
 
+import { DotUploadFileService } from '@dotcms/data-access';
 import { DotCMSContentlet } from '@dotcms/dotcms-models';
 
 import { DotUploadAssetComponent, STATUS } from './dot-upload-asset.component';
 
-import { DotUploadFileService } from '../../../../shared';
-
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'p-fileUpload',
@@ -56,6 +58,7 @@ describe('DotUploadAssetComponent', () => {
                 FileUploadMockComponent,
                 DotSpinnerMockComponent
             ],
+            imports: [BrowserAnimationsModule, ButtonModule],
             providers: [
                 {
                     provide: DotUploadFileService,

core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.spec.ts

@@ -1,22 +1,17 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
 
 import { UploadPlaceholderComponent } from './upload-placeholder.component';
 
 describe('UploadPlaceholderComponent', () => {
-    let component: UploadPlaceholderComponent;
-    let fixture: ComponentFixture<UploadPlaceholderComponent>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [UploadPlaceholderComponent]
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(UploadPlaceholderComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+    let spectator: Spectator<UploadPlaceholderComponent>;
+    const createComponent = createComponentFactory({
+        component: UploadPlaceholderComponent,
+        providers: []
     });
 
+    beforeEach(() => (spectator = createComponent()));
+
     it('should create', () => {
-        expect(component).toBeTruthy();
+        expect(spectator.component).toBeTruthy();
     });
 });

core-web/libs/block-editor/src/lib/extensions/bubble-form/bubble-form.component.html

@@ -1,6 +1,6 @@
 @if (form) {
     <form (ngSubmit)="onSubmit()" [ngClass]="options?.customClass" [formGroup]="form">
-        @for (control of dynamicControls; track control) {
+        @for (control of dynamicControls; track $index) {
             <div [ngClass]="control.type" class="field form-row">
                 @switch (control.type) {
                     @case ('checkbox') {