feat(edit-content) add test #29265

dotCMS · Jul 18, 2024 · 2cf065d · 2cf065d
1 parent d928a39
commit 2cf065d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/...nents/dot-category-field-category-list/dot-category-field-category-list.component.spec.ts b/...nents/dot-category-field-category-list/dot-category-field-category-list.component.spec.ts
@@ -14,6 +14,7 @@ import {
     CATEGORY_MOCK_TRANSFORMED,
     SELECTED_LIST_MOCK
 } from '../../mocks/category-field.mocks';
+import { DotCategoryFieldListSkeletonComponent } from '../dot-category-field-list-skeleton/dot-category-field-list-skeleton.component';
 
 describe('DotCategoryFieldCategoryListComponent', () => {
     let spectator: Spectator<DotCategoryFieldCategoryListComponent>;
@@ -24,12 +25,10 @@ describe('DotCategoryFieldCategoryListComponent', () => {
     });
 
     beforeEach(() => {
-        spectator = createComponent({
-            props: {
-                categories: CATEGORY_LIST_MOCK_TRANSFORMED_MATRIX,
-                selected: SELECTED_LIST_MOCK
-            }
-        });
+        spectator = createComponent();
+        spectator.setInput('categories', CATEGORY_LIST_MOCK_TRANSFORMED_MATRIX);
+        spectator.setInput('selected', SELECTED_LIST_MOCK);
+        spectator.setInput('isLoading', false);
 
         spectator.detectChanges();
     });
@@ -78,12 +77,11 @@ describe('DotCategoryFieldCategoryListComponent', () => {
     });
 
     it('should apply selected class to the correct item', () => {
-        spectator = createComponent({
-            props: {
-                categories: [CATEGORY_MOCK_TRANSFORMED],
-                selected: SELECTED_LIST_MOCK
-            }
-        });
+        // spectator = createComponent();
+
+        spectator.setInput('categories', [CATEGORY_MOCK_TRANSFORMED]);
+        spectator.setInput('selected', SELECTED_LIST_MOCK);
+        spectator.setInput('isLoading', false);
 
         spectator.detectChanges();
 
@@ -97,15 +95,24 @@ describe('DotCategoryFieldCategoryListComponent', () => {
         const minColumns = 4;
         const testCategories = Array(minColumns).fill(CATEGORY_LIST_MOCK_TRANSFORMED_MATRIX[0]);
 
-        spectator = createComponent({
-            props: {
-                categories: testCategories,
-                selected: SELECTED_LIST_MOCK
-            }
-        });
+        // spectator = createComponent();
+
+        spectator.setInput('categories', testCategories);
+        spectator.setInput('selected', SELECTED_LIST_MOCK);
+        spectator.setInput('isLoading', false);
 
         spectator.detectChanges();
 
         expect(spectator.queryAll(byTestId('category-column-empty')).length).toBe(0);
     });
+
+    it('should render the skeleton component if is loading', () => {
+        spectator.setInput('categories', [CATEGORY_MOCK_TRANSFORMED]);
+        spectator.setInput('selected', SELECTED_LIST_MOCK);
+        spectator.setInput('isLoading', true);
+
+        spectator.detectChanges();
+
+        expect(spectator.query(DotCategoryFieldListSkeletonComponent)).not.toBeNull();
+    });
 });
diff --git a/...components/dot-category-field-category-list/dot-category-field-category-list.component.ts b/...components/dot-category-field-category-list/dot-category-field-category-list.component.ts
@@ -61,12 +61,12 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
     /**
      * Represents the variable 'categories' which is of type 'DotCategoryFieldCategory[][]'.
      */
-    $categories = input.required<DotCategoryFieldKeyValueObj[][]>({ alias: 'categories' });
+    $categories = input<DotCategoryFieldKeyValueObj[][]>([], { alias: 'categories' });
 
     /**
      * Represent the selected item saved in the contentlet
      */
-    $selected = input.required<string[]>({ alias: 'selected' });
+    $selected = input<string[]>([], { alias: 'selected' });
 
     /**
      * Generate the empty columns
@@ -83,7 +83,7 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
     /**
      * Represents a variable indicating if the component is in loading state.
      */
-    $isLoading = input.required<boolean>({ alias: 'isLoading' });
+    $isLoading = input<boolean>(true, { alias: 'isLoading' });
 
     /**
      * Emit the item clicked to the parent component