chore(ui): migrate to jest

core-web/libs/data-access/jest.config.ts

@@ -4,7 +4,6 @@ export default {
     preset: '../../jest.preset.js',
     setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
     globals: {},
-    coverageDirectory: '../../coverage/libs/data-access',
     coverageReporters: ['html', ['lcovonly', { file: 'TEST-template-builder.lcov' }]],
     reporters: [
         'default',

core-web/libs/ui/jest.config.ts

@@ -0,0 +1,31 @@
+export default {
+    displayName: 'ui',
+    preset: '../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    globals: {},
+    coverageReporters: [['lcovonly', { file: 'TEST-block-editor.lcov' }]],
+    reporters: [
+        'default',
+        ['github-actions', { silent: false }],
+        [
+            'jest-junit',
+            { outputDirectory: '../target/core-web-reports', outputName: 'TEST-block-editor.xml' }
+        ]
+    ],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment'
+    ],
+    transform: {
+        '^.+.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                stringifyContentPathRegex: '\\.(html|svg)$',
+
+                tsconfig: '<rootDir>/tsconfig.spec.json'
+            }
+        ]
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*.mjs$)']
+};

core-web/libs/ui/project.json

@@ -10,15 +10,11 @@
             "outputs": ["{options.outputFile}"]
         },
         "test": {
-            "executor": "@angular-devkit/build-angular:karma",
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectName}"],
             "options": {
-                "main": "libs/ui/src/test.ts",
-                "tsConfig": "libs/ui/tsconfig.spec.json",
-                "karmaConfig": "libs/ui/karma.conf.js",
-                "styles": ["libs/dotcms-scss/angular/styles.scss"],
-                "stylePreprocessorOptions": {
-                    "includePaths": ["libs/dotcms-scss/angular/"]
-                }
+                "jestConfig": "libs/ui/jest.config.ts",
+                "passWithNoTests": false
             }
         }
     },

core-web/libs/ui/src/lib/components/dot-action-menu-button/dot-action-menu-button.component.spec.ts

@@ -1,6 +1,5 @@
-import { DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator/jest';
+
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ButtonModule } from 'primeng/button';
@@ -11,24 +10,17 @@ import { DotActionMenuButtonComponent, DotMenuComponent } from '@dotcms/ui';
 import { dotcmsContentTypeBasicMock } from '@dotcms/utils-testing';
 
 describe('ActionMenuButtonComponent', () => {
-    let comp: DotActionMenuButtonComponent;
-    let fixture: ComponentFixture<DotActionMenuButtonComponent>;
-    let de: DebugElement;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                ButtonModule,
-                TooltipModule,
-                DotMenuComponent,
-                BrowserAnimationsModule,
-                DotActionMenuButtonComponent
-            ]
-        }).compileComponents();
+    let spectator: Spectator<DotActionMenuButtonComponent>;
 
-        fixture = TestBed.createComponent(DotActionMenuButtonComponent);
-        comp = fixture.componentInstance;
-        de = fixture.debugElement;
+    const createComponent = createComponentFactory({
+        component: DotActionMenuButtonComponent,
+        imports: [
+            ButtonModule,
+            TooltipModule,
+            DotMenuComponent,
+            BrowserAnimationsModule,
+            DotActionMenuButtonComponent
+        ]
     });
 
     it('should display a menu button with multiple actions if actions are more than 1', () => {
@@ -54,12 +46,16 @@ describe('ActionMenuButtonComponent', () => {
             }
         ];
 
-        comp.actions = fakeActions;
-        fixture.detectChanges();
+        spectator = createComponent({
+            props: {
+                actions: fakeActions
+            }
+        });
+        spectator.detectChanges();
 
-        const button = de.query(By.css('.dot-menu__button'));
-        const buttonTooltip = de.query(By.css('[data-testid="dot-action-tooltip-button"]'));
-        const menu = de.query(By.css('dot-menu'));
+        const button = spectator.query('.dot-menu__button');
+        const buttonTooltip = spectator.query(byTestId('dot-action-tooltip-button'));
+        const menu = spectator.query('dot-menu');
 
         expect(buttonTooltip).toBeNull();
         expect(button).toBeDefined();
@@ -79,11 +75,15 @@ describe('ActionMenuButtonComponent', () => {
             }
         ];
 
-        comp.actions = fakeActions;
-        fixture.detectChanges();
+        spectator = createComponent({
+            props: {
+                actions: fakeActions
+            }
+        });
+        spectator.detectChanges();
 
-        const actionButtonTooltip = de.query(By.css('[data-testid="dot-action-tooltip-button"]'));
-        const actionButtonMenu = de.query(By.css('dot-menu'));
+        const actionButtonTooltip = spectator.query(byTestId('dot-action-tooltip-button'));
+        const actionButtonMenu = spectator.query('dot-menu');
 
         expect(actionButtonTooltip).not.toBeNull();
         expect(actionButtonMenu).toBeNull();
@@ -114,15 +114,18 @@ describe('ActionMenuButtonComponent', () => {
             owner: '123',
             system: false
         };
+        spectator = createComponent({
+            props: {
+                actions: fakeActions,
+                item: mockContentType
+            }
+        });
+        spectator.detectChanges();
 
-        comp.actions = fakeActions;
-        comp.item = mockContentType;
-        fixture.detectChanges();
-
-        spyOn(fakeActions[0].menuItem, 'command');
+        jest.spyOn(fakeActions[0].menuItem, 'command');
 
-        const actionButtonTooltip = de.query(By.css('[data-testid="dot-action-tooltip-button"]'));
-        actionButtonTooltip.nativeElement.click();
+        const actionButtonTooltip = spectator.query(byTestId('dot-action-tooltip-button'));
+        spectator.click(actionButtonTooltip);
 
         expect(fakeActions[0].menuItem.command).toHaveBeenCalledTimes(1);
         expect(fakeActions[0].menuItem.command).toHaveBeenCalledWith(mockContentType);
@@ -162,10 +165,14 @@ describe('ActionMenuButtonComponent', () => {
             }
         ];
 
-        comp.actions = fakeActions;
-        comp.ngOnInit();
+        spectator = createComponent({
+            props: {
+                actions: fakeActions
+            }
+        });
+        spectator.detectChanges();
 
-        expect(comp.filteredActions.length).toEqual(1);
+        expect(spectator.component.filteredActions.length).toEqual(1);
     });
 
     it('should render button with submenu', () => {
@@ -203,20 +210,25 @@ describe('ActionMenuButtonComponent', () => {
             system: false
         };
 
-        comp.actions = fakeActions;
-        comp.item = mockContentType;
-        fixture.detectChanges();
+        spectator = createComponent({
+            props: {
+                actions: fakeActions,
+                item: mockContentType
+            }
+        });
+        spectator.detectChanges();
+
+        const actionButtonTooltip = spectator.query(byTestId('dot-action-tooltip-button'));
+        const dotMenu = spectator.query('dot-menu');
+        const button = spectator.query('button');
 
-        expect(de.query(By.css('[data-testid="dot-action-tooltip-button"]')) === null).toEqual(
-            true,
-            'tooltip button hide'
-        );
-        expect(de.query(By.css('dot-menu')) === null).toEqual(false, 'menu options show');
-        expect(de.query(By.css('button')) === null).toEqual(false, 'button to show/hide menu show');
+        expect(actionButtonTooltip).toBeNull();
+        expect(dotMenu).not.toBeNull();
+        expect(button).not.toBeNull();
     });
 
     it('should call menu option actions with item passed', () => {
-        const fakeCommand = jasmine.createSpy('fakeCommand');
+        const fakeCommand = jest.fn();
 
         const fakeActions: DotActionMenuItem[] = [
             {
@@ -251,19 +263,22 @@ describe('ActionMenuButtonComponent', () => {
             owner: '123',
             system: false
         };
-        comp.actions = fakeActions;
-        comp.item = mockContentType;
-        fixture.detectChanges();
-        const actionButtonMenu = de.query(By.css('[data-testid="dot-menu-button"]'));
-        actionButtonMenu.triggerEventHandler('click', {
+        spectator = createComponent({
+            props: {
+                actions: fakeActions,
+                item: mockContentType
+            }
+        });
+        spectator.detectChanges();
+        spectator.triggerEventHandler(`[data-testid="dot-menu-button"]`, 'click', {
             stopPropagation: () => {
                 //
             }
         });
-        fixture.detectChanges();
+        spectator.detectChanges();
 
-        const menuItemsLink = de.queryAll(By.css('.p-menuitem-link'));
-        menuItemsLink[1].nativeElement.click();
+        const menuItemsLink = spectator.queryAll('.p-menuitem-link');
+        spectator.click(menuItemsLink[1]);
 
         expect(fakeCommand).toHaveBeenCalledTimes(1);
         expect(fakeCommand).toHaveBeenCalledWith(mockContentType);

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.component.spec.ts

@@ -1,4 +1,4 @@
-import { byTestId, createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator';
+import { byTestId, createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { of } from 'rxjs';
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -40,11 +40,11 @@ describe('DotAIImagePromptComponent', () => {
                         galleryActiveIndex: 0,
                         orientation: DotAIImageOrientation.VERTICAL
                     }),
-                    generateImage: jasmine.createSpy('generateImage'),
-                    hideDialog: jasmine.createSpy('hideDialog'),
-                    patchState: jasmine.createSpy('patchState'),
-                    cleanError: jasmine.createSpy('cleanError'),
-                    setSelectedImage: jasmine.createSpy('setSelectedImage')
+                    generateImage: jest.fn(),
+                    hideDialog: jest.fn(),
+                    patchState: jest.fn(),
+                    cleanError: jest.fn(),
+                    setSelectedImage: jest.fn()
                 }
             },
             mockProvider(ConfirmationService)
@@ -92,7 +92,7 @@ describe('DotAIImagePromptComponent', () => {
 
     it('should call confirm dialog when try to close dialog', fakeAsync(() => {
         const closeBtn = spectator.query(byTestId('close-btn'));
-        const spyCloseDialog = spyOn(spectator.component, 'closeDialog');
+        const spyCloseDialog = jest.spyOn(spectator.component, 'closeDialog');
 
         spectator.click(closeBtn);
         spectator.tick();

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-form/ai-image-prompt-form.component.spec.ts

@@ -45,7 +45,7 @@ describe('DotAiImagePromptFormComponent', () => {
     });
 
     it('should emit value when form value change', () => {
-        const emitSpy = spyOn(spectator.component.valueChange, 'emit');
+        const emitSpy = jest.spyOn(spectator.component.valueChange, 'emit');
         spectator.component.form.setValue(formValue);
 
         spectator.detectChanges();
@@ -85,7 +85,7 @@ describe('DotAiImagePromptFormComponent', () => {
     });
 
     it('should emit generate when the form is submitted', () => {
-        const valueSpy = spyOn(spectator.component.generate, 'emit');
+        const valueSpy = jest.spyOn(spectator.component.generate, 'emit');
         spectator.setInput({ isLoading: false });
         spectator.component.form.setValue(formValue);
         spectator.detectChanges();

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-gallery/ai-image-prompt-gallery.component.spec.ts

@@ -74,7 +74,7 @@ describe('DotAiImagePromptGalleryComponent', () => {
     });
 
     it('should emit activeIndexChange event when galleria active index changes', () => {
-        const emitterSpy = spyOn(spectator.component.activeIndexChange, 'emit');
+        const emitterSpy = jest.spyOn(spectator.component.activeIndexChange, 'emit');
 
         spectator.setInput({
             isLoading: false,
@@ -88,7 +88,7 @@ describe('DotAiImagePromptGalleryComponent', () => {
     });
 
     it('should emit regenerate event when regenerate button is clicked', () => {
-        const emitterSpy = spyOn(spectator.component.regenerate, 'emit');
+        const emitterSpy = jest.spyOn(spectator.component.regenerate, 'emit');
 
         spectator.setInput({
             isLoading: false,

core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card-list/dot-asset-card-list.component.spec.ts

@@ -1,4 +1,4 @@
-import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 
 import { CommonModule } from '@angular/common';
 

core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card-skeleton/dot-asset-card-skeleton.component.spec.ts

@@ -1,4 +1,4 @@
-import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 
 import { CardModule } from 'primeng/card';
 import { Skeleton, SkeletonModule } from 'primeng/skeleton';

core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts

@@ -1,4 +1,4 @@
-import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 
 import { Card, CardModule } from 'primeng/card';
 

core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-search-dialog/dot-asset-search-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';

core-web/libs/ui/src/lib/components/dot-asset-search/dot-asset-search.component.spec.ts

@@ -1,4 +1,4 @@
-import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator';
+import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { of } from 'rxjs';
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';

core-web/libs/ui/src/lib/components/dot-asset-search/store/dot-asset-search.store.spec.ts

@@ -1,4 +1,4 @@
-import { SpectatorService, createServiceFactory } from '@ngneat/spectator';
+import { SpectatorService, createServiceFactory } from '@ngneat/spectator/jest';
 import { of } from 'rxjs';
 
 import {

core-web/libs/ui/src/lib/components/dot-drop-zone/directive/dot-drop-zone-value-accesor/dot-drop-zone-value-accessor.directive.spec.ts

@@ -1,4 +1,4 @@
-import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator';
+import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 
 import { forwardRef } from '@angular/core';

core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.spec.ts

@@ -1,4 +1,4 @@
-import { SpectatorHost, createHostFactory } from '@ngneat/spectator';
+import { SpectatorHost, createHostFactory } from '@ngneat/spectator/jest';
 
 import { CommonModule } from '@angular/common';
 

core-web/libs/ui/src/lib/components/dot-empty-container/dot-empty-container.component.spec.ts

@@ -1,5 +1,4 @@
-import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator';
-import { byTestId } from '@ngneat/spectator/jest';
+import { createComponentFactory, mockProvider, Spectator, byTestId } from '@ngneat/spectator/jest';
 
 import { DotMessageService } from '@dotcms/data-access';
 import { DotEmptyContainerComponent, PrincipalConfiguration } from '@dotcms/ui';