From c39bbb69de825ef51a38ed99ea15a85639657dd3 Mon Sep 17 00:00:00 2001
From: Marco Santarelli <marco@backbase.com>
Date: Thu, 20 May 2021 12:58:22 +0200
Subject: [PATCH] Added tests for #1313

---
 .../src/lib/base-chart.directive.spec.ts      | 47 +++++++++++++++++--
 .../src/lib/base-chart.directive.ts           | 10 ++--
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/projects/ng2-charts/src/lib/base-chart.directive.spec.ts b/projects/ng2-charts/src/lib/base-chart.directive.spec.ts
index fe25635d..18d2c6a6 100644
--- a/projects/ng2-charts/src/lib/base-chart.directive.spec.ts
+++ b/projects/ng2-charts/src/lib/base-chart.directive.spec.ts
@@ -1,15 +1,24 @@
 import { BaseChartDirective } from './base-chart.directive';
 import { By } from '@angular/platform-browser';
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component } from '@angular/core';
+import { Chart, registerables } from "chart.js";
 
 @Component({
-  template: '<canvas baseChart></canvas>'
+  template: '<canvas baseChart' +
+    ' [datasets]="datasets"' +
+    ' [labels]="labels"></canvas>'
 })
 class TestComponent {
+  public datasets: any[] = []
+  public labels: string[] = []
 }
 
 describe('BaseChartDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let element: TestComponent;
+  let directive: BaseChartDirective;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
@@ -17,11 +26,41 @@ describe('BaseChartDirective', () => {
         BaseChartDirective
       ]
     });
+
+    Chart.register(...registerables);
+
+    fixture = TestBed.createComponent(TestComponent);
+    element = fixture.componentInstance;
+    directive = fixture.debugElement.query(By.directive(BaseChartDirective))
+      .injector.get(BaseChartDirective);
   });
 
   it('should create an instance', () => {
-    const fixture = TestBed.createComponent(TestComponent);
-    const directive = fixture.debugElement.query(By.directive(BaseChartDirective));
     expect(directive).toBeTruthy();
+
+    fixture.detectChanges();
+
+    expect(directive.chart).toBeDefined();
+  });
+
+  it('should trigger an update when labels or datasets change', () => {
+    fixture.detectChanges();
+
+    element.labels = [ 'Answers' ]
+
+    fixture.detectChanges();
+
+    expect(directive.chart?.data.labels?.length).toBe(1);
+    expect(directive.chart?.data.labels).toEqual(element.labels);
+
+    element.datasets = [ {
+      data: [ 42 ]
+    } ]
+
+    fixture.detectChanges();
+
+    expect(directive.chart?.data.datasets?.length).toBe(1);
+    expect(directive.chart?.data.datasets).toEqual(element.datasets);
   });
+
 });
diff --git a/projects/ng2-charts/src/lib/base-chart.directive.ts b/projects/ng2-charts/src/lib/base-chart.directive.ts
index a5816a59..9fc7c2d6 100644
--- a/projects/ng2-charts/src/lib/base-chart.directive.ts
+++ b/projects/ng2-charts/src/lib/base-chart.directive.ts
@@ -17,7 +17,6 @@ import { distinctUntilChanged } from 'rxjs/operators';
 
 import assign from 'lodash-es/assign';
 import merge from 'lodash-es/merge';
-import pick from 'lodash-es/pick';
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
@@ -28,11 +27,11 @@ export class BaseChartDirective<TType extends ChartType = ChartType,
   TData = DefaultDataPoint<TType>,
   TLabel = unknown> implements OnDestroy, OnChanges {
 
-  @Input() public type!: ChartConfiguration<TType, TData, TLabel>['type'];
+  @Input() public type: ChartConfiguration<TType, TData, TLabel>['type'] = 'bar' as TType;
   @Input() public legend?: boolean;
   @Input() public data: ChartConfiguration<TType, TData, TLabel>['data'] = { datasets: [] };
   @Input() public options?: ChartConfiguration<TType, TData, TLabel>['options'];
-  @Input() public plugins?: ChartConfiguration<TType, TData, TLabel>['plugins'];
+  @Input() public plugins?: ChartConfiguration<TType, TData, TLabel>['plugins'] = [];
 
   @Input() public labels?: ChartConfiguration<TType, TData, TLabel>['data']['labels'];
   @Input() public datasets?: ChartConfiguration<TType, TData, TLabel>['data']['datasets'];
@@ -65,7 +64,9 @@ export class BaseChartDirective<TType extends ChartType = ChartType,
       const config = this.getChartConfiguration();
 
       if (this.chart) {
-        assign(this.chart.config, pick(config, [ 'data', 'options', 'plugins' ]));
+        assign(this.chart.config.data, config.data);
+        assign(this.chart.config.plugins, config.plugins);
+        assign(this.chart.config.options, config.options);
       }
 
       this.update();
@@ -90,6 +91,7 @@ export class BaseChartDirective<TType extends ChartType = ChartType,
 
   public update(duration?: any): void {
     if (this.chart) {
+      console.log(this.chart.config)
       this.zone.runOutsideAngular(() => this.chart?.update(duration));
     }
   }