feat(edit-content) test fixed #28493

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts

@@ -11,6 +11,7 @@ import { By } from '@angular/platform-browser';
 
 import { BlockEditorModule, DotBlockEditorComponent } from '@dotcms/block-editor';
 import {
+    DotHttpErrorManagerService,
     DotLicenseService,
     DotMessageDisplayService,
     DotMessageService
@@ -169,7 +170,7 @@ describe.each([...FIELDS_MOCK])('DotEditContentFieldComponent all fields', (fiel
                 useValue: createFormGroupDirectiveMock()
             }
         ],
-        providers: [FormGroupDirective]
+        providers: [FormGroupDirective, mockProvider(DotHttpErrorManagerService)]
     });
 
     beforeEach(async () => {

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.spec.ts

@@ -4,7 +4,7 @@ import { of } from 'rxjs';
 
 import { Sidebar } from 'primeng/sidebar';
 
-import { DotMessageService } from '@dotcms/data-access';
+import { DotHttpErrorManagerService, DotMessageService } from '@dotcms/data-access';
 
 import { DotCategoryFieldSidebarComponent } from './dot-category-field-sidebar.component';
 
@@ -26,7 +26,8 @@ describe('DotEditContentCategoryFieldSidebarComponent', () => {
             providers: [
                 mockProvider(CategoriesService, {
                     getChildren: jest.fn().mockReturnValue(of(CATEGORY_LIST_MOCK))
-                })
+                }),
+                mockProvider(DotHttpErrorManagerService)
             ]
         });
 

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts

@@ -1,19 +1,22 @@
 import { byTestId, createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
 
 import { HttpClient } from '@angular/common/http';
 import { fakeAsync } from '@angular/core/testing';
 import { ControlContainer, FormControl, FormGroup } from '@angular/forms';
 
-import { DotMessageService } from '@dotcms/data-access';
+import { DotHttpErrorManagerService, DotMessageService } from '@dotcms/data-access';
 
 import { DotCategoryFieldSidebarComponent } from './components/dot-category-field-sidebar/dot-category-field-sidebar.component';
 import { DotEditContentCategoryFieldComponent } from './dot-edit-content-category-field.component';
 import { CLOSE_SIDEBAR_CSS_DELAY_MS } from './dot-edit-content-category-field.const';
 import {
     CATEGORY_FIELD_CONTENTLET_MOCK,
     CATEGORY_FIELD_MOCK,
-    CATEGORY_FIELD_VARIABLE_NAME
+    CATEGORY_FIELD_VARIABLE_NAME,
+    CATEGORY_HIERARCHY_MOCK,
+    SELECTED_LIST_MOCK
 } from './mocks/category-field.mocks';
 import { CategoriesService } from './services/categories.service';
 import { CategoryFieldStore } from './store/content-category-field.store';
@@ -32,68 +35,95 @@ describe('DotEditContentCategoryFieldComponent', () => {
         component: DotEditContentCategoryFieldComponent,
         imports: [MockComponent(DotCategoryFieldSidebarComponent)],
         componentViewProviders: [
-            CategoryFieldStore,
             {
                 provide: ControlContainer,
                 useValue: createFormGroupDirectiveMock(FAKE_FORM_GROUP)
-            }
+            },
+            mockProvider(CategoriesService)
         ],
         providers: [
             mockProvider(DotMessageService),
-            mockProvider(CategoriesService),
-            mockProvider(HttpClient)
+            mockProvider(HttpClient),
+            mockProvider(DotHttpErrorManagerService)
         ]
     });
 
-    beforeEach(() => {
-        spectator = createComponent({
-            props: {
-                contentlet: CATEGORY_FIELD_CONTENTLET_MOCK,
-                field: CATEGORY_FIELD_MOCK
-            }
-        });
-        store = spectator.inject(CategoryFieldStore, true);
-
-        spectator.detectChanges();
-    });
-
     afterEach(() => {
         jest.resetAllMocks();
     });
 
     describe('Elements', () => {
-        it('should render a button for selecting categories', () => {
-            expect(spectator.query(byTestId('show-sidebar-btn'))).not.toBeNull();
-        });
+        describe('With selected', () => {
+            beforeEach(() => {
+                spectator = createComponent({
+                    props: {
+                        contentlet: CATEGORY_FIELD_CONTENTLET_MOCK,
+                        field: CATEGORY_FIELD_MOCK
+                    },
+                    providers: [
+                        mockProvider(CategoriesService, {
+                            getSelectedHierarchy: jest
+                                .fn()
+                                .mockReturnValue(of(CATEGORY_HIERARCHY_MOCK))
+                        })
+                    ]
+                });
+            });
 
-        it('should not display the category list with chips when there are no categories', () => {
-            spectator = createComponent({
-                props: {
-                    contentlet: [],
-                    field: CATEGORY_FIELD_MOCK
-                }
+            it('should render a button for selecting categories', () => {
+                expect(spectator.query(byTestId('show-sidebar-btn'))).not.toBeNull();
             });
 
-            spectator.detectChanges();
+            it('should display the category list with chips when there are categories', () => {
+                expect(spectator.query(byTestId('category-chip-list'))).not.toBeNull();
+            });
 
-            expect(spectator.query(byTestId('category-chip-list'))).toBeNull();
-        });
+            it('should categoryFieldControl has the values loaded on the store', () => {
+                const categoryValue = spectator.component.categoryFieldControl.value;
 
-        it('should display the category list with chips when there are categories', () => {
-            expect(spectator.query(byTestId('category-chip-list'))).not.toBeNull();
+                expect(categoryValue).toEqual(SELECTED_LIST_MOCK);
+            });
         });
 
-        it('should categoryFieldControl has the values loaded on the store', () => {
-            const categoryValue = spectator.component.categoryFieldControl.value;
-
-            expect(categoryValue).toEqual([
-                '1f208488057007cedda0e0b5d52ee3b3',
-                'cb83dc32c0a198fd0ca427b3b587f4ce'
-            ]);
+        describe('No selected', () => {
+            it('should not display the category list with chips when there are no categories', () => {
+                spectator = createComponent({
+                    props: {
+                        contentlet: [],
+                        field: CATEGORY_FIELD_MOCK
+                    },
+                    providers: [
+                        mockProvider(CategoriesService, {
+                            getSelectedHierarchy: jest.fn().mockReturnValue(of([]))
+                        })
+                    ]
+                });
+
+                spectator.detectChanges();
+
+                expect(spectator.query(byTestId('category-chip-list'))).toBeNull();
+            });
         });
     });
 
     describe('Interactions', () => {
+        beforeEach(() => {
+            spectator = createComponent({
+                props: {
+                    contentlet: CATEGORY_FIELD_CONTENTLET_MOCK,
+                    field: CATEGORY_FIELD_MOCK
+                },
+                providers: [
+                    mockProvider(CategoriesService, {
+                        getSelectedHierarchy: jest.fn().mockReturnValue(of(CATEGORY_HIERARCHY_MOCK))
+                    })
+                ]
+            });
+
+            store = spectator.inject(CategoryFieldStore, true);
+
+            spectator.detectChanges();
+        });
         it('should invoke `showCategoriesSidebar` method when the select button is clicked', () => {
             const selectBtn = spectator.query(byTestId('show-sidebar-btn'));
             const showCategoriesSidebarSpy = jest.spyOn(
@@ -153,10 +183,7 @@ describe('DotEditContentCategoryFieldComponent', () => {
             // Check if the form has the correct value
             const categoryValue = spectator.component.categoryFieldControl.value;
 
-            expect(categoryValue).toEqual([
-                '1f208488057007cedda0e0b5d52ee3b3',
-                'cb83dc32c0a198fd0ca427b3b587f4ce'
-            ]);
+            expect(categoryValue).toEqual(SELECTED_LIST_MOCK);
         }));
 
         it('should set categoryFieldControl value when adding a new category', () => {
@@ -169,21 +196,17 @@ describe('DotEditContentCategoryFieldComponent', () => {
 
             const categoryValue = spectator.component.categoryFieldControl.value;
 
-            expect(categoryValue).toEqual([
-                '1f208488057007cedda0e0b5d52ee3b3',
-                'cb83dc32c0a198fd0ca427b3b587f4ce',
-                '1234'
-            ]);
+            expect(categoryValue).toEqual([...SELECTED_LIST_MOCK, '1234']);
         });
 
         it('should set categoryFieldControl value when removing a category', () => {
-            store.removeSelected('1f208488057007cedda0e0b5d52ee3b3');
+            store.removeSelected(SELECTED_LIST_MOCK[0]);
 
             spectator.flushEffects();
 
             const categoryValue = spectator.component.categoryFieldControl.value;
 
-            expect(categoryValue).toEqual(['cb83dc32c0a198fd0ca427b3b587f4ce']);
+            expect(categoryValue).toEqual([SELECTED_LIST_MOCK[1]]);
         });
     });
 });

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/mocks/category-field.mocks.ts

@@ -1,7 +1,7 @@
 import { DotCategory, DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models';
 import { MockDotMessageService } from '@dotcms/utils-testing';
 
-import { DotCategoryFieldKeyValueObj } from '../models/dot-category-field.models';
+import { DotCategoryFieldKeyValueObj, HierarchyParent } from '../models/dot-category-field.models';
 import { transformCategories } from '../utils/category-field.utils';
 
 export const CATEGORY_FIELD_VARIABLE_NAME = 'categorias';
@@ -263,3 +263,42 @@ const MESSAGES_MOCK = {
 };
 
 export const CATEGORY_MESSAGE_MOCK = new MockDotMessageService(MESSAGES_MOCK);
+
+export const CATEGORY_HIERARCHY_MOCK: HierarchyParent[] = [
+    {
+        inode: CATEGORY_LEVEL_1[0].inode,
+        key: CATEGORY_LEVEL_1[0].key,
+        name: CATEGORY_LEVEL_1[0].categoryName,
+
+        parentList: [
+            {
+                inode: CATEGORY_FIELD_MOCK.categories.inode,
+                key: CATEGORY_FIELD_MOCK.categories.key,
+                name: CATEGORY_FIELD_MOCK.categories.categoryName
+            },
+            {
+                inode: CATEGORY_LEVEL_1[0].inode,
+                key: CATEGORY_LEVEL_1[0].key,
+                name: CATEGORY_LEVEL_1[0].categoryName
+            }
+        ]
+    },
+    {
+        inode: CATEGORY_LEVEL_1[1].inode,
+        key: CATEGORY_LEVEL_1[1].key,
+        name: CATEGORY_LEVEL_1[1].categoryName,
+
+        parentList: [
+            {
+                inode: CATEGORY_FIELD_MOCK.categories.inode,
+                key: CATEGORY_FIELD_MOCK.categories.key,
+                name: CATEGORY_FIELD_MOCK.categories.categoryName
+            },
+            {
+                inode: CATEGORY_LEVEL_1[0].inode,
+                key: CATEGORY_LEVEL_1[0].key,
+                name: CATEGORY_LEVEL_1[0].categoryName
+            }
+        ]
+    }
+];

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/models/dot-category-field.models.ts

@@ -23,7 +23,7 @@ export interface DotCategoryFieldKeyValueObj {
  * It is defined as a subset of the DotCategory type, which includes the categoryName,
  * inode, and parentList properties.
  */
-export type HierarchyParent = Pick<DotCategory, 'categoryName' | 'inode' | 'parentList' | 'key'> & {
+export type HierarchyParent = Pick<DotCategory, 'inode' | 'parentList' | 'key'> & {
     name: string;
 };
 

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/services/categories.service.spec.ts

@@ -28,4 +28,14 @@ describe('CategoriesService', () => {
             HttpMethod.GET
         );
     });
+
+    it('can getSelectedHierarchy of selected categories', () => {
+        const keys = ['key1', 'key2', 'key3'];
+        spectator.service.getSelectedHierarchy(keys).subscribe();
+        spectator.expectOne(
+            `${API_URL}/hierarchy`,
+
+            HttpMethod.POST
+        );
+    });
 });