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

Author: xidedix

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

@@ -1,21 +1,113 @@
-import { TestBed } from '@angular/core/testing';
-import { ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { TableDirective } from './table.directive';
+import { Colors } from '../coreui.types';
+import { TableActiveDirective } from './table-active.directive';
+
+@Component({
+  template: `
+    <table
+      cTable
+      [align]="align"
+      [borderColor]="borderColor"
+      [bordered]="bordered"
+      [borderless]="borderless"
+      [caption]="caption"
+      [color]="color"
+      [hover]="hover"
+      [small]="small"
+      [striped]="striped"
+      [stripedColumns]="stripedColumns"
+      [responsive]="true"
+    ></table>
+  `,
+  imports: [TableDirective]
+})
+class TestComponent {
+  align: 'bottom' | 'middle' | 'top' = 'middle';
+  borderColor: Colors = 'primary';
+  bordered: boolean = true;
+  borderless: boolean = false;
+  caption = 'top' as const;
+  color: Colors = 'secondary';
+  hover: boolean = true;
+  small: boolean = true;
+  striped: boolean = true;
+  stripedColumns: boolean = true;
+}
 
 class MockElementRef extends ElementRef {}
 
 describe('TableDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+  let directive: TableDirective;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [TestComponent],
       providers: [Renderer2, { provide: ElementRef, useClass: MockElementRef }]
     });
+    fixture = TestBed.createComponent(TestComponent);
+    debugElement = fixture.debugElement.query(By.directive(TableDirective));
+    directive = debugElement.injector.get(TableDirective);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
   it('should create an instance', () => {
+    expect(directive).toBeTruthy();
     TestBed.runInInjectionContext(() => {
-      const directive = new TableDirective();
+      const directive = new TableActiveDirective();
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should apply align input', () => {
+    expect(directive.align()).toBe('middle');
+  });
+
+  it('should apply borderColor input', () => {
+    expect(directive.borderColor()).toBe('primary');
+  });
+
+  it('should apply bordered input', () => {
+    expect(directive.bordered()).toBe(true);
+  });
+
+  it('should apply borderless input', () => {
+    expect(directive.borderless()).toBe(false);
+  });
+
+  it('should apply caption input', () => {
+    expect(directive.caption()).toBe('top');
+  });
+
+  it('should apply color input', () => {
+    expect(directive.color()).toBe('secondary');
+  });
+
+  it('should have responsive wrapper', () => {
+    const parentElement = debugElement.nativeElement.parentElement;
+    const classes = parentElement.classList;
+    expect(classes).toContain('table-responsive');
+  });
+
+  it('should apply correct host classes', () => {
+    const classes = debugElement.nativeElement.classList;
+
+    expect(classes).toContain('table');
+    expect(classes).toContain('align-middle');
+    expect(classes).toContain('caption-top');
+    expect(classes).toContain('border-primary');
+    expect(classes).toContain('table-bordered');
+    expect(classes).toContain('table-secondary');
+    expect(classes).toContain('table-hover');
+    expect(classes).toContain('table-sm');
+    expect(classes).toContain('table-striped');
+    expect(classes).toContain('table-striped-columns');
+  });
 });

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

@@ -1,115 +1,125 @@
-import { booleanAttribute, Directive, ElementRef, HostBinding, inject, Input, OnInit, Renderer2 } from '@angular/core';
+import { booleanAttribute, computed, Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
 import { Breakpoints, Colors } from '../coreui.types';
-import { ITable } from './table.type';
 
 @Directive({
   selector: 'table[cTable]',
-  host: { class: 'table' }
+  exportAs: 'cTable',
+  host: {
+    class: 'table',
+    '[class]': 'hostClasses()'
+  }
 })
-export class TableDirective implements ITable, OnInit {
+export class TableDirective {
   readonly #renderer = inject(Renderer2);
   readonly #hostElement = inject(ElementRef);
 
   /**
    * Set the vertical alignment.
-   * @type string
+   * @return string
    * @values 'bottom' | 'middle' | 'top'
    */
-  @Input() align?: 'bottom' | 'middle' | 'top';
+  readonly align = input<'bottom' | 'middle' | 'top'>();
 
   /**
    * Sets the border color of the component to one of CoreUI’s themed colors.
-   * @type Colors
+   * @return Colors
    */
-  @Input() borderColor?: Colors;
+  readonly borderColor = input<Colors>();
 
   /**
    * Add borders on all sides of the table and cells.
-   * @type boolean
+   * @return boolean
    */
-  @Input({ transform: booleanAttribute }) bordered: string | boolean = false;
+  readonly bordered = input(false, { transform: booleanAttribute });
 
   /**
    * Remove borders on all sides of the table and cells.
-   * @type boolean
+   * @return boolean
    */
-  @Input({ transform: booleanAttribute }) borderless: string | boolean = false;
+  readonly borderless = input(false, { transform: booleanAttribute });
 
   /**
    * Put the `<caption>` on the top of the table.
+   * @return 'top'
    * @values 'top'
    */
-  @Input() caption?: 'top';
+  readonly caption = input<'top'>();
 
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
-   * @type Colors
+   * @return Colors
    */
-  @Input() color?: Colors;
+  readonly color = input<Colors>();
 
   /**
    * Enable a hover state on table rows within table body.
-   * @type boolean
+   * @return boolean
    */
-  @Input({ transform: booleanAttribute }) hover: string | boolean = false;
+  readonly hover = input(false, { transform: booleanAttribute });
 
   /**
    * Make table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
-   * @type: {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
+   * @values: {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
    */
-  @Input() responsive?: boolean | Omit<Breakpoints, 'xs'>;
+  readonly responsive = input<boolean | Omit<Breakpoints, 'xs'>>();
 
   /**
    * Make table more compact by cutting all cell `padding` in half.
-   * @type boolean
+   * @return boolean
    */
-  @Input({ transform: booleanAttribute }) small: string | boolean = false;
+  readonly small = input(false, { transform: booleanAttribute });
 
   /**
    * Add zebra-striping to any table row within the table body.
-   * @type boolean
+   * @return boolean
    */
-  @Input({ transform: booleanAttribute }) striped: string | boolean = false;
+  readonly striped = input(false, { transform: booleanAttribute });
 
   /**
    * Add zebra-striping to any table column.
-   * @type boolean
+   * @return boolean
    * @since 4.2.4
    */
-  @Input({ transform: booleanAttribute }) stripedColumns: string | boolean = false;
+  readonly stripedColumns = input(false, { transform: booleanAttribute });
+
+  readonly hostClasses = computed(() => {
+    const align = this.align();
+    const caption = this.caption();
+    const borderColor = this.borderColor();
+    const bordered = this.bordered();
+    const borderless = this.borderless();
+    const color = this.color();
+    const hover = this.hover();
+    const small = this.small();
+    const striped = this.striped();
+    const stripedColumns = this.stripedColumns();
 
-  @HostBinding('class')
-  get hostClasses(): any {
     return {
       table: true,
-      [`align-${this.align}`]: !!this.align,
-      [`caption-${this.caption}`]: !!this.caption,
-      [`border-${this.borderColor}`]: !!this.borderColor,
-      'table-bordered': this.bordered,
-      'table-borderless': this.borderless,
-      [`table-${this.color}`]: !!this.color,
-      'table-hover': this.hover,
-      'table-sm': this.small,
-      'table-striped': this.striped,
-      'table-striped-columns': this.stripedColumns
+      [`align-${align}`]: !!align,
+      [`caption-${caption}`]: !!caption,
+      [`border-${borderColor}`]: !!borderColor,
+      'table-bordered': bordered,
+      'table-borderless': borderless,
+      [`table-${color}`]: !!color,
+      'table-hover': hover,
+      'table-sm': small,
+      'table-striped': striped,
+      'table-striped-columns': stripedColumns
     };
-  }
+  });
 
-  ngOnInit(): void {
-    this.setResponsiveWrapper();
-  }
-
-  // todo
-  setResponsiveWrapper(): void {
-    if (!!this.responsive) {
+  readonly #responsiveWrapperEffect = effect(() => {
+    const responsive = this.responsive();
+    if (!!responsive) {
       const nativeElement: HTMLElement = this.#hostElement.nativeElement;
       const wrapper = this.#renderer.createElement('div');
-      const className = this.responsive === true ? 'table-responsive' : `table-responsive-${this.responsive}`;
+      const className = responsive === true ? 'table-responsive' : `table-responsive-${responsive}`;
       this.#renderer.addClass(wrapper, className);
       const parentNode = this.#renderer.parentNode(nativeElement);
       this.#renderer.appendChild(parentNode, wrapper);
       this.#renderer.insertBefore(parentNode, wrapper, nativeElement);
       this.#renderer.appendChild(wrapper, nativeElement);
     }
-  }
+  });
 }