角度测试“未定义办公室”答案

【问题标题】：Angular test "Office is not defined"角度测试“未定义办公室”
【发布时间】：2019-01-28 19:04:39
【问题描述】：

我正在尝试为用 Angular 6 编写的 Excel 插件添加持续集成。我正在使用 Karma 和 Jasmine。当我运行测试时，每个测试都通过了，但随后出现以下错误：

Chrome 68.0.3440 (Windows 10 0.0.0) 错误
{
"message": "在 afterAll 中抛出一个错误\nUncaught ReferenceError: Office is not defined",
"str": "afterAll 中抛出了一个错误\nUncaught ReferenceError: Office is not defined"
}

这是我的package.json：

{
  "name": "top-secret",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl true --port 3000",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.2",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.2",
    "@angular/material-moment-adapter": "^6.4.2",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.7",
    "intl": "^1.2.5",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "ng2-daterangepicker": "^2.0.12",
    "npm": "^6.3.0",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.0.0-rc.0",
    "saturn-datepicker": "^6.0.5",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.7.2",
    "@angular/cli": "^6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.3.5",
    "@types/node": "^10.5.5",
    "@types/office-js": "0.0.101",
    "codelyzer": "^4.4.2",
    "jasmine-core": "^3.2.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "phantomjs-prebuilt": "^2.1.16",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^2.9.2"
  }
}

还有karma.conf.js:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },

    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome', 'PhantomJS'],
    singleRun: false
  });
};

【问题讨论】：

我也在围观他们。它们是脚本错误，您可以在运行测试时直接在浏览器的控制台中看到。请检查您的开发工具控制台并在其中发布您遇到的错误。

标签： angular unit-testing karma-jasmine office-js

【解决方案1】：

好的，感谢 TwistedTamarin 的 answer 我发现如果你通过 CDN 加载脚本，你需要添加它做 karma.conf.js

files: [
  'https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js'
],

Link to response.

【讨论】：

感谢分享。按预期工作
您还需要将office-js类型添加到tsconfig.spec.json才能工作

【解决方案2】：

如何加载 Office.js？（“据我所知，它们是通过脚本元素加载的”）

无论如何，实际的代码会是有益的，但我能直截了当地想到的是，当您运行测试时，那些运行异步，并且 Office.js 尚未加载！确保在测试之前加载 Office.JS。

【讨论】：