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

Author: xidedix

projects/coreui-angular/src/lib/grid/col.directive.spec.ts

@@ -1,8 +1,60 @@
-import { ColDirective } from './col.directive';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ColDirective, ColOffsetType, ColOrderType } from './col.directive';
+
+@Component({
+  imports: [ColDirective],
+  template: `
+    <div id="col0" cCol lg="auto" [xl]="true"></div>
+    <div id="col1" cCol [order]="1" [offset]="1" xs="6" sm="5" md="4" lg="3" xl="2" xxl="1"></div>
+    <div id="col2" [cCol]="col" [order]="order" [offset]="offset"></div>
+  `
+})
+export class TestComponent {
+  col!: number;
+  offset: ColOffsetType = { md: 2, xs: 1 };
+  order: ColOrderType = { xl: 'first', xxl: 'last', md: 1, xs: 1 };
+}
 
 describe('ColDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+  });
+
   it('should create an instance', () => {
-    const directive = new ColDirective();
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new ColDirective();
+      expect(directive).toBeTruthy();
+    });
+  });
+
+  it('should have css class', () => {
+    debugElement = fixture.debugElement.query(By.css('#col0'));
+    expect(debugElement.nativeElement).toHaveClass('col');
+    expect(debugElement.nativeElement).toHaveClass('col-lg-auto');
+    expect(debugElement.nativeElement).toHaveClass('col-xl');
+    debugElement = fixture.debugElement.query(By.css('#col1'));
+    expect(debugElement.nativeElement).toHaveClass('col-6');
+    expect(debugElement.nativeElement).toHaveClass('order-1');
+    expect(debugElement.nativeElement).toHaveClass('offset-1');
+    expect(debugElement.nativeElement).toHaveClass('col-sm-5');
+    expect(debugElement.nativeElement).toHaveClass('col-md-4');
+    expect(debugElement.nativeElement).toHaveClass('col-lg-3');
+    expect(debugElement.nativeElement).toHaveClass('col-xl-2');
+    expect(debugElement.nativeElement).toHaveClass('col-xxl-1');
+    debugElement = fixture.debugElement.query(By.css('#col2'));
+    expect(debugElement.nativeElement).toHaveClass('col');
+    expect(debugElement.nativeElement).toHaveClass('offset-md-2');
+    expect(debugElement.nativeElement).toHaveClass('order-md-1');
+    expect(debugElement.nativeElement).toHaveClass('order-xl-first');
+    expect(debugElement.nativeElement).toHaveClass('order-xxl-last');
   });
 });

projects/coreui-angular/src/lib/grid/col.directive.ts

@@ -1,13 +1,20 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
-
-import { ColOrder, ICol } from './col.type';
+import { booleanAttribute, computed, Directive, input, numberAttribute } from '@angular/core';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { BreakpointInfix } from '../coreui.types';
+import { ColOrder } from './col.type';
+
+export type ColOffsetType = number | { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number };
+export type ColOrderType =
+  | ColOrder
+  | { xs?: ColOrder; sm?: ColOrder; md?: ColOrder; lg?: ColOrder; xl?: ColOrder; xxl?: ColOrder };
 
 @Directive({
-  selector: '[cCol]'
+  selector: '[cCol]',
+  host: {
+    '[class]': 'hostClasses()'
+  }
 })
-export class ColDirective implements ICol {
+export class ColDirective {
   static ngAcceptInputType_cCol: BooleanInput | NumberInput;
   static ngAcceptInputType_xs: BooleanInput | NumberInput;
   static ngAcceptInputType_sm: BooleanInput | NumberInput;
@@ -18,142 +25,111 @@ export class ColDirective implements ICol {
 
   /**
    * The number of columns/offset/order on extra small devices (<576px).
-   * @type { 'auto' | number |  boolean }
+   * @return { 'auto' | number |  boolean }
    */
-  @Input()
-  set cCol(value: BooleanInput | NumberInput) {
-    this.xs = this.xs || this.coerceInput(value);
-  }
-  @Input()
-  set xs(value) {
-    this._xs = this.coerceInput(value);
-  }
-  get xs(): BooleanInput | NumberInput {
-    return this._xs;
-  }
-  private _xs: BooleanInput | NumberInput = false;
+  readonly cCol = input(false, { transform: this.coerceInput });
+  readonly xs = input(false, { transform: this.coerceInput });
 
   /**
    * The number of columns/offset/order on small devices (<768px).
-   * @type { 'auto' | number |  boolean }
+   * @return { 'auto' | number |  boolean }
    */
-  @Input()
-  set sm(value) {
-    this._sm = this.coerceInput(value);
-  }
-  get sm(): BooleanInput | NumberInput {
-    return this._sm;
-  }
-  private _sm: BooleanInput | NumberInput = false;
+  readonly sm = input(false, { transform: this.coerceInput });
 
   /**
    * The number of columns/offset/order on medium devices (<992px).
-   * @type { 'auto' | number |  boolean }
+   * @return { 'auto' | number |  boolean }
    */
-  @Input()
-  set md(value) {
-    this._md = this.coerceInput(value);
-  }
-  get md(): BooleanInput | NumberInput {
-    return this._md;
-  }
-  private _md: BooleanInput | NumberInput = false;
+  readonly md = input(false, { transform: this.coerceInput });
 
   /**
    * The number of columns/offset/order on large devices (<1200px).
-   * @type { 'auto' | number |  boolean }
+   * @return { 'auto' | number |  boolean }
    */
-  @Input()
-  set lg(value) {
-    this._lg = this.coerceInput(value);
-  }
-  get lg(): BooleanInput | NumberInput {
-    return this._lg;
-  }
-  private _lg: BooleanInput | NumberInput = false;
+  readonly lg = input(false, { transform: this.coerceInput });
 
   /**
    * The number of columns/offset/order on X-Large devices (<1400px).
-   * @type { 'auto' | number |  boolean }
+   * @return { 'auto' | number |  boolean }
    */
-  @Input()
-  set xl(value) {
-    this._xl = this.coerceInput(value);
-  }
-  get xl(): BooleanInput | NumberInput {
-    return this._xl;
-  }
-  private _xl: BooleanInput | NumberInput = false;
+  readonly xl = input(false, { transform: this.coerceInput });
 
   /**
    * The number of columns/offset/order on XX-Large devices (≥1400px).
-   * @type { 'auto' | number |  boolean }
+   * @return { 'auto' | number |  boolean }
    */
-  @Input()
-  set xxl(value) {
-    this._xxl = this.coerceInput(value);
-  }
-  get xxl(): BooleanInput | NumberInput {
-    return this._xxl;
-  }
-  private _xxl: BooleanInput | NumberInput = false;
+  readonly xxl = input(false, { transform: this.coerceInput });
+
+  readonly breakpoints = computed(() => {
+    return {
+      xs: this.xs() || this.cCol(),
+      sm: this.sm(),
+      md: this.md(),
+      lg: this.lg(),
+      xl: this.xl(),
+      xxl: this.xxl()
+    } as Record<string, any>;
+  });
 
-  @Input() offset?: number | { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number };
-  @Input() order?:
-    | ColOrder
-    | { xs?: ColOrder; sm?: ColOrder; md?: ColOrder; lg?: ColOrder; xl?: ColOrder; xxl?: ColOrder };
+  readonly offset = input<ColOffsetType>();
+  readonly order = input<ColOrderType>();
 
-  @HostBinding('class')
-  get hostClasses(): any {
-    const classes: any = {
+  readonly hostClasses = computed(() => {
+    const classes: Record<string, boolean> = {
       col: true
     };
 
+    const breakpoints = this.breakpoints();
+    const offsetInput = this.offset();
+    const orderInput = this.order();
+
     Object.keys(BreakpointInfix).forEach((breakpoint) => {
-      // @ts-ignore
-      const value: number | string | boolean = this[breakpoint];
+      const value = breakpoints[breakpoint];
       const infix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
       classes[`col${infix}`] = value === true;
       classes[`col${infix}-${value}`] = typeof value === 'number' || typeof value === 'string';
     });
 
-    if (typeof this.offset === 'object') {
-      const offset = { ...this.offset };
+    if (typeof offsetInput === 'object') {
+      const offset = { ...offsetInput };
       Object.entries(offset).forEach((entry) => {
         const [breakpoint, value] = [...entry];
         const infix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
         classes[`offset${infix}-${value}`] = value >= 0 && value <= 11;
       });
     } else {
-      classes[`offset-${this.offset}`] = typeof this.offset === 'number' && this.offset > 0 && this.offset <= 11;
+      const offset = numberAttribute(offsetInput);
+      classes[`offset-${offset}`] = typeof offset === 'number' && offset > 0 && offset <= 11;
     }
 
-    if (typeof this.order === 'object') {
-      const order = { ...this.order };
+    if (typeof orderInput === 'object') {
+      const order = { ...orderInput };
       Object.entries(order).forEach((entry) => {
         const [breakpoint, value] = [...entry];
         const infix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
-        classes[`order${infix}-${value}`] = value;
+        classes[`order${infix}-${value}`] = !!value;
       });
     } else {
-      classes[`order-${this.order}`] = !!this.order;
+      const order = orderInput;
+      classes[`order-${order}`] = !!order;
     }
 
     // if there is no 'col' class, add one
-    classes.col = !Object.entries(classes).filter((i) => i[0].startsWith('col-') && i[1]).length || this.xs === true;
-    return classes;
-  }
+    classes['col'] =
+      !Object.entries(classes).filter((i) => i[0].startsWith('col-') && i[1]).length || breakpoints['xs'] === true;
+    return classes as Record<string, boolean>;
+  });
 
   coerceInput(value: BooleanInput | NumberInput) {
     if (value === 'auto') {
       return value;
     }
     if (value === '' || value === undefined || value === null) {
-      return coerceBooleanProperty(value);
+      return booleanAttribute(value);
     }
     if (typeof value === 'boolean') {
       return value;
     }
-    return coerceNumberProperty(value);
+    return numberAttribute(value);
   }
 }

projects/coreui-angular/src/lib/grid/container.component.spec.ts

@@ -1,21 +1,23 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ContainerComponent } from './container.component';
+import { ComponentRef } from '@angular/core';
 
 describe('ContainerComponent', () => {
   let component: ContainerComponent;
+  let componentRef: ComponentRef<ContainerComponent>;
   let fixture: ComponentFixture<ContainerComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [ContainerComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ContainerComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
     fixture.detectChanges();
   });
 
@@ -25,5 +27,11 @@ describe('ContainerComponent', () => {
 
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('container');
+    expect(fixture.nativeElement).not.toHaveClass('container-fluid');
+    expect(fixture.nativeElement).not.toHaveClass('container-xl');
+    componentRef.setInput('fluid', true);
+    componentRef.setInput('breakpoint', 'xl');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveClass('container-xl');
   });
 });

projects/coreui-angular/src/lib/grid/container.component.ts

@@ -1,6 +1,4 @@
-import { booleanAttribute, Component, computed, input, InputSignal, InputSignalWithTransform } from '@angular/core';
-
-import { IContainer } from './container.type';
+import { booleanAttribute, Component, computed, input } from '@angular/core';
 import { Breakpoints } from '../coreui.types';
 
 @Component({
@@ -9,19 +7,17 @@ import { Breakpoints } from '../coreui.types';
   styleUrls: ['./container.component.scss'],
   host: { '[class]': 'hostClasses()' }
 })
-export class ContainerComponent implements IContainer {
+export class ContainerComponent {
   /**
    * Set container 100% wide until a breakpoint.
    */
-  readonly breakpoint: InputSignal<Exclude<Breakpoints, 'xs'>> = input<Exclude<Breakpoints, 'xs'>>('');
+  readonly breakpoint = input<Exclude<Breakpoints, 'xs'>>('');
 
   /**
    * Set container 100% wide, spanning the entire width of the viewport.
-   * @type InputSignalWithTransform<unknown, boolean>
+   * @return boolean
    */
-  readonly fluid: InputSignalWithTransform<unknown, boolean> = input<unknown, boolean>(false, {
-    transform: booleanAttribute
-  });
+  readonly fluid = input(false, { transform: booleanAttribute });
 
   readonly hostClasses = computed(() => {
     const breakpoint = this.breakpoint();

projects/coreui-angular/src/lib/grid/gutter.directive.spec.ts

@@ -1,8 +1,45 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { GutterDirective } from './gutter.directive';
+import { GutterBreakpoints, Gutters, IGutterObject } from './gutter.type';
+
+@Component({
+  imports: [GutterDirective],
+  template: '<div [gutter]="gutter"></div>'
+})
+export class TestComponent {
+  gutter: IGutterObject | GutterBreakpoints | Gutters = 5;
+}
 
 describe('GutterDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    debugElement = fixture.debugElement.query(By.directive(GutterDirective));
+    fixture.detectChanges();
+  });
+
   it('should create an instance', () => {
-    const directive = new GutterDirective();
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new GutterDirective();
+      expect(directive).toBeTruthy();
+    });
+  });
+
+  it('should have css class', () => {
+    expect(debugElement.nativeElement).toHaveClass('g-5');
+    fixture.componentInstance.gutter = { gx: 2, gy: 1 };
+    fixture.detectChanges();
+    expect(debugElement.nativeElement).toHaveClass('gx-2');
+    expect(debugElement.nativeElement).toHaveClass('gy-1');
+    fixture.componentInstance.gutter = { md: { g: 3 } };
+    fixture.detectChanges();
+    expect(debugElement.nativeElement).toHaveClass('g-md-3');
   });
 });