test(chartjs): add some testing

Author: xidedix

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

@@ -5,7 +5,7 @@
   [id]="id"
   [width]="width"
   role="img"
-  style="display: none"
+  style="display: none;"
 >
   <ng-content></ng-content>
 </canvas>

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

@@ -1,25 +1,69 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Chart, registerables } from 'chart.js';
 
 import { ChartjsComponent } from './chartjs.component';
 
 describe('ChartjsComponent', () => {
   let component: ChartjsComponent;
   let fixture: ComponentFixture<ChartjsComponent>;
 
+  const colors = {
+    label: 'My dataset',
+    backgroundColor: 'rgba(77,189,116,.2)',
+    borderColor: '#4dbd74',
+    pointHoverBackgroundColor: '#fff'
+  };
+
+  const labels = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+  const data = {
+    labels: labels,
+    datasets: [{
+      data: [65, 59, 84, 84, 51, 55, 40],
+      ...colors,
+      fill: { value: 65 }
+    }]
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ChartjsComponent ]
+      declarations: [ChartjsComponent]
     })
-    .compileComponents();
-  });
+      .compileComponents();
+
+    Chart.register(...registerables);
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ChartjsComponent);
     component = fixture.componentInstance;
+    component.data = { ...data };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+
+    fixture.detectChanges();
+
+    expect(component.chart).toBeDefined();
+  });
+
+  it('chart should receive data', () => {
+
+    fixture.detectChanges();
+    expect(component.chart?.data.labels?.length).toBe(7);
+    expect(component.chart?.data.labels).toEqual(labels);
+    expect(component.chart?.data.datasets[0]?.data.length).toBe(7);
   });
+
+  // it('should trigger an update when labels or datasets change', () => {
+  //   const newData = { ...data}
+  //   newData.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
+  //   newData.datasets[0] = {...data.datasets[0], data: [42, 88, 42, 66, 77]};
+  //
+  //   component.data = newData;
+  //   fixture.detectChanges();
+  //
+  //   expect(component.chart?.data.labels?.length).toBe(5);
+  //
+  // });
 });

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

@@ -112,7 +112,9 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.updateChart();
+    if (!changes.data.firstChange) {
+      this.updateChart();
+    }
   }
 
   ngOnDestroy(): void {
@@ -157,7 +159,7 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
       });
       setTimeout(() => {
         this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
-      });
+      })
     });
   }
 
@@ -178,7 +180,9 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
 
     if (!this.chart.config.data) {
       this.chart.config.data = this.computedData;
-      this.ngZone.runOutsideAngular(() => {this.chart?.update();});
+      this.ngZone.runOutsideAngular(() => {
+        this.chart?.update();
+      });
       return;
     }
 
@@ -213,11 +217,10 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
         data: currentDataSet.data
       };
     });
-
-    this.ngZone.runOutsideAngular(() => {
-      setTimeout(() => {
+    setTimeout(() => {
+      this.ngZone.runOutsideAngular(() => {
         this.chart?.update();
       });
-    });
+    })
   }
 }

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

@@ -2,6 +2,5 @@
  * Public API Surface of coreui-angular-chartjs
  */
 
-export * from './lib/chartjs.service';
 export * from './lib/chartjs.component';
 export * from './lib/chartjs.module';