Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/30597-ftm-preview-mode-implement…
Browse files Browse the repository at this point in the history 
…-dropdown-and-render-future-contentlets-of-page' into issue-30937-tm-render-content-integration
  • Loading branch information
@fabrizzio-dotCMS
fabrizzio-dotCMS committed Dec 18, 2024
2 parents 5b3a44d + 28d9aad commit 581df65
Show file tree
Hide file tree
Showing 29 changed files with 323 additions and 120 deletions.
51 changes: 47 additions & 4 deletions ...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { DialogService } from 'primeng/dynamicdialog';
import { ToastModule } from 'primeng/toast';

import { CLIENT_ACTIONS } from '@dotcms/client';
import { CLIENT_ACTIONS, UVE_MODE } from '@dotcms/client';
import {
DotContentletLockerService,
DotExperimentsService,
Expand Down Expand Up @@ -115,7 +115,8 @@ const INITIAL_PAGE_PARAMS = {
language_id: 1,
url: 'index',
variantName: 'DEFAULT',
'com.dotmarketing.persona.id': 'modes.persona.no.persona'
'com.dotmarketing.persona.id': 'modes.persona.no.persona',
editorMode: UVE_MODE.EDIT
};

const BASIC_OPTIONS = {
Expand Down Expand Up @@ -320,7 +321,7 @@ describe('DotEmaShellComponent', () => {
expect(spyloadPageAsset).toHaveBeenCalledWith(INITIAL_PAGE_PARAMS);
expect(spyStoreLoadPage).toHaveBeenCalledWith(INITIAL_PAGE_PARAMS);
expect(spyLocation).toHaveBeenCalledWith(
'/?language_id=1&url=index&variantName=DEFAULT&com.dotmarketing.persona.id=modes.persona.no.persona'
'/?language_id=1&url=index&variantName=DEFAULT&com.dotmarketing.persona.id=modes.persona.no.persona&editorMode=edit'
);
});

Expand Down Expand Up @@ -376,7 +377,8 @@ describe('DotEmaShellComponent', () => {
language_id: 2,
url: 'my-awesome-page',
variantName: 'DEFAULT',
'com.dotmarketing.persona.id': 'SomeCoolDude'
'com.dotmarketing.persona.id': 'SomeCoolDude',
editorMode: UVE_MODE.EDIT
};

const url = router.createUrlTree([], { queryParams: newParams });
Expand Down Expand Up @@ -530,6 +532,47 @@ describe('DotEmaShellComponent', () => {
});
});

describe('Editor Mode', () => {
it('should set editorMode to EDIT when wrong editorMode is passed', () => {
const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
const params = {
...INITIAL_PAGE_PARAMS,
editorMode: 'WRONG'
};
overrideRouteSnashot(
activatedRoute,
SNAPSHOT_MOCK({ queryParams: params, data: UVE_CONFIG_MOCK(BASIC_OPTIONS) })
);
spectator.detectChanges();
expect(spyStoreLoadPage).toHaveBeenCalledWith({
...INITIAL_PAGE_PARAMS,
editorMode: UVE_MODE.EDIT
});
});

it('should add the current date if preview param is true and publishDate is not present', () => {
const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
const params = {
...INITIAL_PAGE_PARAMS,
editorMode: UVE_MODE.PREVIEW
};

// override the new Date() to return a fixed date
const fixedDate = new Date('2024-01-01');
jest.spyOn(global, 'Date').mockImplementation(() => fixedDate);

const data = UVE_CONFIG_MOCK(BASIC_OPTIONS);

overrideRouteSnashot(activatedRoute, SNAPSHOT_MOCK({ queryParams: params, data }));

spectator.detectChanges();
expect(spyStoreLoadPage).toHaveBeenCalledWith({
...params,
publishDate: fixedDate.toISOString()
});
});
});

describe('Site Changes', () => {
it('should trigger a navigate to /pages when site changes', async () => {
const navigate = jest.spyOn(router, 'navigate');
Expand Down
15 changes: 12 additions & 3 deletions core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { ToastModule } from 'primeng/toast';

import { skip } from 'rxjs/operators';

import { UVE_MODE } from '@dotcms/client';
import {
DotESContentService,
DotExperimentsService,
Expand All @@ -30,10 +31,10 @@ import { EditEmaNavigationBarComponent } from './components/edit-ema-navigation-

import { DotEmaDialogComponent } from '../components/dot-ema-dialog/dot-ema-dialog.component';
import { DotActionUrlService } from '../services/dot-action-url/dot-action-url.service';
import { DotPageApiParams, DotPageApiService } from '../services/dot-page-api.service';
import { DotPageApiService } from '../services/dot-page-api.service';
import { WINDOW } from '../shared/consts';
import { NG_CUSTOM_EVENTS } from '../shared/enums';
import { DialogAction } from '../shared/models';
import { DialogAction, DotPageAssetParams } from '../shared/models';
import { UVEStore } from '../store/dot-uve.store';
import {
checkClientHostAccess,
Expand Down Expand Up @@ -201,7 +202,7 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
* @return {*} {DotPageApiParams}
* @memberof DotEmaShellComponent
*/
#getPageParams(): DotPageApiParams {
#getPageParams(): DotPageAssetParams {
const { queryParams, data } = this.#activatedRoute.snapshot;
const uveConfig = data?.uveConfig;
const allowedDevURLs = uveConfig?.options?.allowedDevURLs;
Expand All @@ -218,6 +219,14 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
params.clientHost = uveConfig.url;
}

if (params.editorMode !== UVE_MODE.EDIT && params.editorMode !== UVE_MODE.PREVIEW) {
params.editorMode = UVE_MODE.EDIT;
}

if (params.editorMode === UVE_MODE.PREVIEW && !params.publishDate) {
params.publishDate = new Date().toISOString();
}

return params;
}

Expand Down
25 changes: 11 additions & 14 deletions ...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,18 @@

@if (preview) {
<div class="p-toolbar-group-center">
<div>
<p-button
icon="pi pi-chevron-left"
styleClass="p-button-text p-button-sm"
data-testId="arrow-left" />
<p-button
icon="pi pi-chevron-right"
styleClass="p-button-text p-button-sm"
data-testId="arrow-right" />
</div>
<p-calendar
inputStyleClass="p-inputtext-sm"
[(ngModel)]="date"
[(ngModel)]="$previewDate"
[showTime]="true"
[hourFormat]="'12'"
[minDate]="CURRENT_DATE"
[readonlyInput]="true" />
<p-chip styleClass="uve-toolbar-chips" label="Today" alt="Page Day" />
<p-button
styleClass="uve-toolbar-chips"
[label]="'Today' | dm"
alt="Page Day"
(click)="triggerPreviewMode()" />
</div>
}

Expand Down Expand Up @@ -62,7 +59,7 @@
icon="pi pi-eye"
styleClass="p-button-text p-button-sm"
data-testId="uve-toolbar-preview"
(click)="setPreviewMode()" />
(click)="triggerPreviewMode()" />

<dot-ema-bookmarks [url]="$toolbar().editor.bookmarksUrl" />

Expand All @@ -89,7 +86,7 @@
<p-button
icon="pi pi-times"
styleClass="p-button-text p-button-sm"
(click)="setEditMode()"
(click)="triggerEditMode()"
data-testId="close-preview-mode" />

<div class="vertical-divider"></div>
Expand Down
12 changes: 5 additions & 7 deletions ...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,17 @@
.uve-toolbar {
padding: 0 $spacing-4;
transition: padding 0.2s ease;
border-color: $color-palette-primary-200;
border-top: 1px solid transparent; // Avoid jump
}

.uve-toolbar-preview {
border-top-color: $color-palette-primary-200;
padding-inline: $spacing-5;
}

.p-chip.uve-toolbar-chips {
.p-button.uve-toolbar-chips,
.p-button.uve-toolbar-chips:hover,
.p-button.uve-toolbar-chips:focus {
height: $field-height-sm;
background-color: $color-palette-primary-op-10;
border-color: $color-palette-primary-op-10;
color: var(--color-palette-primary-500);
cursor: pointer;
}
}

Expand Down
45 changes: 42 additions & 3 deletions ...tlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { By } from '@angular/platform-browser';

import { ConfirmationService, MessageService } from 'primeng/api';

import { UVE_MODE } from '@dotcms/client';
import {
DotExperimentsService,
DotLanguagesService,
Expand Down Expand Up @@ -103,6 +104,9 @@ describe('DotUveToolbarComponent', () => {
let messageService: MessageService;
let confirmationService: ConfirmationService;

const fixedDate = new Date('2024-01-01');
jest.spyOn(global, 'Date').mockImplementation(() => fixedDate);

const createComponent = createComponentFactory({
component: DotUveToolbarComponent,
imports: [
Expand Down Expand Up @@ -249,7 +253,10 @@ describe('DotUveToolbarComponent', () => {

spectator.click(byTestId('uve-toolbar-preview'));

expect(spy).toHaveBeenCalledWith({ preview: 'true' });
expect(spy).toHaveBeenCalledWith({
editorMode: UVE_MODE.PREVIEW,
publishDate: fixedDate.toISOString()
});
});
});

Expand Down Expand Up @@ -378,7 +385,10 @@ describe('DotUveToolbarComponent', () => {
beforeEach(() => {
spectator = createComponent({
providers: [
mockProvider(UVEStore, { ...baseUVEState, $isPreviewMode: signal(true) })
mockProvider(UVEStore, {
...baseUVEState,
$isPreviewMode: signal(true)
})
]
});

Expand All @@ -396,27 +406,56 @@ describe('DotUveToolbarComponent', () => {
spectator.click(byTestId('close-preview-mode'));

spectator.detectChanges();
expect(spy).toHaveBeenCalledWith({ preview: null });
expect(spy).toHaveBeenCalledWith({ editorMode: null, publishDate: null });
});

it('should call store.loadPageAsset when datePreview model is updated', () => {
const spy = jest.spyOn(store, 'loadPageAsset');

spectator.debugElement.componentInstance.$previewDate.set(new Date('2024-02-01'));
spectator.detectChanges();

expect(spy).toHaveBeenCalledWith({
editorMode: UVE_MODE.PREVIEW,
publishDate: new Date('2024-02-01').toISOString()
});
});

it('should call store.loadPageAsset with currentDate when datePreview model is updated with a past date', () => {
const spy = jest.spyOn(store, 'loadPageAsset');

spectator.debugElement.componentInstance.$previewDate.set(new Date('2023-02-01'));
spectator.detectChanges();

expect(spy).toHaveBeenCalledWith({
editorMode: UVE_MODE.PREVIEW,
publishDate: fixedDate.toISOString()
});
});
});

it('should have desktop button', () => {
spectator.detectChanges();
expect(spectator.query(byTestId('desktop-preview'))).toBeTruthy();
});

it('should have mobile button', () => {
spectator.detectChanges();
expect(spectator.query(byTestId('mobile-preview'))).toBeTruthy();
});

it('should have tablet button', () => {
spectator.detectChanges();
expect(spectator.query(byTestId('tablet-preview'))).toBeTruthy();
});

it('should have more devices button', () => {
spectator.detectChanges();
expect(spectator.query(byTestId('more-devices-preview'))).toBeTruthy();
});

it('should not have experiments', () => {
spectator.detectChanges();
expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeFalsy();
});

Expand Down
Loading

0 comments on commit 581df65

Please sign in to comment.