refactor(collapse): animate and visible with linkedSignal()

Author: xidedix

projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts

@@ -1,16 +1,19 @@
 import { CollapseDirective } from './collapse.directive';
 import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: '<div cCollapse horizontal>Test</div>',
+  template: '<div cCollapse [horizontal]="horizontal" [(visible)]="visible" [animate]="false">Test</div>',
   imports: [CollapseDirective]
 })
-class TestComponent {}
+class TestComponent {
+  horizontal = false;
+  visible = false;
+}
 
 describe('CollapseDirective', () => {
   let component: TestComponent;
@@ -26,7 +29,7 @@ describe('CollapseDirective', () => {
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     elementRef = fixture.debugElement.query(By.directive(CollapseDirective));
-
+    component.visible = false;
     fixture.detectChanges(); // initial binding
   });
 
@@ -37,7 +40,17 @@ describe('CollapseDirective', () => {
     });
   });
 
-  it('should have css classes', () => {
+  it('should have css classes', fakeAsync(() => {
+    expect(elementRef.nativeElement.style.display).toContain('none');
+    expect(elementRef.nativeElement).not.toHaveClass('collapse-horizontal');
+    component.horizontal = true;
+    component.visible = true;
+    fixture.detectChanges();
     expect(elementRef.nativeElement).toHaveClass('collapse-horizontal');
-  });
+    expect(elementRef.nativeElement.style.display).toBe('');
+    component.horizontal = false;
+    component.visible = false;
+    fixture.detectChanges();
+    expect(elementRef.nativeElement).not.toHaveClass('collapse-horizontal');
+  }));
 });

projects/coreui-angular/src/lib/collapse/collapse.directive.ts

@@ -9,6 +9,7 @@ import {
   ElementRef,
   inject,
   input,
+  linkedSignal,
   OnDestroy,
   output,
   Renderer2,
@@ -46,10 +47,9 @@ export class CollapseDirective implements OnDestroy {
    */
   readonly animateInput = input(true, { transform: booleanAttribute, alias: 'animate' });
 
-  readonly animate = signal(true);
-
-  readonly #animateInputEffect = effect(() => {
-    this.animate.set(this.animateInput());
+  readonly animate = linkedSignal({
+    source: () => this.animateInput(),
+    computation: (value: boolean) => value
   });
 
   /**
@@ -68,17 +68,14 @@ export class CollapseDirective implements OnDestroy {
 
   readonly visibleChange = output<boolean>();
 
-  readonly #visibleInputEffect = effect(() => {
-    this.visible.set(this.visibleInput());
-  });
-
-  readonly visible = signal(false);
+  readonly visible = linkedSignal({ source: () => this.visibleInput(), computation: (value: boolean) => value });
 
   readonly #initialized = signal(false);
 
   readonly #visibleEffect = effect(() => {
+    const visible = this.visible();
     if (this.#initialized()) {
-      this.createPlayer(this.visible());
+      this.createPlayer(visible);
     }
   });