mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
added unit test cases for new functionality
This commit is contained in:
Yasa-Nataliya
+98
-71
@@ -1,33 +1,39 @@
|
||||
<div class="adf-metadata-properties">
|
||||
<mat-accordion displayMode="flat"
|
||||
[multi]="multi">
|
||||
<mat-expansion-panel *ngIf="displayDefaultProperties" [expanded]="true"
|
||||
[attr.data-automation-id]="'adf-metadata-group-properties'" (opened)="generalInfoPanelState = true"
|
||||
(closed)="generalInfoPanelState = false" hideToggle>
|
||||
<mat-expansion-panel-header>
|
||||
<div class="adf-toggle-icons">
|
||||
<mat-icon>
|
||||
{{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
<mat-panel-title class="adf-metadata-properties-title">
|
||||
{{ 'CORE.METADATA.HEADER_TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</div>
|
||||
<button *ngIf="!editableGeneralInfo" mat-icon-button (click)="toggleGeneralEdit($event)"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
|
||||
data-automation-id="meta-data-card-toggle-generalInfo-edit" class="adf-edit-icon-buttons">
|
||||
<mat-icon>mode_edit</mat-icon>
|
||||
</button>
|
||||
<div class="adf-metadata-action-buttons" *ngIf="editableGeneralInfo">
|
||||
<button mat-icon-button (click)="cancelGeneralInfoChanges($event)" data-automation-id="reset-metadata">
|
||||
<mat-expansion-panel *ngIf="displayDefaultProperties"
|
||||
[expanded]="true"
|
||||
[attr.data-automation-id]="'adf-metadata-group-properties'"
|
||||
(opened)="generalInfoPanelState = true"
|
||||
(closed)="generalInfoPanelState = false" hideToggle>
|
||||
<mat-expansion-panel-header>
|
||||
<div class="adf-toggle-icons">
|
||||
<mat-icon>
|
||||
{{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
<mat-panel-title class="adf-metadata-properties-title">
|
||||
{{ 'CORE.METADATA.HEADER_TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</div>
|
||||
<button *ngIf="!editableGeneralInfo"
|
||||
mat-icon-button (click)="toggleGeneralEdit($event)"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
|
||||
data-automation-id="meta-data-card-toggle-generalInfo-edit" class="adf-edit-icon-buttons">
|
||||
<mat-icon>mode_edit</mat-icon>
|
||||
</button>
|
||||
<div class="adf-metadata-action-buttons" *ngIf="editableGeneralInsfo">
|
||||
<button mat-icon-button
|
||||
click)="cancelGeneralInfoChanges($event)"
|
||||
data-automation-id="reset-metadata">
|
||||
<mat-icon>clear</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="saveGeneralInfoChanges($event)" color="primary" data-automation-id="save-generalInfo-metadata"
|
||||
</button>
|
||||
<button mat-icon-button (click)="saveGeneralInfoChanges($event)"
|
||||
color="primary" data-automation-id="save-generalInfo-metadata"
|
||||
[disabled]="!hasMetadataChanged">
|
||||
<mat-icon>check</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
</button>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-divider class="adf-mat-divider"></mat-divider>
|
||||
<adf-card-view
|
||||
(keydown)="keyDown($event)"
|
||||
@@ -41,28 +47,34 @@
|
||||
</mat-expansion-panel>
|
||||
<ng-container *ngIf="displayTags">
|
||||
<mat-expansion-panel (opened)="tagsPanelState = true"
|
||||
(closed)="tagsPanelState = false" hideToggle [expanded]="tagsPanelState">
|
||||
(closed)="tagsPanelState = false" hideToggle [expanded]="tagsPanelState">
|
||||
<mat-expansion-panel-header>
|
||||
<div class="adf-toggle-icons">
|
||||
<mat-icon>
|
||||
{{ tagsPanelState ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
<mat-panel-title class="adf-metadata-properties-title">{{ 'METADATA.BASIC.TAGS' | translate }}</mat-panel-title>
|
||||
</div>
|
||||
<button *ngIf="!editableTags" mat-icon-button (click)="toggleTagsEdit($event)"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
|
||||
data-automation-id="meta-data-card-toggle-tags-edit" class="adf-edit-icon-buttons">
|
||||
<mat-icon>mode_edit</mat-icon>
|
||||
</button>
|
||||
<div class="adf-metadata-action-buttons" *ngIf="editableTags">
|
||||
<button mat-icon-button (click)="CancelTagsChanges($event)" data-automation-id="reset-metadata">
|
||||
<mat-icon>clear</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="saveTagsChanges($event)" color="primary"
|
||||
data-automation-id="save-tags-metadata" [disabled]="!hasMetadataChanged">
|
||||
<mat-icon>check</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="adf-toggle-icons">
|
||||
<mat-icon>{{ tagsPanelState ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
<mat-panel-title class="adf-metadata-properties-title">{{ 'METADATA.BASIC.TAGS' | translate }}</mat-panel-title>
|
||||
</div>
|
||||
<button *ngIf="!editableTags"
|
||||
mat-icon-button (click)="toggleTagsEdit($event)"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
|
||||
data-automation-id="meta-data-card-toggle-tags-edit" class="adf-edit-icon-buttons">
|
||||
<mat-icon>mode_edit</mat-icon>
|
||||
</button>
|
||||
<div class="adf-metadata-action-buttons"
|
||||
*ngIf="editableTags">
|
||||
<button mat-icon-button
|
||||
(click)="CancelTagsChanges($event)"
|
||||
data-automation-id="reset-metadata">
|
||||
<mat-icon>clear</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button
|
||||
(click)="saveTagsChanges($event)"
|
||||
color="primary"
|
||||
data-automation-id="save-tags-metadata"
|
||||
[disabled]="!hasMetadataChanged">
|
||||
<mat-icon>check</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-divider class="adf-mat-divider"></mat-divider>
|
||||
<div *ngIf="!editableTags">
|
||||
@@ -82,18 +94,18 @@
|
||||
</ng-container>
|
||||
<ng-container *ngIf="displayCategories">
|
||||
<mat-expansion-panel (opened)="categoriesPanelState = true"
|
||||
(closed)="categoriesPanelState = false" hideToggle [expanded]="categoriesPanelState">
|
||||
(closed)="categoriesPanelState = false" hideToggle [expanded]="categoriesPanelState">
|
||||
<mat-expansion-panel-header>
|
||||
<div class="adf-toggle-icons">
|
||||
<mat-icon>
|
||||
{{ categoriesPanelState ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
<mat-panel-title class="adf-metadata-properties-title">{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' |
|
||||
translate }}</mat-panel-title>
|
||||
<mat-panel-title class="adf-metadata-properties-title">{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }}</mat-panel-title>
|
||||
</div>
|
||||
<button *ngIf="!editableCategories" mat-icon-button (click)="toggleCategoriesEdit($event)"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
|
||||
data-automation-id="meta-data-card-toggle-categoeies-edit" class="adf-edit-icon-buttons">
|
||||
<button *ngIf="!editableCategories"
|
||||
mat-icon-button (click)="toggleCategoriesEdit($event)"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
|
||||
`data-automation-id="meta-data-card-toggle-categoeies-edit" class="adf-edit-icon-buttons">
|
||||
<mat-icon>mode_edit</mat-icon>
|
||||
</button>
|
||||
<div class="adf-metadata-action-buttons" *ngIf="editableCategories">
|
||||
@@ -114,18 +126,22 @@
|
||||
{{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }}
|
||||
</div>
|
||||
<div *ngIf="editableCategories" class="adf-metadata-categories-header">
|
||||
<adf-categories-management [(categoryNameControlVisible)]="categoryControlVisible"
|
||||
[disableRemoval]="saving" [categories]="categories" [managementMode]="categoriesManagementMode"
|
||||
[classifiableChanged]="classifiableChanged"
|
||||
(categoriesChange)="storeCategoriesToAssign($event)">
|
||||
</adf-categories-management>
|
||||
<adf-categories-management
|
||||
[(categoryNameControlVisible)]="categoryControlVisible"
|
||||
[disableRemoval]="saving" [categories]="categories" [managementMode]="categoriesManagementMode"
|
||||
[classifiableChanged]="classifiableChanged"
|
||||
(categoriesChange)="storeCategoriesToAssign($event)">
|
||||
</adf-categories-management>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
|
||||
<div *ngFor="let group of groupedProperties; let first = first;" class="adf-metadata-grouped-properties-container">
|
||||
<mat-expansion-panel [attr.data-automation-id]="'adf-metadata-group-' + group.title"
|
||||
[expanded]="group.expanded" (opened)="group.expanded= true" (closed)="group.expanded= false" hideToggle>
|
||||
<mat-expansion-panel
|
||||
[attr.data-automation-id]="'adf-metadata-group-' + group.title"
|
||||
[expanded]="group.expanded"
|
||||
(opened)="group.expanded= true"
|
||||
(closed)="group.expanded= false" hideToggle>
|
||||
<mat-expansion-panel-header>
|
||||
<div class="adf-toggle-icons">
|
||||
<mat-icon>
|
||||
@@ -134,29 +150,40 @@
|
||||
{{ group.title | translate }}
|
||||
</mat-panel-title>
|
||||
</div>
|
||||
<button *ngIf="!group.editable" mat-icon-button [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate" data-automation-id="meta-data-card-toggle-edit"
|
||||
class="adf-edit-icon-buttons" (click)="toggleEdit(group, $event)">
|
||||
<button *ngIf="!group.editable"
|
||||
mat-icon-button [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
|
||||
data-automation-id="meta-data-card-toggle-edit"
|
||||
class="adf-edit-icon-buttons"
|
||||
(click)="toggleEdit(group, $event)">
|
||||
<mat-icon>mode_edit</mat-icon>
|
||||
</button>
|
||||
<div class="adf-metadata-action-buttons" *ngIf="group.editable">
|
||||
<button mat-icon-button (click)="cancelGroupChanges(group, $event)" data-automation-id="reset-metadata">
|
||||
<button mat-icon-button
|
||||
(click)="cancelGroupChanges(group, $event)" data-automation-id="reset-metadata">
|
||||
<mat-icon>clear</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="saveGroupChanges(group, $event)" color="primary" data-automation-id="save-metadata"
|
||||
[disabled]="!hasMetadataChanged">
|
||||
<button mat-icon-button
|
||||
(click)="saveGroupChanges(group, $event)"
|
||||
color="primary"
|
||||
data-automation-id="save-metadata"
|
||||
[disabled]="!hasMetadataChanged">
|
||||
<mat-icon>check</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-divider class="adf-mat-divider"></mat-divider>
|
||||
<adf-card-view (keydown)="keyDown($event)" [properties]="group.properties" [editable]="group.editable"
|
||||
[displayEmpty]="displayEmpty" [copyToClipboardAction]="copyToClipboardAction"
|
||||
[useChipsForMultiValueProperty]="useChipsForMultiValueProperty" [multiValueSeparator]="multiValueSeparator">
|
||||
</adf-card-view>
|
||||
</mat-expansion-panel>
|
||||
<adf-card-view
|
||||
(keydown)="keyDown($event)"
|
||||
[properties]="group.properties"
|
||||
[editable]="group.editable"
|
||||
[displayEmpty]="displayEmpty"
|
||||
[copyToClipboardAction]="copyToClipboardAction"
|
||||
[useChipsForMultiValueProperty]="useChipsForMultiValueProperty" [multiValueSeparator]="multiValueSeparator">
|
||||
</adf-card-view>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #loading>
|
||||
<mat-progress-bar mode="indeterminate" [attr.aria-label]="'DATA_LOADING' | translate">
|
||||
</mat-progress-bar>
|
||||
|
||||
+122
@@ -390,8 +390,130 @@ describe('ContentMetadataComponent', () => {
|
||||
expect(component.node).toEqual(expectedNode);
|
||||
expect(updateService.updateNodeAspect).toHaveBeenCalledWith(expectedNode);
|
||||
}));
|
||||
|
||||
it('should save general info changes and toggle editableGeneralInfo', () => {
|
||||
const event = new Event('click');
|
||||
spyOn(component, 'saveChanges');
|
||||
component.editableGeneralInfo = true;
|
||||
component.saveGeneralInfoChanges(event);
|
||||
expect(component.saveChanges).toHaveBeenCalledWith(event);
|
||||
expect(component.editableGeneralInfo).toBe(false);
|
||||
});
|
||||
|
||||
it('should save group changes and set group editable to false', () => {
|
||||
const group = { editable: true };
|
||||
const event = new Event('click');
|
||||
spyOn(component, 'saveChanges');
|
||||
component.saveGroupChanges(group, event);
|
||||
expect(component.saveChanges).toHaveBeenCalledWith(event);
|
||||
expect(group.editable).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
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 editableGeneralInfo', () => {
|
||||
const event = new Event('click');
|
||||
spyOn(component, 'cancelChanges');
|
||||
component.editableGeneralInfo = true;
|
||||
component.cancelGeneralInfoChanges(event);
|
||||
expect(component.cancelChanges).toHaveBeenCalledWith(event);
|
||||
expect(component.editableGeneralInfo).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 };
|
||||
component.expandePanel = jasmine.createSpy();
|
||||
component.toggleEdit(group, event);
|
||||
expect(event.stopPropagation).toHaveBeenCalled();
|
||||
expect(group.editable).toBe(true);
|
||||
expect(component.expandePanel).toHaveBeenCalledWith(group);
|
||||
});
|
||||
|
||||
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 };
|
||||
component.expandePanel = jasmine.createSpy();
|
||||
component.toggleEdit(group, event);
|
||||
expect(event.stopPropagation).toHaveBeenCalled();
|
||||
expect(group.editable).toBe(false);
|
||||
expect(component.expandePanel).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should toggle general info edit and set generalInfoPanelState accordingly', () => {
|
||||
const event = new Event('click');
|
||||
spyOn(event, 'stopPropagation');
|
||||
component.generalInfoPanelState = true;
|
||||
component.editableGeneralInfo = false;
|
||||
component.toggleGeneralEdit(event);
|
||||
expect(event.stopPropagation).toHaveBeenCalled();
|
||||
expect(component.editableGeneralInfo).toBe(true);
|
||||
expect(component.generalInfoPanelState).toBe(true);
|
||||
component.toggleGeneralEdit(event);
|
||||
expect(component.editableGeneralInfo).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' } };
|
||||
|
||||
Reference in New Issue
Block a user