refactor(text-color): host binding, cleanup, tests

xidedix · xidedix · commit 45c8171baebe · 2025-02-17T16:17:09.000+01:00
diff --git a/projects/coreui-angular/src/lib/utilities/text-color.directive.spec.ts b/projects/coreui-angular/src/lib/utilities/text-color.directive.spec.ts
@@ -1,11 +1,38 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TextColorDirective } from './text-color.directive';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  imports: [TextColorDirective],
+  template: '<div cTextColor="primary"></div>'
+})
+class TestComponent {}
 
 describe('TextColorDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement.query(By.directive(TextColorDirective));
+    fixture.detectChanges();
+  });
+
   it('should create an instance', () => {
     TestBed.runInInjectionContext(() => {
       const directive = new TextColorDirective();
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should have css classes', () => {
+    expect(debugElement.nativeElement).toHaveClass('text-primary');
+  });
 });
diff --git a/projects/coreui-angular/src/lib/utilities/text-color.directive.ts b/projects/coreui-angular/src/lib/utilities/text-color.directive.ts
@@ -1,8 +1,11 @@
-import { Directive, HostBinding, input, InputSignal } from '@angular/core';
+import { computed, Directive, input, InputSignal } from '@angular/core';
 import { TextColors } from '../coreui.types';
 
 @Directive({
-  selector: '[cTextColor]'
+  selector: '[cTextColor]',
+  host: {
+    '[class]': 'hostClasses()'
+  }
 })
 export class TextColorDirective {
   /**
@@ -11,11 +14,10 @@ export class TextColorDirective {
    */
   readonly color: InputSignal<TextColors> = input('', { alias: 'cTextColor' });
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
     const color = this.color();
     return {
       [`text-${color}`]: !!color
     };
-  }
+  });
 }
