0

I have a web app using Angular CLI. And there is a component called pie-chart-component.

In the pie-chart-component.ts, I'm importing Chart.js

import Chart from 'chart.js';

It works fine from the UI, but when I run npm test, it doesn't recognize the tag in HTML, and fail the basic karma test that comes with Angular CLI that basically test whether this component is created or not.

Error in Karma: 

Failed: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
  <div style="display: block">

part of my spec.ts: 

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PieChartPanelComponent]
    })
    .compileComponents();
  }));

I think I need to add the chart library into providers or imports. But when I try to do that, the compiler will say chart is a type, and I'm trying to use it as a value.

What's the correct way to make Karma test be able to read external libraries and recognize what a tag is?

Angela P
  • 1,939
  • 2
  • 14
  • 18
  • Basically on test you have to recreate the component with all the bindings and dependencies in order to be able to test (mock the ones you cannot reproduce). Take a look at the answer I wrote [here](https://stackoverflow.com/a/44811997), maybe you find your answer. – BogdanC Jul 27 '17 at 16:49
  • @BogdanC to be honest, I know how to include those components that's created internally – Angela P Jul 27 '17 at 18:22
  • I imagine you should do the same with the external ones. Showing some more code could help also. Are you using ng2-charts? – BogdanC Jul 27 '17 at 18:34

1 Answers1

0

If you used the ChartsModule then need to import that in spec.ts file also. As follows:

import {ChartsModule} from 'ng2-charts';

And then

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports:[ChartsModule],
    declarations: [PieChartPanelComponent]
  })
  .compileComponents();
}));
Kalamarico
  • 5,466
  • 22
  • 53
  • 70
Monika
  • 1