feat: dashboard ui tests

src/app/modules/dashboard/dashboard-collapse.ts

@@ -21,10 +21,25 @@ export class DashboardCollapse {
 
   nextFrame: number;
 
+  setReady: () => void;
+
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  ready = new Promise<void>(resolve => (this.setReady = resolve));
+
+  set active(value: boolean) {
+    this.zone.runOutsideAngular(() => {
+      if (value) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    });
+  }
+
   constructor(
     private animationControl: AnimationController,
     private zone: NgZone,
-    scrollContainer: HTMLElement,
+    private scrollContainer: HTMLElement,
     toolbar: HTMLElement,
     schedule: HTMLElement,
   ) {
@@ -55,23 +70,37 @@ export class DashboardCollapse {
               .addElement(schedule.querySelectorAll(':scope > a > *'))
               .fromTo('transform', 'scaleY(1)', `scaleY(${1 / 0.8})`),
           ]);
-        this.collapseAnimation.progressStart(true, 0);
-
-        const element = scrollContainer;
-        let pos = element.scrollTop;
-        const animate = () => {
-          if (pos !== element.scrollTop) {
-            pos = element.scrollTop;
-            this.collapseAnimation.progressStep(element.scrollTop / 172);
-          }
-          this.nextFrame = requestAnimationFrame(animate);
-        };
-        this.nextFrame = requestAnimationFrame(animate);
+        this.start();
+        this.setReady();
       })
       .then();
   }
 
-  destroy() {
+  private start() {
+    this.collapseAnimation.progressStart(
+      true,
+      this.scrollContainer.scrollTop / 172,
+    );
+    let pos = this.scrollContainer.scrollTop;
+    const animate = () => {
+      if (pos !== this.scrollContainer.scrollTop) {
+        pos = this.scrollContainer.scrollTop;
+        this.collapseAnimation.progressStep(
+          this.scrollContainer.scrollTop / 172,
+        );
+      }
+      this.nextFrame = requestAnimationFrame(animate);
+    };
+    this.nextFrame = requestAnimationFrame(animate);
+  }
+
+  private stop() {
     cancelAnimationFrame(this.nextFrame);
+    this.collapseAnimation.progressEnd(0, 0, 0);
+  }
+
+  destroy() {
+    this.stop();
+    this.collapseAnimation.destroy();
   }
 }

src/app/modules/dashboard/dashboard.component.ts

@@ -31,6 +31,7 @@ import {DataRoutingService} from '../data/data-routing.service';
 import {ScheduleProvider} from '../calendar/schedule.provider';
 import {AnimationController, IonContent} from '@ionic/angular';
 import {DashboardCollapse} from './dashboard-collapse';
+import {BreakpointObserver} from '@angular/cdk/layout';
 
 // const scrollTimeline = new ScrollTimeline();
 
@@ -68,11 +69,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
    */
   private uuids: SCUuid[];
 
-  /**
-   * Enable header animation
-   */
-  isHeaderAnimated = true;
-
   /**
    * Next event in calendar
    */
@@ -101,6 +97,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     protected router: Router,
     public location: Location,
     private animationControl: AnimationController,
+    private breakpointObserver: BreakpointObserver,
     private zone: NgZone,
   ) {
     this.subscriptions.push(
@@ -126,6 +123,15 @@ export class DashboardComponent implements OnInit, OnDestroy {
       this.toolbarRef.nativeElement,
       this.scheduleRef.nativeElement,
     );
+
+    this.subscriptions.push(
+      this.breakpointObserver
+        .observe(['(min-width: 768px)'])
+        .subscribe(async state => {
+          await this.collapseAnimation.ready;
+          this.collapseAnimation.active = !state.matches;
+        }),
+    );
   }
 
   ionViewDidEnter() {