From a1a4c7ed8fc631c649cfdf925e527c93abe9798f Mon Sep 17 00:00:00 2001 From: Kevin Davila <144152756+KevinDavilaDotCMS@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:10:58 -0500 Subject: [PATCH] fix(edit-page-2): Fixed layout tooltip and contentlet tools space (#28202) * Fixed both frontend issues * Added test case on tooltip and updated TestBed on EmaShell --------- Co-authored-by: KevinDavilaDotCMS --- .../dot-ema-shell.component.spec.ts | 117 +++++++++++++++--- .../dot-ema-shell/dot-ema-shell.component.ts | 8 +- .../ema-contentlet-tools.component.html | 4 +- 3 files changed, 109 insertions(+), 20 deletions(-) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts index e768a074794e..e9bb688d2f46 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts @@ -1,11 +1,12 @@ import { describe, expect } from '@jest/globals'; +import { ActivatedRouteStub } from '@ngneat/spectator'; import { SpectatorRouting, byTestId, createRoutingFactory } from '@ngneat/spectator/jest'; import { MockComponent } from 'ng-mocks'; import { of } from 'rxjs'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { By } from '@angular/platform-browser'; -import { ActivatedRoute, ActivatedRouteSnapshot, Router } from '@angular/router'; +import { ActivatedRoute, ActivatedRouteSnapshot, Router, UrlSegment } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; import { ConfirmationService, MessageService } from 'primeng/api'; @@ -59,6 +60,9 @@ describe('DotEmaShellComponent', () => { component: DotEmaShellComponent, imports: [RouterTestingModule, HttpClientTestingModule], detectChanges: false, + firstChild: new ActivatedRouteStub({ + url: [new UrlSegment('content', {})] + }), providers: [ { provide: SiteService, useClass: SiteServiceMock }, { @@ -352,7 +356,7 @@ describe('DotEmaShellComponent', () => { }); }); - describe('without read permission', () => { + describe('with advance template', () => { beforeEach(() => { spectator = createComponent({ providers: [ @@ -365,8 +369,8 @@ describe('DotEmaShellComponent', () => { title: 'hello world', identifier: '123', inode: '123', - canEdit: false, - canRead: false + canEdit: true, + canRead: true }, viewAs: { language: { @@ -379,7 +383,7 @@ describe('DotEmaShellComponent', () => { persona: DEFAULT_PERSONA }, site: mockSites[0], - template: { drawed: true } + template: { drawed: false } }); }, save() { @@ -406,17 +410,34 @@ describe('DotEmaShellComponent', () => { } ] }); - route = spectator.inject(ActivatedRoute); - jest.spyOn(route.snapshot, 'firstChild', 'get').mockReturnValue({ - routeConfig: { path: 'content' } - } as ActivatedRouteSnapshot); + + spectator.triggerNavigation({ + url: [], + queryParams: { + language_id: 1, + url: 'index', + 'com.dotmarketing.persona.id': 'modes.persona.no.persona' + }, + data: { + data: { + url: 'http://localhost:3000' + } + } + }); }); - it('should not render components', () => { - spectator.detectChanges(); - expect(spectator.query(EditEmaNavigationBarComponent)).toBeNull(); - expect(spectator.query(ToastModule)).toBeNull(); - expect(spectator.query(DotPageToolsSeoComponent)).toBeNull(); + describe('DOM', () => { + it('should have nav bar with layout disabled and tooltip', () => { + const navBarComponent = spectator.query(EditEmaNavigationBarComponent); + + expect(navBarComponent.items).toContainEqual({ + icon: 'pi-table', + label: 'editema.editor.navbar.layout', + href: 'layout', + isDisabled: true, + tooltip: 'editema.editor.navbar.layout.tooltip.cannot.edit.advanced.template' + }); + }); }); }); @@ -481,4 +502,72 @@ describe('DotEmaShellComponent', () => { expect(spectator.query(DotNotLicenseComponent)).toBeDefined(); }); }); + + describe('without read permission', () => { + beforeEach(() => { + spectator = createComponent({ + providers: [ + { + provide: DotPageApiService, + useValue: { + get() { + return of({ + page: { + title: 'hello world', + identifier: '123', + inode: '123', + canEdit: false, + canRead: false + }, + viewAs: { + language: { + id: 1, + language: 'English', + countryCode: 'US', + languageCode: 'EN', + country: 'United States' + }, + persona: DEFAULT_PERSONA + }, + site: mockSites[0], + template: { drawed: true } + }); + }, + save() { + return of({}); + }, + getPersonas() { + return of({ + entity: [DEFAULT_PERSONA], + pagination: { + totalEntries: 1, + perPage: 10, + page: 1 + } + }); + } + } + }, + { + provide: DotLicenseService, + useValue: { + isEnterprise: () => of(true), + canAccessEnterprisePortlet: () => of(true) + } + } + ] + }); + route = spectator.inject(ActivatedRoute); + jest.spyOn(route.snapshot, 'firstChild', 'get').mockReturnValue({ + routeConfig: { path: 'content' } + } as ActivatedRouteSnapshot); + }); + + it('should not render components', () => { + spectator.detectChanges(); + expect(spectator.query(EditEmaNavigationBarComponent)).toBeNull(); + expect(spectator.query(ToastModule)).toBeNull(); + expect(spectator.query(DotPageToolsSeoComponent)).toBeNull(); + }); + }); }); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts index ee4f3611de21..0359c6bde4bf 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts @@ -107,7 +107,7 @@ export class DotEmaShellComponent implements OnInit, OnDestroy { if ( isLayoutDisabled && - this.activatedRoute.snapshot?.firstChild?.routeConfig.path === 'layout' + this.activatedRoute.firstChild.snapshot.url[0].path === 'layout' ) { this.router.navigate(['./content'], { relativeTo: this.activatedRoute }); } @@ -124,9 +124,9 @@ export class DotEmaShellComponent implements OnInit, OnDestroy { label: 'editema.editor.navbar.layout', href: 'layout', isDisabled: isLayoutDisabled, - tooltip: isLayoutDisabled - ? 'editema.editor.navbar.layout.tooltip.cannot.edit.advanced.template' - : null + tooltip: templateDrawed + ? null + : 'editema.editor.navbar.layout.tooltip.cannot.edit.advanced.template' }, { icon: 'pi-sliders-h', diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html index 9e7be75ea158..f4d27661b08b 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html @@ -17,14 +17,14 @@ [ngStyle]="getActionPosition()" data-testId="actions"> @if (contentlet.payload.vtlFiles?.length) { + - - } +