代码之家 › 专栏 › 技术社区 › Will Luce

具有角度和笑话的静态文件

jestjs karma-runner angular

Will Luce · 技术社区 · 6 年前

我试图建立一个现有的角度应用程序使用JEST。

当我的应用程序在dev或prod中运行时, index.html 文件需要一些 js 设置全局的文件 var 然后,我有一个配置文件引用了 风险价值 我们要安排一些事情。

当我开玩笑的时候,它找不到这些全球性的 风险价值 S.

因果报应 files 在那里照顾它的选择。

下面是我的笑话设置

// jest.config.js
module.exports = {
    preset: "jest-preset-angular",
    roots: ['src'],
    setupTestFrameworkScriptFile: "<rootDir>/src/setup-jest.ts"
}

// setup-jest.ts
import 'jest-preset-angular';
import './jestGlobalMocks';


// jestGlobalMocks.ts
global['CSS'] = null;

const mock = () => {
  let storage = {};
  return {
    getItem: key => key in storage ? storage[key] : null,
    setItem: (key, value) => storage[key] = value || '',
    removeItem: key => delete storage[key],
    clear: () => storage = {},
  };
};

Object.defineProperty(window, 'localStorage', {value: mock()});
Object.defineProperty(window, 'sessionStorage', {value: mock()});
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});
/**
 * ISSUE: https://github.com/angular/material2/issues/7101
 * Workaround for JSDOM missing transform property
 */
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});

以下是全球 风险价值 设置了。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="HandheldFriendly" content="true">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <base href=".">
        <script src="releaseNotes.js" type="text/javascript"></script>
        <script src="js/languages/inject.en.js" type="text/javascript"></script>
        <script src="js/languages/inject.de.js" type="text/javascript"></script>
        <script src="js/languages/hybrid.inject.en.js" type="text/javascript"></script>
        <script src="js/languages/hybrid.inject.de.js" type="text/javascript"></script>
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

这个 <script> 设置的标记引用语言文件 风险价值 S.

var HybridInject_en = { ... }
var INJECT_en = { ... }

然后在配置文件中引用…

var windowJS =  new WindowService().nativeWindow;
var HybridInject = windowJS.HybridInject_en; // custom app strings
var INJECT = windowJS.INJECT_en; // copied from main TP web platform

它们也包括在 angular.json

    "assets": [
      "src/assets",
      "src/favicon.ico",
      "src/releaseNotes.js",
      "src/js/languages/inject.de.js",
      "src/js/languages/inject.en.js",
      "src/js/languages/hybrid.inject.en.js",
      "src/js/languages/hybrid.inject.de.js"
    ],

不管出于什么原因,这些物体不存在于 windowJS 当这个文件以jest运行时。

0 回复 | 直到 6 年前