Статические файлы с Angular и Jest - PullRequest
Новая
       9

Статические файлы с Angular и Jest

0 голосов
/ 15 октября 2018

Я пытаюсь настроить существующее приложение Angular для использования Jest.

Когда мое приложение запускается в dev или prod, моему index.html файлу требуется несколько js файлов, которые устанавливают глобальные var s.Затем у меня есть файл конфигурации, который ссылается на эти var s для настройки некоторых параметров.

Когда я запускаю Jest, он не может найти эти глобальные var s.

Карма имеет опцию files, которая позаботилась об этом там.

Ниже моя настройка Jest 

// 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,
    };
  },
});

А вот как глобальные var s

<!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> ссылаются на языковые файлы, которые устанавливают var 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.

...