Skip to content

Commit

Permalink
chore: fix tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@rjvelazco
rjvelazco committed Jan 3, 2025
1 parent ff8cc70 commit 7e1df55
Show file tree
Hide file tree
Showing 10 changed files with 180 additions and 187 deletions.
8 changes: 4 additions & 4 deletions core-web/libs/dotcms-models/src/lib/meta-tags-model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,19 +160,19 @@ export const SEO_TAGS = [
];

export const socialMediaTiles: Record<SOCIAL_MEDIA_TYPES, SocialMediaOption> = {
[SEO_MEDIA_TYPES.FACEBOOK]: {
[SOCIAL_MEDIA_TYPES.FACEBOOK]: {
label: 'Facebook',
value: SEO_MEDIA_TYPES.FACEBOOK,
icon: 'pi pi-facebook',
description: 'seo.rules.media.preview.tile'
},
[SEO_MEDIA_TYPES.TWITTER]: {
[SOCIAL_MEDIA_TYPES.TWITTER]: {
label: 'X (Formerly Twitter)',
value: SEO_MEDIA_TYPES.TWITTER,
icon: 'pi pi-twitter',
description: 'seo.rules.media.preview.tile'
},
[SEO_MEDIA_TYPES.LINKEDIN]: {
[SOCIAL_MEDIA_TYPES.LINKEDIN]: {
label: 'Linkedin',
value: SEO_MEDIA_TYPES.LINKEDIN,
icon: 'pi pi-linkedin',
Expand All @@ -181,7 +181,7 @@ export const socialMediaTiles: Record<SOCIAL_MEDIA_TYPES, SocialMediaOption> = {
};

export const searchEngineTile: Record<SEARCH_ENGINE_TYPES, SocialMediaOption> = {
[SEO_MEDIA_TYPES.GOOGLE]: {
[SEARCH_ENGINE_TYPES.GOOGLE]: {
label: 'Google',
value: SEO_MEDIA_TYPES.GOOGLE,
icon: 'pi pi-google',
Expand Down
8 changes: 4 additions & 4 deletions ...ts/dot-uve-toolbar/components/dot-ema-info-display/dot-ema-info-display.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,6 @@ describe('DotEmaInfoDisplayComponent', () => {
describe('socialMedia', () => {
beforeEach(() => {
spectator = createComponent();

store = spectator.inject(UVEStore);

store.loadPageAsset({
Expand All @@ -147,18 +146,19 @@ describe('DotEmaInfoDisplayComponent', () => {
language_id: '1',
'com.dotmarketing.persona.id': DEFAULT_PERSONA.identifier
});

store.setSocialMedia('facebook');
spectator.detectChanges();
});

it('should text for current social media', () => {
spectator.detectChanges();
expect(spectator.query(byTestId('info-text')).textContent.trim()).toBe(
'Viewing facebook social media preview'
);
expect(spectator.query(byTestId('info-icon'))).not.toBeNull();
});
it('should call clearDeviceAndSocialMedia when action button is clicked', () => {
spectator.detectChanges();

it('should call clearDeviceAndSocialMedia when action button is clicked', () => {
const clearDeviceAndSocialMediaSpy = jest.spyOn(store, 'clearDeviceAndSocialMedia');

const infoAction = spectator.debugElement.query(By.css('[data-testId="info-action"]'));
Expand Down
44 changes: 23 additions & 21 deletions ...ponents/dot-uve-toolbar/components/dot-ema-info-display/dot-ema-info-display.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,29 +29,31 @@ export class DotEmaInfoDisplayComponent {
* @memberof DotEmaInfoDisplayComponent
*/
protected handleAction() {
const options = this.$options();
const optionId = this.$options().id;

if (options.id === 'device' || options.id === 'socialMedia') {
if (optionId === 'device' || optionId === 'socialMedia') {
this.uveStore.clearDeviceAndSocialMedia();
} else if (options.id === 'variant') {
const currentExperiment = this.uveStore.experiment();

this.router.navigate(
[
'/edit-page/experiments/',
currentExperiment.pageId,
currentExperiment.id,
'configuration'
],
{
queryParams: {
mode: null,
variantName: null,
experimentId: null
},
queryParamsHandling: 'merge'
}
);

return;
}

const currentExperiment = this.uveStore.experiment();

this.router.navigate(
[
'/edit-page/experiments/',
currentExperiment.pageId,
currentExperiment.id,
'configuration'
],
{
queryParams: {
mode: null,
variantName: null,
experimentId: null
},
queryParamsHandling: 'merge'
}
);
}
}
4 changes: 1 addition & 3 deletions ...dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,5 @@
(click)="menu.toggle($event)"
data-testId="more-button" />

<p-menu #menu [popup]="true" [model]="$menuItems()"></p-menu>
<p-menu #menu [popup]="true" [model]="$menuItems()" />
}

<!-- <button (click)="seeStore()">See store</button> -->
8 changes: 5 additions & 3 deletions ...-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { mockDotDevices } from '@dotcms/utils-testing';

import { DotUveDeviceSelectorComponent } from './dot-uve-device-selector.component';

import { DEFAULT_PERSONA, DEFAULT_DEVICES } from '../../../../../shared/consts';
import { DEFAULT_PERSONA, DEFAULT_DEVICES, DEFAULT_DEVICE } from '../../../../../shared/consts';
import {
HEADLESS_BASE_QUERY_PARAMS,
MOCK_RESPONSE_HEADLESS,
Expand Down Expand Up @@ -81,7 +81,9 @@ const baseUVEState = {
patchViewParams: jest.fn(),
orientation: signal(''),
clearDeviceAndSocialMedia: jest.fn(),
device: signal(DEFAULT_DEVICES.find((device) => device.inode === 'default'))
device: signal(DEFAULT_DEVICE),
socialMedia: signal(null),
isTraditionalPage: signal(false)
};

describe('DotUveDeviceSelectorComponent', () => {
Expand Down Expand Up @@ -170,7 +172,7 @@ describe('DotUveDeviceSelectorComponent', () => {
const onDeviceSelectSpy = jest.spyOn(spectator.component, 'onDeviceSelect');
const firstCustomDevice = spectator.component.$menuItems()[0].items[0];

firstCustomDevice.command();
firstCustomDevice.command({});

expect(onDeviceSelectSpy).toHaveBeenCalledWith(mockDotDevices[0]);
});
Expand Down
124 changes: 63 additions & 61 deletions ...s/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import { DeepSignal } from '@ngrx/signals';

import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, inject, input, OnInit } from '@angular/core';

import { MenuItem } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
import { TooltipModule } from 'primeng/tooltip';

import {
DotMessageService,
DotSeoMetaTagsService,
DotSeoMetaTagsUtilService
} from '@dotcms/data-access';
import { DotMessageService } from '@dotcms/data-access';
import {
DotDevice,
DotDeviceListItem,
searchEngineTile,
SocialMediaOption,
socialMediaTiles
} from '@dotcms/dotcms-models';
import { DotMessagePipe } from '@dotcms/ui';
Expand All @@ -33,63 +29,39 @@ import { Orientation } from '../../../../../store/models';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DotUveDeviceSelectorComponent implements OnInit {
defaultDevices = DEFAULT_DEVICES;

#store = inject(UVEStore);
#messageService = inject(DotMessageService);
private readonly dotSeoMetaTagsService = inject(DotSeoMetaTagsService);
private readonly dotSeoMetaTagsUtilService = inject(DotSeoMetaTagsUtilService);

$devices = input<DotDeviceListItem[]>([], {
$devices = input.required<DotDeviceListItem[]>({
alias: 'devices'
});

readonly $currentDevice = this.#store.device as DeepSignal<DotDeviceListItem>;

readonly defaultDevices = DEFAULT_DEVICES;
readonly $currentDevice = this.#store.device;
readonly $currentSocialMedia = this.#store.socialMedia;
readonly $currentOrientation = this.#store.orientation;
readonly socialMediaMenu = {
label: this.#messageService.get('Social Media Tiles'),
items: this.#getSocialMediaMenuItems(socialMediaTiles)
};
readonly searchEngineMenu = {
label: this.#messageService.get('Search Engine'),
items: this.#getSocialMediaMenuItems(searchEngineTile)
};

readonly $disableOrientation = computed(
() => this.#store.device()?.inode === 'default' || this.#store.socialMedia()
);

readonly $currentOrientation = this.#store.orientation;

readonly $menuItems = computed(() => {
const extraDevices = this.$devices().filter((device) => !device._isDefault);
const isTraditionalPage = this.#store.isTraditionalPage();
const menu = isTraditionalPage ? [this.socialMediaMenu, this.searchEngineMenu] : [];

const extraDevices = this.$devices().filter((device) => !device._isDefault);
const customDevices = {
label: 'Custom Devices',
items: extraDevices.map((device) => ({
label: `${this.#messageService.get(device.name)} (${device.cssWidth}x${device.cssHeight})`,
command: () => this.onDeviceSelect(device),
styleClass: this.$currentDevice()?.inode === device.inode ? 'active' : ''
}))
items: this.#getDeviceMenuItems(extraDevices)
};

const socialMediaMenu = {
label: 'Social Media Tiles',
items: Object.values(socialMediaTiles).map((item) => ({
label: item.label,
command: () => this.onSocialMediaSelect(item.value),
styleClass: this.$currentSocialMedia() === item.value ? 'active' : ''
}))
};

const searchEngineMenu = {
label: 'Search Engine',
items: Object.values(searchEngineTile).map((item) => ({
label: item.label,
command: () => this.onSocialMediaSelect(item.value),
styleClass: this.$currentSocialMedia() === item.value ? 'active' : ''
}))
};

const menu = [];
if (this.#store.isTraditionalPage()) {
menu.push(socialMediaMenu);
menu.push(searchEngineMenu);
}

if (extraDevices.length) {
menu.push(customDevices);
}
Expand All @@ -105,8 +77,6 @@ export class DotUveDeviceSelectorComponent implements OnInit {
const { device: deviceInode, orientation, seo: socialMedia } = this.#store.viewParams();
const device = this.$devices().find((d) => d.inode === deviceInode);

this.loadOGTags();

if (!socialMedia) {
this.#store.setDevice(device || DEFAULT_DEVICE, orientation);

Expand All @@ -117,25 +87,39 @@ export class DotUveDeviceSelectorComponent implements OnInit {
this.#store.setSEO(socialMedia);
}

/**
* Select a social media
*
* @param {string} socialMedia
* @memberof DotUveDeviceSelectorComponent
*/
onSocialMediaSelect(socialMedia: string): void {
const isSameSocialMedia = this.$currentSocialMedia() === socialMedia;

this.#store.setSEO(isSameSocialMedia ? null : socialMedia);
}

/**
* Select a device
*
* @param {DotDevice} device
* @memberof DotUveDeviceSelectorComponent
*/
onDeviceSelect(device: DotDevice): void {
if (this.#store.socialMedia()) {
this.#store.setSEO(null);

// Bug Importante
// this.#store.reloadCurrentPage();
}

const currentDevice = this.$currentDevice();
const isSameDevice = currentDevice?.inode === device.inode;
this.#store.setDevice(isSameDevice ? DEFAULT_DEVICE : device);
}

/**
* Toggle orientation
*
* @memberof DotUveDeviceSelectorComponent
*/
onOrientationChange(): void {
this.#store.setOrientation(
this.$currentOrientation() === Orientation.LANDSCAPE
Expand All @@ -144,15 +128,33 @@ export class DotUveDeviceSelectorComponent implements OnInit {
);
}

loadOGTags() {
const parser = new DOMParser();
const content = this.#store.pageAPIResponse()?.page.rendered;
const doc = parser.parseFromString(content, 'text/html');
const ogTags = this.dotSeoMetaTagsUtilService.getMetaTags(doc);
/**
* Get the menu items for social media
*
* @param {Record<string, SocialMediaOption>} options
* @return {*} {MenuItem[]}
* @memberof DotUveDeviceSelectorComponent
*/
#getSocialMediaMenuItems(options: Record<string, SocialMediaOption>): MenuItem[] {
return Object.values(options).map((item) => ({
label: item.label,
id: item.value,
command: () => this.onSocialMediaSelect(item.value)
}));
}

this.dotSeoMetaTagsService.getMetaTagsResults(doc).subscribe((results) => {
this.#store.setOgTags(ogTags);
this.#store.setOGTagResults(results);
});
/**
* Get the menu items for devices
*
* @param {DotDeviceListItem[]} devices
* @return {*} {MenuItem[]}
* @memberof DotUveDeviceSelectorComponent
*/
#getDeviceMenuItems(devices: DotDeviceListItem[]): MenuItem[] {
return devices.map((device) => ({
label: `${this.#messageService.get(device.name)} (${device.cssWidth}x${device.cssHeight})`,
id: device.inode,
command: () => this.onDeviceSelect(device)
}));
}
}
Loading

0 comments on commit 7e1df55

Please sign in to comment.