I'm writing test cases for my project. But unfortunately, after starting the tests by typing ng test, I'm receiving following error:

Error: Error in :0:0 caused by: Plotly is
ReferenceError: Plotly is not defined

Plotly is an external, chart library. I've tried to declare it inside the test file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { WatchlistComponent } from './watchlistponent';
declare let Plotly: any;

describe('SystemComponent', () => {
  let ponent: WatchlistComponent;
  let fixture: ComponentFixture<WatchlistComponent>;
  let element;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ WatchlistComponent ],
      imports: [ FormsModule, MaterialModule ]
    })
    pileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(WatchlistComponent);
    ponent = fixtureponentInstance;
    element = fixture.nativeElement;
    fixture.detectChanges();
  });


  it('should return a positive number', () => {
    expect(ponent.getScreenHeight()).toMatch(/\d+/);
  });

});

Unfortunately, it still doesn't see the Plotly and returns error. The first test case for getScreenHeight() function is not even being started.

Maybe jasmine is starting the tests even before it was uploaded?

Edit: I'm importing Plotly by including <script src='plotly.js'></script> in my index.html file. Plotly is stored locally in the same folder as index.html is.

I'm writing test cases for my project. But unfortunately, after starting the tests by typing ng test, I'm receiving following error:

Error: Error in :0:0 caused by: Plotly is
ReferenceError: Plotly is not defined

Plotly is an external, chart library. I've tried to declare it inside the test file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { WatchlistComponent } from './watchlist.ponent';
declare let Plotly: any;

describe('SystemComponent', () => {
  let ponent: WatchlistComponent;
  let fixture: ComponentFixture<WatchlistComponent>;
  let element;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ WatchlistComponent ],
      imports: [ FormsModule, MaterialModule ]
    })
    .pileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(WatchlistComponent);
    ponent = fixture.ponentInstance;
    element = fixture.nativeElement;
    fixture.detectChanges();
  });


  it('should return a positive number', () => {
    expect(ponent.getScreenHeight()).toMatch(/\d+/);
  });

});

Unfortunately, it still doesn't see the Plotly and returns error. The first test case for getScreenHeight() function is not even being started.

Maybe jasmine is starting the tests even before it was uploaded?

Edit: I'm importing Plotly by including <script src='plotly.js'></script> in my index.html file. Plotly is stored locally in the same folder as index.html is.

• javascript
• unit-testing
• angular
• jasmine
• karma-jasmine

• You're not importing Plotly in your test. You should have a line that says something like import * as Plotly from 'plotly';. Just like you should have the same line in the files of your Angular app where you're using Plotly. Unless........... you're including Plotly with a <script> tag in index.html and using it a global variable. But in this case, it's not just the test that's wrong, it's the way you're using the 3rd-party library. – AngularChef Commented Feb 13, 2017 at 13:58
• Don't upvote every answer, that gives other readers no information about what's useful; upvote good ones. – jonrsharpe Commented Feb 13, 2017 at 14:00
• @AngularFrance Check my edited question. Should I change the way I'm importing the library then? – Natalia Commented Feb 13, 2017 at 14:05
• @Natalia. That's exactly what I'm saying. :) You should import 3rd party libraries with an import statement. But be careful: depending on which module loader you're using (SystemJS, webpack...) you might have to adjust your configuration for the import to work. – AngularChef Commented Feb 13, 2017 at 14:12
• @AngularFrance I'm using webpack. Should I download Plotly from npm then? – Natalia Commented Feb 13, 2017 at 14:14

1 Answer 1

Load plotly.js (with appropriate path) file into Karma testing env by adding files config in karma.config.js as below:

karma.config.js

config.set({
   ..
   files: ['plotly.js']
   ..
});