gparlakov

export function setup() {
  // common
  const router = <Router>(
    (<unknown>jasmine.createSpyObj('router', ['navigate']))
  );
  const canvas = new ElementRef(document.createElement('canvas'));

  // the chart builder
  const chartBuilder = jasmine.createSpy('chart builder');

gparlakov

describe('test my chart', () => {
  it('should draw the chart on ngAfterViewInit', () => {
    // arrange
    const c = setup().build();
    // act
    c.ngAfterViewInit();
    // assert
    expect(c.chart).toBeDefined();
  });

gparlakov

it('when clicked on the second point should NOT navigate to show the selected point if it is NOT visible', () => {
  // arrange
  const r = mockRouter();
  // arrange the onclick prerequisites
  const ch = jasmine.createSpy('chart builder');
  let onClickCallback: Function = () => {};
  ch.and.callFake((i, o) => {
    onClickCallback = o.options.onClick;
    return {
      // mock the isVisible method

gparlakov

it('when clicked on the second point should navigate to show the selected point', () => {
  // arrange
  const r = mockRouter();
  // arrange the onclick prerequisites
  const ch = jasmine.createSpy('chart builder');
  let onClickCallback: Function = () => {};
  ch.and.callFake((i, o) => {
    onClickCallback = o.options.onClick;
    return {}; // <-- mock needed chart methods and props here
  });

gparlakov

it('should draw the chart on ngAfterViewInit with canvas and config', () => {
  // arrange
  const r = mockRouter();
  const builderSpy = jasmine.createSpy('chart builder')
  builderSpy.and.returnValue('the chart');
  const c = new ChartComponent(r, builderSpy);
  const canvas = document.createElement('canvas');
  c.canvas = new ElementRef(canvas);
  // act
  c.ngAfterViewInit();

gparlakov

@Component({
  template: `<canvas #canvas width="200" height="200"></canvas>`,
})
export class ChartComponent {
  @ViewChild('canvas')
  canvas: ElementRef | undefined;
  chart: Chart | undefined;

  constructor(private router: Router) {}

gparlakov

export function chartBuilder(item: ChartItem, options: ChartConfiguration) {
    return new Chart(item, options);
}
// The 👆 function and the Token 👇
const ChartBuilderToken = new InjectionToken<typeof chartBuilder>(
    'The Chart.js instance builder'
);

@Component({
    ...,

gparlakov

import {
  Component,
  ElementRef,
  Inject,
  InjectionToken,
  ViewChild,
} from '@angular/core';
import { Router } from '@angular/router';
import { Chart, ChartConfiguration, ChartItem } from 'chart.js';

gparlakov

This template demostrates how to apply functions to the file name. 

Functions from https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/core/src/utils/strings.ts

gparlakov

<div *ifFeature="'myNewFeatureFlagOn'; else dontShowMyFeature">My new feature (beta)</div>
<ng-template #dontShowMyFeature>Coming soon...</ng-template>