diff --git a/projects/ng-chartist/src/lib/chartist.component.spec.ts b/projects/ng-chartist/src/lib/chartist.component.spec.ts index 1414e0e3..eec4d8e1 100644 --- a/projects/ng-chartist/src/lib/chartist.component.spec.ts +++ b/projects/ng-chartist/src/lib/chartist.component.spec.ts @@ -1,4 +1,4 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import * as Chartist from 'chartist'; @@ -6,19 +6,19 @@ import { ChartistComponent, ChartType } from './chartist.component'; const data: any = require('./testdata.json'); -describe('chartist component', function(): void { +describe('chartist component', () => { let instance: ChartistComponent; let fixture: ComponentFixture; - beforeEach(async(() => { + beforeEach(() => { TestBed.configureTestingModule({ declarations: [ChartistComponent] }).compileComponents(); - })); + }); - beforeEach(function(): void { + beforeEach(() => { fixture = TestBed.createComponent(ChartistComponent); - instance = fixture.debugElement.componentInstance; + instance = fixture.componentInstance; }); it(`should be initialized`, () => { @@ -26,7 +26,7 @@ describe('chartist component', function(): void { expect(instance).toBeDefined(); }); - it('should initialize the correct chart only once', async function() { + it('should initialize the correct chart only once', () => { const chartType: ChartType = 'Bar'; spyOn(Chartist, chartType).and.callThrough(); @@ -34,23 +34,23 @@ describe('chartist component', function(): void { instance.data = data[chartType]; instance.type = chartType; - await instance['renderChart'](); + instance.ngOnInit(); expect(Chartist.Bar).toHaveBeenCalledTimes(1); }); - it('should return the correct chart instance', async function() { + it('should return the correct chart instance', () => { const chartType: ChartType = 'Bar'; instance.data = data[chartType]; instance.type = chartType; - const chart = await instance['renderChart'](); + instance.ngOnInit(); - expect(chart instanceof Chartist.Bar).toBe(true); + expect(instance.chart instanceof Chartist.Bar).toBe(true); }); - it('should bind events if there are events', async function() { + it('should bind events if there are events', () => { const chartType: ChartType = 'Bar'; spyOn(instance, 'bindEvents').and.callThrough(); @@ -58,96 +58,83 @@ describe('chartist component', function(): void { instance.data = data[chartType]; instance.type = chartType; instance.events = { - draw(): boolean { - return false; - } + draw: () => {} }; - await instance.ngOnInit(); + instance.ngOnInit(); expect(instance['bindEvents']).toHaveBeenCalled(); }); - it('should re-render the chart if the chart type changes', function(): void { - const changes: any = { - type: 'Bar' - }; - - instance.type = 'Line'; - + it('should re-render the chart if the chart type changes', () => { spyOn(instance, 'renderChart').and.callThrough(); - instance['update'](changes); + instance.type = 'Bar'; + instance.data = data.Bar; + + instance.ngOnChanges({ + type: { + currentValue: instance.type + } + }); expect(instance['renderChart']).toHaveBeenCalled(); }); - it('should update the chart if the data changes', async function() { - const changes: any = { - data: { - labels: [], - series: [] - } - }; - + it('should update the chart if the data changes', () => { instance.data = data.Bar; instance.type = 'Bar'; - fixture.detectChanges(); - - await instance['renderChart'](); - - instance.data = data.Line; - instance.type = 'Line'; + instance.ngOnInit(); spyOn(instance.chart, 'update').and.callThrough(); spyOn(instance, 'renderChart').and.callThrough(); - fixture.detectChanges(); - - instance['update'](changes); + instance.ngOnChanges({ + data: { + currentValue: instance.data + } + }); expect(instance['renderChart']).not.toHaveBeenCalled(); expect(instance.chart.update).toHaveBeenCalled(); }); - it('should update the chart if the options change', async function() { - const changes: any = { - options: { - reverseData: true - } - }; - + it('should update the chart if the options change', () => { instance.data = data.Bar; instance.type = 'Bar'; - fixture.detectChanges(); - - await instance['renderChart'](); - - instance.data = data.Bar; - instance.type = 'Bar'; + instance.ngOnInit(); spyOn(instance.chart, 'update').and.callThrough(); spyOn(instance, 'renderChart').and.callThrough(); - fixture.detectChanges(); - - instance['update'](changes); + instance.options = { + reverseData: true + }; + instance.ngOnChanges({ + options: { + currentValue: instance.options + } + }); expect(instance['renderChart']).not.toHaveBeenCalled(); expect(instance.chart.update).toHaveBeenCalled(); }); - it('should throw an error when missing type', function(): void { + it('should not initialize chart when type is missing', () => { instance.data = data.Bar; - expect(instance.ngOnInit).toThrow(); + instance.ngOnInit(); + + expect(instance.chart).toBeUndefined(); }); - it('should throw an error when missing data', function(): void { + it('should not initialize chart when data is missing', () => { instance.type = 'Bar'; - expect(instance.ngOnInit).toThrow(); + instance.ngOnInit(); + + expect(instance.chart).toBeUndefined(); }); }); diff --git a/projects/ng-chartist/src/lib/chartist.component.ts b/projects/ng-chartist/src/lib/chartist.component.ts index 3f62f61e..7c43f34c 100644 --- a/projects/ng-chartist/src/lib/chartist.component.ts +++ b/projects/ng-chartist/src/lib/chartist.component.ts @@ -9,6 +9,7 @@ import { } from '@angular/core'; import * as Chartist from 'chartist'; +import { IChartistBase, IChartOptions } from 'chartist'; /** * Possible chart types @@ -42,16 +43,16 @@ export interface ChartEvent { }) export class ChartistComponent implements OnInit, OnChanges, OnDestroy { @Input() - data: Promise | Chartist.IChartistData; + data: Chartist.IChartistData; @Input() - type: Promise | ChartType; + type: ChartType; @Input() - options: Promise | Chartist.IChartOptions; + options: Chartist.IChartOptions; @Input() - responsiveOptions: Promise | ResponsiveOptions; + responsiveOptions: ResponsiveOptions; @Input() events: ChartEvent; @@ -60,18 +61,13 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy { constructor(private elementRef: ElementRef) {} - ngOnInit(): Promise { - if (!this.type || !this.data) { - Promise.reject('Expected at least type and data.'); - } - - return this.renderChart().then((chart) => { - if (this.events !== undefined) { - this.bindEvents(chart); + ngOnInit(): void { + if (this.type && this.data) { + this.renderChart(); + if (this.events) { + this.bindEvents(); } - - return chart; - }); + } } ngOnChanges(changes: SimpleChanges): void { @@ -84,47 +80,39 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy { } } - private renderChart(): Promise { - const promises: any[] = [ - this.type, - this.elementRef.nativeElement, + private renderChart() { + const nativeElement = this.elementRef.nativeElement; + + if (!(this.type in Chartist)) { + throw new Error(`${this.type} is not a valid chart type`); + } + + this.chart = (Chartist)[this.type]( + nativeElement, this.data, this.options, this.responsiveOptions - ]; - - return Promise.all(promises).then((values) => { - const [type, ...args]: any = values; - - if (!(type in Chartist)) { - throw new Error(`${type} is not a valid chart type`); - } - - this.chart = (Chartist as any)[type](...args); - - return this.chart; - }); + ); } private update(changes: SimpleChanges): void { + if (!this.type || !this.data) { + return; + } + if (!this.chart || 'type' in changes) { this.renderChart(); - } else { - if (changes.data) { - this.data = changes.data.currentValue; - } - - if (changes.options) { - this.options = changes.options.currentValue; - } - - (this.chart as any).update(this.data, this.options); + } else if (changes.data || changes.options) { + (>this.chart).update( + this.data, + this.options + ); } } - private bindEvents(chart: any): void { + private bindEvents(): void { for (const event of Object.keys(this.events)) { - chart.on(event, this.events[event]); + this.chart.on(event, this.events[event]); } } }