diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
index bc71d713e5ca..835d9a334eab 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
@@ -27,7 +27,12 @@
- Experiments
+ @if ($toolbar().runningExperiment; as runningExperiment) {
+
+ }
+
Language
Persona
Workflows
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts
index c65e5925b441..a87708cecd5f 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts
@@ -14,7 +14,8 @@ import { LoginService } from '@dotcms/dotcms-js';
import {
DotExperimentsServiceMock,
DotLanguagesServiceMock,
- DotLicenseServiceMock
+ DotLicenseServiceMock,
+ getRunningExperimentMock
} from '@dotcms/utils-testing';
import { DotUveToolbarComponent } from './dot-uve-toolbar.component';
@@ -34,6 +35,7 @@ import {
sanitizeURL
} from '../../../utils';
import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
+import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
describe('DotUveToolbarComponent', () => {
let spectator: Spectator;
@@ -41,7 +43,11 @@ describe('DotUveToolbarComponent', () => {
const createComponent = createComponentFactory({
component: DotUveToolbarComponent,
- imports: [HttpClientTestingModule, MockComponent(DotEmaBookmarksComponent)],
+ imports: [
+ HttpClientTestingModule,
+ MockComponent(DotEmaBookmarksComponent),
+ MockComponent(DotEmaRunningExperimentComponent)
+ ],
providers: [
UVEStore,
provideHttpClientTesting(),
@@ -94,38 +100,39 @@ describe('DotUveToolbarComponent', () => {
siteId: pageAPIResponse?.site.identifier
});
+ const baseUVEToolbarState = {
+ editor: {
+ bookmarksUrl,
+ copyUrl: createFullURL(params, pageAPIResponse?.site.identifier),
+ apiUrl: `${'http://localhost'}${pageAPI}`
+ },
+ preview: null,
+ currentLanguage: pageAPIResponse?.viewAs.language,
+ urlContentMap: null,
+ runningExperiment: null,
+ workflowActionsInode: pageAPIResponse?.page.inode,
+ unlockButton: null,
+ showInfoDisplay: shouldShowInfoDisplay,
+ personaSelector: {
+ pageId: pageAPIResponse?.page.identifier,
+ value: pageAPIResponse?.viewAs.persona ?? DEFAULT_PERSONA
+ }
+ };
+
+ const baseUVEState = {
+ $uveToolbar: signal(baseUVEToolbarState),
+ setDevice: jest.fn(),
+ setSocialMedia: jest.fn(),
+ pageParams: signal(params),
+ pageAPIResponse: signal(MOCK_RESPONSE_VTL),
+ reloadCurrentPage: jest.fn(),
+ loadPageAsset: jest.fn()
+ };
+
describe('base state', () => {
beforeEach(() => {
spectator = createComponent({
- providers: [
- mockProvider(UVEStore, {
- $uveToolbar: signal({
- editor: {
- bookmarksUrl,
- copyUrl: createFullURL(params, pageAPIResponse?.site.identifier),
- apiUrl: `${'http://localhost'}${pageAPI}`
- },
- preview: null,
-
- currentLanguage: pageAPIResponse?.viewAs.language,
- urlContentMap: null,
- runningExperiment: null,
- workflowActionsInode: pageAPIResponse?.page.inode,
- unlockButton: null,
- showInfoDisplay: shouldShowInfoDisplay,
- personaSelector: {
- pageId: pageAPIResponse?.page.identifier,
- value: pageAPIResponse?.viewAs.persona ?? DEFAULT_PERSONA
- }
- }),
- setDevice: jest.fn(),
- setSocialMedia: jest.fn(),
- pageParams: signal(params),
- pageAPIResponse: signal(MOCK_RESPONSE_VTL),
- reloadCurrentPage: jest.fn(),
- loadPageAsset: jest.fn()
- })
- ]
+ providers: [mockProvider(UVEStore, { ...baseUVEState })]
});
messageService = spectator.inject(MessageService);
@@ -139,6 +146,12 @@ describe('DotUveToolbarComponent', () => {
});
});
+ describe('dot-ema-running-experiment', () => {
+ it('should be null', () => {
+ expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeNull();
+ });
+ });
+
it('should have preview button', () => {
expect(spectator.query(byTestId('uve-toolbar-preview'))).toBeTruthy();
});
@@ -178,10 +191,6 @@ describe('DotUveToolbarComponent', () => {
expect(spectator.query(byTestId('uve-toolbar-api-link'))).toBeTruthy();
});
- it('should have experiments button', () => {
- expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeTruthy();
- });
-
it('should have language selector', () => {
expect(spectator.query(byTestId('uve-toolbar-language-selector'))).toBeTruthy();
});
@@ -194,4 +203,26 @@ describe('DotUveToolbarComponent', () => {
expect(spectator.query(byTestId('uve-toolbar-workflow-actions'))).toBeTruthy();
});
});
+
+ describe('State changes', () => {
+ describe('Experiment is running', () => {
+ beforeEach(() => {
+ const state = {
+ ...baseUVEState,
+ $uveToolbar: signal({
+ ...baseUVEToolbarState,
+ runningExperiment: getRunningExperimentMock()
+ })
+ };
+
+ spectator = createComponent({
+ providers: [mockProvider(UVEStore, { ...state })]
+ });
+ });
+
+ it('should have experiment running component', () => {
+ expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeTruthy();
+ });
+ });
+ });
});
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts
index f35b0b432f3f..5e3869e11e1e 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts
@@ -10,6 +10,7 @@ import { DotMessageService } from '@dotcms/data-access';
import { UVEStore } from '../../../store/dot-uve.store';
import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
import { DotEmaInfoDisplayComponent } from '../dot-ema-info-display/dot-ema-info-display.component';
+import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
@Component({
selector: 'dot-uve-toolbar',
@@ -19,6 +20,7 @@ import { DotEmaInfoDisplayComponent } from '../dot-ema-info-display/dot-ema-info
ToolbarModule,
DotEmaBookmarksComponent,
DotEmaInfoDisplayComponent,
+ DotEmaRunningExperimentComponent,
ClipboardModule
],
templateUrl: './dot-uve-toolbar.component.html',
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts
index 1d9975d5b4cd..40f867dab0e5 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts
@@ -36,6 +36,7 @@ export interface DotPageApiResponse {
containers: DotPageContainerStructure;
urlContentMap?: DotCMSContentlet;
vanityUrl?: VanityUrl;
+ runningExperimentId?: string;
}
export interface DotPageApiParams {
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/load/withLoad.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/load/withLoad.ts
index a6823605dbea..ee3944fcec67 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/load/withLoad.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/load/withLoad.ts
@@ -100,10 +100,13 @@ export function withLoad() {
});
}
}),
- switchMap(({ pageAsset, isEnterprise, currentUser }) =>
- forkJoin({
+ switchMap(({ pageAsset, isEnterprise, currentUser }) => {
+ const experimentId =
+ pageParams?.experimentId ?? pageAsset?.runningExperimentId;
+
+ return forkJoin({
experiment: dotExperimentsService.getById(
- pageParams?.experimentId || DEFAULT_VARIANT_ID
+ experimentId ?? DEFAULT_VARIANT_ID
),
languages: dotLanguagesService.getLanguagesUsedPage(
pageAsset.page.identifier
@@ -145,8 +148,8 @@ export function withLoad() {
});
}
})
- )
- )
+ );
+ })
);
})
)