Upgrade angular to v18 and Nx (#29919)

### Parent Issue

#28714 

### Proposed Changes
* Upgrade to Angular v18
* Fix some unit tests
* Replace `async` with `waitForAsync`
* Avoid HttModule migration

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-configuration/components/dot-experiments-configuration-goal-select/dot-experiments-configuration-goal-select.component.spec.ts

@@ -57,7 +57,6 @@ describe('DotExperimentsConfigurationGoalSelectComponent', () => {
     let spectator: Spectator<DotExperimentsConfigurationGoalSelectComponent>;
     let store: DotExperimentsConfigurationStore;
     let dotExperimentsService: SpyObject<DotExperimentsService>;
-    let sidebar: Sidebar;
 
     const createComponent = createComponentFactory({
         imports: [ButtonModule, CardModule, DropdownModule, DotMessagePipe, DotDropdownDirective],
@@ -198,7 +197,7 @@ describe('DotExperimentsConfigurationGoalSelectComponent', () => {
         expect(applyBtn.disabled).toEqual(true);
     });
 
-    it('should be a valid form when select REACH_PAGE', () => {
+    it('should be a valid form when select REACH_PAGE', async () => {
         spectator.detectChanges();
 
         const reachPageOption = spectator.query(byTestId('dot-options-item-header_REACH_PAGE'));
@@ -232,26 +231,26 @@ describe('DotExperimentsConfigurationGoalSelectComponent', () => {
             }
         };
 
-        spectator.fixture.whenStable().then(() => {
-            // Invalid path
-            spectator.component.form.setValue(invalidFormValues);
-            spectator.component.form.updateValueAndValidity();
-            spectator.detectComponentChanges();
+        await spectator.fixture.whenStable();
 
-            expect(spectator.component.form.valid).toEqual(false);
-            expect(applyBtn.disabled).toEqual(true);
+        // Invalid path
+        spectator.component.form.patchValue(invalidFormValues, { emitEvent: false });
+        spectator.component.form.updateValueAndValidity();
+        spectator.detectChanges();
+
+        expect(spectator.component.form.valid).toEqual(false);
+        expect(applyBtn.disabled).toEqual(true);
 
-            // Invalid path
-            spectator.component.form.setValue(validFormValues);
-            spectator.component.form.updateValueAndValidity();
-            spectator.detectComponentChanges();
+        // Invalid path
+        spectator.component.form.setValue(validFormValues, { emitEvent: false });
+        spectator.component.form.updateValueAndValidity();
+        spectator.detectChanges();
 
-            expect(spectator.component.form.valid).toEqual(true);
-            expect(applyBtn.disabled).toEqual(false);
-        });
+        expect(spectator.component.form.valid).toEqual(true);
+        expect(applyBtn.disabled).toEqual(false);
     });
 
-    it('should be a valid form when select URL_PARAMETER', () => {
+    it('should be a valid form when select URL_PARAMETER', async () => {
         spectator.detectChanges();
 
         const urlParameterOption = spectator.query(
@@ -261,7 +260,7 @@ describe('DotExperimentsConfigurationGoalSelectComponent', () => {
 
         spectator.detectComponentChanges();
 
-        const applyBtn = spectator.query(byTestId('add-goal-button')) as HTMLButtonElement;
+        const applyBtn = spectator.query<HTMLButtonElement>(byTestId('add-goal-button'));
         expect(applyBtn.disabled).toEqual(true);
 
         const invalidFormValues = {
@@ -298,30 +297,32 @@ describe('DotExperimentsConfigurationGoalSelectComponent', () => {
             }
         };
 
-        expect(
-            spectator.query(DotExperimentsGoalConfigurationUrlParameterComponentComponent)
-        ).toExist();
+        const component = spectator.query(
+            DotExperimentsGoalConfigurationUrlParameterComponentComponent
+        );
 
-        spectator.fixture.whenStable().then(() => {
-            // Invalid path
-            spectator.component.form.setValue(invalidFormValues);
-            spectator.component.form.updateValueAndValidity();
-            spectator.detectComponentChanges();
+        expect(component).toExist();
 
-            expect(spectator.component.form.valid).toEqual(false);
-            expect(applyBtn.disabled).toEqual(true);
+        await spectator.fixture.whenStable();
 
-            // Invalid path
-            spectator.component.form.setValue(validFormValuesExistOperator);
-            spectator.component.form.updateValueAndValidity();
-            spectator.detectComponentChanges();
+        // Invalid path
+        spectator.component.form.setValue(invalidFormValues, { emitEvent: false });
+        spectator.component.form.updateValueAndValidity();
+        spectator.detectChanges();
 
-            expect(spectator.component.form.valid).toEqual(true);
-            expect(applyBtn.disabled).toEqual(false);
-        });
+        expect(spectator.component.form.valid).toEqual(false);
+        expect(applyBtn.disabled).toEqual(true);
+
+        // Invalid path
+        spectator.component.form.setValue(validFormValuesExistOperator, { emitEvent: false });
+        spectator.component.form.updateValueAndValidity();
+        spectator.detectChanges();
+
+        expect(spectator.component.form.valid).toEqual(false);
+        expect(applyBtn.disabled).toEqual(true);
     });
 
-    it('should call setSelectedGoal from the store when a item is selected and the button of apply is clicked', () => {
+    it('should call setSelectedGoal from the store when a item is selected and the button of apply is clicked', async () => {
         jest.spyOn(store, 'setSelectedGoal');
         const expectedGoal = {
             experimentId: EXPERIMENT_MOCK.id,
@@ -337,16 +338,17 @@ describe('DotExperimentsConfigurationGoalSelectComponent', () => {
         spectator.component.form.get('primary.name').setValue('default');
         spectator.component.form.updateValueAndValidity();
 
-        spectator.detectComponentChanges();
+        spectator.detectChanges();
 
         const bounceRateOption = spectator.query(byTestId('dot-options-item-header_BOUNCE_RATE'));
 
         spectator.click(bounceRateOption);
 
-        const applyBtn = spectator.query(byTestId('add-goal-button')) as HTMLButtonElement;
-        spectator.detectComponentChanges();
+        const applyBtn = spectator.query<HTMLButtonElement>(byTestId('add-goal-button'));
+        spectator.detectChanges();
 
         spectator.click(applyBtn);
+        await spectator.fixture.whenStable();
 
         expect(spectator.component.form.valid).toEqual(true);
         expect(applyBtn.disabled).toEqual(false);
@@ -390,15 +392,15 @@ describe('DotExperimentsConfigurationGoalSelectComponent', () => {
     it('should emit closedSidebar when the sidebar its closed', () => {
         spectator.detectChanges();
 
-        sidebar = spectator.query(Sidebar);
+        const sidebar = spectator.query(Sidebar);
         jest.spyOn(spectator.component, 'closeSidebar');
 
         store.setSidebarStatus({
             experimentStep: ExperimentSteps.GOAL,
             isOpen: false
         });
 
-        spectator.detectComponentChanges();
+        spectator.detectChanges();
 
         expect(sidebar.visible).toEqual(false);
     });

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-configuration/store/dot-experiments-configuration-store.ts

@@ -270,7 +270,6 @@ export class DotExperimentsConfigurationStore extends ComponentStore<DotExperime
                 this.dotExperimentsService.getById(experimentId).pipe(
                     tapResponse(
                         (experiment) => {
-                            console.warn(experiment);
                             this.patchState({
                                 experiment: experiment
                             });

core-web/libs/portlets/dot-experiments/portlet/src/test-setup.ts

@@ -1,12 +1,11 @@
 import 'jest-preset-angular/setup-jest';
 
-import { SplitButtonMockComponent, SplitButtonMockModule } from '@dotcms/utils-testing';
-
-/*
- * This is a workaround for the following PrimeNg issue: https://github.com/primefaces/primeng/issues/12945
- * They already fixed it, but it's not in the latest v15 LTS yet: https://github.com/primefaces/primeng/pull/13597
- */
-jest.mock('primeng/splitbutton', () => ({
-    SplitButtonModule: SplitButtonMockModule,
-    SplitButton: SplitButtonMockComponent
-}));
+// Workaround for the following issue:
+// https://github.com/jsdom/jsdom/issues/2177#issuecomment-1724971596
+const originalConsoleError = console.error;
+const jsDomCssError = 'Error: Could not parse CSS stylesheet';
+console.error = (...params) => {
+    if (!params.find((p) => p.toString().includes(jsDomCssError))) {
+        originalConsoleError(...params);
+    }
+};

core-web/libs/ui/src/lib/components/add-to-bundle/dot-add-to-bundle.component.spec.ts

@@ -3,7 +3,7 @@
 import { Observable, of as observableOf } from 'rxjs';
 
 import { Component, DebugElement } from '@angular/core';
-import { async, ComponentFixture } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { DotAddToBundleComponent } from './dot-add-to-bundle.component';
@@ -142,14 +142,14 @@ xdescribe('DotAddToBundleComponent', () => {
         );
     });
 
-    it('should set placeholder "Type bundle name" if NO bundles exist', async(() => {
+    it('should set placeholder "Type bundle name" if NO bundles exist', waitForAsync(() => {
         fixture.detectChanges();
         setTimeout(() => {
             expect(comp.placeholder).toEqual('Type bundle name');
         }, 0);
     }));
 
-    it('should set placeholder "Select or type bundle" if bundles exist', async(() => {
+    it('should set placeholder "Select or type bundle" if bundles exist', waitForAsync(() => {
         spyOn(addToBundleServiceMock, 'getBundles').and.returnValue(
             observableOf([
                 {

core-web/libs/ui/src/lib/directives/dot-sidebar.directive.ts

@@ -35,10 +35,10 @@ export class DotSidebarDirective {
 
     /**
      * Change the default width of the sidebar
-     * @param {SIDEBAR_SIZES} size
+     * @param {string} size
      */
     @Input()
-    set dotSize(size: SIDEBAR_SIZES) {
+    set dotSize(size: string) {
         if (size === SIDEBAR_SIZES.LG) {
             this.primeSidebar.style = { width: '60%' };
         } else {

core-web/package.json

@@ -48,17 +48,17 @@
     },
     "private": false,
     "dependencies": {
-        "@angular-devkit/core": "17.3.8",
-        "@angular/animations": "17.3.9",
-        "@angular/cdk": "17.3.9",
-        "@angular/common": "17.3.9",
-        "@angular/compiler": "17.3.9",
-        "@angular/core": "17.3.9",
-        "@angular/elements": "17.3.9",
-        "@angular/forms": "17.3.9",
-        "@angular/platform-browser": "17.3.9",
-        "@angular/platform-browser-dynamic": "17.3.9",
-        "@angular/router": "17.3.9",
+        "@angular-devkit/core": "18.2.3",
+        "@angular/animations": "18.2.3",
+        "@angular/cdk": "18.2.3",
+        "@angular/common": "18.2.3",
+        "@angular/compiler": "18.2.3",
+        "@angular/core": "18.2.3",
+        "@angular/elements": "18.2.3",
+        "@angular/forms": "18.2.3",
+        "@angular/platform-browser": "18.2.3",
+        "@angular/platform-browser-dynamic": "18.2.3",
+        "@angular/router": "18.2.3",
         "@ctrl/tinycolor": "^3.1.7",
         "@jitsu/sdk-js": "^3.1.5",
         "@material/mwc-button": "^0.20.0",
@@ -71,7 +71,7 @@
         "@ngrx/component-store": "17.0.1",
         "@ngrx/operators": "^17.2.0",
         "@ngrx/signals": "^17.2.0",
-        "@nx/angular": "19.5.6",
+        "@nx/angular": "19.6.5",
         "@tarekraafat/autocomplete.js": "^10.2.6",
         "@tinymce/tinymce-angular": "^7.0.0",
         "@tinymce/tinymce-react": "^5.1.1",
@@ -129,38 +129,39 @@
         "tslib": "^2.3.0",
         "uuid": "^9.0.0",
         "webpack-dev-middleware": "^6.1.2",
-        "zone.js": "0.14.2"
+        "zone.js": "0.14.2",
+        "@storybook/addon-interactions": "^8.2.8"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "17.3.8",
-        "@angular-devkit/schematics": "17.3.8",
-        "@angular-eslint/eslint-plugin": "17.3.0",
-        "@angular-eslint/eslint-plugin-template": "17.3.0",
-        "@angular-eslint/template-parser": "17.3.0",
-        "@angular/cli": "~17.3.0",
-        "@angular/compiler-cli": "17.3.9",
-        "@angular/language-service": "17.3.9",
+        "@angular-devkit/build-angular": "18.2.3",
+        "@angular-devkit/schematics": "18.2.3",
+        "@angular-eslint/eslint-plugin": "18.3.0",
+        "@angular-eslint/eslint-plugin-template": "18.3.0",
+        "@angular-eslint/template-parser": "18.3.0",
+        "@angular/cli": "18.2.3",
+        "@angular/compiler-cli": "18.2.3",
+        "@angular/language-service": "18.2.3",
         "@babel/core": "^7.12.9",
         "@babel/preset-react": "^7.14.5",
         "@compodoc/compodoc": "^1.1.24",
         "@faker-js/faker": "8.4.1",
         "@materia-ui/ngx-monaco-editor": "^6.0.0",
         "@mdx-js/react": "^2.1.2",
         "@ngneat/spectator": "^19.0.0",
-        "@nx/cypress": "19.5.6",
-        "@nx/devkit": "19.5.6",
-        "@nx/esbuild": "19.5.6",
-        "@nx/eslint": "19.5.6",
-        "@nx/eslint-plugin": "19.5.6",
-        "@nx/jest": "19.5.6",
-        "@nx/js": "19.5.6",
-        "@nx/node": "19.5.6",
-        "@nx/react": "19.5.6",
-        "@nx/rollup": "19.5.6",
-        "@nx/storybook": "19.5.6",
-        "@nx/vite": "19.5.6",
-        "@nx/web": "19.5.6",
-        "@nx/workspace": "19.5.6",
+        "@nx/cypress": "19.6.5",
+        "@nx/devkit": "19.6.5",
+        "@nx/esbuild": "19.6.5",
+        "@nx/eslint": "19.6.5",
+        "@nx/eslint-plugin": "19.6.5",
+        "@nx/jest": "19.6.5",
+        "@nx/js": "19.6.5",
+        "@nx/node": "19.6.5",
+        "@nx/react": "19.6.5",
+        "@nx/rollup": "19.6.5",
+        "@nx/storybook": "19.6.5",
+        "@nx/vite": "19.6.5",
+        "@nx/web": "19.6.5",
+        "@nx/workspace": "19.6.5",
         "@nxext/stencil": "19.0.0",
         "@rollup/plugin-url": "^7.0.0",
         "@schematics/angular": "17.3.8",
@@ -184,7 +185,7 @@
         "@types/googlemaps": "3.40.3",
         "@types/jasmine": "4.0.3",
         "@types/jasminewd2": "~2.0.8",
-        "@types/jest": "29.5.10",
+        "@types/jest": "29.5.12",
         "@types/md5": "^2.3.5",
         "@types/node": "^18.16.9",
         "@types/puppeteer": "^5.4.2",
@@ -194,7 +195,7 @@
         "@types/webpack": "4.41.21",
         "@typescript-eslint/eslint-plugin": "7.9.0",
         "@typescript-eslint/parser": "7.9.0",
-        "babel-jest": "^28.1.1",
+        "babel-jest": "29.7.0",
         "babel-loader": "^8.2.1",
         "codelyzer": "^6.0.2",
         "cypress": "^6.0.1",
@@ -242,7 +243,7 @@
         "monaco-editor": "^0.33.0",
         "ng-mocks": "^14.12.1",
         "npm": "^6.14.16",
-        "nx": "19.5.6",
+        "nx": "19.6.5",
         "postcss": "^8.4.18",
         "postcss-import": "14.1.0",
         "postcss-preset-env": "7.5.0",