[ADF-3259] [ADF-3363] e2e login and card metadata (#3612)

* remember me

* add login component e2e test

* add success route test

* add change logo check

* redirect url after logout e2e

* move redirection test in a separate file

* login component tslint

* cardview e2e

* fix login test

* add test case number

* move version test in a separate file

* clean unused elements

* metadata part 1

* tslint fix

* fix metadata test

* remove fit

* fix formatting file viewerPage

* multi propety test

* metadata and login improvements

* fix data automation fix

* metadata permission e2e

* fix tslint problems

* improve selector

* stabilize search component test

* stabilize test step 1

* fix tag test
add config timeout

* tentative

* delay after download

* change meatdata test

* stabilize metadata

* use smaller file for not extension related test

* stabilize test step 2

* exclude failing test

* timeout fix

* split in multiple task e2e

* trick travis

* trigger build

* fix command issue

* fix save screenshot

* fix run subfolder

* test timeout increase

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

@@ -15,17 +15,17 @@
                 mat-icon-button
                 (click)="toggleEdit()"
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                data-automation-id="mata-data-card-toggle-edit">
+                data-automation-id="meta-data-card-toggle-edit">
                 <mat-icon>mode_edit</mat-icon>
             </button>
         </div>
-        <button mat-button (click)="toggleExpanded()" data-automation-id="mata-data-card-toggle-expand">
+        <button mat-button (click)="toggleExpanded()" data-automation-id="meta-data-card-toggle-expand">
             <ng-container *ngIf="!expanded">
-                <span data-automation-id="mata-data-card-toggle-expand-label">{{ 'ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION' | translate }}</span>
+                <span data-automation-id="meta-data-card-toggle-expand-label">{{ 'ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION' | translate }}</span>
                 <mat-icon>keyboard_arrow_down</mat-icon>
             </ng-container>
             <ng-container *ngIf="expanded">
-                <span data-automation-id="mata-data-card-toggle-expand-label">{{ 'ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION' | translate }}</span>
+                <span data-automation-id="meta-data-card-toggle-expand-label">{{ 'ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION' | translate }}</span>
                 <mat-icon>keyboard_arrow_up</mat-icon>
             </ng-container>
         </button>

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

@@ -120,7 +120,7 @@ describe('ContentMetadataCardComponent', () => {
         component.node.allowableOperations = [PermissionsEnum.UPDATE];
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-edit"]'));
+        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
         button.triggerEventHandler('click', {});
         fixture.detectChanges();
 
@@ -131,7 +131,7 @@ describe('ContentMetadataCardComponent', () => {
         component.expanded = true;
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-expand"]'));
+        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand"]'));
         button.triggerEventHandler('click', {});
         fixture.detectChanges();
 
@@ -142,7 +142,7 @@ describe('ContentMetadataCardComponent', () => {
         component.expanded = false;
         fixture.detectChanges();
 
-        const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-expand-label"]'));
+        const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand-label"]'));
 
         expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION');
     });
@@ -151,7 +151,7 @@ describe('ContentMetadataCardComponent', () => {
         component.expanded = true;
         fixture.detectChanges();
 
-        const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-expand-label"]'));
+        const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand-label"]'));
 
         expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION');
     });
@@ -160,7 +160,7 @@ describe('ContentMetadataCardComponent', () => {
         component.readOnly = true;
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-edit"]'));
+        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
         expect(button).toBeNull();
     });
 
@@ -169,7 +169,7 @@ describe('ContentMetadataCardComponent', () => {
         component.node.allowableOperations = null;
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-edit"]'));
+        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
         expect(button).toBeNull();
     });
 
@@ -178,7 +178,7 @@ describe('ContentMetadataCardComponent', () => {
         component.node.allowableOperations = [PermissionsEnum.UPDATE];
         fixture.detectChanges();
 
-        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-edit"]'));
+        const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
         expect(button).not.toBeNull();
     });
 });

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

@@ -1,6 +1,6 @@
 <div class="adf-metadata-properties">
     <mat-accordion displayMode="flat" [multi]="multi">
-        <mat-expansion-panel [expanded]="!expanded" [hideToggle]="!expanded">
+        <mat-expansion-panel [expanded]="!expanded" [hideToggle]="!expanded" [attr.data-automation-id]="'adf-metadata-group-properties'" >
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     {{ 'CORE.METADATA.BASIC.HEADER' | translate }}
@@ -17,7 +17,7 @@
         <ng-container *ngIf="expanded">
             <ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
                 <div *ngFor="let group of groupedProperties" class="adf-metadata-grouped-properties-container">
-                    <mat-expansion-panel>
+                    <mat-expansion-panel [attr.data-automation-id]="'adf-metadata-group-' + group.title" >
                         <mat-expansion-panel-header>
                             <mat-panel-title>
                                 {{ group.title | translate }}
@@ -37,4 +37,4 @@
             </ng-template>
         </ng-container>
     </mat-accordion>
-</div>
+</div>

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

@@ -49,7 +49,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     expanded: boolean = false;
 
-    /** The multi parameter of the underlying material expansion panel */
+    /** The multi parameter of the underlying material expansion panel, set to true to allow multi accordion to be expanded at the same time */
     @Input()
     multi = false;
 

lib/content-services/permission-manager/services/node-permission-dialog.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppConfigService, setupTestBed, ContentService } from '@alfresco/adf-core';
 import { NodePermissionDialogService } from './node-permission-dialog.service';
 import { MatDialog } from '@angular/material';

lib/content-services/tag/tag-actions.component.html

@@ -1,7 +1,7 @@
 <mat-list>
     <mat-list-item *ngFor="let currentEntry of tagsEntries; let idx = index">
-        <div class="adf-tag-actions-container" id="tag_delete_{{idx}}" (click)="removeTag(currentEntry.entry.id)">
-            <div class="adf-tag-actions-delete-text" id="tag_name_{{idx}}">
+        <div class="adf-tag-actions-container" id="tag_delete_{{currentEntry.entry.tag}}" (click)="removeTag(currentEntry.entry.id)">
+            <div class="adf-tag-actions-delete-text" id="tag_name_{{currentEntry.entry.tag}}">
                 {{currentEntry.entry.tag}}
             </div>
             <mat-icon class="adf-tag-actions-delete-icon">delete</mat-icon>

lib/content-services/tag/tag-actions.component.spec.ts

@@ -80,13 +80,13 @@ describe('TagActionsComponent', () => {
             component.result.subscribe(() => {
                 fixture.detectChanges();
 
-                expect(element.querySelector('#tag_name_0').innerHTML.trim()).toBe('test1');
-                expect(element.querySelector('#tag_name_1').innerHTML.trim()).toBe('test2');
-                expect(element.querySelector('#tag_name_2').innerHTML.trim()).toBe('test3');
+                expect(element.querySelector('#tag_name_test1').innerHTML.trim()).toBe('test1');
+                expect(element.querySelector('#tag_name_test2').innerHTML.trim()).toBe('test2');
+                expect(element.querySelector('#tag_name_test3').innerHTML.trim()).toBe('test3');
 
-                expect(element.querySelector('#tag_delete_0')).not.toBe(null);
-                expect(element.querySelector('#tag_delete_1')).not.toBe(null);
-                expect(element.querySelector('#tag_delete_2')).not.toBe(null);
+                expect(element.querySelector('#tag_delete_test1')).not.toBe(null);
+                expect(element.querySelector('#tag_delete_test2')).not.toBe(null);
+                expect(element.querySelector('#tag_delete_test3')).not.toBe(null);
 
                 done();
             });
@@ -106,7 +106,7 @@ describe('TagActionsComponent', () => {
             component.result.subscribe(() => {
                 fixture.detectChanges();
 
-                let deleteButton: any = element.querySelector('#tag_delete_0');
+                let deleteButton: any = element.querySelector('#tag_delete_test1');
                 deleteButton.click();
 
                 expect(jasmine.Ajax.requests.at(1).url)

lib/content-services/tag/tag-node-list.component.html

@@ -1,7 +1,7 @@
 <mat-chip-list>
     <mat-chip class="adf-tag-chips adf-primary-background-color" *ngFor="let currentEntry of tagsEntries; let idx = index">
         <span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
-        <button class="adf-tag-chips-delete" id="tag_delete_{{idx}}" type="button" (click)="removeTag(currentEntry.entry.id)">
+        <button class="adf-tag-chips-delete" id="tag_chips_delete_{{currentEntry.entry.tag}}" type="button" (click)="removeTag(currentEntry.entry.id)">
             <mat-icon class="adf-tag-chips-delete-icon adf-primary-contrast-text-color" matChipRemove>cancel</mat-icon>
         </button>
     </mat-chip>

lib/content-services/tag/tag-node-list.component.spec.ts

@@ -76,9 +76,9 @@ describe('TagNodeList', () => {
                 expect(element.querySelector('#tag_name_1').innerHTML).toBe('test2');
                 expect(element.querySelector('#tag_name_2').innerHTML).toBe('test3');
 
-                expect(element.querySelector('#tag_delete_0')).not.toBe(null);
-                expect(element.querySelector('#tag_delete_1')).not.toBe(null);
-                expect(element.querySelector('#tag_delete_2')).not.toBe(null);
+                expect(element.querySelector('#tag_chips_delete_test1')).not.toBe(null);
+                expect(element.querySelector('#tag_chips_delete_test2')).not.toBe(null);
+                expect(element.querySelector('#tag_chips_delete_test3')).not.toBe(null);
 
                 done();
             });
@@ -94,7 +94,7 @@ describe('TagNodeList', () => {
             component.results.subscribe(() => {
                 fixture.detectChanges();
 
-                let deleteButton: any = element.querySelector('#tag_delete_0');
+                let deleteButton: any = element.querySelector('#tag_chips_delete_test1');
                 deleteButton.click();
 
                 expect(tagService.removeTag).toHaveBeenCalledWith('fake-node-id', '0ee933fa-57fc-4587-8a77-b787e814f1d2');

lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.html

@@ -1,7 +1,8 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable()">
-    <div class="adf-property-label">{{ property.label | translate }}</div>
+    <div [attr.data-automation-id]="'card-boolean-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
     <div class="adf-property-value">
         <mat-checkbox
+            [attr.data-automation-id]="'card-boolean-' + property.key"
             [attr.title]="'CORE.METADATA.ACTIONS.TOGGLE' | translate"
             [checked]="property.displayValue"
             [disabled]="!isEditable()"

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -1,6 +1,6 @@
-<div class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
+<div [attr.data-automation-id]="'card-dateitem-label-' + property.key" class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
 <div class="adf-property-value">
-    <span *ngIf="!isEditable()">
+    <span *ngIf="!isEditable()" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
         <span [attr.data-automation-id]="'card-dateitem-' + property.key">
             <span *ngIf="showProperty()">{{ property.displayValue }}</span>
         </span>
@@ -11,7 +11,7 @@
                 class="adf-datepicker-toggle"
                 [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
                 (click)="showDatePicker($event)">
-                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
+                <span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key" *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
             </span>
             <mat-datetimepicker-toggle
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.html

@@ -1,9 +1,9 @@
-<div class="adf-property-label">{{ property.label | translate }}</div>
+<div [attr.data-automation-id]="'card-key-value-pairs-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
 <div class="adf-property-value">
 
     <div *ngIf="isEditable()">
         {{ 'CORE.CARDVIEW.KEYVALUEPAIRS.ADD' | translate }}
-        <button (click)="add()" mat-icon-button class="card-view__key-value-pairs__add-btn">
+        <button (click)="add()" mat-icon-button class="card-view__key-value-pairs__add-btn" [attr.data-automation-id]="'card-key-value-pairs-button-' + property.key">
             <mat-icon>add</mat-icon>
         </button>
     </div>

lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.html

@@ -1,4 +1,4 @@
-<div class="adf-property-label" *ngIf="showProperty()">{{ property.label | translate }}</div>
+<div [attr.data-automation-id]="'card-mapitem-label-' + property.key" class="adf-property-label" *ngIf="showProperty()">{{ property.label | translate }}</div>
 <div class="adf-property-value">
     <div>
         <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-mapitem-value-' + property.key">

lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.html

@@ -1,4 +1,4 @@
-<div class="adf-property-label">{{ property.label | translate }}</div>
+<div [attr.data-automation-id]="'card-select-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
 <div class="adf-property-value">
     <div *ngIf="!isEditable()" data-automation-class="read-only-value">{{ property.displayValue | async }}</div>
     <div *ngIf="isEditable()">

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -1,4 +1,4 @@
-<div class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
+<div [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
 <div class="adf-property-value">
     <span *ngIf="!isEditable()">
         <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-textitem-value-' + property.key">
@@ -53,7 +53,7 @@
                     [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
                     [attr.data-automation-id]="'card-textitem-reset-' + property.key">clear</mat-icon>
             </div>
-            <mat-error class="adf-textitem-editable-error" *ngIf="hasErrors()">
+            <mat-error  [attr.data-automation-id]="'card-textitem-error-' + property.key" class="adf-textitem-editable-error" *ngIf="hasErrors()">
                 <ul>
                     <li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
                 </ul>

lib/core/form/components/form.component.html

@@ -2,11 +2,12 @@
     <ng-content select="[empty-form]">
     </ng-content>
 </div>
+
 <div *ngIf="hasForm()" class="{{form.className}} adf-form-container">
     <mat-card>
         <mat-card-header>
             <mat-card-title>
-                <h4 *ngIf="isTitleEnabled()">
+                <h4>
                     <div *ngIf="showValidationIcon" class="adf-form-validation-button">
                         <i id="adf-valid-form-icon" class="material-icons" *ngIf="form.isValid; else no_valid_form">check_circle</i>
                         <ng-template #no_valid_form>
@@ -18,7 +19,7 @@
                             <mat-icon>refresh</mat-icon>
                         </button>
                     </div>
-                    <span class="adf-form-title">{{form.taskName}}</span>
+                    <span  *ngIf="isTitleEnabled()" class="adf-form-title">{{form.taskName}}</span>
 
                 </h4>
             </mat-card-title>

lib/core/login/components/login.component.html

@@ -13,7 +13,7 @@
                                              ngFor [ngForOf]="[data]"
                                              [ngForTemplate]="headerTemplate">
                                 </ng-template>
-                                <img *ngIf="!headerTemplate" class="adf-img-logo" [src]="logoImageUrl"
+                                <img *ngIf="!headerTemplate" id="adf-login-img-logo" class="adf-img-logo" [src]="logoImageUrl"
                                      alt="{{'LOGIN.LOGO' | translate }}">
                             </div>
                         </mat-card-title>

lib/core/userinfo/components/user-info.component.html

@@ -5,8 +5,8 @@
           class="adf-userinfo-name">{{ecmUser.fullNameDisplay}}</span>
     <span *ngIf="bpmUser && !ecmUser && showName" id="adf-userinfo-bpm-name-display"
           class="adf-userinfo-name">{{bpmUser.fullNameDisplay}}</span>
-    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button">
-        <div class="adf-userinfo-button-profile" id="user-profile" data-automation-id="user-profile">
+    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button" data-automation-id="adf-user-profile">
+        <div class="adf-userinfo-button-profile" id="user-profile">
             <div *ngIf="bpmUser && !ecmUser" id="bpm-user-image">
                 <div *ngIf="!hasBpmUserPictureId()" [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
                 <div *ngIf="hasBpmUserPictureId()" class="adf-userinfo-profile-container">

lib/core/userinfo/components/user-info.component.ts

@@ -60,6 +60,7 @@ export class UserInfoComponent implements OnInit {
     bpmUser: BpmUserModel;
     bpmUserImage: any;
     ecmUserImage: any;
+    selectedIndex: number;
 
     constructor(private ecmUserService: EcmUserService,
                 private bpmUserService: BpmUserService,
@@ -124,4 +125,5 @@ export class UserInfoComponent implements OnInit {
     hasEcmUserAvatarId(): boolean {
         return !!this.ecmUser.avatarId;
     }
+
 }