Angular 角度单元测试引用错误：未定义类型_Angular_Typescript_Office Js_Office Ui Fabric

Angular 角度单元测试引用错误：未定义类型

angular typescript office-js

Angular 角度单元测试引用错误：未定义类型,angular,typescript,office-js,office-ui-fabric,Angular,Typescript,Office Js,Office Ui Fabric,我对Angular应用程序的单元测试有一些问题，该应用程序打算作为Outlook的外接程序代码本身运行良好，没有错误，但测试经常失败我得到的错误如下： ReferenceError: Office is not defined ReferenceError: fabric is not defined public getName() { this.item = Office.context.mailbox.item; return this.item.from.di

我对Angular应用程序的单元测试有一些问题，该应用程序打算作为Outlook的外接程序

代码本身运行良好，没有错误，但测试经常失败

我得到的错误如下：

ReferenceError: Office is not defined

ReferenceError: fabric is not defined

  public getName() {
    this.item = Office.context.mailbox.item;
    return this.item.from.displayName;
  }

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-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
    },
    Files: ["https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"],
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node",
      "@types/office-js"
    ]
  },

  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts",
    "../node_modules/office-ui-fabric-js/src/components/Dropdown/Dropdown.ts",
    "../node_modules/office-ui-fabric-js/src/components/Button/Button.ts",
    "../node_modules/office-ui-fabric-js/src/components/TextField/TextField.ts",
    "../node_modules/office-ui-fabric-js/src/components/RadioButton/RadioButton.ts",
    "../node_modules/office-ui-fabric-js/src/components/Spinner/Spinner.ts",
    "../node_modules/office-ui-fabric-js/src/components/ProgressIndicator/ProgressIndicator.ts"
  ]
}

任何使用Office.js或Fabric的方法都会失败。例如，如果一个方法是：

ReferenceError: Office is not defined

ReferenceError: fabric is not defined

  public getName() {
    this.item = Office.context.mailbox.item;
    return this.item.from.displayName;
  }

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-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
    },
    Files: ["https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"],
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node",
      "@types/office-js"
    ]
  },

  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts",
    "../node_modules/office-ui-fabric-js/src/components/Dropdown/Dropdown.ts",
    "../node_modules/office-ui-fabric-js/src/components/Button/Button.ts",
    "../node_modules/office-ui-fabric-js/src/components/TextField/TextField.ts",
    "../node_modules/office-ui-fabric-js/src/components/RadioButton/RadioButton.ts",
    "../node_modules/office-ui-fabric-js/src/components/Spinner/Spinner.ts",
    "../node_modules/office-ui-fabric-js/src/components/ProgressIndicator/ProgressIndicator.ts"
  ]
}

它将失败，错误是未定义office

Office和Fabric都通过index.html文件添加到应用程序中：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Firefish Outlook Addin</title>

  <base href="/AddinClient/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />
  <script src="assets/js/fabric.js"></script>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

我一直在网上寻找潜在的解决方案，不幸的是找不到任何解决方案。我的Karma.conf.js文件如下：

ReferenceError: Office is not defined

ReferenceError: fabric is not defined

  public getName() {
    this.item = Office.context.mailbox.item;
    return this.item.from.displayName;
  }

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-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
    },
    Files: ["https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"],
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node",
      "@types/office-js"
    ]
  },

  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts",
    "../node_modules/office-ui-fabric-js/src/components/Dropdown/Dropdown.ts",
    "../node_modules/office-ui-fabric-js/src/components/Button/Button.ts",
    "../node_modules/office-ui-fabric-js/src/components/TextField/TextField.ts",
    "../node_modules/office-ui-fabric-js/src/components/RadioButton/RadioButton.ts",
    "../node_modules/office-ui-fabric-js/src/components/Spinner/Spinner.ts",
    "../node_modules/office-ui-fabric-js/src/components/ProgressIndicator/ProgressIndicator.ts"
  ]
}

我的tsconfig.spec.json文件如下：

ReferenceError: Office is not defined

ReferenceError: fabric is not defined

  public getName() {
    this.item = Office.context.mailbox.item;
    return this.item.from.displayName;
  }

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-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
    },
    Files: ["https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"],
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node",
      "@types/office-js"
    ]
  },

  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts",
    "../node_modules/office-ui-fabric-js/src/components/Dropdown/Dropdown.ts",
    "../node_modules/office-ui-fabric-js/src/components/Button/Button.ts",
    "../node_modules/office-ui-fabric-js/src/components/TextField/TextField.ts",
    "../node_modules/office-ui-fabric-js/src/components/RadioButton/RadioButton.ts",
    "../node_modules/office-ui-fabric-js/src/components/Spinner/Spinner.ts",
    "../node_modules/office-ui-fabric-js/src/components/ProgressIndicator/ProgressIndicator.ts"
  ]
}

因此，我为Office和fabric文件添加了必要的参考

这是我需要创建Office和fabric模拟的情况吗？

因此我找到了解决此问题的方法

对于fabric，因为我们使用的是它的本地副本，所以我可以在test部分下的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": [
      "src/styles.scss"
    ],
    "scripts": ["src/assets/js/fabric.js"],
    "assets": [
      "src/assets"
    ]
  }
}

对于Office问题，我在spec类中添加了以下内容来解决该问题：

const officeScript = 'https://appsforoffice.microsoft.com/lib/1/hosted/Office.js';
const node = document.createElement('script');
node.src = officeScript;
node.type = 'text/javascript';
node.async = false;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);

所以我找到了解决这个问题的方法

对于fabric，因为我们使用的是它的本地副本，所以我可以在test部分下的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": [
      "src/styles.scss"
    ],
    "scripts": ["src/assets/js/fabric.js"],
    "assets": [
      "src/assets"
    ]
  }
}

对于Office问题，我在spec类中添加了以下内容来解决该问题：

const officeScript = 'https://appsforoffice.microsoft.com/lib/1/hosted/Office.js';
const node = document.createElement('script');
node.src = officeScript;
node.type = 'text/javascript';
node.async = false;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);

您必须在

tests.ts

文件中导入测试文件上的两种类型，您应该添加依赖项。此外，在索引头中使用脚本是一种不好的做法，您应该使用

angular.json

文件来导入JS脚本。您必须在

tests.ts

文件中导入测试文件上的2种类型，您应该添加依赖项。另外，在索引头中使用脚本是一种不好的做法，您应该使用

angular.json

文件来导入JS脚本。