@dotcms/angular 0.0.1-alpha.38 → 0.0.1-alpha.39

package/src/lib/layout/container/container.component.spec.ts

@@ -0,0 +1,205 @@
+import { Spectator, byTestId, byText, createComponentFactory } from '@ngneat/spectator';
+import { of } from 'rxjs';
+
+import { Component, Input } from '@angular/core';
+
+import { ContainerComponent } from './container.component';
+
+import { NoComponent } from '../../components/no-component/no-component.component';
+import { DotCMSContainer, DotCMSContentlet } from '../../models';
+import { PageContextService } from '../../services/dotcms-context/page-context.service';
+import { PageResponseMock } from '../../utils/testing.utils';
+
+@Component({
+    selector: 'dotcms-mock-component',
+    standalone: true,
+    template: 'Hello world'
+})
+class DotcmsSDKMockComponent {
+    @Input() contentlet!: DotCMSContentlet;
+}
+
+@Component({
+    selector: 'dot-no-component',
+    template: 'no component yet - Custom'
+})
+class CustomNoComponent {
+    @Input() contentlet!: DotCMSContentlet;
+}
+
+describe('ContainerComponent', () => {
+    let spectator: Spectator<ContainerComponent>;
+
+    describe('inside editor', () => {
+        const createComponent = createComponentFactory({
+            component: ContainerComponent,
+            detectChanges: false,
+            providers: [
+                {
+                    provide: PageContextService,
+                    useValue: {
+                        context: {
+                            pageAsset: {
+                                containers: PageResponseMock.containers
+                            },
+                            components: {
+                                Banner: of(DotcmsSDKMockComponent)
+                            },
+                            isInsideEditor: true
+                        }
+                    }
+                }
+            ]
+        });
+
+        beforeEach(() => {
+            spectator = createComponent({
+                props: {
+                    container: PageResponseMock.layout.body.rows[0].columns[0]
+                        .containers[0] as DotCMSContainer
+                }
+            });
+        });
+
+        it('should render MockContainerComponent', () => {
+            spectator.detectChanges();
+            expect(spectator.query(DotcmsSDKMockComponent)).toBeTruthy();
+        });
+
+        it('should container have data attributes', () => {
+            spectator.detectChanges();
+            const container = spectator.debugElement.nativeElement;
+            expect(container?.getAttribute('data-dot-accept-types')).toBeDefined();
+            expect(container?.getAttribute('data-dot-identifier')).toBeDefined();
+            expect(container?.getAttribute('data-max-contentlets')).toBeDefined();
+            expect(container?.getAttribute('ata-dot-uuid')).toBeDefined();
+        });
+
+        it('should contentlets have data attributes', () => {
+            spectator.detectChanges();
+            const contentlets = spectator.queryAll(byTestId('dot-contentlet'));
+            contentlets.forEach((contentlet) => {
+                expect(contentlet.getAttribute('data-dot-identifier')).toBeDefined();
+                expect(contentlet.getAttribute('data-dot-basetype')).toBeDefined();
+                expect(contentlet.getAttribute('data-dot-title')).toBeDefined();
+                expect(contentlet.getAttribute('data-dot-inode')).toBeDefined();
+                expect(contentlet.getAttribute('data-dot-type')).toBeDefined();
+                expect(contentlet.getAttribute('data-dot-container')).toBeDefined();
+                expect(contentlet.getAttribute('data-dot-on-number-of-pages')).toBeDefined();
+            });
+        });
+
+        it('should render NoComponent component for unsetted content types', () => {
+            spectator.setInput(
+                'container',
+                PageResponseMock.layout.body.rows[1].columns[0].containers[0] as DotCMSContainer
+            );
+            spectator.detectChanges();
+            expect(spectator.query(NoComponent)).toBeTruthy();
+        });
+
+        it('should render message when container is empty', () => {
+            spectator.setInput(
+                'container',
+                PageResponseMock.layout.body.rows[2].columns[0].containers[0] as DotCMSContainer
+            );
+            spectator.detectChanges();
+            expect(spectator.query(byText('This container is empty.'))).toBeTruthy();
+        });
+    });
+
+    describe('with custom NoComponent component', () => {
+        const createComponent = createComponentFactory({
+            component: ContainerComponent,
+            detectChanges: false,
+            providers: [
+                {
+                    provide: PageContextService,
+                    useValue: {
+                        context: {
+                            pageAsset: {
+                                containers: PageResponseMock.containers
+                            },
+                            components: {
+                                Banner: of(DotcmsSDKMockComponent)
+                            },
+                            isInsideEditor: true
+                        }
+                    }
+                }
+            ]
+        });
+        beforeEach(() => {
+            spectator = createComponent({
+                props: {
+                    container: PageResponseMock.layout.body.rows[1].columns[0]
+                        .containers[0] as DotCMSContainer
+                },
+                providers: [
+                    {
+                        provide: PageContextService,
+                        useValue: {
+                            context: {
+                                pageAsset: {
+                                    containers: PageResponseMock.containers
+                                },
+                                components: {
+                                    CustomNoComponent: of(CustomNoComponent)
+                                },
+                                isInsideEditor: true
+                            }
+                        }
+                    }
+                ]
+            });
+        });
+
+        it('should render custom NoComponent component for unsetted content types', () => {
+            spectator.detectChanges();
+            expect(spectator.query(CustomNoComponent)).toBeTruthy();
+        });
+    });
+
+    describe('outside editor', () => {
+        const createComponent = createComponentFactory({
+            component: ContainerComponent,
+            detectChanges: false,
+            providers: [
+                {
+                    provide: PageContextService,
+                    useValue: {
+                        context: {
+                            pageAsset: {
+                                containers: PageResponseMock.containers
+                            },
+                            components: {
+                                Banner: of(DotcmsSDKMockComponent)
+                            },
+                            isInsideEditor: false
+                        }
+                    }
+                }
+            ]
+        });
+
+        beforeEach(() => {
+            spectator = createComponent({
+                props: {
+                    container: PageResponseMock.layout.body.rows[0].columns[0]
+                        .containers[0] as DotCMSContainer
+                }
+            });
+        });
+
+        it('should not have data attributes', () => {
+            spectator.detectChanges();
+            const container = spectator.query(byTestId('dot-container'));
+            expect(container?.getAttribute('data-dot-accept-types')).toBeUndefined();
+
+            const contentlets = spectator.queryAll(byTestId('dot-contentlet'));
+            contentlets.forEach((contentlet) => {
+                expect(contentlet.getAttribute('data-dot-identifier')).toBeUndefined();
+            });
+        });
+    });
+});

package/src/lib/layout/container/container.component.ts

@@ -0,0 +1,140 @@
+import { AsyncPipe, NgComponentOutlet } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    HostBinding,
+    Input,
+    OnChanges,
+    computed,
+    inject,
+    signal
+} from '@angular/core';
+
+import { NoComponent } from '../../components/no-component/no-component.component';
+import { DynamicComponentEntity } from '../../models';
+import { DotCMSContainer, DotCMSContentlet } from '../../models/dotcms.model';
+import { PageContextService } from '../../services/dotcms-context/page-context.service';
+import { getContainersData } from '../../utils';
+import { ContentletComponent } from '../contentlet/contentlet.component';
+
+interface DotContainer {
+    acceptTypes: string;
+    identifier: string;
+    maxContentlets: number;
+    uuid: string;
+    variantId?: string;
+}
+
+/**
+ * This component is responsible to display a container with contentlets.
+ *
+ * @export
+ * @class ContainerComponent
+ * @implements {OnChanges}
+ */
+@Component({
+    selector: 'dotcms-container',
+    standalone: true,
+    imports: [AsyncPipe, NgComponentOutlet, NoComponent, ContentletComponent],
+    templateUrl: './container.component.html',
+    styleUrl: './container.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContainerComponent implements OnChanges {
+    /**
+     * The container object containing the contentlets.
+     *
+     * @type {DotCMSContainer}
+     * @memberof ContainerComponent
+     */
+    @Input({ required: true }) container!: DotCMSContainer;
+
+    private readonly pageContextService: PageContextService = inject(PageContextService);
+    protected readonly NoComponent = NoComponent;
+    protected readonly $isInsideEditor = signal<boolean>(false);
+
+    protected componentsMap!: Record<string, DynamicComponentEntity>;
+    protected $contentlets = signal<DotCMSContentlet[]>([]);
+    protected $dotContainer = signal<DotContainer | null>(null);
+    protected $dotContainerAsString = computed(() => JSON.stringify(this.$dotContainer()));
+
+    /**
+     * The accept types for the container component.
+     *
+     * @type {(string | null)}
+     * @memberof ContainerComponent
+     */
+    @HostBinding('attr.data-dot-accept-types') acceptTypes: string | null = null;
+
+    /**
+     * The identifier for the container component.
+     *
+     * @type {(string | null)}
+     * @memberof ContainerComponent
+     */
+    @HostBinding('attr.data-dot-identifier') identifier: string | null = null;
+    /**
+     * The max contentlets for the container component.
+     *
+     * @type {(number | null)}
+     * @memberof ContainerComponent
+     */
+    @HostBinding('attr.data-max-contentlets') maxContentlets: number | null = null;
+    /**
+     * The uuid for the container component.
+     *
+     * @type {(string | null)}
+     * @memberof ContainerComponent
+     */
+    @HostBinding('attr.data-dot-uuid') uuid: string | null = null;
+    /**
+     * The class for the container component.
+     *
+     * @type {(string | null)}
+     * @memberof ContainerComponent
+     */
+    @HostBinding('class') class: string | null = null;
+    /**
+     * The dot object for the container component.
+     *
+     * @type {(string | null)}
+     * @memberof ContainerComponent
+     */
+    @HostBinding('attr.data-dot-object') dotObject: string | null = null;
+    /**
+     * The data-testid attribute used for identifying the component during testing.
+     *
+     * @memberof ContainerComponent
+     */
+    @HostBinding('attr.data-testid') testId = 'dot-container';
+
+    ngOnChanges() {
+        const { pageAsset, components, isInsideEditor } = this.pageContextService.context;
+        const { acceptTypes, maxContentlets, variantId, path, contentlets } = getContainersData(
+            pageAsset.containers,
+            this.container
+        );
+        const { identifier, uuid } = this.container;
+
+        this.componentsMap = components;
+
+        this.$isInsideEditor.set(isInsideEditor);
+        this.$contentlets.set(contentlets);
+        this.$dotContainer.set({
+            identifier: path ?? identifier,
+            acceptTypes,
+            maxContentlets,
+            variantId,
+            uuid
+        });
+
+        if (this.$isInsideEditor()) {
+            this.acceptTypes = acceptTypes;
+            this.identifier = identifier;
+            this.maxContentlets = maxContentlets;
+            this.uuid = uuid;
+            this.class = this.$contentlets().length ? null : 'empty-container';
+            this.dotObject = 'container';
+        }
+    }
+}

package/src/lib/layout/contentlet/contentlet.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentletComponent } from './contentlet.component';
+
+describe('ContentletComponent', () => {
+    let component: ContentletComponent;
+    let fixture: ComponentFixture<ContentletComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ContentletComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ContentletComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/{lib/layout/contentlet/contentlet.component.d.ts → src/lib/layout/contentlet/contentlet.component.ts}

@@ -1,6 +1,7 @@
-import { OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges } from '@angular/core';
+
 import { DotCMSContentlet } from '../../models';
-import * as i0 from "@angular/core";
+
 /**
  * This component is responsible to display a contentlet.
  *
@@ -8,79 +9,93 @@ import * as i0 from "@angular/core";
  * @class ContentletComponent
  * @implements {OnChanges}
  */
-export declare class ContentletComponent implements OnChanges {
+@Component({
+    selector: 'dotcms-contentlet-wrapper',
+    standalone: true,
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContentletComponent implements OnChanges {
     /**
      * The contentlet object containing content data.
      *
      * @type {DotCMSContentlet}
      * @memberof ContentletComponent
      */
-    contentlet: DotCMSContentlet;
+    @Input({ required: true }) contentlet!: DotCMSContentlet;
     /**
      * The container data (as string) where the contentlet is located.
      *
      * @type {string}
      * @memberof ContentletComponent
      */
-    container: string;
+    @Input() container!: string;
+
     /**
      * The identifier of contentlet component.
      *
      * @type {(string | null)}
      * @memberof ContentletComponent
      */
-    identifier: string | null;
+    @HostBinding('attr.data-dot-identifier') identifier: string | null = null;
     /**
      * The base type of contentlet component.
      *
      * @type {(string | null)}
      * @memberof ContentletComponent
      */
-    baseType: string | null;
+    @HostBinding('attr.data-dot-basetype') baseType: string | null = null;
     /**
      * The title of contentlet component.
      *
      * @type {(string | null)}
      * @memberof ContentletComponent
      */
-    title: string | null;
+    @HostBinding('attr.data-dot-title') title: string | null = null;
     /**
      * The inode of contentlet component.
      *
      * @type {(string | null)}
      * @memberof ContentletComponent
      */
-    inode: string | null;
+    @HostBinding('attr.data-dot-inode') inode: string | null = null;
     /**
      * The type of contentlet component.
      *
      * @type {(string | null)}
      * @memberof ContentletComponent
      */
-    dotType: string | null;
+    @HostBinding('attr.data-dot-type') dotType: string | null = null;
     /**
      * The container of contentlet component.
      *
      * @type {(string | null)}
      * @memberof ContentletComponent
      */
-    dotContainer: string | null;
+    @HostBinding('attr.data-dot-container') dotContainer: string | null = null;
     /**
      * The number of pages where the contentlet appears
      *
      * @type {(string | null)}
      * @memberof ContentletComponent
      */
-    numberOfPages: string | null;
+    @HostBinding('attr.data-dot-on-number-of-pages') numberOfPages: string | null = null;
     /**
      * The content of contentlet component.
      *
      * @type {(string | null)}
      * @memberof ContentletComponent
      */
-    dotContent: string | null;
-    ngOnChanges(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ContentletComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ContentletComponent, "dotcms-contentlet-wrapper", never, { "contentlet": { "alias": "contentlet"; "required": true; }; "container": { "alias": "container"; "required": false; }; }, {}, never, ["*"], true, never>;
+    @HostBinding('attr.data-dot-object') dotContent: string | null = null;
+
+    ngOnChanges() {
+        this.identifier = this.contentlet.identifier;
+        this.baseType = this.contentlet.baseType;
+        this.title = this.contentlet.title;
+        this.inode = this.contentlet.inode;
+        this.dotType = this.contentlet.contentType;
+        this.dotContainer = this.container;
+        this.numberOfPages = this.contentlet['onNumberOfPages'];
+        this.dotContent = 'contentlet';
+    }
 }
-//# sourceMappingURL=contentlet.component.d.ts.map

package/src/lib/layout/dotcms-layout/dotcms-layout.component.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/src/lib/layout/dotcms-layout/dotcms-layout.component.spec.ts

@@ -0,0 +1,195 @@
+import { expect } from '@jest/globals';
+import { Spectator, createRoutingFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
+
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import * as dotcmsClient from '@dotcms/client';
+
+import { PageResponseMock, PageResponseOneRowMock } from './../../utils/testing.utils';
+import { DotcmsLayoutComponent } from './dotcms-layout.component';
+
+import { DotCMSContentlet, DotCMSPageAsset } from '../../models';
+import { PageContextService } from '../../services/dotcms-context/page-context.service';
+import { RowComponent } from '../row/row.component';
+
+interface Callback {
+    [key: string]: (data: unknown) => void;
+}
+
+interface DotCmsClientMock extends dotcmsClient.DotCmsClient {
+    editor: {
+        on: (type: string, callbackFn: (data: unknown) => void) => void;
+        off: jest.Mock;
+        callbacks: Callback;
+    };
+}
+
+@Component({
+    selector: 'dotcms-mock-component',
+    standalone: true,
+    template: 'Hello world'
+})
+class DotcmsSDKMockComponent {
+    @Input() contentlet!: DotCMSContentlet;
+}
+
+jest.mock('@dotcms/client', () => ({
+    ...jest.requireActual('@dotcms/client'),
+    isInsideEditor: jest.fn().mockReturnValue(true),
+    initEditor: jest.fn(),
+    updateNavigation: jest.fn(),
+    postMessageToEditor: jest.fn(),
+    DotCmsClient: {
+        instance: {
+            editor: {
+                on: function (type: string, callbackFn: (data: unknown) => void): void {
+                    this.callbacks[type] = callbackFn;
+                },
+                off: jest.fn(),
+                callbacks: {} as Callback
+            }
+        }
+    },
+    CUSTOMER_ACTIONS: {
+        GET_PAGE_DATA: 'get-page-data'
+    }
+}));
+
+const { DotCmsClient } = dotcmsClient as jest.Mocked<typeof dotcmsClient>;
+
+describe('DotcmsLayoutComponent', () => {
+    let spectator: Spectator<DotcmsLayoutComponent>;
+    let pageContextService: PageContextService;
+
+    const createComponent = createRoutingFactory({
+        component: DotcmsLayoutComponent,
+        imports: [MockComponent(RowComponent)],
+        providers: [
+            PageContextService,
+            { provide: ActivatedRoute, useValue: { url: of([]) } },
+            { provide: Router, useValue: {} }
+        ]
+    });
+
+    beforeEach(() => {
+        spectator = createComponent({
+            props: {
+                pageAsset: PageResponseMock as unknown as DotCMSPageAsset,
+                components: {
+                    Banner: Promise.resolve(DotcmsSDKMockComponent)
+                }
+            },
+            detectChanges: false
+        });
+
+        pageContextService = spectator.inject(PageContextService, true);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render rows', () => {
+        spectator.detectChanges();
+        expect(spectator.queryAll(RowComponent).length).toBe(3);
+    });
+
+    it('should save pageContext', () => {
+        const setContextSpy = jest.spyOn(pageContextService, 'setContext');
+        spectator.detectChanges();
+        expect(setContextSpy).toHaveBeenCalled();
+    });
+
+    describe('inside editor', () => {
+        it('should call initEditor and updateNavigation from @dotcms/client', () => {
+            const initEditorSpy = jest.spyOn(dotcmsClient, 'initEditor');
+            const updateNavigationSpy = jest.spyOn(dotcmsClient, 'updateNavigation');
+
+            spectator.detectChanges();
+            expect(initEditorSpy).toHaveBeenCalled();
+            expect(updateNavigationSpy).toHaveBeenCalled();
+        });
+
+        describe('onReload', () => {
+            const client = DotCmsClient.instance;
+            let editorOnSpy: jest.SpyInstance;
+
+            beforeEach(() => {
+                editorOnSpy = jest.spyOn(client.editor, 'on');
+                spectator.setInput('onReload', () => {
+                    /* do nothing */
+                });
+                spectator.detectChanges();
+            });
+
+            it('should subscribe to the `CHANGE` event', () => {
+                expect(editorOnSpy).toHaveBeenCalled();
+            });
+
+            it('should remove listener on unmount', () => {
+                spectator.component.ngOnDestroy();
+                spectator.detectChanges();
+
+                expect(client.editor.off).toHaveBeenCalledWith('changes');
+            });
+        });
+
+        describe('client is ready', () => {
+            const query = { query: 'query { ... }' };
+
+            beforeEach(() => {
+                spectator.setInput('editor', query);
+                spectator.detectChanges();
+            });
+
+            it('should post message to editor', () => {
+                spectator.detectChanges();
+                expect(dotcmsClient.postMessageToEditor).toHaveBeenCalledWith({
+                    action: dotcmsClient.CUSTOMER_ACTIONS.CLIENT_READY,
+                    payload: query
+                });
+            });
+        });
+
+        describe('onChange', () => {
+            const client = DotCmsClient.instance;
+            beforeEach(() => spectator.detectChanges());
+
+            it('should update the page asset when changes are made in the editor', () => {
+                const editorOnSpy = jest.spyOn(client.editor, 'on');
+                expect(editorOnSpy).toHaveBeenCalledWith('changes', expect.any(Function));
+            });
+        });
+    });
+
+    describe('template', () => {
+        beforeEach(() => spectator.detectChanges());
+
+        it('should render rows', () => {
+            expect(spectator.queryAll(RowComponent).length).toBe(3);
+        });
+
+        it('should pass the correct row to RowComponent', () => {
+            const rowComponents = spectator.queryAll(RowComponent);
+            const rows = PageResponseMock.layout.body.rows;
+            expect(rowComponents.length).toBe(rows.length);
+
+            rowComponents.forEach((component, index) => {
+                expect(component.row).toEqual(rows[index]);
+            });
+        });
+
+        it('should update the page asset when changes are made in the editor', () => {
+            const { editor } = DotCmsClient.instance as DotCmsClientMock;
+            editor.callbacks['changes'](PageResponseOneRowMock);
+            spectator.detectChanges();
+            const rowComponents = spectator.queryAll(RowComponent);
+            const rows = PageResponseMock.layout.body.rows;
+            expect(rowComponents.length).toBe(1);
+            expect(rowComponents[0].row).toEqual(rows[0]);
+        });
+    });
+});