+}
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.scss b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.scss
index f58da024d3f0..add1f6fc4a0b 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.scss
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.scss
@@ -35,9 +35,6 @@
.bounds {
position: absolute;
- pointer-events: none;
- outline: solid 2px $color-palette-primary-500;
- background-color: transparent;
container-type: inline-size;
.add-button-top,
@@ -73,6 +70,27 @@
transform: translate(0, -50%);
}
}
+
+ // Hover state: Blue background with opacity, no border, no tools, pointer-events: all
+ &.hover {
+ pointer-events: all;
+ background-color: $color-palette-primary-op-20;
+ outline: none;
+ }
+
+ // Selected state: Border, transparent background, pointer-events: none on bounds, tools visible
+ &.selected {
+ pointer-events: none;
+ outline: solid 2px $color-palette-primary-500;
+ background-color: transparent;
+
+ // Buttons and actions remain interactive
+ .add-button-top,
+ .add-button-bottom,
+ .actions {
+ pointer-events: all;
+ }
+ }
}
.actions {
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.spec.ts
index f531d7ca0d73..03398c05a67f 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.spec.ts
@@ -128,6 +128,13 @@ describe('DotUveContentletToolsComponent', () => {
hostComponent = spectator.component;
component = spectator.query(DotUveContentletToolsComponent);
spectator.detectChanges();
+
+ // Select the contentlet by clicking the hover bounds
+ const hoverBounds = spectator.query(byTestId('bounds-hover'));
+ if (hoverBounds) {
+ spectator.click(hoverBounds);
+ spectator.detectChanges();
+ }
});
describe('Rendering', () => {
@@ -136,7 +143,7 @@ describe('DotUveContentletToolsComponent', () => {
});
it('should render bounds container with correct styles', () => {
- const bounds = spectator.query(byTestId('bounds'));
+ const bounds = spectator.query(byTestId('bounds-selected'));
expect(bounds).toBeTruthy();
const styles = (bounds as HTMLElement).style;
@@ -163,6 +170,13 @@ describe('DotUveContentletToolsComponent', () => {
hostComponent.contentletArea = MOCK_EMPTY_CONTENTLET_AREA;
spectator.detectChanges();
+ // Re-select after changing contentletArea
+ const hoverBounds = spectator.query(byTestId('bounds-hover'));
+ if (hoverBounds) {
+ spectator.click(hoverBounds);
+ spectator.detectChanges();
+ }
+
const actions = spectator.query(byTestId('actions'));
expect(actions).toBeFalsy();
});
@@ -171,6 +185,13 @@ describe('DotUveContentletToolsComponent', () => {
hostComponent.contentletArea = MOCK_EMPTY_CONTENTLET_AREA;
spectator.detectChanges();
+ // Re-select after changing contentletArea
+ const hoverBounds = spectator.query(byTestId('bounds-hover'));
+ if (hoverBounds) {
+ spectator.click(hoverBounds);
+ spectator.detectChanges();
+ }
+
const addBottomButton = spectator.query(byTestId('add-bottom-button'));
expect(addBottomButton).toBeFalsy();
});
@@ -185,11 +206,25 @@ describe('DotUveContentletToolsComponent', () => {
it('should NOT render edit VTL button when no vtl files', () => {
const areaWithoutVtl = {
...MOCK_CONTENTLET_AREA,
- payload: { ...MOCK_CONTENTLET_AREA.payload, vtlFiles: undefined }
+ x: MOCK_CONTENTLET_AREA.x + 1, // Change position to make it different
+ payload: {
+ ...MOCK_CONTENTLET_AREA.payload,
+ contentlet: {
+ ...MOCK_CONTENTLET_AREA.payload.contentlet,
+ identifier: 'different-contentlet-id'
+ },
+ vtlFiles: undefined
+ }
};
hostComponent.contentletArea = areaWithoutVtl;
spectator.detectChanges();
+ // Re-select after changing contentletArea
+ const hoverBounds = spectator.query(byTestId('bounds-hover'));
+ expect(hoverBounds).toBeTruthy();
+ spectator.click(hoverBounds);
+ spectator.detectChanges();
+
const editVtlButton = spectator.query(byTestId('edit-vtl-button'));
expect(editVtlButton).toBeFalsy();
});
@@ -483,18 +518,32 @@ describe('DotUveContentletToolsComponent', () => {
it('should return undefined when no vtl files', () => {
const areaWithoutVtl = {
...MOCK_CONTENTLET_AREA,
- payload: { ...MOCK_CONTENTLET_AREA.payload, vtlFiles: undefined }
+ x: MOCK_CONTENTLET_AREA.x + 1, // Change position to make it different
+ payload: {
+ ...MOCK_CONTENTLET_AREA.payload,
+ contentlet: {
+ ...MOCK_CONTENTLET_AREA.payload.contentlet,
+ identifier: 'different-contentlet-id-2'
+ },
+ vtlFiles: undefined
+ }
};
hostComponent.contentletArea = areaWithoutVtl;
spectator.detectChanges();
+ // Re-select after changing contentletArea
+ const hoverBounds = spectator.query(byTestId('bounds-hover'));
+ expect(hoverBounds).toBeTruthy();
+ spectator.click(hoverBounds);
+ spectator.detectChanges();
+
expect(component.vtlMenuItems()).toBeUndefined();
});
});
describe('boundsStyles', () => {
it('should apply correct inline styles from contentletArea dimensions', () => {
- const bounds = spectator.query(byTestId('bounds')) as HTMLElement;
+ const bounds = spectator.query(byTestId('bounds-selected')) as HTMLElement;
expect(bounds.style.left).toBe('100px');
expect(bounds.style.top).toBe('200px');
@@ -503,12 +552,31 @@ describe('DotUveContentletToolsComponent', () => {
});
it('should default to 0px when contentletArea values are undefined', () => {
- const areaWithUndefined = { ...MOCK_CONTENTLET_AREA, x: undefined };
- hostComponent.contentletArea = areaWithUndefined as ContentletArea;
+ // Create area without x property to test undefined handling
+ const { x, ...rest } = MOCK_CONTENTLET_AREA;
+ const areaWithUndefined = {
+ ...rest,
+ payload: {
+ ...rest.payload,
+ contentlet: {
+ ...rest.payload.contentlet,
+ identifier: 'different-contentlet-id-3'
+ }
+ }
+ } as ContentletArea;
+ hostComponent.contentletArea = areaWithUndefined;
spectator.detectChanges();
- const bounds = spectator.query(byTestId('bounds')) as HTMLElement;
- expect(bounds.style.left).toBe('0px');
+ // Re-select after changing contentletArea
+ const hoverBounds = spectator.query(byTestId('bounds-hover'));
+ expect(hoverBounds).toBeTruthy();
+ spectator.click(hoverBounds);
+ spectator.detectChanges();
+
+ const bounds = spectator.query(byTestId('bounds-selected')) as HTMLElement;
+ expect(bounds).toBeTruthy();
+ // The computed uses ?? operator, so undefined x should default to 0
+ expect(parseInt(bounds.style.left)).toBe(0);
});
});
@@ -534,6 +602,13 @@ describe('DotUveContentletToolsComponent', () => {
hostComponent.contentletArea = areaWithoutContentlet;
spectator.detectChanges();
+ // Re-select after changing contentletArea
+ const hoverBounds = spectator.query(byTestId('bounds-hover'));
+ if (hoverBounds) {
+ spectator.click(hoverBounds);
+ spectator.detectChanges();
+ }
+
const payload = component.dragPayload();
expect(payload).toEqual({
container: null,
@@ -623,6 +698,13 @@ describe('DotUveContentletToolsComponent', () => {
hostComponent.contentletArea = MOCK_EMPTY_CONTENTLET_AREA;
spectator.detectChanges();
+ // Re-select after changing contentletArea
+ const hoverBounds = spectator.query(byTestId('bounds-hover'));
+ if (hoverBounds) {
+ spectator.click(hoverBounds);
+ spectator.detectChanges();
+ }
+
const paletteButton = spectator.query(byTestId('palette-button'));
expect(paletteButton).toBeFalsy();
});
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.ts
index 6562884f0bb4..203e521fa3d2 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-contentlet-tools/dot-uve-contentlet-tools.component.ts
@@ -20,7 +20,7 @@ import { TooltipModule } from 'primeng/tooltip';
import { DotMessageService } from '@dotcms/data-access';
import { DotMessagePipe } from '@dotcms/ui';
-import { ActionPayload, ContentletPayload, VTLFile } from '../../../shared/models';
+import { ActionPayload, ClientData, ContentletPayload, VTLFile } from '../../../shared/models';
import { ContentletArea } from '../ema-page-dropzone/types';
/**
@@ -46,10 +46,16 @@ export class DotUveContentletToolsComponent {
*/
readonly isEnterprise = input(false, { alias: 'isEnterprise' });
/**
- * Positional and contextual data for the currently hovered/selected contentlet.
- * Drives the floating toolbar's placement and the payload for all actions.
+ * Positional and contextual data for the currently hovered contentlet.
+ * This comes from the iframe mouse enter events.
*/
readonly contentletArea = input.required({ alias: 'contentletArea' });
+
+ /**
+ * Internal state tracking the selected/clicked contentlet.
+ * This persists even when hovering different contentlets.
+ */
+ protected readonly selectedContentletArea = signal(null);
/**
* Controls whether the delete-content action is allowed.
* When `false`, the delete button is disabled and a tooltip explaining why is shown.
@@ -85,6 +91,9 @@ export class DotUveContentletToolsComponent {
type: 'content' | 'form' | 'widget';
payload: ActionPayload;
}>();
+
+
+ readonly outputSelectedContentlet = output>();
/**
* Emitted when the contentlet is selected from the tools (for example, via a drag handle).
*/
@@ -104,7 +113,49 @@ export class DotUveContentletToolsComponent {
protected readonly buttonPosition = signal<'after' | 'before'>('after');
/**
- * Snapshot of the area payload augmented with the current insert position.
+ * Helper function to compare two contentlets by their identifier.
+ * Returns true if they represent the same contentlet.
+ */
+ protected isSameContentlet(area1: ContentletArea | null, area2: ContentletArea | null): boolean {
+ if (!area1 || !area2) {
+ return false;
+ }
+ const id1 = area1.payload?.contentlet?.identifier;
+ const id2 = area2.payload?.contentlet?.identifier;
+ return id1 !== undefined && id1 === id2;
+ }
+
+ /**
+ * Computed property to determine if the hovered contentlet is different from the selected one.
+ */
+ readonly isHoveredDifferentFromSelected = computed(() => {
+ const hovered = this.contentletArea();
+ const selected = this.selectedContentletArea();
+ if (!hovered || !selected) {
+ return true;
+ }
+ return !this.isSameContentlet(hovered, selected);
+ });
+
+ /**
+ * Computed property to determine if we should show the hover overlay.
+ * Show when hovered exists and is different from selected.
+ */
+ readonly showHoverOverlay = computed(() => {
+ const hovered = this.contentletArea();
+ return hovered !== null && this.isHoveredDifferentFromSelected();
+ });
+
+ /**
+ * Computed property to determine if we should show the selected overlay.
+ * Show when selected exists.
+ */
+ readonly showSelectedOverlay = computed(() => {
+ return this.selectedContentletArea() !== null;
+ });
+
+ /**
+ * Snapshot of the area payload augmented with the current insert position for hovered contentlet.
* Consumers can dispatch the returned object directly.
*/
readonly contentContext = computed(() => ({
@@ -112,6 +163,17 @@ export class DotUveContentletToolsComponent {
position: this.buttonPosition()
}));
+ /**
+ * Snapshot of the area payload augmented with the current insert position for selected contentlet.
+ */
+ readonly selectedContentContext = computed(() => {
+ const selected = this.selectedContentletArea();
+ return {
+ ...selected?.payload,
+ position: this.buttonPosition()
+ };
+ });
+
/**
* Whether there is at least one VTL file associated with the current contentlet.
* Used to determine if the VTL menu should be rendered/enabled.
@@ -126,6 +188,20 @@ export class DotUveContentletToolsComponent {
return this.contentContext()?.contentlet?.identifier === 'TEMP_EMPTY_CONTENTLET';
});
+ /**
+ * Whether the selected container is represented by a temporary "empty" contentlet.
+ */
+ readonly isSelectedContainerEmpty = computed(() => {
+ return this.selectedContentContext()?.contentlet?.identifier === 'TEMP_EMPTY_CONTENTLET';
+ });
+
+ /**
+ * Whether there is at least one VTL file associated with the selected contentlet.
+ */
+ readonly selectedHasVtlFiles = computed(() => {
+ return !!this.selectedContentContext()?.vtlFiles?.length;
+ });
+
/**
* Tooltip key for the delete button.
* Returns an i18n key when delete is disabled, or `null` when the button is enabled.
@@ -141,33 +217,36 @@ export class DotUveContentletToolsComponent {
/**
* Menu items used for adding new content to the layout (content, widget, and optionally form).
* Items are localized and wired so that selecting them emits `addContent`.
+ * Uses selected context when available, otherwise falls back to hovered context.
*/
readonly menuItems = computed(() => {
+ const context = this.selectedContentletArea() ? this.selectedContentContext() : this.contentContext();
return [
{
label: this.#dotMessageService.get('content'),
command: () =>
- this.addContent.emit({ type: 'content', payload: this.contentContext() })
+ this.addContent.emit({ type: 'content', payload: context })
},
{
label: this.#dotMessageService.get('Widget'),
command: () =>
- this.addContent.emit({ type: 'widget', payload: this.contentContext() })
+ this.addContent.emit({ type: 'widget', payload: context })
},
{
label: this.#dotMessageService.get('form'),
command: () =>
- this.addContent.emit({ type: 'form', payload: this.contentContext() })
+ this.addContent.emit({ type: 'form', payload: context })
}
];
});
/**
- * Menu items corresponding to the VTL files of the current contentlet.
+ * Menu items corresponding to the VTL files of the selected contentlet.
* Each item represents a file and triggers the `editVTL` output when clicked.
*/
readonly vtlMenuItems = computed(() => {
- const { vtlFiles } = this.contentContext() ?? {};
+ const context = this.selectedContentletArea() ? this.selectedContentContext() : this.contentContext();
+ const { vtlFiles } = context ?? {};
return vtlFiles?.map((file) => ({
label: file?.name,
command: () => this.editVTL.emit(file)
@@ -175,10 +254,10 @@ export class DotUveContentletToolsComponent {
});
/**
- * Inline styles that bound the floating toolbar to the visual rectangle of the contentlet.
+ * Inline styles that bound the floating toolbar to the visual rectangle of the hovered contentlet.
* The toolbar is absolutely positioned based on the coordinates in `contentletArea`.
*/
- protected readonly boundsStyles = computed(() => {
+ protected readonly hoverBoundsStyles = computed(() => {
const contentletArea = this.contentletArea();
return {
left: `${contentletArea?.x ?? 0}px`,
@@ -189,12 +268,27 @@ export class DotUveContentletToolsComponent {
});
/**
- * Describes the draggable payload for the current contentlet controls.
+ * Inline styles that bound the floating toolbar to the visual rectangle of the selected contentlet.
+ * The toolbar is absolutely positioned based on the coordinates in `selectedContentletArea`.
+ */
+ protected readonly selectedBoundsStyles = computed(() => {
+ const selectedArea = this.selectedContentletArea();
+ return {
+ left: `${selectedArea?.x ?? 0}px`,
+ top: `${selectedArea?.y ?? 0}px`,
+ width: `${selectedArea?.width ?? 0}px`,
+ height: `${selectedArea?.height ?? 0}px`
+ };
+ });
+
+ /**
+ * Describes the draggable payload for the selected contentlet controls.
* Returns null-like values when the source data is incomplete, allowing
* the template to disable the drag affordance gracefully.
*/
readonly dragPayload = computed(() => {
- const { container, contentlet } = this.contentContext();
+ const selectedContext = this.selectedContentContext();
+ const { container, contentlet } = selectedContext;
if (!contentlet) {
return {
@@ -238,4 +332,21 @@ export class DotUveContentletToolsComponent {
this.menu()?.hide();
this.menuVTL()?.hide();
}
+
+ protected handleClick(): void {
+ const hoveredArea = this.contentletArea();
+
+ if (!hoveredArea) {
+ return;
+ }
+
+ // Set the hovered contentlet as selected
+ this.selectedContentletArea.set(hoveredArea);
+
+ // Emit the selection event
+ this.outputSelectedContentlet.emit({
+ container: hoveredArea.payload.container,
+ contentlet: hoveredArea.payload.contentlet
+ });
+ }
}
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.html
new file mode 100644
index 000000000000..4f71f7159796
--- /dev/null
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.html
@@ -0,0 +1,13 @@
+
+
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.scss b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.scss
new file mode 100644
index 000000000000..ea15c3526947
--- /dev/null
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.scss
@@ -0,0 +1,13 @@
+:host {
+ display: block;
+ position: relative;
+}
+
+iframe {
+ border: none;
+ display: block;
+ width: 100%;
+ height: auto;
+ min-height: 1px;
+}
+
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.spec.ts
new file mode 100644
index 000000000000..9696c64287f6
--- /dev/null
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.spec.ts
@@ -0,0 +1,545 @@
+import { createComponentFactory, Spectator, byTestId } from '@ngneat/spectator/jest';
+import { MockProvider } from 'ng-mocks';
+import { of } from 'rxjs';
+
+import { signal } from '@angular/core';
+
+import {
+ DotMessageService,
+ DotSeoMetaTagsService,
+ DotSeoMetaTagsUtilService
+} from '@dotcms/data-access';
+import { SeoMetaTagsResult, SeoMetaTags } from '@dotcms/dotcms-models';
+
+import { DotUveIframeComponent } from './dot-uve-iframe.component';
+
+import { InlineEditService } from '../../../services/inline-edit/inline-edit.service';
+import { UVEStore } from '../../../store/dot-uve.store';
+import { PageType } from '../../../store/models';
+import { SDK_EDITOR_SCRIPT_SOURCE } from '../../../utils';
+
+describe('DotUveIframeComponent', () => {
+ let spectator: Spectator;
+ let component: DotUveIframeComponent;
+ let mockUVEStore: InstanceType;
+ let mockDotSeoMetaTagsService: DotSeoMetaTagsService;
+ let mockDotSeoMetaTagsUtilService: DotSeoMetaTagsUtilService;
+ let mockInlineEditService: InlineEditService;
+
+ const mockPageRender = 'Test Content';
+ const mockSeoResults: SeoMetaTagsResult[] = [
+ {
+ key: 'og:title',
+ title: 'title',
+ keyIcon: 'icon',
+ keyColor: 'color',
+ items: [],
+ sort: 1
+ }
+ ];
+
+ const mockOgTags: SeoMetaTags = {
+ 'og:title': 'Test OG Title',
+ 'og:description': 'Test OG Description',
+ 'og:image': 'https://example.com/image.jpg'
+ };
+
+ const createComponent = createComponentFactory({
+ component: DotUveIframeComponent,
+ providers: [
+ MockProvider(DotMessageService, {
+ get: (key: string) => {
+ const messages: Record = {
+ 'editpage.container.is.empty': 'Container is empty'
+ };
+ return messages[key] || key;
+ }
+ }),
+ MockProvider(DotSeoMetaTagsService, {
+ getMetaTagsResults: jest.fn().mockReturnValue(of(mockSeoResults))
+ }),
+ MockProvider(DotSeoMetaTagsUtilService, {
+ getMetaTags: jest.fn().mockReturnValue(mockOgTags)
+ }),
+ MockProvider(InlineEditService, {
+ injectInlineEdit: jest.fn(),
+ removeInlineEdit: jest.fn()
+ }),
+ MockProvider(UVEStore, {
+ $pageRender: signal(mockPageRender),
+ $enableInlineEdit: signal(false),
+ pageType: signal(PageType.HEADLESS),
+ setOgTags: jest.fn(),
+ setOGTagResults: jest.fn()
+ })
+ ]
+ });
+
+ beforeEach(() => {
+ spectator = createComponent({
+ props: {
+ src: 'https://example.com/test',
+ title: 'Test Iframe',
+ pointerEvents: 'auto',
+ opacity: 1,
+ host: '*'
+ }
+ });
+ component = spectator.component;
+
+ mockUVEStore = spectator.inject(UVEStore, true);
+ mockDotSeoMetaTagsService = spectator.inject(DotSeoMetaTagsService, true);
+ mockDotSeoMetaTagsUtilService = spectator.inject(DotSeoMetaTagsUtilService, true);
+ mockInlineEditService = spectator.inject(InlineEditService, true);
+ });
+
+ describe('Component Creation', () => {
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should set inputs correctly', () => {
+ expect(component.src).toBe('https://example.com/test');
+ expect(component.title).toBe('Test Iframe');
+ expect(component.pointerEvents).toBe('auto');
+ expect(component.opacity).toBe(1);
+ expect(component.host).toBe('*');
+ });
+ });
+
+ describe('Iframe Element', () => {
+ it('should render iframe with correct attributes', () => {
+ const iframe = spectator.query(byTestId('iframe')) as HTMLIFrameElement;
+ expect(iframe).toBeTruthy();
+ expect(iframe.getAttribute('title')).toBe('Test Iframe');
+ expect(iframe.getAttribute('sandbox')).toBe('allow-scripts allow-same-origin allow-forms');
+ });
+
+ it('should apply ngStyle correctly', () => {
+ const iframe = spectator.query(byTestId('iframe')) as HTMLIFrameElement;
+ expect(iframe.style.pointerEvents).toBe('auto');
+ expect(iframe.style.opacity).toBe('1');
+ });
+
+ it('should update styles when inputs change', () => {
+ spectator.setInput('pointerEvents', 'none');
+ spectator.setInput('opacity', 0.5);
+ spectator.detectChanges();
+
+ const iframe = spectator.query(byTestId('iframe')) as HTMLIFrameElement;
+ expect(iframe.style.pointerEvents).toBe('none');
+ expect(iframe.style.opacity).toBe('0.5');
+ });
+
+ it('should have contentWindow getter', () => {
+ const iframe = spectator.query(byTestId('iframe')) as HTMLIFrameElement;
+ // Mock contentWindow
+ Object.defineProperty(iframe, 'contentWindow', {
+ value: window,
+ writable: true
+ });
+
+ expect(component.contentWindow).toBeTruthy();
+ });
+
+ it('should return null if iframe is not available', () => {
+ component.iframe = undefined as any;
+ expect(component.contentWindow).toBeNull();
+ expect(component.iframeElement).toBeNull();
+ });
+
+ it('should have iframeElement getter', () => {
+ const iframe = spectator.query(byTestId('iframe')) as HTMLIFrameElement;
+ expect(component.iframeElement).toBe(iframe);
+ });
+ });
+
+ describe('onIframeLoad - HEADLESS page type', () => {
+ beforeEach(() => {
+ mockUVEStore.pageType = signal(PageType.HEADLESS);
+ });
+
+ it('should emit load event for HEADLESS page type', () => {
+ const loadSpy = jest.spyOn(component.load, 'emit');
+ component.onIframeLoad();
+ expect(loadSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should not insert page content for HEADLESS page type', () => {
+ const insertSpy = jest.spyOn(component as any, 'insertPageContent');
+ component.onIframeLoad();
+ expect(insertSpy).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('onIframeLoad - TRADITIONAL page type', () => {
+ let mockIframe: HTMLIFrameElement;
+ let mockDoc: Document;
+ let mockWindow: Window;
+
+ beforeEach(() => {
+ mockUVEStore.pageType = signal(PageType.TRADITIONAL);
+ mockUVEStore.$pageRender = signal(mockPageRender);
+ mockUVEStore.$enableInlineEdit = signal(false);
+
+ // Create mock iframe with contentDocument and contentWindow
+ mockIframe = document.createElement('iframe');
+ mockDoc = document.implementation.createHTMLDocument();
+ mockWindow = {
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn()
+ } as unknown as Window;
+
+ Object.defineProperty(mockIframe, 'contentDocument', {
+ value: mockDoc,
+ writable: true
+ });
+ Object.defineProperty(mockIframe, 'contentWindow', {
+ value: mockWindow,
+ writable: true
+ });
+
+ component.iframe = { nativeElement: mockIframe } as any;
+ });
+
+ it('should emit load event for TRADITIONAL page type', () => {
+ const loadSpy = jest.spyOn(component.load, 'emit');
+ component.onIframeLoad();
+ expect(loadSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should insert page content for TRADITIONAL page type', () => {
+ const insertSpy = jest.spyOn(component as any, 'insertPageContent');
+ component.onIframeLoad();
+ expect(insertSpy).toHaveBeenCalledWith(mockPageRender, false);
+ });
+
+ it('should set SEO data for TRADITIONAL page type', () => {
+ const setSeoSpy = jest.spyOn(component as any, 'setSeoData');
+ component.onIframeLoad();
+ expect(setSeoSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should write content to iframe document', () => {
+ const openSpy = jest.spyOn(mockDoc, 'open');
+ const writeSpy = jest.spyOn(mockDoc, 'write');
+ const closeSpy = jest.spyOn(mockDoc, 'close');
+
+ component.onIframeLoad();
+
+ expect(openSpy).toHaveBeenCalledTimes(1);
+ expect(writeSpy).toHaveBeenCalledTimes(1);
+ expect(closeSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should not insert content if iframe element is not available', () => {
+ component.iframe = undefined as any;
+ const openSpy = jest.spyOn(mockDoc, 'open');
+ component.onIframeLoad();
+ expect(openSpy).not.toHaveBeenCalled();
+ });
+
+ it('should not insert content if contentDocument is not available', () => {
+ Object.defineProperty(mockIframe, 'contentDocument', {
+ value: null,
+ writable: true
+ });
+ const openSpy = jest.spyOn(mockDoc, 'open');
+ component.onIframeLoad();
+ expect(openSpy).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('insertPageContent - Code Injection', () => {
+ let mockIframe: HTMLIFrameElement;
+ let mockDoc: Document;
+ let mockWindow: Window;
+ let writeSpy: jest.SpyInstance;
+
+ beforeEach(() => {
+ mockIframe = document.createElement('iframe');
+ mockDoc = document.implementation.createHTMLDocument();
+ mockWindow = {
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn()
+ } as unknown as Window;
+
+ // Spy on document write method
+ writeSpy = jest.spyOn(mockDoc, 'write').mockImplementation(() => {});
+
+ Object.defineProperty(mockIframe, 'contentDocument', {
+ value: mockDoc,
+ writable: true
+ });
+ Object.defineProperty(mockIframe, 'contentWindow', {
+ value: mockWindow,
+ writable: true
+ });
+
+ component.iframe = { nativeElement: mockIframe } as any;
+ mockUVEStore.$enableInlineEdit = signal(false);
+ });
+
+ afterEach(() => {
+ writeSpy.mockRestore();
+ });
+
+ it('should inject editor script before closing body tag', () => {
+ const htmlWithBody = 'Content';
+ (component as any).insertPageContent(htmlWithBody, false);
+
+ const writtenContent = writeSpy.mock.calls[0][0];
+ expect(writtenContent).toContain(SDK_EDITOR_SCRIPT_SOURCE);
+ expect(writtenContent).toContain('
');
+ expect(writtenContent.indexOf(SDK_EDITOR_SCRIPT_SOURCE)).toBeLessThan(
+ writtenContent.indexOf('')
+ );
+ });
+
+ it('should inject editor script at end if no body tag exists', () => {
+ const htmlWithoutBody = '