Simple HighChart component in Angular 5

1. highcharts.component.ts

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
    );
  }
}

2. highchart.service.ts

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);
  }
}

3. highchart.component.spec

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();
  });

});

4. highchart.service.spec.ts

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);
  }));
});

Video tutorial in italiano:
https://www.youtube.com/watch?v=Q6Eum_cUv9I&list=PLUioGv_6G9YJJqxf61KSkE_Ne05rsW80R&index=3