inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

CSX-73 Date and Select Satori (#11056)

Browse Source 
* CSX-73 Date and Select Satori

* CSX-73 Fix process-header unit test

* CSX-73 Fix core unit test

* CSX-73 Fix core unit test

* CSX-73 Fix task-header unit test

* CSX-73 Fix task-header unit test

* CSX-73 Fix task-header unit test

* CSX-73 Fix card-view dateitem

* CSX-73 Fix card-view dateitem

---------

Co-authored-by: Sahana Ghosal <sahana.ghosal@hyland.com>
This commit is contained in:
Samuel Fialho
2025-08-18 14:32:55 +01:00
committed by GitHub
parent 9deaab4c11
commit 9b6688ce10
9 changed files with 155 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
View File

@@ -1,29 +1,50 @@
<mat-form-field
*ngIf="showProperty && !isEditable && !property.multivalued"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)"
[ngClass]="{ 'adf-property-read-only': !isEditable }"
class="adf-property-field">
<mat-label <mat-label
class="adf-property-label" class="adf-property-label"
[ngClass]="{
'adf-property-value-editable': editable,
'adf-property-readonly-value': isReadonlyProperty
}"
[attr.data-automation-id]="'card-dateitem-label-' + property.key" [attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty && !isEditable"
[attr.for]="'card-view-dateitem-' + property.key" [attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate" [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
> >
{{ property.label | translate }} {{ property.label | translate }}
</mat-label> </mat-label>
<input
<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }"> matInput
<span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span
*ngIf="showProperty"
[attr.data-automation-id]="'card-dateitem-' + property.key" [attr.data-automation-id]="'card-dateitem-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)" [value]="property.displayValue"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate" title="{{ property.label | translate }}"
>{{ property.displayValue }}</span [attr.id]="'card-view-dateitem-' + property.key"
[attr.tabIndex]="-1"
[attr.aria-label]="property.label | translate"
class="adf-property-value"
[ngClass]="{
'adf-property-value-editable': editable,
'adf-property-readonly-value': isReadonlyProperty,
}"
readonly
disabled
/>
</mat-form-field>
<div
class="adf-property-value"
[ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }"
> >
</span>
<mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable hxp-input" [floatLabel]="property.default ? 'always' : null"> <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable adf-property-field hxp-input" [floatLabel]="property.default ? 'always' : null">
<mat-label <mat-label
*ngIf="isEditable"
class="adf-property-label" class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key" [attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="isEditable"
[attr.for]="'card-view-dateitem-' + property.key" [attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }" [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate" [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
@@ -79,6 +100,7 @@
[startAt]="valueDate" [startAt]="valueDate"
/> />
</mat-form-field> </mat-form-field>
</div>
<ng-template #elseEmptyValueBlock> <ng-template #elseEmptyValueBlock>
{{ property.default | translate }} {{ property.default | translate }}
</ng-template> </ng-template>
@@ -126,4 +148,3 @@
/> />
</div> </div>
</div> </div>
</div>

9
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
View File

@@ -64,14 +64,14 @@ describe('CardViewDateItemComponent', () => {
afterEach(() => fixture.destroy()); afterEach(() => fixture.destroy());
const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label'); const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value'); const getPropertyInputValue = (): HTMLInputElement => testingUtils.getInputByCSS('.adf-property-value');
const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button'); const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button');
it('should render the label and value', () => { it('should render the label and value', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(getPropertyLabel()).toBe('Date label'); expect(getPropertyLabel()).toBe('Date label');
expect(getPropertyValue().trim()).toBe('Jul 10, 2017'); expect(getPropertyInputValue().value.trim()).toBe('Jul 10, 2017');
}); });
it('should NOT render the default as value if the value is empty, editable:false and displayEmpty is false', () => { it('should NOT render the default as value if the value is empty, editable:false and displayEmpty is false', () => {
@@ -87,6 +87,7 @@ describe('CardViewDateItemComponent', () => {
component.displayEmpty = false; component.displayEmpty = false;
fixture.detectChanges(); fixture.detectChanges();
const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
expect(getPropertyValue().trim()).toBe(''); expect(getPropertyValue().trim()).toBe('');
}); });
@@ -103,7 +104,7 @@ describe('CardViewDateItemComponent', () => {
component.displayEmpty = true; component.displayEmpty = true;
fixture.detectChanges(); fixture.detectChanges();
expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY'); expect(getPropertyInputValue().value.trim()).toBe('FAKE-DEFAULT-KEY');
}); });
it('should render the default as value if the value is empty and editable:true', () => { it('should render the default as value if the value is empty and editable:true', () => {
@@ -213,7 +214,7 @@ describe('CardViewDateItemComponent', () => {
component.editable = false; component.editable = false;
fixture.detectChanges(); fixture.detectChanges();
testingUtils.doubleClickByDataAutomationId(`card-dateitem-${component.property.key}`); testingUtils.doubleClickByDataAutomationId(`card-${component.property.type}-value-${component.property.key}`);
fixture.detectChanges(); fixture.detectChanges();
expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE'); expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');

33
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
View File

@@ -1,23 +1,28 @@
<ng-container *ngIf="!property.isEmpty() || isEditable"> <ng-container *ngIf="!property.isEmpty() || isEditable">
<div [ngSwitch]="templateType"> <div [ngSwitch]="templateType">
<div *ngSwitchDefault> <div *ngSwitchDefault>
<div *ngIf="!isEditable" <mat-form-field
[attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label adf-property-label-non-editable"
>{{ property.label | translate }}
</div>
<div class="adf-property-field">
<div
*ngIf="!isEditable" *ngIf="!isEditable"
class="adf-property-value adf-property-read-only"
[attr.data-automation-id]="'select-readonly-value-' + property.key" [attr.data-automation-id]="'select-readonly-value-' + property.key"
data-automation-class="read-only-value"
[title]="property.displayValue | async | translate" [title]="property.displayValue | async | translate"
class="adf-property-list adf-property adf-property-field"
> >
{{ property.displayValue | async | translate }} <mat-label
</div> [attr.data-automation-id]="'card-select-label-' + property.key"
<div *ngIf="isEditable"> >
<mat-form-field class="adf-property-value"> {{ property.label | translate }}
</mat-label>
<input
matInput
class="adf-property-value"
[attr.tabIndex]="-1"
[value]="property.displayValue | async | translate"
data-automation-class="read-only-value"
disabled
readonly
/>
</mat-form-field>
<mat-form-field class="adf-property-value" *ngIf="isEditable">
<mat-label <mat-label
[attr.data-automation-id]="'card-select-label-' + property.key" [attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label adf-property-value-editable" class="adf-property-label adf-property-value-editable"
@@ -42,8 +47,6 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
</div>
</div>
<div *ngSwitchCase="'autocompleteBased'"> <div *ngSwitchCase="'autocompleteBased'">
<mat-form-field <mat-form-field
class="adf-property-field adf-card-selectitem-autocomplete " class="adf-property-field adf-card-selectitem-autocomplete "

13
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
View File

@@ -25,7 +25,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { UnitTestingUtils } from '../../../testing/unit-testing-utils'; import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
import { CardViewUpdateService } from '../../services/card-view-update.service'; import { CardViewUpdateService } from '../../services/card-view-update.service';
import { DebugElement } from '@angular/core'; import { DebugElement, SimpleChange } from '@angular/core';
describe('CardViewSelectItemComponent', () => { describe('CardViewSelectItemComponent', () => {
let loader: HarnessLoader; let loader: HarnessLoader;
@@ -85,7 +85,8 @@ describe('CardViewSelectItemComponent', () => {
editable: false editable: false
}); });
fixture.detectChanges(); fixture.detectChanges();
expect(testingUtils.getInnerTextByCSS('.adf-property-label')).toBe('Select box label');
expect(testingUtils.getInnerTextByDataAutomationId('card-select-label-key')).toBe('Select box label');
}); });
it('should render readOnly value is editable property is FALSE', () => { it('should render readOnly value is editable property is FALSE', () => {
@@ -109,7 +110,9 @@ describe('CardViewSelectItemComponent', () => {
}); });
fixture.detectChanges(); fixture.detectChanges();
expect(getReadOnlyElement().nativeElement.title).toBe('Two');
const inputEl = getReadOnlyElement().nativeElement as HTMLInputElement;
expect(inputEl.value).toBe('Two');
}); });
it('should be possible edit selectBox item', async () => { it('should be possible edit selectBox item', async () => {
@@ -284,7 +287,9 @@ describe('CardViewSelectItemComponent', () => {
const autocompleteValueSpy = spyOn(cardViewUpdateService.autocompleteInputValue$, 'next'); const autocompleteValueSpy = spyOn(cardViewUpdateService.autocompleteInputValue$, 'next');
component.editedValue = ''; component.editedValue = '';
component.editable = true; component.editable = true;
component.ngOnChanges({ property: { firstChange: true } } as any); component.ngOnChanges({
property: new SimpleChange(undefined, component.property, true)
});
fixture.detectChanges(); fixture.detectChanges();
component.autocompleteControl.setValue('new value'); component.autocompleteControl.setValue('new value');

2
lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
View File

@@ -53,7 +53,7 @@ describe('CardViewComponent', () => {
const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label'); const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
const getPropertyValue = (): string => testingUtils.getByCSS('.adf-property-value').nativeElement.value; const getPropertyValue = (): string => testingUtils.getByCSS('.adf-property-value').nativeElement.value;
const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-property-value'); const getPropertyValueText = (): string => testingUtils.getInputByCSS('.adf-property-value').value;
const getPropertyValueByDataAutomationId = (dataAutomationId: string): string => const getPropertyValueByDataAutomationId = (dataAutomationId: string): string =>
testingUtils.getByDataAutomationId(dataAutomationId).nativeElement.value; testingUtils.getByDataAutomationId(dataAutomationId).nativeElement.value;

8
lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.spec.ts
View File

@@ -111,7 +111,7 @@ describe('ProcessHeaderCloudComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value')); const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value'));
expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019'); expect(valueEl.nativeElement.value.trim()).toBe('Mar 9, 2019');
}); });
it('should display lastModified date', async () => { it('should display lastModified date', async () => {
@@ -121,7 +121,7 @@ describe('ProcessHeaderCloudComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value')); const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019'); expect(valueEl.nativeElement.value.trim()).toBe('Mar 9, 2019');
}); });
it('should display parentId', async () => { it('should display parentId', async () => {
@@ -216,8 +216,8 @@ describe('ProcessHeaderCloudComponent', () => {
const lastModifiedElement = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value')); const lastModifiedElement = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
expect(component.dateFormat).toEqual('full'); expect(component.dateFormat).toEqual('full');
expect(startedDateElement.nativeElement.innerText.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00'); expect(startedDateElement.nativeElement.value.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
expect(lastModifiedElement.nativeElement.innerText.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00'); expect(lastModifiedElement.nativeElement.value.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
}); });
}); });
}); });

2
lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
View File

@@ -506,7 +506,7 @@ describe('TaskHeaderCloudComponent', () => {
const createdDateElement = fixture.debugElement.query(By.css('[data-automation-id="header-created"] .adf-property-value')); const createdDateElement = fixture.debugElement.query(By.css('[data-automation-id="header-created"] .adf-property-value'));
expect(component.dateFormat).toEqual('full'); expect(component.dateFormat).toEqual('full');
expect(createdDateElement.nativeElement.innerText.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00'); expect(createdDateElement.nativeElement.value.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00');
}); });
}); });

4
lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.spec.ts
View File

@@ -207,9 +207,7 @@ describe('TaskAttachmentList', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual( expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').value.trim()).toEqual('ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER');
'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER'
);
}); });
}); });

6
lib/process-services/src/lib/process-list/components/process-instance-header/process-instance-header.component.spec.ts
View File

@@ -64,7 +64,7 @@ describe('ProcessInstanceHeaderComponent', () => {
component.ngOnChanges(); component.ngOnChanges();
fixture.detectChanges(); fixture.detectChanges();
const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]'); const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]');
expect(valueEl.innerText).toBe('Nov 3, 2016'); expect(valueEl.value).toBe('Nov 3, 2016');
}); });
it('should display placeholder if no due date', () => { it('should display placeholder if no due date', () => {
@@ -72,7 +72,7 @@ describe('ProcessInstanceHeaderComponent', () => {
component.ngOnChanges(); component.ngOnChanges();
fixture.detectChanges(); fixture.detectChanges();
const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]'); const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]');
expect(valueEl.innerText).toBe('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT'); expect(valueEl.value).toBe('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT');
}); });
it('should display process category', async () => { it('should display process category', async () => {
@@ -98,7 +98,7 @@ describe('ProcessInstanceHeaderComponent', () => {
component.ngOnChanges(); component.ngOnChanges();
fixture.detectChanges(); fixture.detectChanges();
const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-created"]'); const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-created"]');
expect(valueEl.innerText).toBe('Nov 3, 2016'); expect(valueEl.value).toBe('Nov 3, 2016');
}); });
it('should display started by', async () => { it('should display started by', async () => {