Migrate to new animations api (#12078)

lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts

@@ -36,6 +36,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatTabGroupHarness } from '@angular/material/tabs/testing';
 import { NoopAuthModule } from '@alfresco/adf-core';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 describe('ContentNodeSelectorComponent', () => {
     let component: ContentNodeSelectorComponent;
@@ -61,6 +62,7 @@ describe('ContentNodeSelectorComponent', () => {
         TestBed.configureTestingModule({
             imports: [NoopAuthModule, ContentNodeSelectorComponent],
             providers: [
+                provideNoopAnimations(),
                 { provide: MAT_DIALOG_DATA, useValue: data },
                 {
                     provide: MatDialogRef,
@@ -127,7 +129,9 @@ describe('ContentNodeSelectorComponent', () => {
         const tabGroup = await loader.getHarness(MatTabGroupHarness.with({ selector: '.adf-content-node-selector-dialog-content' }));
         const tabToSelect = (await tabGroup.getTabs())[tabIndex];
 
-        return tabToSelect.select();
+        await tabToSelect.select();
+        fixture.detectChanges();
+        await fixture.whenStable();
     };
 
     describe('Data injecting with the "Material dialog way"', () => {

lib/content-services/src/lib/directives/library-favorite.directive.spec.ts

@@ -83,7 +83,7 @@ describe('LibraryFavoriteDirective', () => {
 
     it('should call addFavorite() and display snackbar message on click event when selection is not a favorite', async () => {
         spyOn(component.directive.favoritesApi, 'getFavoriteSite').and.returnValue(Promise.reject(new Error('error')));
-        spyOn(component.directive.favoritesApi, 'createFavorite').and.returnValue(Promise.resolve(null));
+        spyOn(component.directive.favoritesApi, 'createFavorite').and.returnValue(Promise.resolve({ entry: {} } as any));
         spyOn(notificationService, 'showInfo');
 
         fixture.detectChanges();

lib/content-services/src/lib/document-list/components/document-list.component.spec.ts

@@ -18,7 +18,9 @@
 import {
     AppConfigService,
     AuthenticationService,
+    CustomEmptyContentTemplateDirective,
     CustomLoadingContentTemplateDirective,
+    CustomNoPermissionTemplateDirective,
     DataColumn,
     DataColumnComponent,
     DataColumnListComponent,
@@ -2009,7 +2011,7 @@ describe('DocumentList', () => {
 });
 
 @Component({
-    imports: [DocumentListComponent, CustomLoadingContentTemplateDirective],
+    imports: [DocumentListComponent, CustomLoadingContentTemplateDirective, CustomNoPermissionTemplateDirective, CustomEmptyContentTemplateDirective],
     template: `
         <adf-document-list #customDocumentList>
             <adf-custom-loading-content-template>

lib/content-services/src/lib/document-list/services/document-list.service.spec.ts

@@ -114,7 +114,7 @@ describe('DocumentListService', () => {
     }));
 
     it('should use rootFolderId provided in options', () => {
-        const spyGetNodeInfo = spyOn(service.nodes, 'listNodeChildren').and.callThrough();
+        const spyGetNodeInfo = spyOn(service.nodes, 'listNodeChildren').and.returnValue(Promise.resolve(fakeFolder as any));
 
         service.getFolder('/fake-root/fake-name', { rootFolderId: 'testRoot' }, ['isLocked']);
 
@@ -126,7 +126,7 @@ describe('DocumentListService', () => {
     });
 
     it('should use provided other values passed in options', () => {
-        const spyGetNodeInfo = spyOn(service.nodes, 'listNodeChildren').and.callThrough();
+        const spyGetNodeInfo = spyOn(service.nodes, 'listNodeChildren').and.returnValue(Promise.resolve(fakeFolder as any));
 
         service.getFolder('/fake-root/fake-name', { rootFolderId: 'testRoot', maxItems: 10, skipCount: 5, where: 'where', orderBy: ['order'] }, [
             'isLocked'
@@ -144,7 +144,7 @@ describe('DocumentListService', () => {
     });
 
     it('should add the includeTypes in the request Node Children if required', () => {
-        const spyGetNodeInfo = spyOn(service.nodes, 'listNodeChildren').and.callThrough();
+        const spyGetNodeInfo = spyOn(service.nodes, 'listNodeChildren').and.returnValue(Promise.resolve(fakeFolder as any));
 
         service.getFolder('/fake-root/fake-name', {}, ['isLocked']);
 
@@ -156,7 +156,7 @@ describe('DocumentListService', () => {
     });
 
     it('should not add the includeTypes in the request Node Children if is duplicated', () => {
-        const spyGetNodeInfo = spyOn(service.nodes, 'listNodeChildren').and.callThrough();
+        const spyGetNodeInfo = spyOn(service.nodes, 'listNodeChildren').and.returnValue(Promise.resolve(fakeFolder as any));
 
         service.getFolder('/fake-root/fake-name', {}, ['allowableOperations']);
 
@@ -168,7 +168,7 @@ describe('DocumentListService', () => {
     });
 
     it('should add the includeTypes in the request getFolderNode if required', () => {
-        const spyGetNodeInfo = spyOn(service.nodes, 'getNode').and.callThrough();
+        const spyGetNodeInfo = spyOn(service.nodes, 'getNode').and.returnValue(Promise.resolve({} as any));
 
         service.getFolderNode('test-id', ['isLocked']);
 
@@ -179,7 +179,7 @@ describe('DocumentListService', () => {
     });
 
     it('should not add the includeTypes in the request getFolderNode if is duplicated', () => {
-        const spyGetNodeInfo = spyOn(service.nodes, 'getNode').and.callThrough();
+        const spyGetNodeInfo = spyOn(service.nodes, 'getNode').and.returnValue(Promise.resolve({} as any));
 
         service.getFolderNode('test-id', ['allowableOperations']);
 
@@ -190,7 +190,7 @@ describe('DocumentListService', () => {
     });
 
     it('should add default includeTypes in the request getFolderNode if none is provided', () => {
-        const spyGetNodeInfo = spyOn(service.nodes, 'getNode').and.callThrough();
+        const spyGetNodeInfo = spyOn(service.nodes, 'getNode').and.returnValue(Promise.resolve({} as any));
 
         service.getFolderNode('test-id');
 

lib/content-services/src/lib/search/components/search-properties/search-properties.component.spec.ts

@@ -19,6 +19,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SearchPropertiesComponent } from './search-properties.component';
 import { By } from '@angular/platform-browser';
 import { MatOption } from '@angular/material/core';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { FileSizeUnit } from './file-size-unit.enum';
 import { FileSizeOperator } from './file-size-operator.enum';
 import { SearchProperties } from './search-properties';
@@ -60,7 +61,8 @@ describe('SearchPropertiesComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [SearchPropertiesComponent]
+            imports: [SearchPropertiesComponent],
+            providers: [provideNoopAnimations()]
         });
 
         fixture = TestBed.createComponent(SearchPropertiesComponent);
@@ -249,14 +251,16 @@ describe('SearchPropertiesComponent', () => {
             expect(component.context.execute).toHaveBeenCalled();
         });
 
-        it('should search by at most MB after selecting proper options', () => {
+        it('should search by at most MB after selecting proper options', async () => {
             typeInFileSizeInput();
             clickFileSizeOperatorsSelect();
             getSelectOptions()[1].nativeElement.click();
             fixture.detectChanges();
+            await fixture.whenStable();
             clickFileSizeUnitsSelect();
             getSelectOptions()[1].nativeElement.click();
             fixture.detectChanges();
+            await fixture.whenStable();
 
             component.submitValues();
             expect(component.displayValue$.next).toHaveBeenCalledWith(
@@ -274,14 +278,16 @@ describe('SearchPropertiesComponent', () => {
             expect(component.context.execute).toHaveBeenCalled();
         });
 
-        it('should search by exactly GB after selecting proper options', () => {
+        it('should search by exactly GB after selecting proper options', async () => {
             typeInFileSizeInput();
             clickFileSizeOperatorsSelect();
             getSelectOptions()[2].nativeElement.click();
             fixture.detectChanges();
+            await fixture.whenStable();
             clickFileSizeUnitsSelect();
             getSelectOptions()[2].nativeElement.click();
             fixture.detectChanges();
+            await fixture.whenStable();
 
             component.submitValues();
             expect(component.displayValue$.next).toHaveBeenCalledWith(
@@ -373,15 +379,17 @@ describe('SearchPropertiesComponent', () => {
             });
         });
 
-        it('should return correct value when inputs changed', () => {
+        it('should return correct value when inputs changed', async () => {
             fixture.detectChanges();
             typeInFileSizeInput();
             clickFileSizeOperatorsSelect();
             getSelectOptions()[1].nativeElement.click();
             fixture.detectChanges();
+            await fixture.whenStable();
             clickFileSizeUnitsSelect();
             getSelectOptions()[1].nativeElement.click();
             fixture.detectChanges();
+            await fixture.whenStable();
             const extensions = [{ value: 'pdf' }, { value: 'txt' }];
             getSearchChipAutocompleteInputComponent().optionsChanged.emit(extensions);
 

lib/content-services/src/lib/testing/global-testing.module.ts

@@ -15,12 +15,13 @@
  * limitations under the License.
  */
 
-import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NoopTranslateModule } from '@alfresco/adf-core';
 import { NgModule } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserTestingModule } from '@angular/platform-browser/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 @NgModule({
-    imports: [BrowserDynamicTestingModule, NoopTranslateModule, NoopAnimationsModule]
+    imports: [BrowserTestingModule, NoopTranslateModule],
+    providers: [provideNoopAnimations()]
 })
 export class GlobalTestingModule {}

lib/content-services/src/lib/version-manager/version-manager.component.html

@@ -1,30 +1,35 @@
 <div class="adf-new-version-container">
-    <adf-version-comparison *ngIf="showVersionComparison" [node]="node" [newFileVersion]="newFileVersion" />
-    <div class="adf-new-version-uploader-container" id="adf-new-version-uploader-container" [@uploadToggle]="uploadState">
-        <table class="adf-version-upload" *ngIf="uploadState !== 'close' && !versionList.isLoading">
-            <tr>
-                <td>
-                    <adf-version-upload
-                        id="adf-version-upload-button"
-                        [node]="node"
-                        [newFileVersion]="newFileVersion"
-                        [currentVersion]="versionList?.latestVersion?.entry"
-                        (success)="onUploadSuccess($event)"
-                        (cancel)="onUploadCancel()"
-                        (error)="onUploadError($event)" />
-                </td>
-            </tr>
-        </table>
+    @if (showVersionComparison) {
+        <adf-version-comparison [node]="node" [newFileVersion]="newFileVersion" />
+    }
+    <div class="adf-new-version-uploader-container" id="adf-new-version-uploader-container" [class.adf-upload-open]="uploadState === 'open'">
+        @if (uploadState !== 'close' && !versionList.isLoading) {
+            <div class="adf-version-upload">
+                <adf-version-upload
+                    id="adf-version-upload-button"
+                    [node]="node"
+                    [newFileVersion]="newFileVersion"
+                    [currentVersion]="versionList?.latestVersion?.entry"
+                    (success)="onUploadSuccess($event)"
+                    (cancel)="onUploadCancel()"
+                    (error)="onUploadError($event)"
+                />
+            </div>
+        }
     </div>
     <div class="adf-version-list-container">
         <div class="adf-version-list-table">
             <div>
-                <button mat-raised-button
+                @if (uploadState === 'close') {
+                    <button
+                        mat-raised-button
                         id="adf-show-version-upload-button"
                         class="adf-version-manager-upload-button"
                         (click)="toggleNewVersion()"
-                        *ngIf="uploadState ==='close'">{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.ADD' | translate }}
-                </button>
+                    >
+                        {{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.ADD' | translate }}
+                    </button>
+                }
             </div>
             <div>
                 <adf-version-list
@@ -37,7 +42,8 @@
                     [allowVersionDelete]="allowVersionDelete"
                     (deleted)="refresh($event)"
                     (restored)="refresh($event)"
-                    (viewVersion)="onViewVersion($event)" />
+                    (viewVersion)="onViewVersion($event)"
+                />
             </div>
         </div>
     </div>

lib/content-services/src/lib/version-manager/version-manager.component.scss

@@ -31,6 +31,18 @@ adf-version-manager {
         height: 0;
         float: left;
         position: relative;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+            height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+            opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+            visibility 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+        &.adf-upload-open {
+            height: 175px;
+            opacity: 1;
+            visibility: visible;
+        }
     }
 
     .adf-version-list.adf-version-list-element {

lib/content-services/src/lib/version-manager/version-manager.component.ts

@@ -18,7 +18,6 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation, inject } from '@angular/core';
 import { Node } from '@alfresco/js-api';
 import { VersionListComponent } from './version-list.component';
-import { animate, state, style, transition, trigger } from '@angular/animations';
 import { ContentService } from '../common/services/content.service';
 import { NodesApiService } from '../common/services/nodes-api.service';
 import { FileUploadErrorEvent } from '../common/events/file.event';
@@ -33,14 +32,6 @@ import { TranslatePipe } from '@ngx-translate/core';
     imports: [CommonModule, VersionComparisonComponent, VersionUploadComponent, MatButtonModule, TranslatePipe, VersionListComponent],
     templateUrl: './version-manager.component.html',
     styleUrls: ['./version-manager.component.scss'],
-    animations: [
-        trigger('uploadToggle', [
-            state('open', style({ height: '175px', opacity: 1, visibility: 'visible' })),
-            state('close', style({ height: '0%', opacity: 0, visibility: 'hidden' })),
-            transition('open => close', [style({ visibility: 'hidden' }), animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')]),
-            transition('close => open', [style({ visibility: 'visible' }), animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')])
-        ])
-    ],
     encapsulation: ViewEncapsulation.None
 })
 export class VersionManagerComponent implements OnInit {

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts

@@ -33,7 +33,8 @@ import {
     ViewerToolbarActionsComponent,
     NoopAuthModule,
     NoopTranslateModule,
-    UnitTestingUtils
+    UnitTestingUtils,
+    IconModule
 } from '@alfresco/adf-core';
 import { NodesApiService } from '../../common/services/nodes-api.service';
 import { UploadService } from '../../common/services/upload.service';
@@ -66,7 +67,7 @@ class ViewerWithCustomToolbarComponent {}
 
 @Component({
     selector: 'adf-viewer-container-toolbar-actions',
-    imports: [MatIconModule, MatButtonModule, ViewerToolbarActionsComponent, AlfrescoViewerComponent],
+    imports: [MatIconModule, MatButtonModule, ViewerToolbarActionsComponent, AlfrescoViewerComponent, IconModule],
     // eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
     template: `<adf-alfresco-viewer>
         <adf-viewer-toolbar-actions>
@@ -100,7 +101,7 @@ class DummyDialogComponent {}
 
 @Component({
     selector: 'adf-viewer-container-open-with',
-    imports: [MatIconModule, MatMenuModule, ViewerOpenWithComponent, AlfrescoViewerComponent],
+    imports: [MatIconModule, MatMenuModule, ViewerOpenWithComponent, AlfrescoViewerComponent, IconModule],
     // eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
     template: `
         <adf-alfresco-viewer>
@@ -125,7 +126,7 @@ class ViewerWithCustomOpenWithComponent {}
 
 @Component({
     selector: 'adf-viewer-container-more-actions',
-    imports: [MatIconModule, MatMenuModule, ViewerMoreActionsComponent, AlfrescoViewerComponent],
+    imports: [MatIconModule, MatMenuModule, ViewerMoreActionsComponent, AlfrescoViewerComponent, IconModule],
     // eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
     template: ` <adf-alfresco-viewer>
         <adf-viewer-more-actions>

lib/content-services/src/test.ts

@@ -18,10 +18,10 @@
 import 'zone.js';
 import 'zone.js/testing';
 import { TestBed } from '@angular/core/testing';
-import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { platformBrowserTesting } from '@angular/platform-browser/testing';
 import { GlobalTestingModule } from './lib/testing/global-testing.module';
 
-TestBed.initTestEnvironment(GlobalTestingModule, platformBrowserDynamicTesting(), {
+TestBed.initTestEnvironment(GlobalTestingModule, platformBrowserTesting(), {
     teardown: { destroyAfterEach: true }
 });