added unit test cases for new functionality

lib/content-services/src/lib/category/categories-management/categories-management.component.html

@@ -2,7 +2,8 @@
     <div *ngIf="((!categoryNameControlVisible && categories.length)) || categoryNameControlVisible"
          class="adf-category-name-field">
         <input #categoryNameInput
-               matInput autocomplete="off"
+               matInput 
+               autocomplete="off"
                [formControl]="categoryNameControl"
                (keyup.enter)="addCategory()"
                aria-labelledby="adf-category-name-input-label"

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -5,8 +5,8 @@
                              [expanded]="canExpandProperties()"
                              [attr.data-automation-id]="'adf-metadata-group-properties'"
                              hideToggle
-                             (opened)="handleGneralPanelOpen()"
-                             (closed)="handleGeneralPanelClose()">
+                             (opened)="generalTogglePanelState()"
+                             (closed)="generalTogglePanelState()">
             <mat-expansion-panel-header>
                 <div class="adf-toggle-icons">
                     <mat-icon>
@@ -54,8 +54,8 @@
         </mat-expansion-panel>
         <ng-container *ngIf="displayTags">
             <mat-expansion-panel 
-                            (opened)="handlePanelOpen()"
-                            (closed)="handlePanelClose()" hideToggle
+                            (opened)="handleTagPanelOpen()"
+                            (closed)="handleTagPanelClose()" hideToggle
                             [expanded]="tagsPanelState">
                 <mat-expansion-panel-header>
                     <div class="adf-toggle-icons">

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts

@@ -398,6 +398,109 @@ describe('ContentMetadataComponent', () => {
         }));
     });
 
+    describe('cancelChanges', () => {
+        it('should cancel group changes and set group editable to false', () => {
+            const group = { editable: true };
+            const event = new Event('click');
+            spyOn(component, 'cancelChanges');
+            component.cancelGroupChanges(group, event);
+            expect(component.cancelChanges).toHaveBeenCalledWith(event);
+            expect(group.editable).toBe(false);
+        });
+
+        it('should cancel general info changes and toggle editable', () => {
+            const event = new Event('click');
+            spyOn(component, 'cancelChanges');
+            component.editable= true;
+            component.cancelGeneralInfoChanges(event);
+            expect(component.cancelChanges).toHaveBeenCalledWith(event);
+            expect(component.editable).toBe(false);
+        });
+
+        it('should cancel tags changes and toggle editableTags', () => {
+            const event = new Event('click');
+            spyOn(component, 'cancelChanges');
+            component.editableTags = true;
+            component.CancelTagsChanges(event);
+            expect(component.cancelChanges).toHaveBeenCalledWith(event);
+            expect(component.editableTags).toBe(false);
+        });
+
+        it('should cancel categories changes and toggle editableCategories', () => {
+            const event = new Event('click');
+            spyOn(component, 'cancelChanges');
+            component.editableCategories = true;
+            component.cancelCategoriesChanges(event);
+            expect(component.cancelChanges).toHaveBeenCalledWith(event);
+            expect(component.editableCategories).toBe(false);
+        });
+    })
+
+    describe('editing', () => {
+        it('should toggle categories edit and set categoriesPanelState accordingly', () => {
+            const event = new Event('click');
+            spyOn(event, 'stopPropagation');
+            component.editableCategories = false;
+            component.categoriesPanelState = false;
+            component.toggleCategoriesEdit(event);
+            expect(event.stopPropagation).toHaveBeenCalled();
+            expect(component.editableCategories).toBe(true);
+            expect(component.categoriesPanelState).toBe(true);
+            component.toggleCategoriesEdit(event);
+            expect(component.editableCategories).toBe(false);
+            expect(component.categoriesPanelState).toBe(false);
+        });
+
+        it('should toggle group edit and expand the panel if editable', () => {
+            const event = new Event('click');
+            spyOn(event, 'stopPropagation');
+            const group = { editable: false, expanded: false };
+            component.toggleEdit(group, event);
+            expect(event.stopPropagation).toHaveBeenCalled();
+            expect(group.editable).toBe(true);
+            expect(group.expanded).toBe(true);
+        });
+        
+        it('should toggle group edit but not expand the panel if not editable', () => {
+            const event = new Event('click');
+            spyOn(event, 'stopPropagation');
+            const group = { editable: true, expanded: true };
+            component.toggleEdit(group, event);
+            expect(event.stopPropagation).toHaveBeenCalled();
+            expect(group.editable).toBe(false);
+            expect(group.expanded).toBe(true);
+        });
+        
+
+        it('should toggle general info edit and set generalInfoPanelState accordingly', () => {
+            const event = new Event('click');
+            spyOn(event, 'stopPropagation');
+            component.generalInfoPanelState = true;
+            component.editable = false;
+            component.toggleGeneralEdit(event);
+            expect(event.stopPropagation).toHaveBeenCalled();
+            expect(component.editable).toBe(true);
+            expect(component.generalInfoPanelState).toBe(true);
+            component.toggleGeneralEdit(event);
+            expect(component.editable).toBe(false);
+            expect(component.generalInfoPanelState).toBe(true);
+        });
+
+        it('should toggle tags edit and set tagsPanelState accordingly', () => {
+            const event = new Event('click');
+            spyOn(event, 'stopPropagation');
+            component.editableTags = false;
+            component.tagsPanelState = false;
+            component.toggleTagsEdit(event);
+            expect(event.stopPropagation).toHaveBeenCalled();
+            expect(component.editableTags).toBe(true);
+            expect(component.tagsPanelState).toBe(true);
+            component.toggleTagsEdit(event);
+            expect(component.editableTags).toBe(false);
+            expect(component.tagsPanelState).toBe(false);
+        });
+    })
+
     describe('Reseting', () => {
         it('should reset changedProperties on reset click', async () => {
             component.changedProperties = { properties: { 'property-key': 'updated-value' } };

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -335,7 +335,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     toggleGeneralEdit(event: Event): void {
         event.stopPropagation();
         this.editable = !this.editable;
-        if (!this.panel.expanded) {
+        if (this.editable) {
             this.panel.open();
         }
     }
@@ -370,34 +370,29 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         }
     }
 
-    handlePanelOpen() {
+    handleTagPanelOpen() {
         this.tagsPanelState = true;
-        this.cdr.detectChanges(); // Explicitly trigger change detection
+        this.cdr.detectChanges();
     }
     
-    handlePanelClose() {
+    handleTagPanelClose() {
         this.tagsPanelState = false;
-        this.cdr.detectChanges(); // Explicitly trigger change detection
+        this.cdr.detectChanges();
     }
 
-    handleGneralPanelOpen() {
-        this.generalInfoPanelState = true;
-        this.cdr.detectChanges(); // Explicitly trigger change detection
-    }
-    
-    handleGeneralPanelClose() {
-        this.generalInfoPanelState = false;
-        this.cdr.detectChanges(); // Explicitly trigger change detection
+    generalTogglePanelState() {
+        this.generalInfoPanelState = !this.generalInfoPanelState;
+        this.cdr.detectChanges();
     }
 
     handleCategoryPanelOpen() {
         this.categoriesPanelState = true;
-        this.cdr.detectChanges(); // Explicitly trigger change detection
+        this.cdr.detectChanges();
     }
     
     handleCategoryPanelClose() {
         this.categoriesPanelState = false;
-        this.cdr.detectChanges(); // Explicitly trigger change detection
+        this.cdr.detectChanges();
     }
     
     showGroup(group: CardViewGroup): boolean {

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html

@@ -2,16 +2,17 @@
     <div class="adf-tag-name-field" *ngIf="(!tagNameControlVisible && tags.length) || tagNameControlVisible">
         <div class="adf-tag-search-field">
             <input #tagNameInput
-                    matInput autocomplete="off"
+                    matInput 
+                    autocomplete="off"
                     [formControl]="tagNameControl"
                     (keyup.enter)="addTag()"
                     aria-labelledby="adf-tag-name-input-label"
                     adf-auto-focus
                     placeholder="{{'TAG.TAGS_CREATOR.INPUT_PLACEHOLDER' | translate}}" 
             />
+    <mat-error [hidden]="!tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
         </div>
     </div>
-    <mat-error [hidden]="!tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
     <p
        class="adf-no-tags-message"
        *ngIf="!tags.length">