Angular 6 правильный способ импорта сторонних JS-файлов, используемых в тестах Karma - PullRequest
Новая
       8

Angular 6 правильный способ импорта сторонних JS-файлов, используемых в тестах Karma

0 голосов
/ 07 сентября 2018

У меня есть компонент, который использует primeng ChartsModule, который ссылается на Chart.js. У меня установлена ​​Chart.js, и она импортирована в мой файл angular.json. 

"scripts": [
  "node_modules/chart.js/dist/Chart.bundle.min.js"
]

Приложение все работает правильно и отображает графики. Мои тесты компонентов однако ломаются с ошибкой: ReferenceError: Chart is not defined

Я видел несколько статей, в которых предлагается импортировать Chart.js в мои тесты компонентов, например: 

import { Chart } from 'chart.js';

Это не работает. Мой вопрос заключается в том, как правильно импортировать сторонние JS-библиотеки, такие как Chart.js, в тесты Angular 6 Karma

Редактировать Мой компонент 

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-my-chart',
  templateUrl: './my-chart.component.html',
  styleUrls: ['./my-chartcomponent.scss']
})
export class MyChartComponent implements OnInit {

  public data: any;

  constructor() { }

  ngOnInit() {
    this.data = {
      labels: ['Low', 'Medium', 'High'],
      datasets: [
        {
          data: [300, 50, 10],
          backgroundColor: [
              '#43a047',
              '#fb8c00',
              '#e53935'
          ],
          hoverBackgroundColor: [
              '#66bb6a',
              '#ffa726',
              '#ef5350'
          ]
        }]
      };
  }
}

1 Ответ

0 голосов
/ 07 сентября 2018

Все еще думал в старом режиме angular-cli.json. В новом angular.json есть тестовый раздел, куда вы должны добавить сторонние скрипты. 

    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "styles.scss"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.bundle.min.js"
        ],
        "assets": [
          "src/favicon.ico"
        ]
      }
    },
...