Skip to content

Instantly share code, notes, and snippets.

@fabiobiondi
Last active May 17, 2018 16:00
Show Gist options
  • Save fabiobiondi/951ee1b71686c79d31dff54be791e685 to your computer and use it in GitHub Desktop.
Save fabiobiondi/951ee1b71686c79d31dff54be791e685 to your computer and use it in GitHub Desktop.
Simple HighChart component in Angular 5
import { AfterViewInit, Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import { HighChartService } from './highchart.service';
@Component({
selector: 'fb-highchart',
template: '<div *ngIf="config"></div>',
providers: [HighChartService]
})
export class HighChartComponent implements OnChanges, AfterViewInit {
@Input() config: any;
constructor(
public chartService: HighChartService,
private el: ElementRef
) {}
ngOnChanges(changes: SimpleChanges) {
const { config } = changes;
if (this.el) {
this.render(config.currentValue);
}
}
ngAfterViewInit() {
this.render(this.config);
}
render(cfg: any) {
this.chartService.render(
this.el.nativeElement, cfg
);
}
}
import { Injectable } from '@angular/core';
import * as highcharts from 'highcharts';
@Injectable()
export class HighChartService {
/**
* Renderize Highchart
* @param el DOM element in which the chart will be created
* @param cfg Highchart configuration
*/
render(el, cfg) {
highcharts.chart(el, cfg);
}
}
import { Component, ViewChild } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HighChartComponent } from './highcharts.component';
@Component({
selector: 'fb-highchart-test',
template: '<fb-highchart [config]="chartData"></fb-highchart>'
})
class TestComponent {
@ViewChild(HighChartComponent) component: any;
chartData = {
chart: { type: 'bar' }
};
}
// ==============================
// Test
describe('Component: HighChart', () => {
let fixture: ComponentFixture<TestComponent>;
let context: any;
let element: any;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestComponent, HighChartComponent],
});
// Create the component
fixture = TestBed.createComponent(TestComponent);
// Component instance
context = fixture.componentInstance;
// Component DOM reference
element = fixture.nativeElement;
});
it('should invoked the HighChartsService.render() method when config changes', () => {
context.chartData = { };
// spy ChartService.render() method
spyOn(context.component, 'render');
// trigger changes
fixture.detectChanges();
// Verify if ChartService is defined
expect(context.component).toBeDefined();
// Verify if highchart() is re-rendered
expect(context.component.render).toHaveBeenCalled();
});
});
import { inject, TestBed } from '@angular/core/testing';
import { HighChartService } from './highchart.service';
import * as highcharts from 'highcharts';
describe('Service: HighchartService', () => {
beforeEach(() => TestBed.configureTestingModule({
providers: [HighChartService]
}));
it('should call render HighChart when render() method is invoked', inject([HighChartService], service => {
spyOn(highcharts, 'chart');
// invoke render method
const element = {};
const config = {};
service.render(element, config);
// expect highchart is rendered
expect(highcharts.chart).toHaveBeenCalledWith(element, config);
}));
});
@fabiobiondi
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment