refactor(table-active): signal inputs, host bindings, cleanup, tests

Author: xidedix

projects/coreui-angular/src/lib/table/table-active.directive.spec.ts

@@ -1,8 +1,48 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { TableActiveDirective } from './table-active.directive';
 
+@Component({
+  imports: [TableActiveDirective],
+  template: ` <tr [cTableActive]="active"></tr>`
+})
+class TestComponent {
+  active = false;
+}
+
 describe('TableActiveDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+  let directive: TableActiveDirective;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    debugElement = fixture.debugElement.query(By.directive(TableActiveDirective));
+    directive = debugElement.injector.get(TableActiveDirective);
+    fixture.detectChanges();
+  });
+
   it('should create an instance', () => {
-    const directive = new TableActiveDirective();
     expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new TableActiveDirective();
+      expect(directive).toBeTruthy();
+    });
+  });
+
+  it('should add class "table-active" when active is true', () => {
+    fixture.componentInstance.active = true;
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.classList).toContain('table-active');
+  });
+
+  it('should not add class "table-active" when active is false', () => {
+    fixture.componentInstance.active = false;
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.classList).not.toContain('table-active');
   });
 });

projects/coreui-angular/src/lib/table/table-active.directive.ts

@@ -1,19 +1,16 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Directive, input } from '@angular/core';
 
 @Directive({
-  selector: '[cTableActive]'
+  selector: '[cTableActive]',
+  exportAs: 'cTableActive',
+  host: {
+    '[class.table-active]': 'active()'
+  }
 })
 export class TableActiveDirective {
   /**
    * Highlight a table row or cell
-   * @type boolean
+   * @return boolean
    */
-  @Input({ alias: 'cTableActive', transform: booleanAttribute }) active: string | boolean = false;
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'table-active': this.active
-    };
-  }
+  readonly active = input(false, { alias: "cTableActive", transform: booleanAttribute });
 }