refactor(chartjs): signal inputs, host bindings, cleanup

Author: xidedix

projects/coreui-angular-chartjs/src/lib/chartjs.component.html

@@ -1,9 +1,9 @@
 <canvas
   #canvasElement
   (click)="handleClick($event)"
-  [height]="height"
-  [id]="id"
-  [width]="width"
+  [height]="height() || null"
+  [id]="id()"
+  [width]="width() || null"
   role="img"
   style="display: none;"
 >

projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts

@@ -1,10 +1,12 @@
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 
 import { ChartjsComponent } from './chartjs.component';
 import { Chart, registerables } from 'chart.js';
+import { ComponentRef } from '@angular/core';
 
 describe('ChartjsComponent', () => {
   let component: ChartjsComponent;
+  let componentRef: ComponentRef<ChartjsComponent>;
   let fixture: ComponentFixture<ChartjsComponent>;
 
   const colors = {
@@ -38,50 +40,61 @@ describe('ChartjsComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ChartjsComponent);
     component = fixture.componentInstance;
-    component.data = undefined;
-    component.type = 'line';
-    component.wrapper = true;
+    componentRef = fixture.componentRef;
+    componentRef.setInput('type', 'line');
+    componentRef.setInput('wrapper', true);
+    componentRef.setInput('data', undefined);
+    fixture.detectChanges();
   });
 
   it('chart should create', fakeAsync(() => {
-    fixture.detectChanges();
-    tick();
     expect(component).toBeTruthy();
     expect(component.chart).toBeDefined();
   }));
 
   it('chart should receive data', fakeAsync(() => {
-    component.data = { ...data };
+    componentRef.setInput('data', { ...data });
     fixture.detectChanges();
-    tick();
+    // tick();
     expect(component.chart?.config.data.labels?.length).toBe(7);
     expect(component.chart?.config.data.labels).toEqual(labels);
     expect(component.chart?.config.data.datasets[0]?.data.length).toBe(7);
   }));
 
   it('chart to Base64Image', fakeAsync(() => {
-    component.data = { ...data };
+    componentRef.setInput('height', 100);
+    componentRef.setInput('width', 100);
+    componentRef.setInput('data', { ...data });
     fixture.detectChanges();
-    tick();
+    // tick();
     const image = component.chartToBase64Image();
     expect(image).toBeDefined();
     expect(typeof image).toBe('string');
     expect(image).toContain('data:image/png;base64,');
   }));
 
   it('chart should update on data change', fakeAsync(() => {
-    component.data = {
+    componentRef.setInput('data', { ...data });
+    fixture.detectChanges();
+    // tick();
+    expect(component.chart?.config.data.labels?.length).toBe(7);
+    expect(component.chart?.config.data.labels).toEqual(labels);
+    expect(component.chart?.config.data.datasets[0]?.data.length).toBe(7);
+
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
+    componentRef.setInput('data', {
       ...data,
-      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+      labels: [...months],
       datasets: [
         { ...data.datasets[0], data: [42, 88, 42, 66, 77] },
         { ...data.datasets[1], data: [55, 44, 55, 66, 22] }
       ]
-    };
+    });
     fixture.detectChanges();
-    component.chartUpdate();
-    tick();
+    // component.chartUpdate();
+    // tick();
     expect(component.chart?.config?.data.labels?.length).toBe(5);
+    expect(component.chart?.config.data.labels).toEqual(months);
     expect(component.chart?.config?.data.datasets[1]?.data.length).toBe(5);
   }));