fix(core): fcl refactoring to not rely on element's dimensions, mainl…

…y to fix unit tests BREAKING CHANGES: * if you rely on dimensions in your unit tests now you have to call component's `updateLayout()` method to organize cards into the columns.
SAP · Jul 29, 2022 · f625c7d · f625c7d
1 parent 3ab5b58
commit f625c7d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 16 deletions.
diff --git a/libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.spec.ts b/libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.spec.ts
@@ -103,6 +103,7 @@ describe('FixedCardLayoutComponent', () => {
                 }
             } as any;
 
+            component.fixedCardLayout.updateLayout();
             component.fixedCardLayout._onDragDropped(event);
             fixture.detectChanges();
 

diff --git a/libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts b/libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts
@@ -184,7 +184,7 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
     _placeholderMargin: boolean;
 
     /** @hidden */
-    _listenResize = false;
+    _listenResize = true;
 
     /** @hidden */
     _hiddenCard: Nullable<CardDefinitionDirective>;
@@ -214,11 +214,7 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
 
     /** @hidden */
     ngAfterViewInit(): void {
-        if (this._layout.nativeElement.clientHeight) {
-            this._processCards();
-        } else {
-            this._listenResize = true;
-        }
+        this._processCards();
 
         this._listenOnResize();
         this._listenOnCardsChange();
@@ -418,27 +414,22 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
                 ),
                 takeUntil(this._onDestroy$)
             )
-            .subscribe(() => {
-                if (this._cardsArray) {
-                    this.updateLayout();
-                } else {
-                    this._processCards();
-                }
-            });
+            .subscribe(() => this.updateLayout());
     }
 
     /** @hidden Listen card change and distribute cards on column change */
     private _listenOnCardsChange(): void {
-        this._cards.changes.subscribe(() => this._processCards());
+        this._cards.changes.subscribe(() => {
+            this._processCards();
+            this.updateLayout();
+        });
     }
 
     /** @hidden */
     private _processCards(): void {
         this._cardsArray = this._cards
             .toArray()
             .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);
-
-        this.updateLayout();
     }
 
     /** @hidden Distribute cards among columns to arrange them in "Z" flow */