refactor(theme.directive): signal inputs, host bindings, cleanup, tests

Author: xidedix

projects/coreui-angular/src/lib/shared/theme.directive.spec.ts

@@ -1,15 +1,29 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ThemeDirective } from './theme.directive';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  imports: [ThemeDirective],
+  template: '<div cTheme [colorScheme]="theme"></div>'
+})
+export class TestComponent {
+  theme!: 'dark' | 'light' | undefined;
+}
 
 class MockElementRef extends ElementRef {}
 
 describe('ThemeDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [TestComponent],
       providers: [{ provide: ElementRef, useClass: MockElementRef }, Renderer2]
     });
+    fixture = TestBed.createComponent(TestComponent);
+    debugElement = fixture.debugElement.query(By.css('div'));
   });
 
   it('should create an instance', () => {
@@ -18,4 +32,18 @@ describe('ThemeDirective', () => {
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should set data-coreui-theme attribute', () => {
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBeNull();
+    fixture.componentInstance.theme = 'dark';
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBe('dark');
+    fixture.componentInstance.theme = 'light';
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBe('light');
+    fixture.componentInstance.theme = undefined;
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.getAttribute('data-coreui-theme')).toBeNull();
+  });
 });

projects/coreui-angular/src/lib/shared/theme.directive.ts

@@ -1,28 +1,30 @@
-import { booleanAttribute, Directive, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import { booleanAttribute, Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
 
 @Directive({
-  selector: '[cTheme]'
+  selector: '[cTheme]',
+  exportAs: 'cTheme'
 })
 export class ThemeDirective {
   readonly #hostElement = inject(ElementRef);
   readonly #renderer = inject(Renderer2);
 
   /**
    * Add dark theme attribute.
-   * @type 'dark' | 'light' | undefined
+   * @return 'dark' | 'light' | undefined
    */
-  @Input() set colorScheme(scheme: 'dark' | 'light' | undefined) {
-    !!scheme ? this.setTheme(scheme) : this.unsetTheme();
-  }
+  readonly colorScheme = input<'dark' | 'light'>();
 
-  /**
-   * Add dark theme attribute.
-   * @type boolean
-   */
-  @Input({ transform: booleanAttribute })
-  set dark(darkTheme: boolean) {
+  readonly #colorSchemeChange = effect(() => {
+    const colorScheme = this.colorScheme();
+    colorScheme ? this.setTheme(colorScheme) : this.unsetTheme();
+  });
+
+  readonly dark = input(false, { transform: booleanAttribute });
+
+  readonly #darkChange = effect(() => {
+    const darkTheme = this.dark();
     darkTheme ? this.setTheme('dark') : this.unsetTheme();
-  }
+  });
 
   setTheme(theme?: string): void {
     if (theme) {